Login Screen Customization

Help
, ,
1

Can we customize the login screen based on application in Auth0?
Like for example, change the logo to be different for different applications under the same domain/tenant.

2

Hello!

The easiest way to customize the hosted login page with a specific logo for each application is to have an if-statement in the HLP that will check the client id and set a variable with the logo URL. Then, the logo url variable can be passed in the lock options.

3

Thank you Karen, That helps.

4

Just so that it would help everyone, the code would be:

var customTheme = {};

if (config.clientID == 'your client id here')
{
  customTheme = {logo:'your logo here',primaryColor:'green'};
}

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  auth: {
    redirectUrl: config.callbackURL,
    responseType: (config.internalOptions || {}).response_type ||
      (config.callbackOnLocationHash ? 'token' : 'code'),
    params: config.internalOptions
  },
  assetsUrl:  config.assetsUrl,
  allowedConnections: connection ? [connection] : null,
  rememberLastLogin: !prompt,
  language: language,
  languageDictionary: languageDictionary,
  theme: customTheme,
  prefill: loginHint ? { email: loginHint, username: loginHint } : null,
  closable: false,
  defaultADUsernameFromEmailPrefix: false,
  // uncomment if you want small buttons for social providers
  // socialButtonStyle: 'small'
});
1 Like
5

Karen,

Is it possible to have a different hosted login page (HLP) for every application under the same domain/tenant?

I meant to ask, Could we set some rule or something, that will let Auth0 know which HLP to show to the user based on which application the user is requesting for?

Thanks & Regards,
Sindoor

6

Hey there!

Sorry for such delay in response! We’re doing our best in providing the best developer support experience out there, but sometimes the number of incoming questions is just too big for our bandwidth. Sorry for such inconvenience!

Do you still require further assistance from us?