Customize Classic Login Pages with Lock or SDK

Classic Login is an Auth0-hosted login experience that relies on JavaScript for advanced customization. Implementing Classic Login is less complex than embedding the authentication process directly in your app, and it can help prevent the dangers of cross-origin authentication.

By default, the Classic Login page uses the Lock widget for user authentication. However, you can also customize templates for Lock in Passwordless Mode or a custom UI built with the Auth0.js SDK.

To customize your Classic Login page templates, you must first enable advanced customization. To do so, follow the steps below:

1. On the Auth0 Dashboard, navigate to Branding > Universal Login > Login tab.

2. Enable the Customize Login Page toggle.

3. Above the HTML code editor, select the Default Templates menu and choose the desired option.

The templates available include:

• Lock

• Lock (passwordless)

• Custom Login Form

Both Lock templates allow you to customize the Lock widget used for authentication. The Lock widget provides a standard set of behaviors and a customizable user interface. Alternatively, you can use the Custom Login Form template to customize your login page with the Auth0 SDK for Web or Authentication API.

Auth0 SDKs are client-side libraries that do not offer a user interface but allow for expanded customization of the behavior and appearance of the login page. The Authentication API provides direct integration without the use of Auth0 SDKs.

The template you use to customize your login page will depend on the unique needs of your application. The sections below provide an overview of each option: Lock, Auth0 SDKs, or the Authentication API.

Lock is a login form that makes it easy for your users to authenticate using a selected connection. Lock automatically handles most of the details involved in creating and authenticating users.

With Lock, you will be implementing a UI that:

• Is robust and provides an excellent user experience on any device with any resolution

• Has a simple design that fits in with most websites with just a few tweaks to its custom color

• Adapts to your configuration, displaying the appropriate form controls for each available connection and only those that are allowed (such as signup or password reset)

• Selects the correct connection automatically. You may specify a desired default behavior for ambiguous cases

• Remembers the last used connection for a given user

• Automatically accommodates internationalization

• Provides instant password policy checking at signup

Although you cannot alter Lock's behavior significantly, you can configure several basic options to make Lock look and behave differently.

Consider using Lock if:

• You like the structure, look, and feel of the widget.

• You prefer a streamlined implementation of Classic Login with a ready-made responsive UI.

• Your process includes many of the use cases that Lock handles out of the box:

  • Enterprise logins

  • Databases with password policies

  • User signup and password reset

  • Authentication using social providers

  • Avatars

The example script below customizes the logo for each application, or you can set a default logo. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height). Add the logouturl configuration to the <scripts> block:

var logourl = "https://example.com/defaultlogo1.png"; //set default logo
if(config.clientID === "HUXwC72R3qr9JJo9ImPsdzJbtY8aD5kS")
{
    logourl = "https://example.com/defaultlogo2.png";
}
theme: {
    logo: logourl,
    primaryColor: colors.primary ? colors.primary : 'green'
},

The example below customizes the signup terms for your application. You can add custom language to display when users signup.

var languageDictionary;

languageDictionary = {
    signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
};

If the requirements of your app cannot be met by the standardized behavior of Lock, or if you have a complex custom authentication process, a custom user interface is needed. You may also prefer this option if you have an existing user interface that you wish to use.

With Auth0's library for Web, you can customize the behavior and flow of the process used to trigger signup and authentication. You can also directly use the Authentication API, without any wrapper at all, if you so choose.

Unlike with Lock, neither of these options includes a user interface. You will have complete control over the user experience for signup and authentication flow, and for the UI aspects of layout, look and feel, branding, internationalization, RTL support, and more.

Consider implementing a custom user interface in conjunction with an Auth0 library or the Authentication API for your app if:

• You have strict requirements for the appearance of the user interface

• You have strict requirements for file sizes - the Auth0 libraries are significantly smaller than Lock, and if you instead choose to deal with the API directly, that would not require any additional weight.

• You are comfortable with HTML, CSS, and JavaScript - you'll be creating your own UI

• You only need to handle username/password and social provider authentication

• You have multiple database or Active Directory Connections

You can also see specific examples of the usage of both Lock and Auth0 SDKs for a wide variety of programming languages and platforms in our Quickstarts. These guides may further assist you in your decision about which to use for your specific app needs.

• Classic Login Experience
• Add Bot Detection to Custom Login Pages
• Deprecation Errors