jQuery Authorization

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • jQuery 3.1.0
Show requirements

Many identity providers will supply access claims (such as roles or groups) with the user. You can request these in the token by setting scope: openid roles or scope: openid groups. However, not every identity provider supplies this type of information. Fortunately, Auth0 has an alternative, which is to create a rule for assigning different roles to different users.

NOTE: This tutorial assumes that you have already completed the rules tutorial and that you know how to implement a basic rule in your app.

Create a Rule to assign roles

First, create a rule that assigns users to either an admin role or a single user role. Go to the New Rule page in the Auth0 dashboard and select the Set Roles to a User template under Access Control.

By default, this rule will assign the user an admin role if the user’s email contains @example.com. Otherwise, the user will be assigned a regular user role.

You can modify this line in the default script to change the domain name to one suitable for your setup:

if (user.email.indexOf('@example.com') > -1)

NOTE: You can set roles other than admin and user and you may customize the rule as needed.

Restrict a route based on user's roles

In order to restrict access to certain routes, we are going to use a switch inside route function (executed every time the page is loaded).

// app.js

var route = function() {
  var id_token = localStorage.getItem('id_token');
  var current_location = window.location.pathname;
  if (undefined != id_token) {
    var profile = JSON.parse(localStorage.getItem('profile'));

    switch(current_location) {
      case "/":
        $('#btn-login').hide();
        $('#btn-logout').show();
        if (isAdmin(profile)) { $('#btn-go-admin').show(); }
        if (isUser(profile)) { $('#btn-go-user').show(); }
        break;
      case "/user.html":
        if (true != isUser(profile)) {
          window.location.href = "/";
        } else {
          $('.container').show();
          $('#btn-logout').show();
          $('#nickname').text(profile.nickname);
        }
        break;
      case "/admin.html":
        if (true != isAdmin(profile)) {
          window.location.href = "/";
        } else {
          $('.container').show();
          $('#btn-logout').show();
          $('#nickname').text(profile.nickname);
        }
        break;
    };
  } else { // user is not logged in.
    // Call logout just to be sure our local session is cleaned up.
    if ("/" != current_location) {
      logout();
    }
  }
};

route();

The route function checks if the user is authenticated then checks if he/she is an admin or user using isAdmin and isUser functions, respectively. This method checks if the roles attribute of app_metadata added by the rule contains admin or user:

// app.js

var isAdmin = function(profile) {
  if (profile &&
      profile.app_metadata &&
      profile.app_metadata.roles &&
      profile.app_metadata.roles.indexOf('admin') > -1) {
    return true;
  } else {
     return false;
  }
};

var isUser = function(profile) {
  if (profile &&
      profile.app_metadata &&
      profile.app_metadata.roles &&
      profile.app_metadata.roles.indexOf('user') > -1) {
    return true;
  } else {
     return false;
  }
}

Now, if a user logs in with an email that contains @example, he/she will be allowed to access the /admin.html route. Otherwise, the user is just allowed to access / and /user.html routes.

Previous Tutorial
7. Rules
Use Auth0 for FREECreate free Account