Skip to main content

Before you start

You need:
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

If you have not configured your development tenant with Auth0 CLI, use the auth0 login command to configure your tenant.
Navigate to a location to build your project and run the following command: 
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.
If you did not select y to install the required dependencies, navigate to your project directory and run the npm install command.

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

Select additional screens for your project by running the following command: 
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:
auth0 acul dev
  1. Confirm the project directory
  2. 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

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 command documentation.
  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";
  1. 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.
Auth0 Dashboard ACUL page
  1. 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 documentation.