$ amplify remove auth
$ rm ./aws-exports.js
$ amplify push

$ amplify add auth
Using service: Cognito, provided by: awscloudformation

Do you want to use the default authentication and security configuration?  (Use arrow keys)

❯ Default configuration <-これ
Default configuration with Social Provider (Federation)
Manual configuration
I want to learn more.

Do you want to use the default authentication and security configuration?  Default configuration

How do you want users to be able to sign in?  (Use arrow keys)

❯ Username <-これ
Email
Phone Number
Email and Phone Number
I want to learn more.

Do you want to use the default authentication and security configuration?  Default configuration

How do you want users to be able to sign in?  Username
Do you want to configure advanced settings?
No, I am done.
❯ Yes, I want to make some additional changes. <-これ

◯ Gender (This attribute is not supported by Login With Amazon.)
◯ Locale (This attribute is not supported by Facebook, Google.)
◯ Given Name (This attribute is not supported by Login With Amazon.)
❯◯ Name
◯ Nickname (This attribute is not supported by Facebook, Google, Login With Amazon.)
◯ Phone Number (This attribute is not supported by Facebook, Login With Amazon.)
◯ Preferred Username (This attribute is not supported by Facebook, Google, Login With Amazon.)

Do you want to enable any of the following capabilities?

$ amplify push

https://先程設定したドメイン/oauth2/idpresponse

$ yarn add vue-material

~
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css' <-これ入れないと色つかない
Vue.use(VueMaterial)

import App from './App.vue'
~

$ yarn add aws-amplify-vue vue-router vuex

- /
  |- src/
  |-- assets
  |-- components
  |-- views
      |-- Login.vue（ラインのログインボタンのページ）<- 追加
      |-- Top.vue（ログイン後のページ） <- 追加
  |-- App.vue
  |-- aws-exports.js <- 自動で追加
  |-- aws-oauth-config.js <- 追加
  |-- main.js
  |-- router.js <- 追加
  |-- sotre.js <- 追加

const oauth = {
  domain: 'xxxxxxxxxxxxx.auth.xx-xxxx-x.amazoncognito.com',
  scope: ['profile', 'email', 'openid', 'aws.cognito.signin.user.admin'],
  redirectSignIn: 'http://localhost:8080/login/',
  redirectSignOut: 'http://localhost:8080/',
  responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
}

export default oauth

<template>
  <div id="app">
    <router-view /> <-- ルーター
  </div>
</template>

<script>

export default {
  name: 'app',
  methods: {
  }
}
</script>

<style>
#app {
}
</style>

<template>
  <div class="login">
    <!--ログインコンポーネント-->
    <md-button v-if="signined === false && loading === false" class="md-raised" v-on:click="signIn">Sign in LINE</md-button>
    <md-progress-spinner v-if="loading" :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
    <p v-if="signined">Sign in しました。</p>
  </div>
</template>

<script>
import router from '../router.js'
import Amplify, { Auth, Hub } from 'aws-amplify'
import awsconfig from '../aws-exports'
Amplify.configure(awsconfig)

import oauth from '../aws-oauth-config'

Auth.configure({ oauth })

export default {
  name: 'login',
  data () {
    return {
      signined: false,
      loading: false,
    }
  },
  created: function () {
    Hub.listen('auth', (data) => {
      this.loading = false
      switch (data.payload.event) {
        case 'signIn':
          this.signined = true
          router.push({path: '/'})
          break
        case 'signIn_failure':
          break
        default:
          break
      }

    })
  },
  methods: {
    signIn: async function() {
      this.loading = true
      let res = await Auth.federatedSignIn({provider: 'LINE'})
      console.log(res)
    }
  }
}
</script>

<template>
  <div>
    Top
    トップページです
    <amplify-sign-out></amplify-sign-out>
  </div>
</template>

<script>
export default {
  name: 'Top'
}
</script>

<style>
</style>

import Vue from 'vue'

import App from './App.vue'
import router from './router.js'
import store from './store.js'

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue'
import Router from 'vue-router'
import Top from './views/Top.vue'
import Login from './views/Login.vue'

import store from './store.js'

// Amplify読み込み
import { AmplifyEventBus, AmplifyPlugin } from 'aws-amplify-vue'
import * as AmplifyModules from 'aws-amplify'

Vue.use(Router)
Vue.use(AmplifyPlugin, AmplifyModules)

let user;

// ユーザー管理
getUser().then((user) => {
  if (user) {
    router.push({path: '/'});
  }
})

function getUser() {
  return Vue.prototype.$Amplify.Auth.currentAuthenticatedUser().then((data) => {
    if (data && data.signInUserSession) {
      store.commit('setUser', data);
      return data;
    }
  }).catch(() => {
    store.commit('setUser', null);
    return null;
  })
}

// ログイン状態管理
AmplifyEventBus.$on('authState', async (state) => {
  if (state === 'signedOut'){
    user = null;
    store.commit('setUser', null);
    router.push({path: '/login'});
  }
  else if (state === 'signedIn') {
    user = await getUser();
    router.push({path: '/'});
  }
})

// ルーティング設定
const router = new Router({
  mode: 'history',
  routes: [
    {
      // ログインページ
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      // トップページ
      path: '/',
      name: 'top',
      component: Top,
      meta: { requiresAuth: true}
    }
  ]
})

// リダイレクト設定
router.beforeResolve(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    user = await getUser();
    if (!user) {
      return next({
        path: '/login'
      })
    }
    return next()
  }
  return next()
})

export default router

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    // ユーザー情報保存
    setUser(state, user) {
    state.user = user
    },
  },
  actions: {
  },
  modules: {
  }
})