Auth0 Home Blog Docs

How to customize the login screen?

custom-login
login
customize
failed-login
angularjs

#1

I want to customize the login screen, change the icon, the colors, Angularjs (1.6.4) is being used, try to do this:

angularAuth0Provider.init({
      clientID: "*******************",
      domain: "************.auth0.com",
      responseType: "token id_token",
      audience: "https://********************.auth0.com/userinfo",
      redirectUri: "https://*****************.herokuapp.com/callback",
      scope: "openid",
      theme: {
        authButtons: {
          "testConnection": {
            displayName: "Test Conn",
            primaryColor: "#b7b7b7",
            foregroundColor: "#000000",
            icon: "http://icons.veryicon.com/ico/Emoticon/Chat/away%20girl.ico"
          },
          "testConnection2": {
            primaryColor: "#000000",
            foregroundColor: "#ffffff",
          }
        }
      }
    });

but it didn’t work, to show the login I use:

  function login() {
      angularAuth0.authorize();
    }

#2

You can configure the theme options in the [hosted login page] (https://manage.auth0.com/#/login_page), in Auth0Lock, as:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
(...)
theme: {
         authButtons: {
           "testConnection": {
             displayName: "Test Conn",
             primaryColor: "#b7b7b7",
             foregroundColor: "#000000",
             icon: "http://icons.veryicon.com/ico/Emoticon/Chat/away%20girl.ico"
           },
           "testConnection2": {
             primaryColor: "#000000",
             foregroundColor: "#ffffff",
           }
         }
       }
(...)
});