Hi @ThomasTBG ,
Sorry for the delay!
If you have to use an embedded login page, then you would need to set the theme object manually in the code as opposed to pulling it out of a config object like the hosted (universal) login page can.
For your case, it would be like this:
var page_background_color = #000000
var lock = new Auth0Lock(<clientID>,<auth0Domain>) {
//other options ommitted for brevity
theme: {
logo: 'https://uploads-ssl.webflow.com/5d2483c470f334f7d6a4a7c9/5dc722c32058974c227fddba_The%2520Baby%2520Goat.png-p-500.png'
primaryColor: '#929292',
},
//any remaining lock options
});
if(page_background_color) {
var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
page_background_color +
' }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.body.appendChild(style);
}
lock.show();
The Lock reference linked below should also help with any other tweaks you wish to make to the Lock UI/behaviour:
I’d recommend using the Universal (hosted) login page though if Webflow can support it rather than embedded, it has several benefits over using an embedded form. There are some default templates available in Branding > Universal Login > Login you can use as a starting point when you toggle on “Customize Login Page”.
This will use the theming you have set in your tenant’s Branding settings then, using the config object to pull out the settings (let colours = config.colors || {}), before using it in the theme property. See below for the default Lock template (at time of writing).
<script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>
<script>
// Decode utf8 characters properly
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 || {};
// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
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: {
//logo: 'YOUR LOGO HERE',
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();
</script>
To reach the Lock page, you’d need to begin an “authorize” flow to redirect the user to Auth0’s Universal Login page. We have multiple SDKs which can handle this for you if Webflow will allow you to incorporate them. For example Auth0.js could be used to begin the flow:
