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

ユーザープールを作成します。

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';

注: サンプルコードスニペットは、AuthenticatorUI コンポーネントと Amplify UI styles.css ファイルをインポートします。これは、コンポーネントの事前構築されたテーマを使用するときに必要です。

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

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

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

注: App.js ファイルの例については、このパターンの追加情報セクションを参照してください。

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

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

を含むリクエストヘッダーの次の例を参照してくださいJWT。

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