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

> Get started with ACUL quickstart

# ACUL Quickstart

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

  * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and a [custom domain](/docs/customize/custom-domains).
  * An Auth0 [First Party Application](/docs/get-started/auth0-overview/create-applications#create-applications).
  * [Identifier First Authentication](/docs/authenticate/login/auth0-universal-login/identifier-first) enabled in your Auth0 tenant.
  * [Node.js](http://Node.js) V22
  * [Auth0 CLI](https://auth0.github.io/auth0-cli/) installed and configured with your development tenant.
</Card>

The Auth0 CLI allows you to implement and test Advanced Customization for Universal Login (ACUL) screens. It simplifies customizing authentication screens (such as Login, Signup, Passwordless, and Passkey enrollment) to exactly match your web applications.

Follow these steps to create an ACUL project and a custom `login_id` screen using Auth0 CLI:

## 1. Initialize an ACUL sample application

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  If you have not configured your development tenant with Auth0 CLI, use the `auth0 login` command to configure your tenant.
</Callout>

Navigate to a location to build your project and run the following command:

```bash theme={null}
auth0 acul init "Your_App_Name"
```

1. Select **React (with ACUL React SDK)**.
2. Select the **login-id** screen.
3. At **Would you like to proceed with installing the required dependencies using 'npm install'?** Enter **y**.

Auth0 CLI creates a new project directory with the provided application name.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  If you did not select **y** to install the required dependencies, navigate to your project directory and run the `npm install` command.
</Callout>

## 2. (Optional) Add additional screens to your project

Select additional screens for your project by running the following command:

```bash theme={null}
auth0 acul screen add SCREEN_NAME 
```

## 3. Launch the Login Id screen with Universal Login Context Inspector

Use the UL context inspector to launch the Login ID screen:

1. Navigate to your project directory and run the following command:

```bash theme={null}
auth0 acul dev
```

2. Confirm the project directory
3. Select the port to share the local assets, by default Port `55444`

The Universal Login Context Inspector opens a new browser window with the Login Id screen.

## 4. Update the sample Login Id screen

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  The command auth0 acul dev builds the ACUL screens, hosts your assets locally, and continuously watches for updates to the assets directory; allowing you to test your screens locally. To learn more, read [Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) command documentation.
</Callout>

1. In your project directory, edit the `/src/index.css` directory and update the logo widget with your logo url:

`--ul-theme-widget-logo-url: "Your-Logo-URL";`

2. Save the change.

The local dev server automatically refreshes with the latest change.

## 5. Customize the context data for your authentication screens

Using the Universal Login Context Inspector, you can customize the default context data to test your authentication screens against tenant specific configurations.

1. Create a local version of the mock context data for a screen in your project:

Select the **Download JSON** icon to download the mock context data file.

<Frame>
  <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/nRTYX19FsgfcTLla/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=nRTYX19FsgfcTLla&q=85&s=6d7f1286da9a282790e319d212427094" alt="Auth0 Dashboard ACUL page" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

2. Rename and move the downloaded file to the `public/screens/{prompt}/{screen}` and add it to the `public/manifest.json file` in your project's directory.

For example, the downloaded `login-id-login-id-context.json` file is renamed `login-id.json` and is moved to `/public/screens/login-id/login-id.json`.

3. Select **Local Development** from the Universal Login Context Inspector **Data source** to load the local version of the mock context for the screen.

To learn more, read [Auth0 CLI ACUL](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) documentation.