AWS Amplify Gen2でログイン画面をカスタマイズしよう
はじめに
先日、AWSさん主催の生成AIハッカソンに参加させていただき、その際にAWS Amplifyを用いて作成するログイン画面の自由度の高さを地味にはじめて知ったのでシェアです。
一言でまとめると
amplify-uiライブラリのAuthenticatorコンポーネントのpropsに様々な設定を入れるだけで、自由にカスタマイズできます。（※下記サンプルはReactです）
import { Authenticator } from '@aws-amplify/ui-react';
（中略）
<Authenticator
components={authComponent} // ログイン画面のヘッダー画像を設定
formFields={formFields} // ログイン項目や文字列を設定
loginMechanisms={["username"]} // ログインに活用する項目を設定
hideSignUp={true} // アカウント登録タブの非表示を設定
>
<BrowserRouter>
<ScrollOnPageChanged />
<Routes>
<Route path="/" element={<App />} />
<Route path="/:member/detail" element={<MemberDetail />} />
<Route path="/:member/topics" element={<Topics />} />
<Route path="/:member/registration" element={<Registration />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</BrowserRouter>
</Authenticator>
Authenticatorの設定内容集
ソースコードを見ると、Authenticatorが設定できる項目は下記のとおりです。この中の、Authenticatorのレイアウト設定に関するpropsをとりあげていきます。
componentsで設定できること
componentsでは、ヘッダーやフッターの設定ができます。このとき、すでにサンプルで提示しているように箱の上に設定することもできますが、箱の中にも設定することができます。
サンプルで利用した設定はこちらです。
const authComponent = {
Header() { // 箱の上に画像をヘッダーとして設定
return (
<div style={{ textAlign: "center" }}>
<img style={{ width: "70%" }} src={icon} alt="Dialog Icon" />
</div>
);
},
SignIn: {
Header() { // SignInの箱の中のヘッダーを初期化
return <div></div>;
},
},
ForgotPassword: {
Header() { // ForgotPasswordの箱の中のヘッダーを初期化
return <div></div>;
},
},
};
ヘッダー・フッターの指定はHTML形式で可能なため、かなり自由度高くカスタマイズ可能です。
なお、何も指定していない場合は、デフォルトで設定されているヘッダー・フッターが適用されます。そのため、消したいヘッダー・フッターがある場合は初期化して上書きください。
詳しくはこちらをご覧ください。
formFieldsで設定できること
formFieldsを活用して、フォームの文字列を設定できます。
サンプルで利用した設定はこちらです。
const formFields = {
signIn: {
username: {
label: "ユーザ名",
placeholder: "Enter your username",
},
password: {
label: "パスワード",
placeholder: "Enter your password",
},
},
forgotPassword: {
username: {
label: "パスワードをリセットしたいユーザ名",
placeholder: "Enter your username",
},
},
};
公式ガイドでは、i18nを用いた多言語対応の方法も紹介されています。ログイン画面以外の画面を多言語対応されている場合は、ログイン画面も多言語対応するとよいかなと思います。
hideSignUpで設定できること
hideSignUpを設定することで、SignUpタブが非表示になります。これにより、Amplifyで構築したサイトから新規ユーザが登録できなくなります。
なお、過去にデプロイしたタイミングで作成していたユーザは引き続きログイン可能です。また、AWSコンソールからAmazon Cognitoに直接新規ユーザを登録することは可能です。
initialStateで設定できること
ログイン画面を読み込んだ際に、デフォルトではSignIn画面が表示されます。しかし、initialState="signUp"を指定していたらSignUp画面、initialState="forgotPassword"を指定していたらforgotPassword画面が表示されます。
loginMechanismsで設定できること
ユーザーがログインするための識別子を指定できます。
Emailの場合はloginMechanisms={['email']}、Phone Numberの場合はloginMechanisms={['phone_number']}、Usernameの場合はloginMechanisms={['username']}を設定します。
passwordSettingsで設定できること
passwordSettingsは、非推奨となった項目なので設定不要です。ソースコードには念のため残っていますが、Amplifyのドキュメントからは削除されています。
signUpAttributesで設定できること
ユーザーをAmplifyのログイン画面で登録する際に、Amazon Cognitoで自動登録する項目を設定することができます。Attributesの登録例はこちらの通りです。
<Authenticator signUpAttributes={[
'address',
'email',
'name',
'phone_number',
]}>
serviceで設定できること
signUp、signIn、confirmSignIn、confirmSignUp、forgotPassword、forgotPasswordSubmit関数の上書きができます。
公式でサンプルありますので、ぜひご覧ください。
socialProvidersで設定できること
socialProviders={['amazon', 'apple', 'facebook', 'google']のように設定することで、記入したプロバイダー経由でのSignUp＆SignInが可能となります。
variationで設定できること
variationでは、ログイン画面を単体の画面にするか、モーダル画面にするかを設定できます。
デフォルト時は単体の画面で、モーダルにしたい場合にvariation="modal"を設定します。
その他設定できること
パスワード入力時にバリデーションチェックを入れたり、CSS設定を変更したりとたくさんできます
おわりに
参考までに、ハッカソンにてチームメンバーと開発したプロダクトはこちらです！
また、ハッカソンの優勝＆準優勝チームのプロダクト解説イベントもあるようです。本当に素敵なプロダクトだったので、興味ある方はぜひ！
Discussion