From 0cb6df92e556064e1724587d8a174da2284682a8 Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:27:57 +0100 Subject: [PATCH 01/13] Update configure.mdx --- .../login-pages/advanced-customizations/configure.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/configure.mdx b/main/docs/customize/login-pages/advanced-customizations/configure.mdx index 6623a4e17..a0b903aed 100644 --- a/main/docs/customize/login-pages/advanced-customizations/configure.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/configure.mdx @@ -27,8 +27,8 @@ A. Navigate to [Dashboard > Branding > Universal Login](https://manage.auth0.com 5. (Optional) Select **Advanced mode filters**. Auth0 Dashboard ACUL page 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 + 7. (Optional) Select **Additional Data** to select which additional data to send to the browser.
+B. Select **Save & Publish** **Use the ACUL rendering configuration object** From abd846f08d66327835d87c8a69eec30a666cb356 Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:28:31 +0100 Subject: [PATCH 02/13] Update acul-use-cases.mdx --- .../login-pages/advanced-customizations/acul-use-cases.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx index f8c7e1df7..1dbd41d7e 100644 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx @@ -18,4 +18,3 @@ ACUL supports various tech stacks to fully customize the login experience for yo | -------- | ------------------------------------- | | [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 | From 721616689c2420ec69f90e25b886a98a720ef2ce Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:29:15 +0100 Subject: [PATCH 03/13] Delete main/docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics.mdx --- .../acul-use-cases/webauthn-biometrics.mdx | 85 ------------------- 1 file changed, 85 deletions(-) delete mode 100644 main/docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics.mdx diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics.mdx deleted file mode 100644 index 5ab80482c..000000000 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/webauthn-biometrics.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -description: Learn how to configure WebAuthn with Biometrics authentication and ACUL -'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png -'og:title': Add WebAuthn with Biometrics authentication to ACUL -'og:url': https://auth0.com/docs/ -permalink: webauthn-biometrics -title: Add WebAuthn with Biometrics to ACUL -'twitter:description': Learn how to configure WebAuthn with Biometrics authentication and ACUL -'twitter:title': Add WebAuthn with Biometrics authentication to ACUL ---- - - -You need: - * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and a [custom domain](/docs/customize/custom-domains). - * An Auth0 [First Party Application](/docs/get-started/auth0-overview/create-applications#create-applications). - * Enable [dentifier First + Biometrics](/docs/authenticate/login/auth0-universal-login/passwordless-login/webauthn-device-biometrics) in your Auth0 tenant. - * [Node.js](http://Node.js) V22+ - * The [Auth0 CLI Tool](https://github.com/auth0/auth0-cli) [authenticated to your existing tenant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant). - * To review the [ACUL Quickstart guide](/docs/customize/login-pages/advanced-customizations/quickstart) - - -To add support for [WebAuthn with Device Biometrics](/docs/secure/multi-factor-authentication/fido-authentication-with-webauthn/configure-webauthn-device-biometrics-for-mfa#configure-webauthn-with-device-biometrics-for-mfa) using ACUL, you need to add a `POST` request to the `login-password` screen. - -The `POST` request will detect if Identifier First + Biometrics has been enabled in your tenant and seamlessly redirect the user to the `mfa-webauthn-platform-challenge` screen. - - mfa-webauthn-challenge-user-initiated reference screenshot - -The `POST` request has the following minimum requirements: - -* `state`: transaction state from the server (`transaction.state`) -* `detect-browser-capabilities` -* `js-available` -* `is-brave` -* `webauthn-available` -* `webauthn-platform-available` - -1. Use the Auth0 CLI tool to create an ACUL project. - -```bash -auth0 acul init -``` -2. Select the `login-password` screen - -3. Add the `POST` request to the `login-password` screen: - -```javascript -function submitBrowserCapabilities() { - // Create a hidden form - const form = document.createElement("form"); - form.method = "POST"; - form.style.display = "none"; - - // Get values - const isBrave = navigator.brave ? await navigator.brave.isBrave() : false; - const hasPublicKeyCred = typeof window.PublicKeyCredential !== 'undefined'; - const hasWebAuthn = hasPublicKeyCred && nnavigator !== 'undefined' && navigator.credentials !== 'undefined'; - const hasWebAuthnPlat = hasPublicKeyCred ? await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() : false; - - // Set values - const formValues = { - "state": window.universal_login_context.transaction.state, - "detect-browser-capabilities": true, - "js-available": true, - "is-brave": isBrave, - "webauthn-available": hasWebAuthn, - "webauthn-platform-available": hasWebAuthnPlat, - } - - // Populate the form - for (const [key, value] of Object.entries({ ...formValues })) { - const input = document.createElement("input"); - input.value = value; - input.name = key; - form.appendChild(input); - } - - // Append and submit form - document.body.appendChild(form); - form.submit(); -} -``` - - -Do not trigger WebAuthn operations here, this is only capability detection. - From aa51ff8c126ca520bf7ae9136985d9c73d9a78bb Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:30:23 +0100 Subject: [PATCH 04/13] Update docs.json --- main/docs.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/main/docs.json b/main/docs.json index dbdf810fa..858d0c8f6 100644 --- a/main/docs.json +++ b/main/docs.json @@ -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" From 230c7273e8154c3d6a2622614e83837918e7fb7c Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:43:06 +0100 Subject: [PATCH 05/13] Update configure.mdx --- .../customize/login-pages/advanced-customizations/configure.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/configure.mdx b/main/docs/customize/login-pages/advanced-customizations/configure.mdx index a0b903aed..a43422318 100644 --- a/main/docs/customize/login-pages/advanced-customizations/configure.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/configure.mdx @@ -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. From c766d912573c644d4d2aa34c66c814f3940d92e8 Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:47:23 +0100 Subject: [PATCH 06/13] Update configure.mdx --- .../customize/login-pages/advanced-customizations/configure.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/configure.mdx b/main/docs/customize/login-pages/advanced-customizations/configure.mdx index a43422318..bbe1e452b 100644 --- a/main/docs/customize/login-pages/advanced-customizations/configure.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/configure.mdx @@ -27,7 +27,7 @@ A. Navigate to [Dashboard > Branding > Universal Login](https://manage.auth0.com 5. (Optional) Select **Advanced mode filters**. Auth0 Dashboard ACUL page 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.
+ 7. (Optional) Select **Additional Data** to select which additional data to send to the browser.
B. Select **Save & Publish** **Use the ACUL rendering configuration object** From d7e6243f9db085cbebfc68f613ba193ead449746 Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:53:52 +0100 Subject: [PATCH 07/13] Update configure.mdx --- .../login-pages/advanced-customizations/configure.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/configure.mdx b/main/docs/customize/login-pages/advanced-customizations/configure.mdx index bbe1e452b..5d5971c6f 100644 --- a/main/docs/customize/login-pages/advanced-customizations/configure.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/configure.mdx @@ -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 screen to customize. 3. From **Settings > Rendering mode** select **Advanced mode**. @@ -27,7 +28,8 @@ A. Navigate to [Dashboard > Branding > Universal Login](https://manage.auth0.com 5. (Optional) Select **Advanced mode filters**. Auth0 Dashboard ACUL page 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.
+ 7. (Optional) Select **Additional Data** to select which additional data to send to the browser. + B. Select **Save & Publish** **Use the ACUL rendering configuration object** From 971c9fc67e54ec917f94caf3b82a54e68c526d5a Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 21:58:52 +0100 Subject: [PATCH 08/13] Update quickstart.mdx --- .../login-pages/advanced-customizations/quickstart.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/quickstart.mdx b/main/docs/customize/login-pages/advanced-customizations/quickstart.mdx index 82c7e6013..dc8d27816 100644 --- a/main/docs/customize/login-pages/advanced-customizations/quickstart.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/quickstart.mdx @@ -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. From e3daf483f35668abe450889891d3270edf4b816d Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 22:05:52 +0100 Subject: [PATCH 09/13] Update development-workflow.mdx --- .../advanced-customizations/development-workflow.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/development-workflow.mdx b/main/docs/customize/login-pages/advanced-customizations/development-workflow.mdx index c598bd2f7..6b46b4e65 100644 --- a/main/docs/customize/login-pages/advanced-customizations/development-workflow.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/development-workflow.mdx @@ -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). @@ -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. From a5d27c18ff517bc30be4d56d3f0d0dbec042b3cc Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 22:07:47 +0100 Subject: [PATCH 10/13] Update integrate-custom-component.mdx --- .../acul-use-cases/integrate-custom-component.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx index 7294637ce..e0efc961a 100644 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx @@ -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 --- From c516701c38d302b4de3b3a18645890e1543d8c8c Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 22:11:08 +0100 Subject: [PATCH 11/13] Update create-theme-tailwind.mdx --- .../acul-use-cases/create-theme-tailwind.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx index e404e1273..998a0c728 100644 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx @@ -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 --- From 907c2588bbda90af0a8f4160b1c833ee2e872e4f Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 22:12:42 +0100 Subject: [PATCH 12/13] Update acul-use-cases.mdx --- .../login-pages/advanced-customizations/acul-use-cases.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx index 1dbd41d7e..d889bc8d0 100644 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx @@ -6,11 +6,12 @@ description: Learn ACUL use cases 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 From 4a46137f514209ed07f560b3a5bd799487133dc4 Mon Sep 17 00:00:00 2001 From: Carlos Fung Date: Sat, 13 Dec 2025 22:17:54 +0100 Subject: [PATCH 13/13] Update acul-use-cases.mdx --- .../login-pages/advanced-customizations/acul-use-cases.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx index d889bc8d0..1cf83ecd4 100644 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases.mdx @@ -1,5 +1,5 @@ --- -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/