アカウント作成で入力可能な項目を増やす
CognitoとAmplifyで作成したログイン認証画面のアカウント作成画面では、デフォルトではメールアドレス入力とパスワード入力、パスワード確認入力しかありません。
ユーザー名などの他の情報はアカウント作成画面でユーザーに入力させてしまうと、コンバージョン率が下がることが判明しているため、アカウント作成画面では行わないことが多いです。
しかし、住所やクレジットカード情報などの情報入力が不要で、アカウント作成で入力するものがメールアドレスとパスワード以外に1、2項目程度しかなければアカウント作成時に入力するようアカウント作成画面を作ることがあります。
アカウント作成画面にユーザー名と年齢の入力項目を追加
この記事では例としてアカウント作成画面にユーザー名と年齢の入力項目を追加する方法について解説します。
完成形は下図になります。
まず、ユーザー名はnicknameの属性を利用できますが、年齢はage属性が用意されていないためカスタム属性でcustom:ageを追加します。
カスタム属性の追加はユーザープールの左メニューのサインアップから追加できます。
カスタム属性を追加したら<Authenticator>のformFieldsに以下のように追加します。
TSX
import { Authenticator } from '@aws-amplify/ui-react';
import { fetchUserAttributes, getCurrentUser } from 'aws-amplify/auth';
import { useState } from 'react';
import '@aws-amplify/ui-react/styles.css';
import './App.css';
function App() {
const [userNickname, setUserNickname] = useState<string>('');
const [userAge, setUserAge] = useState<string>('');
const getUserAttributes = async () => {
try {
await getCurrentUser();
const attributes = await fetchUserAttributes();
setUserNickname(attributes['nickname'] || '');
setUserAge(attributes['custom:age'] || '');
} catch {
console.log('ログインしていません。');
}
};
return (
<Authenticator
formFields={{
signUp: {
nickname: {
label: 'ユーザー名',
placeholder: 'ユーザー名を入力',
isRequired: true,
order: 1
},
'custom:age': {
label: '年齢',
placeholder: '年齢を入力',
isRequired: true,
order: 2
},
email: {
label: 'メールアドレス',
placeholder: 'メールアドレスを入力',
order: 3
},
password: {
label: 'パスワード',
placeholder: 'パスワードを入力',
order: 4
},
confirm_password: {
label: '確認用パスワード',
placeholder: '確認用パスワードを入力',
order: 5
},
}
}}
>
{({ signOut, user }) => {
if (user && (!userNickname || !userAge)) {
getUserAttributes();
}
return (
<main>
<h1>ようこそ、{userNickname} さん</h1>
<h1>年齢: {userAge}</h1>
<h1>メールアドレス: {user?.signInDetails?.loginId}</h1>
<button onClick={signOut}>ログアウト</button>
</main>
);
}}
</Authenticator>
)
}
export default Appこのコードでアカウントを作成してログインすると、入力したユーザー名、年齢、メールアドレスをログイン後に表示できます。
