jQuery Login

Sample Project

Download this sample project configured with your Auth0 API Keys.

Before Starting

Please remember that for security purposes, you have to register the URL of your app in the Application Settings section as the callbackURL.

Right now, that callback is set to the following:

https://YOUR_APP/callback

1. Add the Lock Widget and Set the Viewport

To get started, add Auth0's Lock widget and set the viewport so that it displays correctly on all devices.

<!-- Auth0 lock script -->
<script src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>

<!-- Setting the right viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. Configure Lock

Configure Lock with your clientID and domain:

All of the available options for Auth0Lock can be viewed in the Lock customization documentation.

$(document).ready(function() {
  var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    auth: { 
      params: { 
        scope: 'openid email' 
      }
    }
  });
});

3. Implement the Login

To implement the login, call the .show() method of Auth0's Lock instance when a user clicks the login button.

var userProfile;

$('.btn-login').click(function(e) {
  e.preventDefault();
  lock.show();
});
...

<input type="submit" class="btn-login" />

...

After authentication, Auth0 will redirect the user back to your application with an identifying token. This token is used to retrieve the user's profile from Auth0 and to call your backend APIs.

In this example, the id_token is stored in localStorage to keep the user authenticated after each page refresh:

// app.js

lock.on("authenticated", function(authResult) {
  lock.getProfile(authResult.idToken, function(error, profile) {
    if (error) {
      // Handle error
      return;
    }

    localStorage.setItem('id_token', authResult.idToken);

    // Display user information
    $('.nickname').text(profile.nickname);
    $('.avatar').attr('src', profile.picture);
  });
});

4. Retrieve the User Profile and Display User Information

Use the id_token to retrieve the user profile and display the user's nickname:

//retrieve the profile

var id_token = localStorage.getItem('id_token');
if (id_token) {
  lock.getProfile(id_token, function (err, profile) {
    if (err) {
      return alert('There was an error getting the profile: ' + err.message);
    }
    // Display user information
    $('.nickname').text(profile.nickname);
    $('.avatar').attr('src', profile.picture);
  });
}
  <!-- index.html -->

  <img class="avatar">
  <p>Welcome <span class="nickname"></span></p>

To discover all the available properties of a user's profile, see Auth0 Normalized User Profile. Note that the properties available depend on the social provider used.

5. Log Out

In this implementation, a logout involves simply deleting the saved token from localStorage and redirecting the user to the home page:

// app.js

localStorage.removeItem('id_token');
userProfile = null;
window.location.href = "/";

Persisting Application State

Lock uses redirect mode by default, meaning that a full page refresh will occur when users go through the authentication process in your application. This can be undesirable in single page apps, especially if the application contains state that should be displayed to the user again after they authenticate. For example, it may be the case that your users can initiate authentication from an arbitrary route within your single page app and you may want to return them to that location (along with any relevant state) after authentication is complete.

The recommended solution for this is to persist any necessary application state in local storage or a cookie before the user logs in or signs up. With this data, you can provide some custom post-authentication logic in the listener for the authenticated event to allow the user to pick up from where they left off.

In cases where storing application state is not possible, Lock's popup mode can be used. Please note that popup mode is not recommended. Known bugs in certain browsers prevent popup mode from functioning as expected under some circumstances.

Previous Tutorial
1. Introduction
Next Tutorial
3. Custom Login
Use Auth0 for FREECreate free Account