amplify init不要: Next.jsとAmplifyUIで既存のCognito使って認証だけしたい

やりたいこと

• Cognitoのユーザプールは別で作成済みで、amplifyを使ってのリソース作成や管理は「しない」
• Next.jsのアプリケーションは別で作成済み

という条件で、AmplifyUIのうち認証のとこだけ使いたい（要は Authenticator | Amplify UI for React だけ使う）ということです。

これが以外と情報を探すのに手間取ったので、自分でメモしておきます。

確認した環境は以下の通り。

"next": "13.3.1"
"@aws-amplify/ui-react": "^4.6.0"

先に結論

amplify init や amplify add auth を実行する必要はない。

必要なのは @aws-amplify/ui-react のインストールと、CognitoユーザプールのIDなどを環境変数として定義し、それをアプリで読み込むようにすることのみ。

手順

amplify UI のインストール

公式ドキュメントに従ってインストールする。

Installation | Amplify UI for React

npm install @aws-amplify/ui-react aws-amplify
# または
yarn add @aws-amplify/ui-react aws-amplify

環境変数の設定

Next.jsの場合は NEXT_PUBLIC_*** という接頭辞がある変数であればクライアントサイドで参照できる。

Next.js で環境変数を扱う (.env, NEXT_PUBLIC, NODE_ENV)｜まくろぐ

Cognitoユーザプールの情報をNEXT_PUBLIC_hogehogeで定義していく。

補足）ここで定義する情報はクライアント側に漏れても問題のない情報なのでNEXT_PUBLICで定義するが、クライアント側に漏れてまずいような値を定義するときにはNEXT_PUBLICは使えませんというか使ったらだめです。

/project_root/.env.local などに以下を定義する。

NEXT_PUBLIC_AWS_PROJECT_REGION=ap-northeast-1
NEXT_PUBLIC_AWS_COGNITO_REGION=ap-northeast-1
NEXT_PUBLIC_AWS_USER_POOL_ID=ap-northeast-1_abcdefghijklmn
NEXT_PUBLIC_AWS_COGNITO_CLIENT_ID=abcdefghijklmnopqrstu

AmplifyUI用の変数設定

/project_root/types とか /project_root/config とか、とにかくどこでもいいのだけれどアプリが読み込めるように以下の変数を定義する。

export const AmplifyConf = {
  aws_project_region: process.env.NEXT_PUBLIC_AWS_PROJECT_REGION,
  aws_cognito_region: process.env.NEXT_PUBLIC_AWS_COGNITO_REGION,
  aws_user_pools_id: process.env.NEXT_PUBLIC_AWS_USER_POOL_ID,
  aws_user_pools_web_client_id: process.env.NEXT_PUBLIC_AWS_COGNITO_CLIENT_ID,
};

アプリで使う

あとは上記で定義した AmplifyConf を必要な場所で import して、

Amplify.configure(AmplifyConf);

してやれば使えるようになる。（詳細な使い方は公式ドキュメント確認のこと）