JavaScript User Profile

Sample Project

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

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 instance of the auth0WebAuth object.

// app.js

var webAuth = new auth0.WebAuth({
  // ...
  scope: 'openid profile'
});

Make a Call for the User's 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 URL with arguments 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
  document.querySelector('#profile-view .nickname').innerHTML =
    userProfile.nickname;
    
  document.querySelector(
    '#profile-view .full-profile'
  ).innerHTML = JSON.stringify(userProfile, null, 2);

  document.querySelector('#profile-view img').src = userProfile.picture;
}

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

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>

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.

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