jQuery User Profile

Sample Project

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

System Requirements
  • jQuery 3.2.1
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 WebAuth instance, specify that you would like to ask for these scopes.

// app.js

var webAuth = new auth0.WebAuth({
  // ...
  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 function which calls client.userInfo to the Auth service.

// app.js

var userProfile;

function getProfile() {
  if (!userProfile) {
    var accessToken = localStorage.getItem('access_token');

    if (!accessToken) {
      console.log('Access token must exist to fetch profile');
    }

    webAuth.client.userInfo(accessToken, function(err, profile) {
      if (profile) {
        userProfile = profile;
        displayProfile();
      }
    });
  } else {
    displayProfile();
  }
}

function displayProfile() {
  // display the profile
  $('#profile-view .nickname').text(userProfile.nickname);
  $('#profile-view .full-profile').text(JSON.stringify(userProfile, null, 2));
  $('#profile-view img').attr('src', userProfile.picture);
}

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 Template

Add a template to display the user's profile.

<!-- index.html -->

<main class="container">
  <!-- home view -->
  <div id="home-view">
    <h4></h4>
  </div>

  <!-- profile view -->
  <div id="profile-view" class="panel panel-default profile-area">
    <div class="panel-heading"><h3>Profile</h3></div>
      <div class="panel-body">
        <img class="avatar" alt="avatar">
        <div>
          <label><i class="glyphicon glyphicon-user"></i> Nickname</label>
          <h3 class="nickname"></h3>
        </div>
        <pre class="full-profile"></pre>
      </div>
  </div>
</main>

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