Build a Fully Custom Login Page

Knowledge Articles
,
1

Overview

This article explains how to implement a fully custom login page for an application that gives full control of the UI without using Lock or the standard Universal Login experience.

Applies To

  • Custom Login Page
  • Auth0.js

Solution

It is possible to use a fully custom login page and use Auth0.js to make the necessary requests (signup, login, password reset, etc.)

To use a custom login page:

  1. In the dashboard, go to Branding > Universal Login > Advanced Options and under the Login tab enable the Customize Login Page toggle.
  2. From the Default Templates dropdown select Custom Login Form.
  3. In the HTML editor below write the custom login page.

Here’s an example implementation using Auth0.js:

<!DOCTYPE html>
<html>
<head>
    <title>Custom Login Page</title>
</head>
<body>
    <h2>Login</h2>
    <form id="login-form">
        <input type="email" id="email" placeholder="Email" required>
        <input type="password" id="password" placeholder="Password" required>
        <button type="submit">Log In</button>
    </form>

    <button id="signup-button">Sign Up</button>
    <button id="social-login-button">Login with Google</button>

    <script src="https://cdn.auth0.com/js/auth0/9.26.1/auth0.min.js"></script>
    <script>
        var webAuth = new auth0.WebAuth({
            domain: '<auth0 domain>',
            clientID: '<client id>',
            redirectUri: '<callback url>',
            responseType: 'token id_token',
            scope: 'openid profile email'
        });

        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            var email = document.getElementById('email').value;
            var password = document.getElementById('password').value;
            webAuth.login({
                realm: 'Username-Password-Authentication',
                email: email,
                password: password
            }, function(err) {
                if (err) console.log('Error: ' + err.description);
            });
        });

        document.getElementById('signup-button').addEventListener('click', function() {
            webAuth.signup({
                connection: 'Username-Password-Authentication',
                email: document.getElementById('email').value,
                password: document.getElementById('password').value
            }, function(err) {
                if (err) console.log('Error: ' + err.description);
                else console.log('Signup successful!');
            });
        });

        document.getElementById('social-login-button').addEventListener('click', function() {
            webAuth.authorize({
                connection: 'google-oauth2'
            });
        });
    </script>
</body>
</html>