Sample Classic Login Page Customization Scripts

Knowledge Articles
, , , , , ,
1

Problem Statement: We can Customize the Classic Login Page with the following steps:

  1. Auth0 Dashboard → Branding → Universal Login → Settings tab, make sure “Classic” is selected and save the change.
  2. Under the Login tab, switch on “Customize Login Page” → HTML tab → Default Template, select Lock.
  3. Add scripts.

Sample #1: customize the logo for each application, otherwise display a default logo

Scripts:

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'

},

Note: logourl is the image address, not a link address. Such as if we want to use an image from the internet, right-click on the image and select “Copy Image Address”.

808×616 147 KB

Sample #2: customize the signup terms.

Scripts:

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

};

Similarly, we can customize other components of the login screen based on the Application that is accessing it. Please reference this doc.

2 Likes