Retrieve Current User Information in SPFx Web Part using Graph API

As a SharePoint Framework developer, you may need to retrieve the current user’s information frequently. Recently, I got a requirement from a client to display logged-in user information, such as Email, Display Name, Job Title, Department, etc., in a SPFx web part. I did this using Microsoft Graph API.

In this article, we will see how to use Microsoft Graph API in the SharePoint Framework (SPFx) No framework webpart, and retrieve the current signed-in user’s information.

Create SPFx Web Part to Get User Details Using Microsoft Graph API

Now, we will see step by step how to develop an SPFx client-side web part with no framework to get user details using the Graph API. I hope by this time you have already set up the development environment for SPFx.

1. Create a new project folder on your computer and go to the same directory.

md MSGraphGetUserInfo
cd  MSGraphGetUserInfo

2. Create a new solution by running the Yeoman SPFx generator command:

yo @microsoft/sharepoint

3. Then, it will prompt you with the following questions; answer them as given below.
   • What is your solution name? Hit enter for the default solution name; otherwise, provide the custom name.
   • Which type of client-side component to create? Webpart
   • Add new Web part to solution ms-graph-get-user-info.
   • What is your Web part name? GetUserInfo_MSGraph
   • Which template would you like to use? No framework

4. Once the solution is created successfully, open the solution in Visual Studio Code by running the command below.

Code .

5. Refer to the screenshot below, which shows the solution being successfully created. Open the package-solution.json file located in the config folder, and provide the permissions below to retrieve the current user’s information.

"webApiPermissionRequests": [{  
      "resource": "Microsoft Graph",  
      "scope": "User.Read"  
  }]

6. Now, open the GetUserInfo_MSGraph.ts file, and update the code as shown below.

7. Next, update the render() method as shown below by adding the ${userHtml}and then update the onInit() method.

Here is the code:

import { MSGraphClientV3 } from '@microsoft/sp-http';

export default class GetUserInfoMsGraphWebPart extends BaseClientSideWebPart<IGetUserInfoMsGraphWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';
  private _currentUser: any = null; // will hold /me response

  public render(): void {
    const userHtml = this._currentUser
      ? `<div class="${styles.user}">
        <h3>${escape(this._currentUser.displayName || '')}</h3>
        <p><strong>Email:</strong> ${escape(this._currentUser.mail || this._currentUser.userPrincipalName || '')}</p>
        <p><strong>Given Name:</strong> ${escape(this._currentUser.givenName || '')}</p>
        <p><strong>Surname:</strong> ${escape(this._currentUser.surname || '')}</p>
        <p><strong>Job Title:</strong> ${escape(this._currentUser.jobTitle || '')}</p>
        <p><strong>Department:</strong> ${escape(this._currentUser.department || '')}</p>
        <p><strong>Mobile Phone:</strong> ${escape(this._currentUser.mobilePhone || '')}</p>
        <p><strong>Office Location:</strong> ${escape(this._currentUser.officeLocation || '')}</p>
        <p><strong>Preferred Language:</strong> ${escape(this._currentUser.preferredLanguage || '')}</p>
        <p><strong>User ID:</strong> ${escape(this._currentUser.id || '')}</p>
      </div>`
    : `<div>Loading user info from Microsoft Graph…</div>`;

    this.domElement.innerHTML = `
    <section class="${styles.getUserInfoMsGraph} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
      <div class="${styles.welcome}">
        <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
        <div>${this._environmentMessage}</div>
        <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
      </div>
      <div>
      <h4>Current User Info (from Microsoft Graph)</h4>
        ${userHtml}
      </div>
    </section>`;
  }
  protected onInit(): Promise<void> {
    return this._getEnvironmentMessage().then(message => {
      this._environmentMessage = message;
      return this.context.msGraphClientFactory.getClient('3').then((client:MSGraphClientV3) =>{
        return client.api('/me')
        .select('displayName,mail,userPrincipalName,givenName,jobTitle,department,mobilePhone,officeLocation,preferredLanguage,surname,id')
        .get().then((user:any) =>
        {
          this._currentUser =user;
          this.render();
        }).catch(error => {
          console.error('Error fetching /me from Microsoft Graph', error);
      });
    });
  });
  }

Let’s understand how this code is working:

• MSGraphClientV3 is the latest version, and we imported it from the @microsoft/sp-http package. Using this client, we can make Microsoft Graph calls.
• In the onInit() method, we call the Graph API endpoint /me, which retrieves the current signed-in user’s information.
• The response from Microsoft Graph is stored in a private variable _currentUser.
• After storing the data, we call the render() method again to display the updated user information in the web part.
• In the render() method, we check if _currentUser has data. If yes, we display the user details like name, email, department, etc. If not, we show a loading message.

9. Update the .scss styles file with the below styles.

.user {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  background-color: #f9f9f9;

  h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #323130;
  }

  p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
    color: #605e5c;

    strong {
      color: #323130;
    }
  }
}

10. Run the command below to test this web part locally.

gulp serve

Look at the image below, which retrieves the current signed-in user information.

The User.Read permission is a delegated permission that allows us to retrieve the signed-in user’s details. If you face issues like insufficient privileges, please follow this article to grant the required permissions.

I hope you found this article helpful!, Here, I explained how to create an SPFx web part to get the current user information using the Microsoft Graph API.

You may like the following SPFx tutorials:

• SPFx Application Customizer Example – An Analog Clock with React
• How to use bootstrap in SPFx webpart
• SPFx – Bind dropdown list from SharePoint list using PnP
• Call Azure Function From SharePoint Framework

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.