Hello
Is it possible to customize Auth0 hosted Lock signup page in Universal Login with additionalSignUpFields. I have read the help files but am still confused where to add the code in the HTML screen in Universal Login.
thanks
Tony
var options = {
additionalSignUpFields: [{
name: “favorite_color”,
placeholder: “Enter your favorite color (optional)”,
validator: function() {
return true;
}
}]
}
Hi @tony.wolsey,
Welcome to Auth0 community! Hope you are enjoying authenticating with Auth0!
To add additionalSignUpFields, you have to pass those in the options object into the Auth0Lock constructor. For example, you initiation the Auth0Lock like this:
var lock = new Auth0Lock('clientid', 'domain', options);
So the complete example would be:
var options = {
// other options
additionalSignUpFields: [
{
name: "first_name",
placeholder: "Enter Your First Name"
},
{
type: "select",
name: "location",
placeholder: "Choose your location",
options: [
{value: "us", label: "United States"},
{value: "fr", label: "France"},
{value: "ar", label: "Argentina"}
],
// The following properties are optional
icon: "https://example.com/assests/location_icon.png",
prefill: "us"
}
]
};
var lock = new Auth0Lock('clientid', 'domain', options);
You can read more about additionalSignUpFields and all other Lock SDK’s configuration options at Lock Configuration Options
Hope this helps! Let us know if you have any further questions.
Cheers!
thank you so much for your reply. I will try this.
thanks
Tony
Perhaps a simple question, but where do I place this code in the Universal Login HTML window? I have tried a few locations but it is not working. Can I use this code on Universal Login or is it for embeddable loginonly?
var options = {
// other options
additionalSignUpFields: [
{
name: “first_name”,
placeholder: “Enter Your First Name”
},
{
type: “select”,
name: “location”,
placeholder: “Choose your location”,
options: [
{value: “us”, label: “United States”},
{value: “fr”, label: “France”},
{value: “ar”, label: “Argentina”}
],
// The following properties are optional
icon: “https://example.com/assests/location_icon.png”,
prefill: “us”
}
]
};
var lock = new Auth0Lock(‘clientid’, ‘domain’, options);
thanks
Tony
Hi @tony.wolsey,
You can use this code if you use the Classic login experience of the Universal Login. To customize the hosted login pages, navigate to Universal Login section in your dashboard.
There, you will find four tabs. Settings, Login, Password Reset, Multi-factor Authentication
Login tab allows you to customize the… Login page.
There, you can use use the toggle button Customize Login Page to enable the template so you can further customize it. There the magic happens.
There are pre-made Default Templates you can start with. Select Lock in this case. Inspect the code and around the line number 39, you can see it initializes the Lock.
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
auth: {
redirectUrl: config.callbackURL,
// options object continues...
The third parameter passed to the Auth0Lock are the options object. You can pass additionalSignUpFields to that same object. Let me paste what I have in my own tenant’s customised login page here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/base64.js"></script>
<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/lock/11.20/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
},
/* additional configuration needed for custom domains
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: 'YOUR_CUSTOM_DOMAIN'
}, */
assetsUrl: config.assetsUrl,
allowedConnections: connection ? [connection] : null,
rememberLastLogin: !prompt,
language: language,
languageDictionary: languageDictionary,
theme: {
//logo: 'YOUR LOGO HERE',
primaryColor: colors.primary ? colors.primary : 'green'
},
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
closable: false,
defaultADUsernameFromEmailPrefix: false,
// uncomment if you want small buttons for social providers
// socialButtonStyle: 'small'
additionalSignUpFields: [{
name: "first_name",
placeholder: "Enter your first name"
}, {
type: "select",
name: "location",
placeholder: "Choose your location",
options: [
{value: "us", label: "United States"},
{value: "fr", label: "France"},
{value: "ar", label: "Argentina"}
],
// The following properties are optional
icon: "https://example.com/assests/location_icon.png",
prefill: "us"
}]
});
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>
</body>
</html>
Hope this helps!
Thank you so much. It worked perfectly.
thanks
Tony
Great! I’m glad it helped.
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.