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" 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..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,16 +1,17 @@ --- -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 @@ -18,4 +19,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 | 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 --- 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 --- 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. - diff --git a/main/docs/customize/login-pages/advanced-customizations/configure.mdx b/main/docs/customize/login-pages/advanced-customizations/configure.mdx index 6623a4e17..5d5971c6f 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. @@ -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**. @@ -28,7 +29,8 @@ A. Navigate to [Dashboard > Branding > Universal Login](https://manage.auth0.com 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 + +B. Select **Save & Publish** **Use the ACUL rendering configuration object** 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. 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.