Auth0 ACUL JS SDK Quickstart

Before you start

You need:

The Auth0 ACUL JS SDK allows you to implement Advanced Customization for Universal Login (ACUL). It simplifies integrating authentication screens such as Login, Signup, Passwordless, 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.

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

Was this helpful?

/

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

Was this helpful?

/

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. 

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
    }
  }
]
    }'

Was this helpful?

/

To learn more about enabling ACUL, read Deploy and Host Advanced Customizations.

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.