Add Custom Prompts to Your Identifier First Signup Screen
Before you start
以下が必要です。
ユニバーサルログインが構成されたAuth0開発テナント。
カスタムドメイン構成のアプリケーション。
ローカルホスト上で動作する開発用アプリまたはサンプルアプリ（Reactサンプルアプリなど）
Identifier First認証が有効になっている
パスワードを使用するデータベース接続
This guide will help you construct a Signup ID screen with a custom prompt for gathering a user's first and last name. To learn more, read the Getting Started guide and visit the SDK reference guide.
For more information about custom signup and login prompts, read Customize Signup and Login Prompts.
Setup
In your Auth0 Dashboard, set up Universal Login, Identifier First Authentication, and a Database Connection that uses passwords.
Run Auth0's single-page ACUL boilerplate application by executing the code below, which provides additional context for Advanced Customizations interfaces.
git clone https://github.com/auth0/auth0-acul-react-boilerplateWas this helpful?
After cloning the boilerplate app, change the directory to the auth0-acul-react-boilerplate folder and install the Advanced Customizations SDK.
// open the directory where you git clone the boilerplate
cd auth0-acul-react-boilerplate && npm i
// Install the ACUL JS SDK
npm install @auth0/auth0-acul-jsWas this helpful?
Build the signup-id screen
Complete the Build Identifier First Signup with Password guide.
Add a custom prompt field
In your Signup ID index.tsx file, add the following code:
export const SignupIdScreen = () => {
const signupManager = new SignupId();
const [firstName, setfirstName] = useState('');
...
return (
<div>
...
...
// Custom input
<input
type="text"
name="ulp-firstName"
placeholder="Enter your name"
value={firstName}
onChange={(e) => setfirstName(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
// Pass the input value to the login payload
<button
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={() => signupManager.login({ email: email, 'ulp-firstname': firstName})}
>
Continue
</button>
...
...
</div>
);
};
export default SignupIdScreen;Was this helpful?
The signup-id POST payload now includes ulp-firstName.
Validate and save your captured data
Complete the validation section of Customize Signup and Login Prompts using the code below to capture and save the data.
exports.onExecutePreUserRegistration = async (event, api) => {
const firstName = event.request.body['ulp-firstName'];
if(!firstName) {
api.validation.error("invalid_payload", "Missing First Name");
return;
}
api.user.setUserMetadata("firstName", firstName);
};Was this helpful?