$ amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added resource commentanyXXXXXXXX locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | commentanyXXXXXXXX | Create    | awscloudformation |
| Api      | commentany         | No Change | awscloudformation |
? Are you sure you want to continue? Yes
⠴ Updating resources in the cloud. This may take a few minutes...

(snip)

UPDATE_COMPLETE amplify-commentany-dev-XXXXXX AWS::CloudFormation::Stack Thu Jul 09 2020 18:07:25 GMT+0900 (GMT+09:00) 
UPDATE_COMPLETE apicommentany                 AWS::CloudFormation::Stack Thu Jul 09 2020 18:07:25 GMT+0900 (GMT+09:00) 
✔ All resources are updated in the cloud

$ 

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Auth } from 'aws-amplify'
import store from '../store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () =>
      import(/* webpackChunkName: "login" */ '../views/Login.vue'),
    meta: { isPublic: true },
  },
  {
    path: '/event/:eventId',
    name: 'EventDetail',
    component: () =>
      import(/* webpackChunkName: "event" */ '../views/EventDetail.vue'),
    props: true,
  },
  {
    path: '/',
    name: 'Event',
    component: () =>
      import(/* webpackChunkName: "event" */ '../views/Event.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

router.beforeEach(async (to, from, next) => {
  const user = await Auth.currentUserInfo()
  store.commit('setUser', user)
  if (to.matched.some(record => !record.meta.isPublic) && user === null) {
    next({ path: '/login' })
  } else {
    next()
  }
})

export default router

<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="auto">
        <amplify-authenticator>
          <amplify-sign-up
            slot="sign-up"
            :form-fields.prop="formFields"
          ></amplify-sign-up>
          <amplify-sign-out></amplify-sign-out>
        </amplify-authenticator>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { Auth, Hub } from 'aws-amplify'

export default {
  data: function() {
    return {
      formFields: [
        {
          type: 'username',
          label: 'Username',
          placeholder: 'Username',
          required: true,
        },
        {
          type: 'password',
          label: 'Password',
          placeholder: 'Password',
          required: true,
        },
        {
          type: 'email',
          label: 'Email Address',
          placeholder: 'Email',
          required: true,
        },
      ],
    }
  },
  created: function() {
    Hub.listen('auth', this.changeState)
  },
  beforeDestroy: function() {
    Hub.remove('auth', this.changeState)
  },
  methods: {
    changeState: async function(data) {
      const user = await Auth.currentUserInfo()
      switch (data.payload.event) {
        case 'signIn':
          this.$store.commit('setUser', user)
          this.$router.push('/')
          break
        case 'signOut':
          this.$store.commit('setUser', null)
          break
      }
    },
  },
}
</script>

type Event
  @model
  @auth(
    rules: [
      { allow: owner }
      { allow: private, operations: [read] }
    ]
  ) {
  id: ID!
  name: String
  active: Boolean!
  comments: [Comment] @connection(keyName: "listCommentByEventId", fields: ["id"])
  createdAt: AWSDateTime
  owner: String
}

type Comment
  @model
  @auth(
    rules: [
      { allow: private }
    ]
  )
  @key (name: "listCommentByEventId", fields: ["eventId"], queryField: "listCommentByEventId")
{
  id: ID!
  eventId: ID!
  comment: String!
  likes: Int!
  name: String
  updatedAt: AWSDateTime
}

$ amplify update api
? Please select from one of the below mentioned services: GraphQL
? Select from the options below Update auth settings
? Choose the default authorization type for the API Amazon Cognito User Pool
Use a Cognito user pool configured as a part of this project.
? Configure additional auth types? No

GraphQL schema compiled successfully.

Edit your schema at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema.graphql or place .graphql files in a directory at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema
Successfully updated resource
$ 

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Api      | commentany         | Update    | awscloudformation |
| Auth     | commentanyXXXXXXXX | No Change | awscloudformation |
? Are you sure you want to continue? Yes

GraphQL schema compiled successfully.

Edit your schema at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema.graphql or place .graphql files in a directory at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema
? Do you want to update code for your updated GraphQL API Yes
? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscriptions Yes
⠦ Updating resources in the cloud. This may take a few minutes...

(snip)

UPDATE_COMPLETE amplify-commentany-dev-XXXXXX AWS::CloudFormation::Stack Fri Jul 10 2020 11:10:16 GMT+0900 (GMT+09:00) 
UPDATE_COMPLETE apicommentany                 AWS::CloudFormation::Stack Fri Jul 10 2020 11:10:15 GMT+0900 (GMT+09:00) 
✔ Generated GraphQL operations successfully and saved at src/graphql
✔ All resources are updated in the cloud

GraphQL endpoint: https://XXXXXXXXXXXXXXXXXXXXXXXXXX.appsync-api.ap-northeast-1.amazonaws.com/graphql

$ 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    setUser: function(state, user) {
      state.user = user
    },
  },
  actions: {},
  modules: {},
})

  created: async function() {
    this.userName = this.$store.state.user.username

    const items = await API.graphql(graphqlOperation(listEvents)).catch(err =>
      console.error('listEvents', err),
    )
    this.events = items.data.listEvents.items
  },

    addEvent: async function() {
      if (!this.newEventName || this.newEventName.length <= 0) {
        return
      }

      const input = {
        name: this.newEventName,
        active: true,
      }

      const item = await API.graphql(
        graphqlOperation(createEvent, { input: input }),
      ).catch(err => console.error('createEvent', err))
      const savedEvent = item.data.createEvent

      this.events.push(savedEvent)

      this.newEventNameDialog = false
      this.newEventName = ''
    },

  created: async function() {
    this.linkUrl = location.href
    this.userName = this.$store.state.user.username

    const item = await API.graphql(
      graphqlOperation(getEvent, { id: this.eventId }),
    ).catch(err => console.error('getEvent', err))
    this.event = item.data.getEvent
    this.comments = this.event.comments.items
  },