Next.js + aws-amplify auth(Cognito) メモ

はじめに

• Next.js にCognitoによる認証機能を追加したときにやったことをメモしました。
• ほぼ自分用のメモ書きみたいな感じで、不備が多々あります、申し訳ありません。

バージョン

特に重要な項目のみ抜粋します。

• Next.js 13
• aws-amplify 6.0.5
• @aws-amplify/ui-react 6.0.3

 "dependencies": {
    "@aws-amplify/ui-react": "^6.0.3",
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "aws-amplify": "^6.0.5",
    "next": "13.4.19",
    "react": "18.2.0",
  },

認証機能の追加手順

$ amplify init
$ amplify env list
$ amplify env checkout example
$ amplify push
→ Consoleでリソースができていることを確認
→ 認証機能追加
$ amplify env list （環境があっていることを確認）
$ amplify pull --appId xxxxxxxxxxxx --envName example （Consoleでコマンドを確認できる）
// 間違えてしまった場合
$ amplify env remove example

必要なIAM User, Role

• IAM User: Amplifyの操作権限を持ったユーザー
• IAM Role:
  • Backendのデプロイ権限
  • Cognitoの操作権限

注意点

• コマンドに失敗しても、落ち着いてエラー文を読めば解決できることが多い。
  • 特定のフォルダを削除するよう指示しているものがあった。
  • Console上で、Amplify Studio settingsの Enable OFF/ON を切り替えると直るものがあった。
• Console上でフロントエンドのデプロイ設定を行う時は、必ずBackendのデプロイ権限を持たせたロールを設定する

バージョンの差異に注意

• 検索すると aws-amplifyのバージョンが5 の場合の記法が多くヒットするが、最新のバージョン6では、 Auth を書く必要がないなど、書き方が微妙に異なるので注意する→ 公式ドキュメント
• 以下、コード例

_app.tsx

import '@/styles/globals.css'
import { Authenticator, View, Image, useTheme } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { Amplify } from 'aws-amplify'
import type { AppProps } from 'next/app'
import React from 'react'
import awsExports from '@/aws-exports.js'

Amplify.configure(awsExports)

const authComponents = {
  Header() {
    const { tokens } = useTheme()

    return (
      <View textAlign='center' padding={tokens.space.xxxl}>
        <Image alt='logo' src='/logo.png' />
      </View>
    )
  },
}

export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    // ユーザー登録を許可しない要件だったので、hideSignUp={true} を追加している
    <Authenticator hideSignUp={true} components={authComponents}>
      <Component {...pageProps} />
    </Authenticator>
  )
}

終わりに

• 不備が多々ありご迷惑をおかけします。適宜、他の記事と併せてお使いいただければ幸いです。