Ionic Authorization

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • Ionic 1.3.1
Show requirements

Many identity providers will supply access claims, like 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, you will create a rule that assigns users to either an admin role, or a single user role. Go to the New Rule page on 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 their email contains @example.com. Otherwise, they 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 or customize the rule as needed.

Restrict Access to Secure Content

To restrict secure content to users with a role of admin, start by providing a function in any controller which checks the role. The auth.isAdmin function in this example will be defined later.

// www/components/home/home.controller.js

// Restrict access to secure content
function showAdminContent() {

  if (auth.isAdmin()) {

    // Secure content

  } else {

    // Non-secure content

  }

  // common content

}

Add the showAdminContent method to HomeController.

// www/components/home/home.controller.js

(function () {

  'use strict';

  angular
    .module('app')
    .controller('HomeController', HomeController);

  HomeController.$inject = ['$state', 'authService', '$scope', '$ionicPopup'];

  function HomeController($state, authService, $scope, $ionicPopup) {
    var vm = this;

    vm.login = login;
    vm.logout = logout;
    vm.showAdminContent = showAdminContent;

    $scope.$on("$ionicView.beforeEnter", function() {

      authService.getProfileDeferred().then(function(profile) {
        vm.profile = profile;
      });

    });

    function login() {
      $state.go("login");
    }

    function logout() {
      authService.logout();

      // Clear VM value
      vm.profile = null;
    }

    // Restrict access to secure content
    function showAdminContent() {

      var popup = {};

      if (authService.isAdmin()) {

        // Secure content

        popup = {
          title: 'Congratulations!',
          template: 'You are viewing this because you are logged in and you have \'admin\' role'
        };

      } else {

        // Non-secure content

        popup = {
          title: 'Unauthorized',
          template: 'You are not allowed to see this content'
        };

      }

      // common content

      $ionicPopup.alert(popup);
    }

  }

}());

Create a new Show Admin Content item in the home template:

<!-- www/components/home/home.html -->
<ion-view view-title="Auth0 Ionic Quickstart" ng-controller="HomeController as vm">
  <ion-content class="padding">
    <div ng-hide="isAuthenticated">
      <p>Welcome to the Auth0 Ionic Sample! Please log in:</p>
      <button class="button button-full button-positive" ng-click="vm.login()">
        Log In
      </button>
    </div>
    <div ng-show="isAuthenticated">
      <div class="list card">
        <div class="item item-avatar">
          <img src="{{ vm.profile.picture }}">
          <h2>{{ vm.profile.name }}</h2>
          <span ng-if="vm.profile.country" class="additional-info">Country (added by rule): <strong>{{ vm.profile.country }}</strong></span>
        </div>
        <!-- Show Admin Content item -->
        <a class="item" ng-click="vm.showAdminContent()">
          Show Admin Content
        </a>
        <a class="item item-icon-left assertive" ng-click="vm.logout()">
          <i class="icon ion-log-out"></i> Log Out
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>

The showAdminContent method checks if 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.

// www/components/auth/auth.service.js
(function() {
  ...
  function authService($rootScope, lock, authManager, jwtHelper, $q) {
    ...
    function isAdmin() {
      return userProfile && userProfile.app_metadata
        && userProfile.app_metadata.roles
        && userProfile.app_metadata.roles.indexOf('admin') > -1;
    }

    return {
      ...
      isAdmin: isAdmin
    }
  }
})();

Now if an user logs in with an email that contains @example, they will be see a popup informing them that they are authorized.

Mobile example screenshot
Previous Tutorial
6. Rules
Next Tutorial
8. Calling APIs
Use Auth0 for FREECreate free Account