React×Spring Bootな構成をAWS Fargateで動かす(2)

Pocket

Cognitoで認証するReactアプリをAmplify v6で作成する

第2回となる今回は、Cognitoで認証するReactのフロントエンドアプリを作っていこうと思います。
ちなみに第1回を読んでないよーという方はコチラ。

ReactでCognitoを扱う際、Amplifyライブラリを使うと思いますが、以前作ったアプリがv6になって全く動かなくなっていたので少々ビックリしました。
それでは早速作っていきましょう!
プロジェクトを作成したい1つ上のフォルダで以下のコマンドを実行して、プロジェクトを作成します。

以下のようなメッセージが表示されたら(バージョンは環境によって違うかも)、そのままEnterします。

プロジェクト名を入力します。ここではmiso-frontendとしています。

カーソルを移動し、Reactを選択します。

カーソルを移動し、TypeScript + SWCを選択します。

するとプロジェクトが自動的に作成されます。
できたプロジェクトのフォルダ配下にあるvite.config.tsを編集し、Viteの設定を変更します。

index.htmlをsrc以下に移動し、以下のようにタイトルとmain.tsxのパスを変更します。

ここで一度実行してみましょう。コマンドを実行して、次のような画面がhttp://localhost:3000/として表示されていればOKです。

続いて以下のコマンドを実行して、Cognito認証のためのAmplifyライブラリ、ログイン状態管理のためのRecoil、アイコンライブラリのReact Iconsをインストールします。

src以下にstoresフォルダを作成し、ログインの状態を管理するuserState.tsを作成します。
Cognitoで認証された後、ユーザ名、メールアドレス、Googleのプロフィール画像を保存しようと思います。

src以下にconfigフォルダを作成し、AWSに接続するための設定awsconfig.tsを作成します。
環境によって変わる部分は環境変数から与えるようにします。

プロジェクトのルートフォルダに.envファイルを作成します。

your_user_pool_idyour_app_client_idyour_cognito_domainには、前回作成したCognitoのユーザープールID、アプリケーションクライアントID、Cognitoドメイン(例:miso-dev.auth.ap-northeast-1.amazoncognito.com)を設定してください。
また、前回同様.envファイルがGitリポジトリに含まれないように.gitignoreを設定します。

main.tsxを変更し、先ほど作成したAWSへの接続情報を読み込ませ、Recoilで状態管理できるようにします。

次がログイン処理のメインとなります。以下のようにApp.tsxを変更しましょう。

少々長いので、コードの中身をGitHub Copilotに解説してもらいました。

  1. インポート:

    • Reactのフック(useCallbackuseEffectuseState)とRecoilのuseRecoilStateをインポート。
    • AWS Amplifyの認証機能(fetchAuthSessionsignInWithRedirectsignOut)とイベントリスナー(Hub)をインポート。
    • ユーザー状態を管理するRecoilのuserStateをインポート。
    • スタイルシートApp.cssをインポート。
  2. コンポーネントApp:

    • サインイン状態をRecoilのuserStateで管理。
    • getUser関数で認証セッションを取得し、ユーザー情報を設定。
    • signIn関数でユーザーがサインインしていない場合にGoogleでのリダイレクトサインインを実行。
    • useEffectフックで認証イベントをリッスンし、サインインやサインアウトのイベントに応じてユーザー情報を更新。
    • ユーザーがサインインしているかどうかに応じて、異なるUIを表示(サインインボタンまたはユーザー情報とサインアウトボタン)。
  3. UI:

    • サインインしている場合、ユーザーの名前と画像、パスワード生成ボタン、サインアウトボタンを表示。
    • サインインしていない場合、サインインボタンを表示。

それでは実行してみましょう!
実行してみると、無事にSign inボタンが表示されました。

Sign inボタンを押していざ!!

あれれ???「An error was encountered with the requested page.」というエラー画面に遭遇。
何が原因か・・・と調べていくと、凡ミスをしていました。
Cognitoのアプリケーションクライアントの許可されているコールバックURLがhttp://localhost:3000/を設定していたのに対し、.envファイルで設定していたVITE_REDIRECT_SIGNINの値はhttp://localhost:3000と最後のスラッシュが抜けていました😅
.envファイルを修正して再度実行!

Googleのアカウント選択画面を経由し・・・

無事に認証後の画面が表示されました!

次回は、Cognitoで認証されたユーザーだけが実行可能なバックエンドのAPIをSpring BootとSpring Securityで作成していこうと思います。
それでは、また次回に👋

お問い合わせ先

執筆者プロフィール

Hayakawa Masafumi
Hayakawa Masafumitdi デジタルイノベーション技術部
昔も今も新しいものが大好き!
インフラからアプリまで縦横無尽にトータルサポートや新技術の探求を行っています。
週末はときどきキャンプ場に出没します。
Pocket

関連記事