Skip to content

docs: address feedback on customize/login-pages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx (Loop) #1205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nick-gagliardi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: address feedback on customize/login-pages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx (Loop) #1205

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions ...ages/advanced-customizations/acul-use-cases/migrate-classic-universal-login.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
---

<Warning>
Expand All @@ -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).

<Callout type="info">
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.
</Callout>

<Card title="Before you start">
You need:
* An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and a [custom domain](/docs/customize/custom-domains).
Expand Down Expand Up @@ -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).
Expand All @@ -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).
<Callout type="info">
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.
</Callout>

To learn more, read [ACUL Development Workflow](/docs/customize/login-pages/advanced-customizations/development-workflow).

## Validate the ACUL migration

Expand Down Expand Up @@ -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)

<Callout type="info">
**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.
</Callout>




Expand Down
Loading