Amazon Cognito と AWS Amplify UI を使用して、React アプリケーションの既存ユーザーを認証する

ユーザープールの作成

Amazon Cognito ユーザープールを作成します。ユーザープールのサインインオプションとセキュリティ要件を、お使いのユースケースに合うように設定します。

アプリクライアントを追加します。

ユーザープールアプリクライアントを設定します。このクライアントは、アプリケーションが Amazon Cognito ユーザープールとインタラクトするために必要です。

依存関係をインストールします。

aws-amplify および @aws-amplify/ui-react パッケージをインストールするには、アプリケーションのルートディレクトリから次のコマンドを実行します。

npm i @aws-amplify/ui-react aws-amplify

ユーザープールを設定します。

次の例を参考に、aws-exports.js ファイルを作成して src フォルダに保存します。このファイルには次の情報が含まれています。

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;

Amplify サービスをインポートして設定します。

Authenticator UI コンポーネントを追加します。

Authenticator UI コンポーネントを表示するには、アプリケーションのエントリポイントファイル (App.js) に次のコード行を追加します。

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

Authenticator UI コンポーネントは 2 つの戻り値を提供します。

次のコンポーネント例を参照してください。

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}

(オプション) セッション情報を取得します。

ユーザーが認証されると、AAmplify クライアントからセッションに関するデータを取得できます。たとえば、ユーザーのセッションから JSON Web トークン (JWT) を取得して、そのユーザーのセッションからバックエンド API への要求を認証できます。

JWT を含む要求ヘッダーの次の例を参照してください。

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();