Working with SharePoint User Profiles in SPFx using PnPjs

Managing user information is a critical part of building personalized SharePoint Framework (SPFx) solutions. SharePoint Online provides the User Profile Service to store and retrieve user-related data, while PnPjs simplifies working with these APIs in a clean and modern way.

In this article, we’ll explore how to work with user profiles using PnPjs in an SPFx project, from fetching profile properties to updating custom attributes.

Prerequisites

• A SharePoint Framework (SPFx) solution setup.
• Installed PnPjs libraries

  npm install \
    @pnp/sp \
    @pnp/graph \
    @pnp/logging \
    @pnp/queryable
  

• Import required modules.

  import { spfi, SPFx } from "@pnp/sp";
  import "@pnp/sp/profiles";
  

Initializing PnPjs in SPFx

Inside your web part or extension, set up PnPjs with SPFx context.

const sp = spfi().using(SPFx(this.context));

Getting Current User Profile

You can fetch the current user’s profile properties (like display name, email, manager, etc.).

const profile = await sp.profiles.myProperties();

console.log(profile.DisplayName);
console.log(profile.Email);
console.log(profile.Title);

Get User Profile by Login Name

To fetch another user’s profile, use their login name or email.

const userProfile = await sp.profiles.getPropertiesFor(
  "i:0#.f|membership|[email protected]"
);

console.log(userProfile.DisplayName);
console.log(userProfile.UserUrl);

Get the User’s Colleagues

Retrieve colleagues associated with the current user.

const colleagues = await sp.profiles.myColleagues(); 
colleagues.forEach(c => { console.log(`${c.DisplayName} - ${c.Email}`); });

Get the User’s Manager

const manager = await sp.profiles.myManager(); 
console.log(`Manager: ${manager.DisplayName} - ${manager.Email}`);

Set and Update Profile Properties

Administrators can update specific user profile properties (e.g., a custom attribute).

await sp.profiles.setSingleValueProfileProperty(
  "[email protected]",
  "AboutMe",
  "Passionate about SharePoint Development"
);

⚠️ Note: Updating profile properties requires appropriate admin permissions.

Best Practices

• 🔐 Use least privilege: only request permissions you need.
• ⚡ Cache user data where possible to reduce API calls.
• 🧩 Combine with Microsoft Graph if you need additional attributes (e.g., job title, department, licenses).
• 🛠 Handle missing properties gracefully (not all users will have every attribute populated).

Conclusion

With PnPjs Profiles API, SPFx developers can easily integrate user information into their solutions enabling personalized dashboards, social features, role-based content, and user-specific experiences. From fetching the current user’s properties to managing profile attributes, PnPjs makes it clean, efficient, and developer-friendly.