今回はこのアプリにAWS Cognitoによるユーザー認証を追加したいと思います。
まず amplify status で現在の状態を確認しておきます。
次に、 amplify auth add を実行。
最初に「Do you want to use the default authentication and security configuration?」と聞かれます。
ここでデフォルト設定を使って試したところ、サインアップの際にメールアドレスの他に電話番号の入力も必須になってしまったので、それを回避するために今度は「Manual configuration」を選択して次に進みました。
次に、amplify push を実行して追加した設定をAWS側に反映します。
コマンドが完了すると、AWS側では必要なリソース（Cognito User Pool、Lambdaファンクションなど）が作成されているのが分かります。
次にReactアプリケーションの方でCognitoに接続するために、必要なライブラリを追加します。
npm i aws-amplify @aws-amplify/ui-react
ログイン画面の表示には「Amplify UI Components」を使います。
/pagesフォルダ内にlogin.jsを作成し下のコードを入力しました。
----------
----------
これだけで、http://localhost:3000/login を開くと下のようなログイン画面が表示されるようになります。
もちろん最初はユーザー登録が必要なので、「Create account」のリンクをクリックします。（この辺りの文言はカスタマイズ可能です。）
ここで、電話番号の入力欄が必須となってしまっています。
これを非表示にするためのカスタマイズ方法がドキュメントには載っているのですが、その通りにやってみても上手く行きませんでした。
検索したところ、UI ComponentのバグとしてGitHubのIssueに上がっているようです。ちょうどこの記事を書いている数時間前にFixがマージされているみたいなので、近日中には解決しそうです。今はとりあえずダミーの電話番号を入力して次へ進みます。
登録フォームをSubmitすると、確認コードの入力画面に移ります。
入力したメールアドレスに確認コードが送られているので、そのコードを入力して「Confirm」をクリックすれば登録完了です。
この時点でAWSコンソールでCognitoのUser Poolを見てみると、確かに1件のユーザー情報が登録されているのが分かります。
バックエンド側を何も作り込んでいないのにここまで自動的に出来上がってしまうのはすごいですね！
最後に上で作成したlogin.jsと同様に認証用のUIをindex.jsページにも追加します。
-----
-----
ここではサインアウトボタンは要らないので削除し、代わりに右上のヘッダー内に「Sign Out」リンクを追加ししました。
サインアウトの処理を実装するには、
import { Auth } from 'aws-amplify';
でAuthクラスをインポートし、リンクがクリックされたら
Auth.signOut();
を実行すればOKです。
ここまでのソースコードはこちらで確認出来ます！