diff --git a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx index 4f51f9c430..3b009d3a0b 100644 --- a/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx +++ b/main/docs/customize/login-pages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx @@ -1,7 +1,7 @@ --- description: Describes how to migrate from Classic Login to Universal Login with ACUL. title: Migrate from Classic Login to Universal Login with ACUL -validatedOn: 2026-02-03 +validatedOn: 2026-05-15 --- @@ -11,6 +11,10 @@ For a feature comparison between login experiences, review [Universal Login vs. We recommend migrating your [Classic Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience#classic-login-experience) screen implementation to [Universal Login](/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) using [Advanced Customizations for Universal Login (ACUL)](/docs/customize/login-pages/advanced-customizations#advanced-customizations-for-universal-login-acul). + +The Auth0 CLI generates React-based starter templates for ACUL. While ACUL supports any frontend framework, the CLI templates and development tooling (including the Context Inspector) are built with React. If you prefer to use vanilla JavaScript or another framework, you can reference the generated code and adapt it to your chosen stack. + + You need: * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and a [custom domain](/docs/customize/custom-domains). @@ -45,7 +49,7 @@ Customize the `login-id` and `login-password` screens to align to your organizat You should consider the following: - * Reuse existing CSS/theme and React components. + * Reuse existing CSS/theme and UI components (the CLI-generated template uses React). * Apply branding (assets, typography, layout). * Add basic client-side validation (email required/format; password required). * Standardize error presentation (consistent and accessible). @@ -56,7 +60,11 @@ You can develop your ACUL screens locally to customize them using the command: auth0 acul dev ``` -To learn more, read [ACUL Development Workflow](/docs/customize/login-pages/advanced-customizations/development-workflowhttps://auth0.com/docs/customize/login-pages/advanced-customizations/development-workflow). + +The `auth0 acul dev` command uses the `DevScreenManager.tsx` component (included in the CLI template) to wrap your screens with the Context Inspector development tool. This component requires React. + + +To learn more, read [ACUL Development Workflow](/docs/customize/login-pages/advanced-customizations/development-workflow). ## Validate the ACUL migration @@ -94,6 +102,10 @@ To learn more, read [ACUL Deployment workflow](/docs/customize/login-pages/advan * [Auth0 CLI Reference Documentation](https://auth0.github.io/auth0-cli/auth0_acul.html) * [ACUL Sample Application](https://github.com/auth0-samples/auth0-acul-samples) + +**Using ACUL with other frameworks:** While the CLI generates React templates, ACUL itself is framework-agnostic. You can build custom screens using vanilla JavaScript, Vue, Angular, or any other framework by following the ACUL API contracts. Refer to the generated React code as a reference implementation. + +