Skip to content
3 changes: 1 addition & 2 deletions main/docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -1187,8 +1187,7 @@
"pages": [
"docs/customize/login-pages/advanced-customizations/acul-use-cases",
"docs/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind",
"docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component",
"docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics"
"docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component"
]
},
"docs/customize/login-pages/advanced-customizations/reference"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
description: Learn ACUL use cases
description: Learn about ACUL use cases
'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png
'og:title': ACUL Use Cases
'og:url': https://auth0.com/docs/
permalink: acul-use-cases
sidebarTitle: Overview
title: ACUL Use Cases
'twitter:description': Learn ACUL use cases
'twitter:description': Learn about ACUL use cases
'twitter:title': ACUL Use Cases
---

ACUL supports various tech stacks to fully customize the login experience for your end-users and to fit numerous business cases with advanced customization. Use the following scenarios to customize your Universal Login [themes](/docs/customize/login-pages/universal-login/customize-themes), [templates](/docs/customize/login-pages/universal-login/customize-templates), and [text elements](/docs/customize/login-pages/universal-login/customize-text-elements). To learn more about Auth0’s hosted login, read [Auth0 Universal Login](/docs/authenticate/login/auth0-universal-login).
ACUL supports various tech stacks to fully customize the login experience for your end-users and to fit numerous business cases with advanced customization.
Use the following scenarios to customize your Universal Login [themes](/docs/customize/login-pages/universal-login/customize-themes), [templates](/docs/customize/login-pages/universal-login/customize-templates), and [text elements](/docs/customize/login-pages/universal-login/customize-text-elements). To learn more about Auth0’s hosted login, read [Auth0 Universal Login](/docs/authenticate/login/auth0-universal-login).

## Use cases

| Read... | To learn... |
| -------- | ------------------------------------- |
| [Create a theme with Tailwind](/docs/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind) | How to create a theme with Tailwind CSS variables with ACUL screens |
| [Integrate a custom component](/docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component) | How to integrate a custom component libary to an ACUL screen |
| [Add WebAuthn with Biometrics](/docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics) | How to add WebAuthn with Biometrics authentication to an ACUL screen |
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
description: Learn how to create a theme using tailwind css with ACUL
description: Learn how to create a theme using tailwind CSS with ACUL
'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png
'og:title': Create a theme with Tailwind CSS variables
'og:title': Create a theme with Tailwind
'og:url': https://auth0.com/docs/
permalink: create-theme-tailwind
title: Create a Theme with Tailwind CSS Variables
'twitter:description': Learn how to create a theme using tailwind css with ACUL
title: Create a theme with Tailwind
'twitter:description': Learn how to create a theme using tailwind CSS with ACUL
'twitter:title': Create a theme with Tailwind CSS variables
---

Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
description: Learn integrate a custom component library with ACUL
description: Learn how to integrate a custom component library with ACUL
'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png
'og:title': Integrate a custom component library
'og:url': https://auth0.com/docs/
permalink: integrate-custom-component
title: Integrate a Custom Component Library
'twitter:description': Learn integrate a custom component library with ACUL
'twitter:description': Learn how to integrate a custom component library with ACUL
'twitter:title': Integrate a custom component library
---
<Card title="Before you start">
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: Learn how to configure ACUL
permalink: configure
title: Configure ACUL
'twitter:description': Learn how to configure ACUL
'twitter:title': Configure ACU
'twitter:title': Configure ACUL
---

You can configure ACUL using the Auth0 Dashboard, Management API, and Infrastructure-as-Code(IaC) tools.
Expand All @@ -20,6 +20,7 @@ To configure ACUL, make sure your custom configuration files and assets are host
You can use the Dashboard to customize your screens with ACUL:

A. Navigate to [Dashboard > Branding > Universal Login](https://manage.auth0.com/dashboard/#/universal-login/customizations-new)

1. Select **Customize authentication screens**.
2. Select a <code>screen</code> to customize.
3. From **Settings > Rendering mode** select **Advanced mode**.
Expand All @@ -28,7 +29,8 @@ A. Navigate to [Dashboard > Branding > Universal Login](https://manage.auth0.com
<Frame><img src="/docs/images/cdy7uua7fh8z/ACUL/aculDashboard.png" alt="Auth0 Dashboard ACUL page" /></Frame>
6. Select **Head Tags** to add your own HTML `Head Tags`.
7. (Optional) Select **Additional Data** to select which additional data to send to the browser.
B. Select Save & Publish

B. Select **Save & Publish**

**Use the ACUL rendering configuration object**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ title: ACUL Development Workflow

There are two primary modes for the development of your ACUL screens: local development and live tenant integration testing.

**Local development**
## Local development

Customize your ACUL screens locally with the [Auth0 CLI](https://github.com/auth0/auth0-cli/) command `auth0 acul dev`. Quickly iterate your ACUL screens without any delays or backend dependencies with the [Universal Login Context Inspector](https://github.com/auth0/ul-context-inspector).

Expand All @@ -23,7 +23,7 @@ The Universal Login Context Inspector provides mock context data to test your au
* Select **Data Source** to select mock context data served from **Auth0 CDN** or mock context data from your **Local Development** project's `public/screens/{prompt}/{screen}` directory.
* Select the **Download JSON** icon to download the context data for a selected screen.

**Live tenant integration testing**
## Live tenant integration testing

Live tenant integration with the Auth0 CLI command `auth0 acul dev --connected` allows for End-to-End testing of your custom screen UIs and verifies integration with your Auth0 tenant.
Use `--connected` mode for integration testing after the UI is largely complete, as each reload restarts the authentication flow.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,6 @@ Select the **Download JSON** icon to download the mock context data file.

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.
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](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) documentation.