ダサいCognito Hosted UIを何とかする。(サンプルコードあり)

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