amplify を使わずにNuxt3+cognitoで認証処理

概要

CognitoのデフォルトログインページをNuxt3のプロジェクトに組み込みました。
Amplifyを使わずに認証処理を簡単にしたかったのでその備忘録です。
※使わずに、と言いましたがnpmパッケージは使用します。

Amplifyを使いたくなかった理由は、本格的に使用すると便利すぎて何でもできてしまい、頻繁に更新されるAmplifyの更新作業で地獄を見ることになりそうだったからです。そんなに深い意味はありません。
※一般的にパッケージの更新はしたほうがいいと思います。

開発環境

node：16.17.1
Nuxt： 3.0.0

実装手順

1. まず初めにNuxtのプロジェクトを用意する必要があります。
   nuxt3-cognitoの部分はプロジェクト名です。

   npx nuxi init nuxt3-cognito
   cd ./nuxt3-cognito
   npm i
   

2. 必要なパッケージをインストールします。

   npm i aws-amplify@5.0.4
   

3. 環境変数ファイルの設定と今後扱う変数の定義をします。

   .env

   AWS_REGION=ap-northeast-1
   USER_POOL_ID=ap-northeast-1_XXXXXXXXX
   USER_POOL_WEB_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXX
   COGNITO_DOMAIN_PREFIX=nuxt3-cognito
   APP_BASE_URL=http://localhost:3000
   

   • USER_POOL_ID
   • USER_POOL_WEB_CLIENT_ID

   は以下の赤枠AWS Cognitoから取得します。
   
   

4. 作成した環境変数ファイルをNuxtで読み込みましょう

   nuxt.config.ts

   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         awsRegion: process.env.AWS_REGION,
         userPoolId: process.env.USER_POOL_ID,
         userPoolWebClientId: process.env.USER_POOL_WEB_CLIENT_ID,
         cognitoDomainPrefix: process.env.COGNITO_DOMAIN_PREFIX,
         appBaseUrl: process.env.APP_BASE_URL,
       },
     },
   }
   

5. Cognitoの設定ファイルを作成します。

   plugins/amplifyConfig.ts

   import { Amplify } from 'aws-amplify'
   import { defineNuxtPlugin } from '#app'
   
   export default defineNuxtPlugin(() => {
     const config = useRuntimeConfig() // 環境変数読み込み用
     const region = config.public.awsRegion
     const userPoolId = config.public.userPoolId
     const userPoolWebClientId = config.public.userPoolWebClientId
     const cognitoDomainPrefix = config.public.cognitoDomainPrefix
     const appBaseUrl = config.public.appBaseUrl
     const amplifyConfig = {
       Auth: {
         region,
         userPoolId,
         userPoolWebClientId,
         oauth: {
           domain: `${cognitoDomainPrefix}.auth.${region}.amazoncognito.com`,
           scope: ['openid'], // 認証成功時にどこまで情報を取得するか権限
           redirectSignIn: appBaseUrl, // ログイン成功時に遷移するURL
           responseType: 'code',
         },
       },
     }
     Amplify.configure(amplifyConfig)
   })
   

6. 前の手順で作成したCognitoの設定ファイルをNuxtで読み込みます。

   nuxt.config.ts

   export default defineNuxtConfig({
     plugins: [{ src: '@/plugins/cognitoConfig.ts' }],  // 追加
     runtimeConfig: {
       public: {
         awsRegion: process.env.AWS_REGION,
         userPoolId: process.env.USER_POOL_ID,
         userPoolWebClientId: process.env.USER_POOL_WEB_CLIENT_ID,
         cognitoDomainPrefix: process.env.COGNITO_DOMAIN_PREFIX,
         appBaseUrl: process.env.APP_BASE_URL,
       },
     },
   }
   

7. ページ遷移するたびにCognito認証をするmiddlewareを作成します。

   middleware/authenticated.ts

   import { Auth } from '@aws-amplify/auth'
   
   /** 認証を確認し、無効の場合にサインイン画面へ遷移 */
   export default defineNuxtRouteMiddleware(async () => {
     try {
       await Auth.currentAuthenticatedUser()
     } catch (error) {
       await Auth.federatedSignIn()
     }
   })
   

8. 前の手順で作成したmiddlewareをindex.vueに適応し、遷移ごとに発火するよう設定しましょう

   index.vue

   ...
   <script setup lang="ts">
   definePageMeta({
     middleware: ['authenticated'],
   })
   </script>
   

まとめ

備忘録ということでかなり簡単に書いてしまいました…
何か間違いがあったらご指摘ください。

参考

Nuxt公式ページ
AmplifyでCognitoのHosted UIを利用した認証を最低限の実装で動かしてみて動作を理解する