AWS Cognitoは、ウェブおよびモバイルアプリケーション向けに設計された、完全にマネージドされたIDプラットフォームです。
Hosted UIを利用する主な利点の一つは、AWSがホスティング、メンテナンス、およびスケーリングを完全に管理することにあります。

しかし、この利点にはトレードオフが存在します。Hosted UIの「管理されている」という性質は、UIの視覚的および機能的な制御に関して、開発者が利用できるカスタマイズの範囲に固有の制限を課します。
したがって、プロジェクトにおいて、迅速なデプロイと運用負担の軽減を優先するか、あるいは高度に具体的で動的なUIデザインの完全な制御を優先するかは、根本的な意思決定ポイントとなります。

そこで早速ですが、以下のサイトのログイン画面を確認してみてください。
こちらはCognito Hosted UIで作成した画面です。

カスタマイズの難易度が高いHosetd UIですが、ある程度のレベルであれば改善は可能です。
そして、Hosted UIをカスタマイズすることで、アプリケーションの認証体験を全体的なブランドアイデンティティと一致させることが可能になるのです。

AWS Cognito Hosted UIで許可されるCSSクラス名

Amazon Cognitoは、開発者がスタイル設定のターゲットとして使用できる、事前に定義された限定的なCSSクラス名セットを提供しています。これらのクラスは、Hosted UI内の特定の要素に対応しています。
カスタマイズ可能なクラスの包括的なリストは以下の通りです。
-customizable クラスが設定されていることに、留意しておいてください。

クラス名	UI要素の説明
`background-customizable`	ページの背景
`banner-customizable`	バナー領域
`errorMessage-customizable`	エラーメッセージ
`idpButton-customizable`	IDプロバイダーボタン (例: Google, Facebook)
`idpButton-customizable:hover`	IDプロバイダーボタンのホバー状態
`idpDescription-customizable`	IDプロバイダーの説明テキスト
`inputField-customizable`	入力フィールド
`inputField-customizable:focus`	入力フィールドのフォーカス状態
`label-customizable`	フォームのラベルテキスト
`legalText-customizable`	法的テキスト
`logo-customizable`	アップロードされたカスタムロゴ
`passwordCheck-valid-customizable`	パスワードチェックの有効状態
`passwordCheck-notValid-customizable`	パスワードチェックの無効状態
`redirect-customizable`	リダイレクトメッセージ
`socialButton-customizable`	ソーシャルプロバイダーボタン
`submitButton-customizable`	フォーム送信ボタン
`submitButton-customizable:hover`	フォーム送信ボタンのホバー状態
`textDescription-customizable`	一般的な説明テキスト

サンプルコード

今回の作成したアプリケーションでのCSSは次のとおりです。

/* 背景のカスタマイズ */
.background-customizable {
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2), 0 0 0 10000px #29243d;
    border-radius: 10px;
    background-color: #312d4b;
    color: #9155fd;
}

/* バナーのスタイル */
.banner-customizable {
    padding: 0;
    background-color: #312d4b;
    /* Googleブルー */
}

/* ロゴのサイズ調整 */
.logo-customizable {
    max-width: 100%;
    max-height: 100%;
}

/* ラベルのスタイル */
.label-customizable {
    font-weight: 600;
    color: #d5d1eb;
}

/* 説明テキストのスタイル */
.textDescription-customizable {
    padding-top: 20px;
    padding-bottom: 10px;
    display: block;
    font-size: 18px;
    color: #ffffff;
}

/* 入力フィールドのスタイル */
.inputField-customizable {
    width: 100%;
    height: 48px;
    color: black;
    background-color: #d5d1eb;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 16px;
}

/* サブミットボタンのスタイル */
.submitButton-customizable {
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0;
    height: 48px;
    width: 100%;
    color: #d5d1eb;
    background-color: #9155FD;
}

/* サブミットボタンのホバー時のスタイル */
.submitButton-customizable:hover {
    background-color: #b08cff;
}

.redirect-customizable {
    color: #d5d1eb;
}