AngularJS User Profile

Sample Project

Download a sample project specific to this tutorial configured with your Auth0 API Keys.

System Requirements
  • AngularJS 1.6
Show requirements

Most applications have a requirement to retrieve and show profile information to the authenticated user. Auth0 provides a /userinfo endpoint which, when sent an access_token, will respond with a JSON object containing information about the user. The specific user information that will be contained in this object will vary depending on how the user logged into your application. For more information about which fields are returned under which circumstances, see the documentation for the /userinfo endpoint.

Request the Profile Scope

The user's access_token requires a scope of openid profile to successfully retrieve their information. In the angularAuth0Provider options, specify that you would like to ask for these scopes.

// app/app.js

angularAuth0Provider.init({
  // ...
  scope: 'openid profile'
});

Make a Call for the User's Info

The auth0.js library provides a method called client.userInfo which will make a call to the /userinfo endpoint and retrieve the user's information. The user's access_token must be passed to this method as the first argument. A callback passed as the second argument should have parameters for a potential error and a profile.

Add a method which calls client.userInfo to the authService.

// app/auth/auth.service.js

var userProfile;

function getProfile(cb) {
  var accessToken = localStorage.getItem('access_token');
  if (!accessToken) {
    throw new Error('Access token must exist to fetch profile');
  }
  angularAuth0.client.userInfo(accessToken, function(err, profile) {
    if (profile) {
      setUserProfile(profile);
    }
    cb(err, profile);
  });
}

function setUserProfile(profile) {
  userProfile = profile;
}

function getCachedProfile() {
  return userProfile;
}

A local userProfile member is included in the service which is intended to hold the profile that comes back from the getProfile call. As will be seen below, this example will utilize a dedicated profile area which will call getProfile when initialized. The userProfile member is included here so that the user's information can be held in memory after it is first retrieved, preventing the need for calls to getProfile every time the area is initialized. This behavior isn't required, but it can help to provide a better user experience.

Add a Profile Component

The way your user's information gets displayed depends on the needs of your application, but a common implementation is to provide a dedicated profile area. The exact details are, of course, at your discretion.

Create a new controller and view to display the profile.

// app/profile/profile.controller.js

(function () {

  'use strict';

  angular
    .module('app')
    .controller('ProfileController', profileController);

  profileController.$inject = ['authService'];

  function profileController(authService) {

    var vm = this;
    vm.auth = authService;
    vm.profile;

    if (authService.getCachedProfile()) {
      vm.profile = authService.getCachedProfile();
    } else {
      authService.getProfile(function(err, profile) {
        vm.profile = profile;
      });
    }

  }

})();
<!-- app/profile/profile.html -->

<div class="panel panel-default profile-area">
  <div class="panel-heading"><h3>Profile</h3></div>
  <div class="panel-body">
    <img ng-src="{{ vm.profile.picture }}" class="avatar" alt="avatar">
    <div>
      <label><i class="glyphicon glyphicon-user"></i> Nickname</label>
      <h3 class="nickname">{{ vm.profile.nickname }}</h3>
    </div>
    <pre class="full-profile">{{ vm.profile | json }}</pre>
  </div>
</div>

When the component is initialized, it first looks for a profile held in memory on the service. If none is found, it calls the getProfile function to fetch the user's profile from Auth0.

Updating a User's Profile

Auth0 provides a user_metadata object for all users. This object is intended to store information that can be modified by the user and is a useful place to keep data that is meant to be user-defined. See the management API documentation for more information on how to allow users to make edits to their own profile information.

Previous Tutorial
1. Login
Next Tutorial
3. Calling an API
Use Auth0 for FREECreate free Account