Before you start

You need:
Advanced Customization for Universal Login is currently in Early Access. To learn more about Auth0 release stages, read Product Release Stages.
The Auth0 ACUL JS SDK allows you to implement Advanced Customization for (ACUL). It simplifies integrating authentication screens such as Login, Signup, , Passkey enrollment, among others screens, into your web applications. This quickstart creates a preview of a customized Login ID screen using the Auth0 ACUL sample application. To learn more, visit the Auth0 ACUL sample application repo.

​
Step 1. Install the Auth0 ACUL sample application

Clone the Auth0 ACUL sample application, and then change directory to the auth0-acul-samples folder to install the application. 
# 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

​
Step 2. Import and serve locally the screen assets

ACUL requires the screen assets to be hosted on a public URL. For this quickstart, the Login ID screen assets are served from localhost. 
// Creates the local assets 

npm run build 
cd dist 

// Serves the assets from localhost

npx serve -p 8080 --cors
The npm run build command runs the ACUL sample application and creates the local assets.For example:
  • dist/index.html 1.24 kB │ gzip: 0.60 kB
  • dist/assets/shared/style.D3MiusWE.css 25.43 kB │ gzip: 5.29 kB
  • dist/assets/main.7v4nvq47.js 0.83 kB │ gzip: 0.48 kB │ map: 0.10 kB
  • dist/assets/login-id/index.CvgpuTUC.js 4.99 kB │ gzip: 2.03 kB │ map: 17.96 kB
  • dist/assets/shared/common.NFkCHmeC.js 38.45 kB │ gzip: 13.62 kB │ map: 94.57 kB
  • dist/assets/shared/vendor.DT6wNYwY.js 248.77 kB │ gzip: 79.66 kB │map: 1,202.16 kB
  • ✓ built in 973ms

​
Step 3. Enable ACUL in your Auth0 development tenant

Enable ACUL for the Login ID screen using a test Auth0 Management API Explorer Token, the Custom Domain address, and the local assets as HTML head tags.
The local assets have different hash numbers, edit the curl command head tags accordingly.
curl --location --request PATCH 'https://{<CUSTOM-DOMAIN>/api/v2/prompts/login-id/screen/login-id/rendering' \
    --header 'Content-Type: application/json' \
    --header 'Authorization: Bearer <API-TOKEN>' \
    --data '{
"rendering_mode": "advanced",
"head_tags": [
  {
  "tag": "base",
  "attributes": {
    "href": "http://127.0.0.1:8080/"
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/main.<hash>.js",
      "type": "module",
      "defer": true
    }
  },
  {
    "tag": "link",
    "attributes": {
      "rel": "stylesheet",
      "href": "http://127.0.0.1:8080/assets/shared/style.<hash>.css"
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/login-id/index.<hash>.js",
      "type": "module",
      "defer": true
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/shared/common.<hash>.js",
      "type": "module",
      "defer": true
    }
  },
  {
    "tag": "script",
    "attributes": {
      "src": "http://127.0.0.1:8080/assets/shared/vendor.<hash>.js",
      "type": "module",
      "defer": true
    }
  }
]
    }'
To learn more about enabling ACUL, read Deploy and Host Advanced Customizations.

​
Step 4. Render the ACUL Login ID screen

Start your development application or the Auth0 SDK sample application on your localhost to render the ACUL Login ID screen. To learn more about the available screens, review ACUL Screens.

​
SDK Reference

To learn more about the Auth0 ACUL JS SDK Login ID screen, review the SDK reference GitHub repo.