jQuery Custom Login

Sample Project

Download this sample project configured with your Auth0 API Keys.

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.4.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