React + Cognito で簡単に認証機能を実装する方法：Amplify UI の活用

# はじめに

Amazon Cognito は，ウェブアプリケーションやモバイルアプリに簡単に認証機能を追加できるAWSのサービスです．しかし，初めて使う人にとっては少し取っつきにくい面があります．本記事では，React アプリケーションに Cognito を組み込む方法を，Amplify UI という便利なライブラリを使って解説します．Amplify UI を使うことで，認証UIを最小限のコードで実装できることを紹介します．

# Cognito User Pool の作成
まずは，AWS コンソールから Cognito User Pool を作成します．以下の手順で進めていきましょう．

AWS コンソールから「Cognito」サービスを選択し，「ユーザープールを作成」をクリックします．
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/e1133296-5bde-3583-ed14-879ab022ba43.png)

ステップ1：サインインエクスペリエンスの設定
サインインオプションとして「Eメール」を選択します．

![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/15a03ca5-8959-7a5f-d729-71526c2d55a7.png)


ステップ2：セキュリティ要件の設定
デモ用に設定を簡略化するため，パスワードポリシーを緩めに設定し，多要素認証は使用しないようにします．


![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/4192370b-0863-ee81-a82b-b5b0a838d3fe.png)

ステップ3：サインアップエクスペリエンスの設定

![Untitled 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/ef7c8fb4-9b00-4a13-3737-18fbd3845e56.png)

ステップ4：メッセージ配信の設定
「CognitoでEメールを送信」を選択します．本番環境では AWS SES の利用を検討しましょう．

![Untitled 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/0fe6ce49-c8ae-d2ae-109e-6e0a15402cd7.png)


ステップ5：アプリケーションの統合
ユーザープール名を設定します（例：「MyUserPool」）．
アプリケーションクライアントを「パブリッククライアント」として作成し，名前を設定します（例：「myapp」）．

このとき，「クライアントシークレットを生成しない」が選択されていることを確認して下さい．

![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/387407f3-9477-c7e5-d293-01f7ea638930.png)


作成後，以下の情報をメモしておきます：
- ユーザープールID（例：`ap-northeast-1_QG7CZpZjl`）
- クライアントID（例：`7n8hgpaserbnqptieops5i05`）


![Untitled 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/3a18eb22-603e-c1ea-1510-a5dfcd57e797.png)

クライアントIDは「アプリケーションの統合」タブの一番下の「アプリクライアントと分析」にあります．
![Untitled 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/e7222f02-231c-6d9d-ddb5-d16532981687.png)


# React プロジェクトのセットアップ
次に React プロジェクトをセットアップします．ここでは Vite を使用します．

```bash
npm create vite@latest
# プロジェクト名を入力し，フレームワークに「React」，バリアントに「TypeScript」を選択

cd プロジェクト名
npm install
npm run dev
```

http://localhost:5173 にアクセスして，Reactアプリが正常に動作することを確認しましょう．

![Untitled 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/bae3ba61-a08d-bbfb-6755-142943170b10.png)


# Amplify UI の導入

[Amplify UI](https://ui.docs.amplify.aws/react) を使って認証UIを実装します．必要なパッケージをインストールします．

```bash
npm install @aws-amplify/ui-react aws-amplify
```

`src/main.tsx` を以下のように編集します：

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

import { Amplify } from 'aws-amplify'

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: "YOUR_USER_POOL_ID",
      userPoolClientId: "YOUR_CLIENT_ID",
      loginWith: {
        email: true
      }
    },
  }
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
```

参考：[Use existing Cognito resources - React - AWS Amplify Gen 2 Documentation](https://docs.amplify.aws/react/build-a-backend/auth/use-existing-cognito-resources/#use-auth-resources-without-an-amplify-backend)

`YOUR_USER_POOL_ID` と `YOUR_CLIENT_ID` には，先ほどメモした値を入力します．
次に，`src/App.tsx` を以下のように編集します：

```tsx
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  )
}

export default App
```

`npm run dev`を実行すると，認証UIが表示されるはずです．
![Untitled 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/ce697d57-bb08-9a71-ff0c-93581b382e0d.png)

# ユーザー作成とログイン

「Create Account」からユーザーを作成します．

![Untitled 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/6d353b30-d29f-d77a-99c4-b8c9b46dca6c.png)

メールアドレスとパスワードを入力すると，認証コードが届きます．認証コードを入力してユーザー登録を完了すると，自動的にログインします．

ログイン後は，画面上にユーザーIDが表示されます．

![Untitled 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320225/63538b72-2780-2cf2-9304-93f9ed6fbe30.png)

以降は「Sign in」からログインが可能になります．

# まとめ
本記事では，React アプリケーションに Amazon Cognito を使った認証機能を Amplify UI を利用して簡単に実装する方法を紹介しました．Amplify UI を使うことで，数行のコードで認証UIを追加することができます．

実際の環境では，パスワードポリシーをより強固にしたり，AWS SES を使用してメール配信を行うなど，より詳細な設定が必要になります．