Add Custom Prompts to Your Identifier First Signup Screen

Guide to implement ACUL for the ID First Login flow

Before you start

You need:

• An Auth0 development tenant configured with Universal Login and custom domain.
• Enable Identifier First Authentication on your tenant to render the ACUL Login ID screen.
• A development application or an Auth0 SDK sample application on localhost for Auth0 authentication.
• A database connection to authenticate users.
• An Auth0 ACUL sample application to render the ACUL screens.

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-boilerplate

After cloning the boilerplate app, change the directory to the auth0-acul-react-boilerplate folder and install the Advanced Customizations SDK.

#Clone the ACUL sample application into the root folder of your project

git clone https://github.com/auth0-samples/auth0-acul-samples.git

#Change directory to install the ACUL sample application 

cd auth0-acul-samples && npm i

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:

Add Custom Prompts

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;

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

Learn more

• Advanced Customizations for Universal Login
• Getting Started with ACUL
• Configure ACUL Screens