Angular 1.x 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 Access to Secure Content

To restrict secure content to users with a role of admin, subscribe to the $stateChangeStart event.

// components/auth/auth.service.js

(function () {

  'use strict';

  angular
    .module('app')
    .service('authService', authService);

  function authService($rootScope, lock, authManager) {

    $rootScope.$on('$stateChangeStart', function(event, nextRoute) {
      if (nextRoute.controller === 'AdminController') {
        if (!isAdmin()) {
          alert('You are not allowed to see the Admin content');
          return event.preventDefault();
        }
      }
    });

    function isAdmin() {
      return userProfile && userProfile.app_metadata
        && userProfile.app_metadata.roles
        && userProfile.app_metadata.roles.indexOf('admin') > -1;
    }
  }

})();

Now you can create content that should only be visible to those with a role of admin.

<!-- components/admin/admin.html -->

<h2>Admin</h2>
<p>You are viewing this because you are logged in and you have 'admin' role</p>

Every time the $stateChangeStart event fires, a check is done to determine whether the user is an admin using a new isAdmin function added to the authService. This method checks if the roles attribute of app_metadata added by the rule contains admin.

Note: Users have no control over their own app_metadata, so there is no risk of a user modifying their own access level in Auth0. Keep in mind, however, that the payload of a JSON Web Token can be modified in debuggers such as jwt.io. If a user does this, their JWT will be invalidated and become unusable for accessing server resources; however, the user would be able to access client side routes with a modified payload. Be sure to keep sensitive information out of the client side completely and rely on XHR requests for that information as this will ensure that resources are properly protected.

Now if an user logs in with an email that contains @example, they will be allowed access to the /admin route.

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