React User Profile

Sample Project

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

System Requirements
  • React 15.5
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.

// src/Auth/Auth.js

auth0 = 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 method which calls client.userInfo to the Auth service.

// src/Auth/Auth.js

constructor() {
  // ...
  this.getProfile = this.getProfile.bind(this);
}

// ...
userProfile;

//...
getProfile(cb) {
  let accessToken = this.getAccessToken();
  this.auth0.client.userInfo(accessToken, (err, profile) => {
    if (profile) {
      this.userProfile = profile;
    }
    cb(err, profile);
  });
}

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 component called ProfileComponent.

// src/Profile/Profile.js

import React, { Component } from 'react';
import { Panel, ControlLabel, Glyphicon } from 'react-bootstrap';
import './Profile.css';

class Profile extends Component {
  componentWillMount() {
    this.setState({ profile: {} });
    const { userProfile, getProfile } = this.props.auth;
    if (!userProfile) {
      getProfile((err, profile) => {
        this.setState({ profile });
      });
    } else {
      this.setState({ profile: userProfile });
    }
  }
  render() {
    const { profile } = this.state;
    return (
      <div className="container">
        <div className="profile-area">
          <h1>{profile.name}</h1>
          <Panel header="Profile">
            <img src={profile.picture} alt="profile" />
            <div>
              <ControlLabel><Glyphicon glyph="user" /> Nickname</ControlLabel>
              <h3>{profile.nickname}</h3>
            </div>
            <pre>{JSON.stringify(profile, null, 2)}</pre>
          </Panel>
        </div>
      </div>
    );
  }
}

export default Profile;

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