Customize Classic Login/Signup Page

Help
,
1

Current Branding > Universal Login > Classic Login > Login

Custom login prompt shows center aligned and with login and signup tabs

We wanted to change the custom login screen to be like the login/signup to be on the left and an iframe on the right with some content to match it with our layout. Could we do this editing the Universal login > login tab html? Please advice.

3

Hi @sandeep.nathan,

Welcome to the Auth0 Community!

In general, we recommend using the New Universal Login experience to get customization options out of the box, such as choosing the placement of the widget on your page background. (Reference: Customize Universal Login Page Themes)

If you use the Classic Universal login, you must configure the container in the Lock Configuration Options to adjust the widget’s placement.

Alternatively, if you prefer, you could implement Embedded Login which gives you more control over the placement of the login widget with your custom content to fit your layout requirements.

Thanks,
Rueben

1 Like
4

Hi Rueben,

Thanks for the update. We are using the classic login screen as there are some additional fields added for different applications on the tenant.

I think we already are using the Lock Configuration Option, below is the html which we are using on the login html

var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));

config.extraParams = config.extraParams || {};

var connection = config.connection;

var prompt = config.prompt;

var languageDictionary;

var language;

if (config.dict && config.dict.signin && config.dict.signin.title) {

languageDictionary = { title: config.dict.signin.title };

} else if (typeof config.dict === 'string') {

language = config.dict;

}

var loginHint = config.extraParams.login_hint;

var colors = config.colors || {};

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {

auth: {

redirectUrl: config.callbackURL,

responseType: (config.internalOptions || {}).response_type ||

(config.callbackOnLocationHash ? 'token' : 'code'),

params: config.internalOptions

},

configurationBaseUrl: config.clientConfigurationBaseUrl,

overrides: {

__tenant: config.auth0Tenant,

__token_issuer: config.authorizationServer.issuer

},

assetsUrl: config.assetsUrl,

allowedConnections: connection ? [connection] : null,

rememberLastLogin: !prompt,

language: language,

languageBaseUrl: config.languageBaseUrl,

languageDictionary: languageDictionary,

theme: {

primaryColor: colors.primary ? colors.primary : 'green'

},

prefill: loginHint ? { email: loginHint, username: loginHint } : null,

closable: false,

defaultADUsernameFromEmailPrefix: false

});

if(colors.page_background) {

var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +

colors.page_background +

' }';

var style = document.createElement('style');

style.appendChild(document.createTextNode(css));

document.body.appendChild(style);

}

lock.show();

But not sure on how I can customize the login page so that the login section shows up on the left and the right pane has an Iframe so that I can insert a custom personalized content on to the right panel iframe. Thanks

5

Hi @sandeep.nathan,

You must implement the container lock configuration option to make the widget appear inline within your div instead of in a modal pop-out window. Then, use CSS to control its position.

Refer to this doc: https://auth0.com/docs/libraries/lock/lock-configuration#container-string-.

Thanks,
Rueben

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.