Customize Classic Universal Login Pages

To see the settings for your login page, go to Auth0 Dashboard > Branding > Universal Login.

Available settings include:

  • Logo (recommended size: 150 x 150 pixels)

  • Primary Color

  • Background Color

If you have not edited any related options in page template HTML code, then once changed, these settings will take effect on all of your Universal Login page types.

Choose a base template

If you intend to perform advanced customization to the content of the Login page, you must choose the base template from which you would like to work. Toggle customization on, and you will see the templates in a dropdown just above the code editor.

To provide the user's login experience, the templates use the libraries linked below. These libraries can be used within Universal Login and can also be embedded directly into an application. Reading the documentation for each library will help you better understand how they can be customized to your needs.

Modify the page code

If you are using the default login page and don't want to make substantial changes, you can use the Lock template to modify the behavior of the Lock widget used on the Universal Login page. The Lock widget can be configured to behave or appear in many ways; it can:

  • Default to the signup page instead of the login page

  • Appear with different colors, text, or default languages

  • Show only specific login methods

To learn more about customizing and configuring the Lock widget, see Lock Configuration Options.

If you want to significantly change the login page, you can use the Custom Login Form template as a guide. It will show you how to get the values you need with the Auth0.js SDK, then you can modify the style and layout however you would like. Just remember that any CSS customization must be inline because there is no option to host a separate CSS file in your Auth0 tenant.

Advanced customization

In addition to the basic settings described above, you can change the code of the Universal Login flow. Customize the Login, Password Reset, and MFA pages to create a branded login experience matching the rest of your application.

Responsibility for updates

Once the customization toggle is flipped on, that page can no longer be automatically updated by Auth0, so you become responsible for updates and maintenance of the page. This includes updating the version numbers for any included Auth0 SDK or widget.

Exercise caution regarding the use of third-party JavaScript on your Login page. Because sensitive security-related information often flows through this page, introducing cross-site scripting (XSS) vulnerabilities is of particular concern. In addition, If your organization uses home realm discovery in conjunction with Classic Universal Login, a list of available connections is publicly visible in the Auth0.setClient property.

If you enable customization to inspect the Login page code, and then decide not to customize it, make sure you disable the Customize Login Page toggle, so Auth0 will render the default pages.

Auth0 offers you the ability to customize and display several other pages containing Auth0-related functionality and to which Auth0 redirects your users during the authorization process. You can modify the following types of pages from your Auth0 Dashboard:

Although Auth0 hosts these custom pages, you can still manage your pages using the version control system of your choice.

Learn more