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つの方法があります：

このジェネレーターを実行@aws/nx-plugin:ts#website#auth

pnpm nx g @aws/nx-plugin:ts#website#auth
コマンドを組み立てる5

必須

変更されるファイルを確認するためにドライランを実行することもできます

オプション

Section titled “オプション”
ジェネレーターオプション5 オプション
project必須string

ウェブサイトのルートディレクトリ。

cognitoDomainstring

使用するCognitoドメインプレフィックス。省略した場合、npmスコープとウェブサイトプロジェクト名から値が導出されます。

allowSignupbooleanデフォルト: false

自己サインアップを許可するかどうか

iacenumデフォルト: inherit

優先するIaCプロバイダー。デフォルトでは、初期選択から継承されます。

inheritcdkterraform
preferInstallDependenciesbooleanデフォルト: true

ジェネレーター実行後に依存関係のインストールを優先するかどうか。複数のジェネレーターをバッチ処理する際にインストールを延期する場合は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 “アーキテクチャ”

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

Loading the diagram…

脅威保護

Section titled “脅威保護”

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

ユーザーのリスク評価を観察した後、完全機能の強制に切り替えて、リスクの高いアクティビティに自動的に対応し（例：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を管理したい場合や、Web ACLが不要な場合は、これを無効にできます：

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

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

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

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

packages/infra/src/stacks/application-stack.ts
import { Stack, StackProps } 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, props?: StackProps) {
    super(scope, id, props);


    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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);


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