jQuery Authorization

Sample Project

Download this sample project configured with your Auth0 API Keys.

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
Next Tutorial
9. Calling APIs
Use Auth0 for FREECreate free Account