Auth0 Universal Login (2024)

Auth0 Universal Login provides the essential feature of an authorization server: the login flow. When a user needs to prove their identity to gain access to your application, you can redirect them to Universal Login and let Auth0 handle the authentication process.

With Universal Login, you don’t have to complete any integration work to accommodate different methods of authentication. You can start with a simple identifier and password flow, then add additional features, such as social login or multi-factor authentication (MFA), to customize a secure and user-friendly login experience.

Configuring Universal Login is dynamic and does not require any application-level changes, as web pages hosted on Auth0’s centralized authentication server completely drive the login flow. Additionally, you don’t need to manually update your code for applications to benefit from improvements Auth0 makes to Universal Login.

From the Auth0 Dashboard, you can customize the appearance and behavior of login pages to create a consistent, branded experience. For advanced use cases, you can also change the code of each page individually.

To learn more about the differences between Universal Login and embedded login, review Centralized Universal Login vs. Embedded Login.

On your Auth0 Dashboard, you can choose which experience to use for default login pages under Branding > Universal Login > Advanced Options.

Auth0 offers two hosted login experiences:

• Universal Login offers a streamlined experience for users and does not require the use of JavaScript for customization.

• Classic Login uses JavaScript controls for each page of the login flow.

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.

To learn more about how these two experiences compare, review Universal Login vs. Classic Login.

Auth0 follows WCAG 2.2 standards to improve access to Universal Login flows for people who use assistive technologies. You can optionally enable WCAG using the toggle on your Auth0 Dashboard by navigating to Branding > Universal Login > Advanced Options.

You can also enable this feature in the Management API by updating the enable_ulp_wcag_compliance flag in the Update Prompt Settings endpoint:

curl -L -X PATCH 'https://<tenant_name>.auth0.com/api/v2/prompts' \-H 'Content-Type: application/json' \-H 'Accept: application/json' \-H 'Authorization: Bearer abc123' \-d '{"enable_ulp_wcag_compliance":true}'

Customers with extensive HTML, CSS, and Javascript customizations to Universal Login could experience downstream effects to their customer experience. Enable the WCAG-compliant version of Auth0 on a non-production tenant and test your authentication flows to ensure the updates don’t break Universal Login customizations.

Below are areas that could impact customer customizations:

• Validation errors are shown inline instead of as tooltips so they are accessible to screen readers.

• The default interface component colors are aligned with WCAG guidelines around color contrast.

• Forms use autocorrect.

• The ARIA and other attributes of the interface components allow easy screen reader navigation.

• Email addresses are validated client side and follow the same formatting rules as the server side validation.

• HTML labels are accessible and associated with their respective input fields.

• Password complexity requirements and inline error messages are announced by screen readers.

• All authorization flow screens have a useful and distinct page title.

• Required fields include a visual indicator on the label.

After enabling Universal Login, you can customize your login page directly from the Auth0 Dashboard. Specifically, you can customize page templates and themes, sign-up and login prompts, and other text elements. To learn more, review Customize Universal Login.

If you decide to implement Classic Login, you can customize basic branding options from the Auth0 Dashboard. You can then configure advanced customization with the SDK used to build your login flow. To learn more, review Customize Classic Login.

After enabling either Universal Login or Classic Login within your tenant, follow the steps below to implement the experience:

1. Register your application with Auth0.

2. Configure your application to call the Login endpoint of the Authentication API to trigger the login flow and handle the response. and handle the response. You can configure this directly or use one of Auth0's SDKs.

3. Create a Database, Enterprise, or Social connection and enable it for your application.

You can call the Login endpoint directly from any browser:

https://{yourDomain}/authorize? response_type=code|token& client_id={yourClientId}& connection={connectionName}& redirect_uri={https://yourApp/callback}& state={state}

The request must include the following values:

• response_type (either code or token)

• client_id

• redirect_uri

• state

  • To better understand why this value is required review Prevent Attacks and Redirect Users With OAuth 2.0 State Parameters.

Optionally, you can include the connection parameter to prompt users to authenticate with the specified connection.

For more information on how you can set up Universal Login for your application, review the Quickstart guides. Choose the approach that best fits your technologies and follow the Quickstart for a walkthrough of the implementation.

• Centralized Universal Login vs. Embedded Login
• Universal Login Experience
• Classic Login Experience
• Universal Login vs. Classic Login
• Universal Login Internationalization