前回は、AWS Amplify でフロントエンドでデータ一覧の画面表示、作成、削除、更新しました。

今回は、AWS Amplify でアカウント作成やログイン認証機能を追加します。

まずは、フロントエンドのプロジェクトのディレクトリに進みます。

ターミナルで、amplify add auth を実行します。

設定について聞かれるので、『Default configuration』を選択します。

image2

ログインの方法について聞かれるので、『Email』を選択します。

image3

追加で設定したいことがあるかと聞かれるので、『No』を選択しましょう。

image4

auth の設定が完了した後、ターミナルでamplify push を実行します。

Auth をプッシュしたいので、そのままエンターキーを押します。

Yes か No を聞かれるたび、エンターキーを押します。

image5

プッシュが完了した後、App.tsx に認証を追加します。

withAuthenticatorと css をインポートします。

import { withAuthenticator } from "@aws-amplify/ui-react"
import "@aws-amplify/ui-react/styles.css"

AppのエクスポートにwithAuthenticatorをラップします。

export default withAuthenticator(App)

npm run startで React を起動します。

しばらくすると、

image6

ログイン画面の UI が自動で生成されていました。

アカウントを作成してみましょう。

image7

コードの確認画面が表示されました。

送信したメールに認証コードが届いていると思います。

届いた認証コードを入力して、Confirm をクリックしてみます。

image8

ログインできたようです。

image9

作成した React のホーム画面は、何も設定していないので真っ白です。

localhost:3000/book にアクセスしてみましょう。

image10

無事、読書リスト画面へ遷移することができました。

ブログ一覧