Customize Classic Login Pages
Classic Login is an Auth0-hosted login experience that relies on JavaScript for page customization.
From the Auth0 Dashboard, you can configure basic customization options that apply to all login pages. For advanced customization, you can directly modify the HTML template of one or more pages.
Additionally, you can manage your page content using the version control syste of your choice.
Basic Customization
You can configure the following options from the Auth0 Dashboard under Branding > Universal Login > Settings tab:
Company Logo (recommended size: 150 x 150 pixels)
Primary Color
Background Color
By default, these settings affect all Classic Login pages, such as the login screen or password reset page. If you directly modify the HTML template of one or more pages and edit any attributes related to these options, those attributes will supersede these settings.
Advanced Customization
For further customization, you can directly modify the HTML template of the following pages:
Login (see below)
Responsibility for updates
When you enable customization for a specific page, you assume responsibility for maintaining that page, as it will no longer receive automatic updates from Auth0. Such maintenance includes updating the version numbers of any included Auth0 SDKs or widgets.
As sensitive security-related information often flows through the login page, introducing cross-site scripting (XSS) vulnerabilities is a point of concern. Additionally, if your organization uses home realm discovery in conjunction with Classic Login, a list of available connections is publicly visible in the Auth0.setClient property. Considering this, Auth0 encourages you to exercise caution when using third-party JavaScript on your login page.
Enable page customization
To enable customization for a specific page, follow the steps below:
On the Auth0 Dashboard, navigate to Branding > Universal Login.
Select one of the following tabs:
Login
Password Reset
Multi-Factor Authentication
Enable the Customize Page toggle located at the top of the tab.
Repeat steps 2 and 3 as needed.
After enabling customization for a page, you can modify its HTML template through the code editor located below the toggle.
If you enable customization to inspect page code but decide not to customize it, ensure you disable the Customize Page toggle when finished so that Auth0 can render the default pages.
Customize the Login page
To customize the login page template, you must first choose a base template to work from.
On the Auth0 Dashboard, navigate to Branding > Universal Login > Login tab.
Enable the Customize Login Page toggle.
Above the HTML code editor, select an option from the Default Templates menu.
The available templates use the following libraries:
You can use these libraries within Classic Login or embed them directly into an application. To better understand how you can customize your login experience, review the documentation for your preferred library.
Lock template
If you plan on using the default login page and require only minimal changes, you can use the Lock template to modify the behavior of the Lock widget on the login page.
For example, you can configure the Lock widget to:
Direct users to the signup page instead of the login page by default
Customize the login page with different colors, text, or default languages
Present users with only one or more specific login methods
To learn more about customizing the Lock widget, review the Lock Configuration Options.
Custom Login Form template
If you want to significantly modify the login page, you can use the Custom Login Form template as a guide. This template shows you how to get the values you need with the Auth0.js SDK. You can then modify the style and layout of the login page as desired. Any CSS customization must be inline, as you cannot host a separate CSS file in your Auth0 tenant.