AngularJS: User Profile

View on Github

AngularJS: User Profile

Gravatar for
By Andres Aguiar

This tutorial demonstrates how to fetch a user's information from Auth0. We recommend you to Log in to follow this quickstart with examples configured for your account.

I want to explore a sample app

2 minutes

Get a sample configured with your account settings or check it on Github.

View on Github
System requirements: AngularJS 1.6+

Most applications display profile information to authenticated users. Auth0 provides a /userinfo endpoint for that. When you send an Access Token to the endpoint, it returns a JSON object with information about the user. The information stored in that object depends on how the user logged in to your application.

To learn more about the information returned by the /userinfo endpoint, see the /userinfo endpoint documentation.

Request the Profile Scope

To retrieve user information, request a scope of openid profile in the angularAuth0Provider options.

// app/app.js

  // ...
  scope: 'openid profile'

Retrieve User Information

Use the client.userInfo method from the auth0.js library to get user information from the /userinfo endpoint.

Use the following arguments in the client.userInfo method:

  1. The user's Access Token
  2. A callback function with arguments for a potential error and a profile

Add a method that calls the client.userInfo method to the authService service.

// 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) {
    cb(err, profile);

function setUserProfile(profile) {
  userProfile = profile;

function getCachedProfile() {
  return userProfile;

The service includes a local userProfile member that caches the profile information you requested with the getProfile call.

Display the User Profile

You can adjust how you show profile information to your users. Some applications have a dedicated profile section for displaying user information. The example below shows how to set it up.

Create a new controller and view to display the profile.

// app/profile/profile.controller.js

(function () {

  'use strict';

    .controller('ProfileController', profileController);

  profileController.$inject = ['authService'];

  function profileController(authService) {

    var vm = this;
    vm.auth = authService;

    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">
      <label><i class="glyphicon glyphicon-user"></i> Nickname</label>
      <h3 class="nickname">{{ vm.profile.nickname }}</h3>
    <pre class="full-profile">{{ vm.profile | json }}</pre>

The component first looks for a profile cached on the service. If it doesn't find the profile, the component calls the getProfile function to get the user's profile from Auth0.

Allow Users to Update Their Profile

You can allow your users to update their profile information. Auth0 provides a user_metadata object to store information that users can edit. See the metadata documentation for more information.

Use Auth0 for FREE