Classic Universal Login Experience - Customization
To see the settings for your login page, go to Auth0 Dashboard > Universal Login.
Available settings include:
Logo (recommended size: 150 x 150 pixels)
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.
In addition to the basic settings described above, you can alter the code of the Universal Login flow. You can customize the HTML code for Login, Password Reset, and MFA pages.
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.
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.
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 Guide.
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.
Other facets of Universal Login
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:
While Auth0 hosts these custom pages, you can still manage your pages using the version control system of your choice.