Skip to main content

Documentation Index

Fetch the complete documentation index at: https://auth0-maint-migrate-classic-univ-0515-330664.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

At this time, Auth0’s active development efforts are focused on Universal Login, and Classic Login no longer receives updates. Unless your specific use case requires the Classic experience, implementing Universal Login is recommended. For a feature comparison between login experiences, review Universal Login vs. Classic Login.
We recommend migrating your Classic Login screen implementation to Universal Login using 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.

Before you start

You need:
  • An Auth0 development tenant configured with Universal Login and a custom domain.
  • Auth0 CLI installed and configured with your development tenant.
  • A GitHub repository to contain your ACUL custom loign screens.
  • An inventory of your Classic Login experience assets:
    • UI components.
    • CSS/theme tokens and brand assets.
    • Validation rules (email format, required fields).
    • Error handling behavior.

​
Initialize an ACUL project

If you have not configured your development tenant with Auth0 CLI, use the auth0 login command.
Navigate to a location to build your ACUL project and run the following command: 
auth0 acul init acul-login --screens login-id,login-password
Auth0 CLI initializes your project with pre-built login-id and login-password authentication screens. To learn more, read auth0 aclu on GitHub.

​
Customize ACUL screens

Customize the login-id and login-password screens to align to your organization standards. You should consider the following:
  • 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).
You can develop your ACUL screens locally to customize them using the command: 
auth0 acul dev
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.

​
Validate the ACUL migration

To validate the user end-to-end login experience, you can use the auth0 acul command: 
auth0 acul dev --connected
You need to test and ensure the following:
  • The authentication flow uses your custom UI for the login-id and login-password screens and that they display correctly.
  • Wrong password and other server-side error messages are clearly rendered.
  • Users are successfully redirected back to your application.
  • Email validation, if enabled, behaves as expected.
To learn more, read ACUL live tenant integration testing.

​
Deploy ACUL screens to production tenant

The ACUL screen project includes a deployment setup you can use, as a starting point, to deploy your screens to production. The ACUL deployment steps include:
  • Building your screen asset bundles.
  • Publishing them to your CDN.
  • Enabling ACUL to your Auth0 production tenant.
To learn more, read ACUL Deployment workflow.

​
Learn more

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.