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#website#auth
  5. 必須パラメータを入力
    • クリック Generate

    オプション

    Section titled “オプション”
    パラメータ型デフォルト説明
    project 必須string-ウェブサイトのルートディレクトリ。
    cognitoDomain string-使用するCognitoドメインプレフィックス。省略した場合、npmスコープとウェブサイトプロジェクト名から値が導出されます。
    allowSignup boolean自己サインアップを許可するかどうか
    iac inherit | cdk | terraforminherit優先するIaCプロバイダー。デフォルトでは、初期選択から継承されます。
    preferInstallDependencies booleantrueジェネレーター実行後に依存関係のインストールを優先するかどうか。複数のジェネレーターをバッチ処理する際にインストールを延期する場合はfalseに設定します（後続のジェネレーターがNxプロジェクトグラフを計算できるよう、必要に応じてインストールは実行されます）。最後に一度だけインストールします。

    ジェネレータの出力内容

    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 “アーキテクチャ”

    このジェネレータは、既存の静的ウェブサイトアーキテクチャに Amazon Cognito ユーザープール（サインイン用）と Identity Pool（サインインしたユーザーをスコープ付き IAM 認証情報にフェデレートするため）を追加します:

    Web BrowserCognito(User + Identity Pool)Scoped IAMCredentialsAuthenticatedAWS Resourceswaf Sign in IAM/Cognito

    脅威保護

    Section titled “脅威保護”

    ユーザープールは Cognito Plus 機能プランで作成され、標準認証の脅威保護が AUDIT モードに設定されています。監査モードでは、Cognito は各サインインにリスクレベルを割り当て、ユーザーをブロックすることなく評価を CloudWatch にログ記録します。

    ユーザーのリスク評価を観察した後、フル機能の強制に切り替えて、リスクの高いアクティビティに自動的に対応できます（例：MFA の要求やサインインのブロック）:

    packages/common/constructs/src/core/user-identity.ts で standardThreatProtectionMode を StandardThreatProtectionMode.FULL_FUNCTION に設定してください。

    Web Application Firewall (WAF)

    Section titled “Web Application Firewall (WAF)”

    デフォルトでは、ユーザープールは AWSManagedRulesCommonRuleSet と AWSManagedRulesKnownBadInputsRuleSet マネージドルールグループを使用する AWS WAFv2 Web ACL に関連付けられています。独自の Web ACL を管理したい場合や、Web ACL が不要な場合は、これを無効にできます:

    new UserIdentity(this, 'Identity', { enableWaf: false });

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

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