> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Guide to implement ACUL for the ID First Login flow

# Add Custom Prompts to Your Identifier First Signup Screen

<Card title="Before you start">
  You need:

  * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and [custom domain](/docs/customize/custom-domains).
  * Enable [Identifier First Authentication](/docs/authenticate/login/auth0-universal-login/identifier-first) on your tenant to render the ACUL Login ID screen.
  * A development application or an [Auth0 SDK sample application](/docs/quickstart/spa/react/interactive) on `localhost` for Auth0 authentication.
  * A [database connection](/docs/authenticate/database-connections) to authenticate users.
  * An [Auth0 ACUL sample application](https://github.com/auth0-samples/auth0-acul-samples) to render the ACUL screens.
</Card>

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](/docs/customize/login-pages/advanced-customizations/getting-started) and visit the [SDK reference guide](/docs/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart).

For more information about custom signup and login prompts, read [Customize Signup and Login Prompts](/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts#validate-and-save-captured-data).

### Setup

In your <Tooltip tip="Auth0 Dashboard: Auth0's main product to configure your services." cta="View Glossary" href="/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, set up [Universal Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), [Identifier First Authentication](/docs/authenticate/login/auth0-universal-login/identifier-first), and a [Database Connection](/docs/get-started/applications/set-up-database-connections) that uses passwords.

Run Auth0's single-page ACUL boilerplate application by executing the code below, which provides additional context for Advanced Customizations interfaces.

```bash lines
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](/docs/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart).

```bash lines
#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](/docs/customize/login-pages/advanced-customizations/build-user-flows/id-first-signup) guide.

### Add a custom prompt field

In your Signup ID `index.tsx` file, add the following code:

<Accordion title="Add Custom Prompts">
  ```jsx lines expandable
  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;
  ```
</Accordion>

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](/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts#validate-and-save-captured-data) using the code below to capture and save the data.

```js lines
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](/docs/customize/login-pages/advanced-customizations)
* [Getting Started with ACUL](/docs/customize/login-pages/advanced-customizations/getting-started)
* [Configure ACUL Screens](/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens)