jQuery Session Handling

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • jQuery 3.1.0
Show requirements

In the previous steps of this tutorial, you enabled user login with the Lock widget and then with Auth0.js.

In this step, you will create a session for that user and also allow the user to log out.

Create Session

Once the user is logged in, you will want to create a session for that user. To do this, you only need to store the value of the id_token attribute that is returned in the Lock authenticated callback parameter.

NOTE: This example uses localStorage, but you can use any storage library. At the end of this guide, you can see how to do the same with Lockr storage library.

// app.js

var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN, {
  auth: {
    params: {
      scope: 'openid email'
    } //Details: https://auth0.com/docs/scopes
  }
});

lock.on("authenticated", function(authResult) {
  localStorage.setItem('id_token', authResult.idToken);
});

Check Session

To check if a user is authenticated, we read the id_token value from localStorage:

// app.js

var id_token = localStorage.getItem('id_token');

if (null != id_token) {
  lock.getProfile(id_token, function (err, profile) {
    if (err) {
      // Remove expired token (if any) from localStorage
      localStorage.removeItem('id_token');
      return alert('There was an error getting the profile: ' + err.message);
    } // else: user is authenticated
  });
}

Logout

To log out a user, remove the token from localStorage:

// app.js

var logout = function() {
  localStorage.removeItem('id_token');
  window.location.href = "/";
}

Then create the buttons for login and logout:

<!-- index.html -->

<button class="btn btn-primary btn-margin" id="btn-login">Log In</button>
<button class="btn btn-primary btn-margin" id="btn-logout">Log Out</button>

And add their functionality:

// app.js

var btn_login = $('#btn-login');
var btn_logout = $('#btn-logout');

btn_login.click(function(e) {
  e.preventDefault();
  lock.show();
});

btn_logout.click(function(e) {
  e.preventDefault();
  logout();
});

Session handling example using Lockr storage library

// app.js

// Create session

lock.on("authenticated", function(authResult) {
  Lockr.set('id_token', authResult.idToken);
});

var id_token = Lockr.get('id_token');
if (null != id_token) {
  lock.getProfile(id_token, function (err, profile) {
    if (err) {
      // Remove expired token (if any) from storage
      Lockr.rm('id_token');
      return alert('There was an error getting the profile: ' + err.message);
    } // else: user is authenticated
  });
}

// Logout

var logout = function() {
  Lockr.rm('id_token');
  window.location.href = "/";
}
Previous Tutorial
3. Custom Login
Next Tutorial
5. User Profile
Use Auth0 for FREECreate free Account