jQuery Custom Login

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • jQuery 3.1.0
Show requirements

In the previous step, we enabled login with the Auth0 Lock widget. You can also build your own custom UI with a custom design for authentication if you like. To do this, use the auth0.js library.

Custom Login

First, you must add the Auth0.js library to your application:

<!-- index.html -->

<script src="https://cdn.auth0.com/w2/auth0-7.6.1.min.js"></script>

You will need an Auth0 instance. Create one using your client credentials. Include your callbackURL and set responseType: 'token':

// app.js

$(document).ready(function() {
  var auth0 = null;
  // Configure Auth0
  auth0 = new Auth0({
    domain: 'YOUR_AUTH0_DOMAIN',
    clientID: 'YOUR_CLIENT_ID',
    responseType: 'token',
    callbackURL: 'https://YOUR_APP/callback'
  });
});

In the login method, call the login function on the Auth0 instance, setting connection to Username-Password-Authentication and responseType to token:

// app.js

$('#btn-login').on('click', function(ev) {
  ev.preventDefault();
  var username = $('#username').val();
  var password = $('#password').val();
  auth0.login({
    connection: 'Username-Password-Authentication',
    responseType: 'token',
    email: username,
    password: password,
  }, function(err) {
    if (err) alert("something went wrong: " + err.message);
  });
});

Since Auth0 uses redirect mode by default, the app will be redirected to the callbackURL after a successful login.

With responseType: 'token', the result will be appended to the URL.

Check for hash information using Auth0's parseHash method, which will extract the id_token. Save it to localStorage:

// ./app.js

var parseHash = function() {
  var result = auth0.parseHash(window.location.hash);
  if (result && result.idToken) {
    localStorage.setItem('id_token', result.idToken);
  } else if (result && result.error) {
    alert('error: ' + result.error);
  }
};

parseHash();

Now, add a form to call the login:

<!-- index.html -->

<form class="form-signin">
  <h2 class="form-signin-heading">Please sign in</h2>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="text" id="username" class="form-control" placeholder="Email address" autofocus required>
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="password" class="form-control" placeholder="Password" required>
  <button class="btn btn-lg btn-default" type="button" id="btn-login">Sign In</button>
</form>

Sign up

To allow users to sign up, provide a signUp method:

// app.js

$('#btn-register').on('click', function(ev) {
  ev.preventDefault();
  var username = $('#username').val();
  var password = $('#password').val();
  auth0.signup({
    connection: 'Username-Password-Authentication',
    responseType: 'token',
    email: username,
    password: password,
  }, function(err) {
    if (err) alert("something went wrong: " + err.message);
  });
});

and add a Sign Up button to call this method.

  <!-- index.html -->

  <button class="btn btn-lg btn-primary" type="button" id="btn-register">Sign Up</button>

Social login

To log in using a social connection, set the connection property of the login method to the identity provider you want to use:

// app.js

$('#btn-google').on('click', function(ev) {
  ev.preventDefault();
  auth0.login({
    connection: 'google-oauth2'
  }, function(err) {
    if (err) alert("something went wrong: " + err.message);
  });
});

and add a button to call this method:

<!-- index.html -->

<button class="btn btn-lg btn-danger" type="button" id="btn-google">Google</button>
Previous Tutorial
2. Login
Use Auth0 for FREECreate free Account