Skip to content
@aws/nx-plugin
Blog

React Webサイト認証

React Webサイト認証ジェネレーターは、Amazon Cognitoを使用してReact Webサイトに認証を追加します。

このジェネレーターは、Cognito User Poolとそれに関連するIdentity Pool、ユーザーログインフローを処理するホストされたUI、およびReact Webサイトとの統合を作成するためのCDKまたはTerraformインフラストラクチャを構成します。

使用方法

Section titled “使用方法”

React Webサイトに認証を追加する

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

React Webサイトに認証を追加するには、2つの方法があります：

Terminal window
pnpm nx g @aws/nx-plugin:ts#website#auth
変更されるファイルを確認するためにドライランを実行することもできます
Terminal window
pnpm nx g @aws/nx-plugin:ts#website#auth --dry-run

オプション

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

ジェネレーター出力

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

React Webサイトに以下の変更が加えられます：

  • Directorysrc
    • Directorycomponents
      • DirectoryCognitoAuth
        • index.tsx Main authentication component
    • main.tsx Updated to instrument the CognitoAuth component

インフラストラクチャ

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

このジェネレーターは、選択した iac に基づいてインフラストラクチャをコードとして提供するため、関連する CDK コンストラクトまたは Terraform モジュールを含む packages/common にプロジェクトを作成します。

共通のインフラストラクチャコードプロジェクトは、次のように構成されています：

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

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

  • Directorypackages/common/constructs/src
    • Directorycore
      • user-identity.ts Construct which defines the user pool and identity pool

アーキテクチャ

Section titled “アーキテクチャ”

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

Web BrowserWAFCognito(User + Identity Pool)Scoped IAMCredentialsAuthenticatedAWS Resources Sign in IAM/Cognito

脅威保護

Section titled “脅威保護”

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

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

packages/common/constructs/src/core/user-identity.tsでstandardThreatProtectionModeをStandardThreatProtectionMode.FULL_FUNCTIONに設定します。

多要素認証（MFA）

Section titled “多要素認証（MFA）”

デフォルトでは、ユーザーはサインインする前にMFA（SMSコードまたは時間ベースのワンタイムパスワード）を設定する必要があります。MFAをオプションにしたり、完全にオフにしたり、利用可能な第2要素の方法を制限したりできます：

import { Mfa } from 'aws-cdk-lib/aws-cognito';


new UserIdentity(this, 'Identity', {
  mfa: Mfa.OPTIONAL,
  mfaSecondFactor: { sms: false, otp: true },
});

mfaはMfa.OFF / Mfa.OPTIONAL / Mfa.REQUIREDを受け入れます。mfaSecondFactor.smsとmfaSecondFactor.otpは、各第2要素の方法を個別に有効または無効にします。mfaがMfa.OFFの場合、これらは効果がありません。mfa: Mfa.REQUIREDを設定し、両方の方法を無効にすると、誰もサインインを完了できなくなるため、synth時に拒否されます。

Webアプリケーションファイアウォール（WAF）

Section titled “Webアプリケーションファイアウォール（WAF）”

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

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

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

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

スタックにユーザーIDインフラストラクチャを追加する必要があります。Webサイトの_前に_宣言してください：

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コンストラクトは、Webサイトが認証のために正しいCognito User Poolを指すように、必要なランタイム設定を自動的に追加します。

認証されたユーザーへのアクセス許可

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', {
      integrations: MyApi.defaultIntegrations(this).build(),
    });


    api.grantInvokeAccess(identity.identityPool.authenticatedRole);


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