AWS CDK で Cognito の Managed Login を設定する

2025年1月25日にリリースされた AWS CDK v2.177.0で Amazon Cognito の Managed Login（マネージドログイン）が L2 コンストラクト UserPoolDomainでサポートされていた👌リリースノートには cognito: managed loginとしか書かれてなく，イメージを掴むために実際に試してみることにした❗️

github.com

👾 cognito-managed-login.ts（デフォルト）

AWS CDK v2.177.0 から UserPoolDomainに managedLoginVersionを設定できるようになっていた💡値としては 1: Hosted UI (Classic)もしくは 2: Managed Loginを設定することができて，AWS CDK だと ManagedLoginVersion enum を使う．

docs.aws.amazon.com

import{
    Stack,
    StackProps,
    aws_cognito,
}from'aws-cdk-lib'import{ Construct }from'constructs'exportclass CognitoManagedLoginStack extends Stack {constructor(scope:Construct, id:string, props?:StackProps) {super(scope, id, props)

        const userPool = new aws_cognito.UserPool(this, 'UserPool', {userPoolName: 'sandbox',
        })

        userPool.addDomain('UserPoolDomain', {cognitoDomain: {domainPrefix: 'sandbox-managed-login',
            },
            managedLoginVersion: aws_cognito.ManagedLoginVersion.NEWER_MANAGED_LOGIN,
        })

        const userPoolClient = userPool.addClient('UserPoolClient', {userPoolClientName: 'sandbox-managed-login',
            generateSecret: false,
        })

        new aws_cognito.CfnManagedLoginBranding(this, 'ManagedLoginBranding', {userPoolId: userPool.userPoolId,
            clientId: userPoolClient.userPoolClientId,
            useCognitoProvidedValues: true,
        })
    }}

デプロイすると Managed Login（マネージドログイン）のデフォルトスタイルでログイン画面を表示できた💡

👾 cognito-managed-login.ts（カスタマイズ）

Managed Login（マネージドログイン）でスタイルをカスタマイズする場合は L1 コンストラクト CfnManagedLoginBrandingを使う必要がある．将来的にここも L2 になると良さそう👌

docs.aws.amazon.com

またカスタマイズ内容を assetsと settingsに設定するときは，ドキュメントにも書いてある通り，一度マネジメントコンソールでスタイルを設定してから aws cognito-idp describe-managed-login-branding-by-clientコマンドで出力して転記するのが良いと思う．今回は最低限のカスタマイズとして「ダークモード」にしてみた．

import{
    Stack,
    StackProps,
    aws_cognito,
}from'aws-cdk-lib'import{ Construct }from'constructs'exportclass CognitoManagedLoginStack extends Stack {constructor(scope:Construct, id:string, props?:StackProps) {super(scope, id, props)

        const userPool = new aws_cognito.UserPool(this, 'UserPool', {userPoolName: 'sandbox',
        })

        userPool.addDomain('UserPoolDomain', {cognitoDomain: {domainPrefix: 'sandbox-managed-login',
            },
            managedLoginVersion: aws_cognito.ManagedLoginVersion.NEWER_MANAGED_LOGIN,
        })

        const userPoolClient = userPool.addClient('UserPoolClient', {userPoolClientName: 'sandbox-managed-login',
            generateSecret: false,
        })

        new aws_cognito.CfnManagedLoginBranding(this, 'ManagedLoginBranding', {userPoolId: userPool.userPoolId,
            clientId: userPoolClient.userPoolClientId,
            returnMergedResources: true,
            settings: {'categories': {'global': {'colorSchemeMode': 'DARK'}}}})
    }}

デプロイすると Managed Login（マネージドログイン）のカスタマイズしたスタイルでログイン画面を表示できた💡