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'

export class 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'

export class 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'
                    }
                }
            }
        })
    }
}