初めに

WebアプリにAmazon Cognitoを使ったログイン機能を実装した内容についてまとめました。
※あくまで個人的なやり方で行ったので正しいとは限りません。

追加手順

初めに手動で追加していく手順です。
Amazon Cognitoの画面から操作していきます。

ユーザープール作成

  1. 私が作成したWebアプリはシングルページアプリケーションなのでSPAを選択
  2. サインイン識別子はメールアドレスを選択
    必須属性は選択しないで進みます。
  3. ユーザーがサインインに成功した後にリダイレクトされるURLを指定します。
    ↑画像のURLはlocalhostなのでローカル環境へのリダイレクトになっています。
  4. 作成を押すとユーザープールは完成です。

WebアプリとCognitoの連携

作成したユーザープールから簡単に連携ができるガイドが出ます。

表示されているコマンド実行やコード修正を行なってください。
コード内で連携するユーザープールのユーザープールID、ドメイン、クライアントIDを貼り付ける場所があるので貼り付けてください。
これで連携が完了しました。
Webブラウザを実行するとログインページが表示されました。
↓ここからはAWS CloudFormationを使った自動作成です。

自動生成

WebアプリのIaCにCognitoの設定情報を記述していきます。

##########################################
# Cognito User Pool
##########################################
MyCognitoUserPool:
Type: AWS::Cognito::UserPool
Properties:
UserPoolName: MyUserPool
AutoVerifiedAttributes:
- email
UsernameAttributes:
- email
Policies:
PasswordPolicy:
MinimumLength: 8
RequireUppercase: true
RequireLowercase: true
RequireNumbers: true
RequireSymbols: false

##########################################
# Cognito User Pool Client (SPA)
##########################################
MyCognitoUserPoolClient:
Type: AWS::Cognito::UserPoolClient
Properties:
ClientName: MyUserPoolClient
UserPoolId: !Ref MyCognitoUserPool
GenerateSecret: false
ExplicitAuthFlows:
- ALLOW_USER_PASSWORD_AUTH
- ALLOW_REFRESH_TOKEN_AUTH
PreventUserExistenceErrors: ENABLED
CallbackURLs:
- "Amplifyのドメイン"
LogoutURLs:
- "Amplifyのドメイン"
AllowedOAuthFlows:
- implicit
- code
AllowedOAuthScopes:
- email
- openid
- profile # 標準的なスコープとして追加
AllowedOAuthFlowsUserPoolClient: true
SupportedIdentityProviders:
- COGNITO
##########################################
# Cognito User Pool Domain
##########################################
MyCognitoUserPoolDomain:
Type: AWS::Cognito::UserPoolDomain
Properties:
Domain: my-app-domain-example-12345 # グローバルでユニークな値に変更
UserPoolId: !Ref MyCognitoUserPool

コードを追記し、デプロイすると自動作成されます。
※コード内に記載しているURLはAmplifyのドメイン

デプロイ後の連携

自動で作成された後、作成されたユーザープールのユーザープールID、ドメイン、クライアントIDをコードに貼り付けないと連携されません。
以上が追加手順です。

⚠️追加中に発生したエラー

自動生成したCognitoと連携しても、うまくログイン画面が表示されないエラーが発生しました。
手動で作成したユーザプールと連携すると正常に動作していました。
エラー原因はIaCのCognito設定でした。


下の画像が手動で作成したユーザープールです。
自動で作成された方はログインページの表示がありません。
ログインページを有効にするための設定が不足していました。
↓このCognito独自のユーザープールを認証プロバイダーとして有効にするコードをIaCに追記すると解決できました。

SupportedIdentityProviders:
- COGNITO

以上です。最後までお読みいただきありがとうございます。
参考になれば幸いです。