Auth0 Universal Login

Universal Login is Auth0's implementation of the login flow, which is the key feature of an Authorization Server. Each time a user needs to prove their identity, your applications redirect to Universal Login and Auth0 will do what is needed to guarantee the user's identity.

By choosing Universal Login, you don't have to do any integration work to handle the various flavors of authentication. You can start off using a simple username and password. With a simple toggle switch, you can add new features such as social login and multi-factor authentication (MFA). All of this is dynamic, and adjustable in real-time without requiring application-level changes, since all functionality is driven dynamically by the web pages served by the centralized Authentication Server. Your application will benefit from all improvements Auth0 does in the login flow without you changing a single line of code.

The login page appearance and behavior is customizable right from the Dashboard. The logo and colors of the login pages can be changed, and in more advanced use cases, the code of each page itself can be modified.

For information on the differences between Universal Login and traditional embedded login within your application, see our comparison guide.

There are two available experiences in Universal Login. The Classic Universal Login Experience uses JavaScript controls for each page. The New Universal Login experience does not require JavaScript to work, and it offers a simpler and faster experience for end-users.

On the Dashboard, in Branding > Universal Login you can select which login experience to use for default, non-customized pages:

Auth0 Branding Universal Login Settings Tab Experience

Choose an experience to learn more about:

In the Dashboard, you can see the settings for your login page by navigating to Universal Login and looking at the Settings tab. Here you can customize how the initial login screen is displayed, add your logo, and enter colors for the login button or page background.

Auth0 Branding Universal Login Settings Tab Customization

In addition to configuring Universal Login for your tenant's applications, you will also need to complete a few other steps:

Set up a connection(s) in the Dashboard (Choose Connections in the Dashboard's sidebar, then choose a type and pick one to configure, such as a database or a social login provider).
Set up your application in the Dashboard.
Configure your application's code to call Auth0's /authorize endpoint in order to trigger Universal Login, and then to deal with the response. You can either do this directly, or use one of our SDKs to make the process easier.

You can navigate to the login page from any browser:

https://YOUR_DOMAIN/authorize?
  response_type=code|token&
  client_id=YOUR_CLIENT_ID&
  connection=CONNECTION&
  redirect_uri=https://YOUR_APP/callback&
  state=STATE

Was this helpful?/

You can (optionally) specify a connection, but you must specify a state and choose whether you want a code or token response (the choice you make depends on your app type and the flow you are using). Finally, make sure to fill in the domain, client ID, and redirect URI if they haven't been pre-filled.

If you are already using Auth0's Single-Page App SDK, using the auth0.loginWithRedirect() or auth0.loginWithPopup() methods will bring you to the Authorize endpoint.

<button id="login">Login</button>

$('#login').click(async () => {
      await auth0.loginWithRedirect();
    });

Was this helpful?/

For detailed instructions on setting up your application to use Universal Login, check out our Quickstart guides and choose the one that best fits your chosen technologies. The Quickstart guides will walk you through all of the implementation steps.

Docs