AmplifyでホストしてるNext.jsにCognito認証を追加した(備忘録)

Basic認証はAmplifyの画面ポチポチすればできますが、Cognitoでユーザ認証したかったため。

やりたいこと

↓pagePropsに認証つけたい、認証通ってる場合はサインアウトボタン出したい

  return <Component {...pageProps} />

amplify設定済みです

❯ amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security co
nfiguration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource [アプリ名] locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

...

amplify push

add auth, pushしてから

return (
      <AmplifyAuthenticator>
        <Component {...pageProps} />
        <AmplifySignOut />
      </AmplifyAuthenticator>);

でできました。 AWSすごい、靴なめます。

signin

signout

そもそもCognito使わないほうがいいかも

バックアップとリストア機能がなかったりセッションが長く持たなかったりで本番には向かないかもしれません。
内輪で試すときはCognitoで、本番はAuth0とかがいいんですかね？なにもわかりません...
アンチコメント歓迎しているので誰か教えてください。

AWS Cognito: Don’t go to production | by Warren Parad | Authress | Medium

Serverless: 3 things AWS Cognito needs to be production ready | by CBernardes | JavaScript in Plain English

Cognitoのバックアップ取る野良パッケージはあるようです。

GitHub - mifi/cognito-backup: CLI for backing up AWS Cogntito User Pools

その他

現在バージョン指定なしで入るaws-amplify/ui-reactは2.18.0ですが、動かなかったので1.2.5に下げました。
2.18.0に合わせるべきかもしれませんが、公式コピペでとりあえずやってみたかったので下げました。