JavaScript 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

To restrict access to certain routes, create a function that handles conditionally allowing or disallowing access to routes based on the user's role.

// app.js

var route = function() {

  var id_token = localStorage.getItem('id_token');
  var current_location = window.location.pathname;

  if (id_token) {

    var profile = JSON.parse(localStorage.getItem('profile'));

    switch(current_location) {
      case "/":
        hide(document.getElementById('btn-login'));
        show(document.getElementById('btn-logout'));
        if (isAdmin(profile)) show(document.getElementById('btn-go-admin'));
        if (isUser(profile)) show(document.getElementById('btn-go-user'));
        break;
      case "/user.html":
        if (true != isUser(profile)) {
          window.location.href = "/";
        } else {
          show(document.querySelector('.container'));
          show(document.getElementById('btn-logout'));
          document.getElementById('nickname').textContent = profile.nickname;
        }
        break;
      case "/admin.html":
        if (true != isAdmin(profile)) {
          window.location.href = "/";
        } else {
          show(document.querySelector('.container'));
          show(document.getElementById('btn-logout'));
          document.getElementById('nickname').textContent = 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();
    }
  }
};

// ...

var hide = function(element) {
  element.style.display = "none";
};

var show = function(element) {
  element.style.display = "inline-block";
};

route();

The route function checks to determine whether the user is authenticated and then checks to see if he/she is an admin or user by employing the isAdmin and isUser functions, respectively. This method checks if the roles attribute of app_metadata added by the rule contains either 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 the user logs in with an email that contains @example.com, they will be allowed to access the /admin route. Otherwise, the user will only be allowed to access / and /user.

Previous Tutorial
7. Rules
Next Tutorial
9. Calling APIs
Use Auth0 for FREECreate free Account