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

> Learn how to implement the Auth0 ACUL JS SDK Quickstart

# Auth0 ACUL JS SDK Quickstart

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

  * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and [custom domain](/docs/customize/custom-domains).
  * Enable [Identifier First Authentication](/docs/authenticate/login/auth0-universal-login/identifier-first) on your tenant to render the ACUL Login ID screen.
  * A development application or an [Auth0 SDK sample application](/docs/quickstart/spa/react/interactive) on `localhost` for Auth0 authentication.
  * A [database connection](/docs/authenticate/database-connections) to authenticate users.
  * An [Auth0 ACUL sample application](https://github.com/auth0-samples/auth0-acul-samples) to render the ACUL screens.
</Card>

<Warning>
  Advanced Customization for Universal Login is currently in Early Access. To learn more about Auth0 release stages, read [Product Release Stages](/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

The [Auth0 ACUL JS SDK](https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-js) allows you to implement Advanced Customization for <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=Universal+Login">Universal Login</Tooltip> (ACUL). It simplifies integrating authentication screens such as Login, Signup, <Tooltip tip="Passwordless: Form of authentication that does not rely on a password as the first factor." cta="View Glossary" href="/docs/glossary?term=Passwordless">Passwordless</Tooltip>, Passkey enrollment, among others screens, into your web applications.

This quickstart creates a preview of a customized [Login ID](/docs/customize/login-pages/advanced-customizations/reference/login-screen-classes#login-id-screen-class) screen using the Auth0 ACUL sample application. To learn more, visit the [Auth0 ACUL sample application repo](https://github.com/auth0-samples/auth0-acul-samples).

## 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.

```bash lines
# 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`.

```javascript lines
// Creates the local assets 

npm run build 
cd dist 

// Serves the assets from localhost

npx serve -p 8080 --cors
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  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
</Callout>

## Step 3. Enable ACUL in your Auth0 development tenant

Enable ACUL for the Login ID screen using a test [Auth0 Management API Explorer Token](/docs/secure/tokens/access-tokens/management-api-access-tokens/get-management-api-access-tokens-for-testing), the [Custom Domain](/docs/customize/custom-domains) address, and the local assets as HTML head tags.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  The local assets have different `hash` numbers, edit the `curl` command head tags accordingly.
</Callout>

```bash lines expandable
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](/docs/customize/login-pages/advanced-customizations/getting-started/deploy-and-host-advanced-customizations).

## Step 4. Render the ACUL Login ID screen

Start your development application or the [Auth0 SDK sample application](/docs/quickstart/spa/react/interactive) on your `localhost` to render the ACUL Login ID screen.

To learn more about the available screens, review [ACUL Screens](/docs/customize/login-pages/advanced-customizations/reference).

## SDK Reference

To learn more about the Auth0 ACUL JS SDK Login ID screen, review the [SDK reference GitHub repo](https://auth0.github.io/universal-login/classes/Classes.LoginId.html).