Skip to content
@aws/nx-plugin
Blog

Reactウェブサイト認証

React Website Authentication ジェネレータは Amazon Cognito を使用して React ウェブサイトに認証機能を追加します。

このジェネレータは、Cognito ユーザープールと関連する Identity Pool、ユーザーログインフローを処理するホスト型 UI、および React ウェブサイトとの統合を設定する CDK または Terraform インフラストラクチャを構成します。

使用方法

Section titled “使用方法”

React ウェブサイトに認証を追加する

Section titled “React ウェブサイトに認証を追加する”

React ウェブサイトに認証を追加する方法は2通りあります:

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#react-website#auth
  5. 必須パラメータを入力
    • クリック Generate

    オプション

    Section titled “オプション”
    パラメータ 型 デフォルト 説明
    project 必須 string - The root directory of the React website.
    cognitoDomain 必須 string - The cognito domain prefix to use
    allowSignup boolean Whether to allow self-signup
    iacProvider string Inherit The preferred IaC provider. By default this is inherited from your initial selection.

    ジェネレータの出力内容

    Section titled “ジェネレータの出力内容”

    React ウェブサイトに以下の変更が加えられます:

    • Directorysrc
      • Directorycomponents
        • DirectoryCognitoAuth
          • index.tsx メインの認証コンポーネント
      • main.tsx CognitoAuth コンポーネントを組み込むように更新

    インフラストラクチャ

    Section titled “インフラストラクチャ”

    このジェネレータは選択した iacProvider に基づいてInfrastructure as Codeを生成するため、packages/common に関連するCDKコンストラクトまたはTerraformモジュールを含むプロジェクトを作成します。

    共通のInfrastructure as Codeプロジェクトは以下の構造を持ちます：

    • Directorypackages/common/constructs
      • Directorysrc
        • Directoryapp/ プロジェクト/ジェネレータ固有のインフラストラクチャ用コンストラクト
          • …
        • Directorycore/ app 内のコンストラクトで再利用される汎用コンストラクト
          • …
        • index.ts app からコンストラクトをエクスポートするエントリーポイント
      • project.json プロジェクトのビルドターゲットと設定

    選択した iacProvider に基づいて以下のインフラストラクチャコードが生成されます:

    • Directorypackages/common/constructs/src
      • Directorycore
        • user-identity.ts ユーザープールと Identity Pool を定義するコンストラクト

    インフラストラクチャの使用方法

    Section titled “インフラストラクチャの使用方法”

    ユーザーアイデンティティインフラをウェブサイトの前に宣言してスタックに追加する必要があります:

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        new UserIdentity(this, 'Identity');
    

        new MyWebsite(this, 'MyWebsite');
      }
    }

    UserIdentity コンストラクトは、ウェブサイトが正しい Cognito ユーザープールを指すようにするためのランタイム設定を自動的に追加します。

    認証ユーザーへのアクセス権付与

    Section titled “認証ユーザーへのアクセス権付与”

    APIの呼び出し権限を付与するなど、認証ユーザーに特定のアクションを許可するには、Identity Pool の認証済みロールに IAM ポリシーステートメントを追加します:

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity, MyApi } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        const identity = new UserIdentity(this, 'Identity');
        const api = new MyApi(this, 'MyApi');
    

        api.grantInvokeAccess(identity.identityPool.authenticatedRole);
    

        new MyWebsite(this, 'MyWebsite');
      }
    }