🌀

Vite + React：aws-amplify を使って Cognito でサインインする

2022/05/18に公開2件

React

Cognito

tech

Vite ＋ React 環境で、既存のCognito を使用したサインインを実装します。
Viteを使用している場合は躓きポイントが2箇所あります。

既存コグニートの設定

今回は既存のコグニートを使用しますので、あらかじめ作成しておきます。
ちなみにコグニートのアプリクライアントの設定は以下のように設定しています。

aws-amplify インストール

aws-amplify をインストールします。
2022年5月17日時点で aws-amplify のバージョンは 4.3.22 でした。

npm install aws-amplify

サインインの最小限のコード

サインインする最小限のコードです。

+ import { Amplify, Auth } from 'aws-amplify'

export const authConfig = {
  // コグニートのリージョン
  region:import.meta.env.VITE_COGNITO_REGION, 
  // コグニートのユーザープールID
  userPoolId:import.meta.env.VITE_COGNITO_POOLID,
  // コグニートのアプリケーションID
  userPoolWebClientId:import.meta.env.VITE_COGNITO_APPCLIENTID,
}

+ Amplify.configure({ Auth: authConfig })

export function LoginTest() {

  const handleLoginClick = async () => {
    try {
+      const cognitoUser = await Auth.signIn('ユーザーID', 'パスワード')
      console.log('認証に成功', cognitoUser)
    } catch (error:any) {
      if ( error.code === 'UserNotFoundException') {
        console.log('cognitoに該当するユーザーIDがない')
      } 
      if ( error.code === 'NotAuthorizedException') {
        console.log('cognitoに該当するユーザーIDはあるがパスワードが一致しない')
      } 
      console.log('それ以外のエラー', error)
    }
  }

  return (
    <button type="button" onClick={handleLoginClick}>ログイン</button>
  )
}

Amplify.configure メソッドの引数に、コグニートのリージョン、ユーザープールID、アプリケーションIDを指定します。
サンプルコードでは .env ファイルにコグニート情報を定義しておき、その値をAmplify.configure メソッドの引数に設定しています。
※ Vite の envファイルについてはコチラ
Vite ＋ React + TypeScript で環境変数ファイルを作成する

Auth.signInメソッドの引数に、ユーザーID、パスワードを指定してサインインします。
サインインに成功するとコグニートユーザーオブジェクトが返ります。
このコグニートユーザーオブジェクトにトークン情報が入っています。

サインに失敗した場合、
コグニートのユーザープールに該当するユーザーIDがなければ'UserNotFoundException'が返り、該当するユーザーIDはあるがパスワードが一致しない場合は'NotAuthorizedException'が返ります。

Vite でデバッグ実行した際のエラーを解消する

デバッグビルド（デフォルトでnpm run dev）して、デバッグ実行するとエラーが発生しページが表示されません。
エラー内容：Uncaught ReferenceError: global is not defined

これは Vite で作成したアプリだけで発生するようです。
index.htmml の body タグに下記を追加して回避します。

...
  <script>
      window.global = window;
      window.process = {
        env: { DEBUG: undefined },
      };
      var exports = {};
  </script>
</body>

これでデバッグ実行できるようになります。

Vite で productionビルド時のエラーを解消する

次に製品ビルド（デフォルトでnpm run build）するとエラーが発生して、ビルドできません。
エラー内容：
'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js

こちらも Vite でだけ発生します。
vite.config.ts に下記を追加して回避します。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
+      {find: './runtimeConfig', replacement: './runtimeConfig.browser'},
      {find: '@', replacement: '/src', }
    ]
  },
  plugins: [
    react({
      jsxImportSource: '@emotion/react'
    }),
    svgr()
  ]
})

以上で、Vite で Cognito を使用したサインインができるようになりました。

aws-amplify の Vite 対応は公式サイトに記載があります。
（コメントで教えていただきました。ありがとうございます！）

※ちなみに
公式サイトでは tsconfig.json の compilerOptions に skipLibCheck:true を設定するように記載されています。（が、false のままでも問題なく実行できました。）

tsconfig.json

{
  "compilerOptions": {
  ・・・
    "skipLibCheck": true,

skipLibCheck を true に設定すると *.d.ts ファイルに対する型チェックをスキップすることができます。
skipLibCheck を true にすることで型チェックの精度が下がるデメリットもありますので、適宜設定してください。

サインイン、サインアウトをカスタムフックにする

実装する際はサインインやサインアウトの処理などはカスタムフックにすると思います。
カスタムフックのサンプルです。こんな感じで実装してみました。

useAuthUser.ts

+ import { Amplify, Auth } from 'aws-amplify'

import { useRecoilState, useResetRecoilState } from 'recoil'
import { authUserState } from '@/_states'
import * as types from '@/_types'
import { authConfig } from './authConfig'


+ Amplify.configure({ Auth: authConfig })


/**
 * ユーザー認証に関するフック
 */
export const useAuthUser = () => {
  // state
  const [ authUser, setAuthUser ] = useRecoilState(authUserState)
+  const resetAuthUser = useResetRecoilState(authUserState)

  /**
   * サインイン処理
   */
  const signIn = async (userid: string, password: string): Promise<boolean> => {
    setAuthUser(undefined)
    try {
      const user = await getUser(userid, password)
      if (types.isAuthUser(user)) {
        setAuthUser(user)
        console.log("login success:", user) 
        return true
      }
      console.log("login failed:", user) 
      return false

    } catch (error) {
      return Promise.reject(error)
    }
  }

  /**
   * サインアウト処理
   */
  const signOut = () => {
+    resetAuthUser()
  }

  /**
   * 認証ユーザーの値
   */
  const authUserValue = ():types.AuthUser | undefined => authUser

  /**
   * 認証ユーザの取得
   * @param userid
   * @param password
   * @returns
   */
  const getUser = async (userid: string, password: string): Promise<types.AuthUser | types.AuthFailed> => {
    try {
+      const cognitoUser = await Auth.signIn(userid, password)
      return { 
        name: cognitoUser.username,
        userId: cognitoUser.username,
        jwtToken: cognitoUser.signInUserSession.idToken.jwtToken
       }    
    } catch (error:any) {
      if ( error.code === 'UserNotFoundException') {
        // cognito のユーザーIDが存在しない場合
        return Promise.resolve({ failedCode: 'UserNotFound'})
      } 
      if ( error.code === 'NotAuthorizedException') {
        // cognito にユーザーIDに該当するデータはあるが、パスワードが一致しないとき
        return Promise.resolve({ failedCode: 'NotAuthorized'})
      } 
      return Promise.reject(error)
    }

  }

  return { signIn, signOut, authUserValue }
}