Understand Auth0 (2) - Customise Login within classic universal login

Most of the time, there're requirements on customise login page. For build in login page, there
are new universal login and classic universal login. Because there are conflict if we open customise login page and use new universal login, we talk about the classic one.

According to the depth of the requirements to customise login page, I category it into 3 layers:

basic universal login custom
customise universal login with 'lock'
customise universal login with 'custom login form'

Also, there's another option to use management API to customise the login page, we haven't touch it yet. So we focus on changes of Auth0 platform.

Both for classic and new universal login, people can change logo, page background color and login button color on dashboard. we could make changes in dashboard -> branding -> universal login -> setting.

Also, can change logo on tenant setting.

If basic custom is not enough, we could switch on custom login button in dashboard -> branding -> universal login -> login.

The default template is lock. Since the login form is written in lock, we need to use the provided configure options to made the change.

Auth0 provides lock configure options, or we could directly write html/css/jQuery in the script.

Lock configuration

Refer https://auth0.com/docs/libraries/lock/lock-configuration, we can configure login form based on the provided options. these fields are commonly touched:

add addition sign up fields
language Dictionary to change text
allow sign up
must accept terms

Addition sign up fields will directly add into user metadata at the pre-register hook. The type of the fields could be specified.

var options = { 
	additionalSignUpFields: [
	{ 
		name: "address", 
		placeholder: "enter your address", 
		// The following properties are optional 
		icon: "https://example.com/assests/address_icon.png", 
		prefill: "street 123", 
		validator: function(address) { 
			return { 
				valid: address.length >= 10, 
				hint: "Must have 10 or more chars" // optional 
			}; 
		}
	}, 
	{ 
		name: "full_name", 
		placeholder: "Enter your full 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" 
	}] 
}

Language Dictionary to change text

languageDictionary: {
                loginLabel: "Login",
                loginSubmitLabel: "Login",
                signUpLabel: "Activate",
                signUpSubmitLabel: "Activate account",
                emailInputPlaceholder: "Email",
                passwordInputPlaceholder: "Password",
                databaseSignUpInstructions: getContactUsText()
}

var isASite = config.callbackURL.indexOf("com.a") > 0;
var getContactUsText = function () {
    var contactLink =
      'Don’t have an account? <a id="contactLink" target="_blank" href="[CONTACT-US-LINK]">contact us</a> to sign up'
             
    return isASite
                ? contactLink.replace("[CONTACT-US-LINK]", contactA)
                : contactLink.replace("[CONTACT-US-LINK]", contactB);
        };

Must accept terms

languageDictionary = { 
    title: config.dict.signin.title,
    signUpTerms: "I have read and agree with the <a href='https://terms-and-conditions/' target='_blank'>terms & conditions</a>"
};
mustAcceptTerms: true

Custom by html/css/jQuery

Although, is not recommended, we could also change everything we want by using plaint html/css/jQuery. We made these changes:

add background image
add extra link under login box
add extra fields in login box

Background image

body{ 
        background-color: #000000; 
        background: url("https://loginbg.jpg") no-repeat; 
        background-size: cover; 
    } 
.auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay { display: none; }

With container can add extra inline content.


<div id="hiw-login-container" style="filter: drop-shadow(0 0 0.75rem black)">	</div>
<div style="text-align: center;">
   <a target="_blank" href='https://account'>
	   <div style="color: white; text-decoration: none;" >
		   Create an Account
	   </div>
   </a>
</div>

<script> 
	var options = { container: 'hiw-login-container' }; 
	// initialize 
	var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com', options); 
	// render 
	lock.show(); 
</script>

Fetch the position where you want to add fields, and then insert your content.

 var createExtra = function () {
    var addConfirmField = function () {

    var tag =
         '<div class="auth0-lock-input-block auth0-lock-input-show-password" >'+
         '<div class="auth0-lock-input-block auth0-lock-input-password" >'+
         '<div class="auth0-lock-input-wrap auth0-lock-input-wrap-with-icon" >'+
         '<input class="confirm-password" name="confirmPassword" type="password" placeholder="Confirm Password" autocomplete="off" autocapitalize="off"'
          +
         "</input>"+
         "</div>"+
         "</div>"+
         "</div>";
   $(".auth0-lock-input-show-password")
                    .parent()
                    .append(tag);
            };
      
   var addConfirmErrorField = function () {

     var tag =
       '<label class="confirm-password-error" name="confirmPasswordError"'+
                    '">' 
                    +" Those passwords didn’t match. Try again."
                    "</label>";
    $(".auth0-lock-input-show-password")
                    .parent()
                    .append(tag);
            };

    addConfirmField();
    addConfirmErrorField();
 };

After switch on custom login, there's a template dropdown. If select 'custom login form', and preview, can see it's plaint Javascript written page. We can write whatever we want here.

Web development