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.

In the Dashboard, the dialog shown below lets you select which Experience will be used for default, non-customized pages:

Choose an experience to learn more about:

Customization Settings for Login Page

In the Dashboard, you can see the settings for your login page by navigating to Universal Login and looking at the Settings tab.

The settings available here are:

Logo (recommended size: 150 x 150 pixels)
Primary Color
Background Color

These settings, once changed, will take effect on all your Universal Login pages if you have not enabled customization of the pages' code. The settings will also work if you have enabled customization but are using the predefined templates and have not changed those options in the code.

If you select the New Universal Login Experience, you can also configure the favicon URL and a custom font URL using the Branding API.

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.

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

<button id="loginPopup">Login with Popup</button>

Was this helpful?/

$('#loginPopup').click(async () => {
  await auth0.loginWithPopup();
});

Was this helpful?/

You can call the endpoint with any tool that allows you to make HTTP requests.

GET 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.

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