Nuxt.jsでAmazon Cognitoを使う

Kohei Kondo2021年4月23日3 min read

#Cognito #Nuxt.js

Amplifyを使わずに、認証の部分のみをCognitoに任せてNuxt.jsで使いたい

今回はこの中のAuth.tsのみを使用する。

Amplifyを使用して、認証画面の自動生成等を行っている記事は多く見かけた。

認証にのみCognitoを使うケース&認証画面はすでにあるものを使いたい場合の記事が少なかったので、こちらに書き記す。

下準備
login処理
Middleware機能を使い、ページ遷移時にUserのセッション確認

pkgs

.envも使いたいのでこちらも

yarn add @aws-amplify/auth
yarn add --dev @nuxtjs/dotenv

でインストールする。

.env

USER_POOL_ID=xxx
IDENTITY_POOL_ID=xxx
USER_POOL_WEB_CLIENT_ID=xxx
REGION=xxx

Cognitoに必要な接続情報を書いておく。

plugin

次にNuxt.jsのplugins機能を使ってアプリの実行時にConfig情報をセットするようにしておく。

この際についでに `CognitoUser`もimportして、このpluginから使える用におくと後々便利。

例：congit-xxx.ts

TypeScript

import { Auth, CognitoUser } from '@aws-amplify/auth'
import { Configuration } from '@/generated/types/typescript-axios/configuration'

Auth.configure({
  userPoolId: process.env.USER_POOL_ID ?? '',
  identityPoolId: process.env.IDENTITY_POOL_ID ?? '',
  userPoolWebClientId: process.env.USER_POOL_WEB_CLIENT_ID ?? '',
  region: process.env.REGION ?? '',
  })
  
export default Authexport { CognitoUser }

ここまでやっておくと,

import Auth, { CognitoUser } from ‘@/plugins/cognito-xxx’

で使えるようになり

TypeScript


methods: {
  async login() {
    const user = await Auth.signIn(this.email, this.password)
  }
}

各 ComponentからAuthに関数処理を使える用になる。

実際にlogin処理を実行するとローカルストレージに値がはいっていることが確認できる。

Middlewares

middleware/authenticated.ts

TypeScript


import Auth from '@/plugins/cognito-xxx'
import { Middleware } from '@nuxt/types'

const myMiddleware: Middleware = async (context) => {
  try {
    await Auth.currentAuthenticatedUser()
    } catch (error) {
      return context.redirect('/')
    }
  }
}
export default myMiddleware

ページ遷移時に、毎回認証Userを取得することによって、Sessionが生きていればページ遷移、切れていればTopページに移動する。

※Access Token有効期限が切れている場合にリクエストを投げるので必ずしも毎回リクエストを飛ばしているわけではない。

上記ルールを適用するpageに下記を追加していく。

TypeScript

export default Vue.extend({
  middleware: 'authenticated',
)}

認証されていないUserがアクセスしようとするとTopページに自動的に飛ばされる

終わりに

これで最低限、Nuxt.jsとCognitoを使った下準備はできたのではないだろうか？

Nuxt.jsには便利な機能がたくさんあるので、楽にこういった処理を作れるのは大変ありがたい。