To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

Use Auth0 CLI to enable ACLU Login ID screen in your tenant.

In the root directory of your project, save the settings.json file.

Enable ACUL by running the following command in your terminal:

auth0 ul customize --rendering-mode advanced --prompt login-id --screen login-id --settings-file ./settings.json

Use one of the sample apps provided by Auth0 to initiate Universal Login

In the root folder of your project, clone the Auth0 sample application using the following command:

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

Change directory to the auth0-react-samples/Sample-01 folder and install the sample application using the following command:

cd auth0-react-samples/Sample-01
npm install

Change directory to the auth0-react-samples/Sample-01/src folder and add the auth_config.json file. Edit the file to add your tenant's Custom Domain.

Run the application

npm run dev

Run a single-page application to build custom login screens.

Configure the Boilerplate application

1. In the root folder of your project, open a new terminal and clone the Auth0 boilerplate application using the following command:

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

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS 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-js

3. Build the application

npm run build

4. Serve the assets

npx http-server dist -p 8080

Build the ACUL Login ID screen

Change directory to the auth0-acul-react-boilerplate/src/screens/loginId/ and edit the index.tsx file.

Rebuild the application with the following command:

npm run build

checkpoint.header

Select Log In.

You should now see a customized login page as shown below:

checkpoint.itWorked checkpoint.somethingNotRight