Manage SharePoint Permissions with PnPjs in SPFx

Overview

In this guide, we’ll walk through how to get, break, and assign permissions in SharePoint using the latest PnPjs (spfi) in your SPFx web part. This includes user/group resolution, breaking role inheritance, and assigning permission levels to users and SharePoint groups — using proper, production-safe API calls.

Setting Up PnPjs in SPFx

First, ensure PnPjs is installed and configured properly:

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

Set up your SPFx service (example below):

import { spfi, SPFI } from "@pnp/sp";
import { SPFx } from "@pnp/sp";
import { getSP } from "../pnpjsConfig"; // your sp instance factory

let sp: SPFI;

export const setupPnPjs = (context: WebPartContext): void => {
  sp = spfi().using(SPFx(context));
};        

1. Get Permissions of a List or Item

✅ Get Role Assignments of a List

const list = sp.web.lists.getByTitle("YourListTitle"); const assignments = await list.roleAssignments(); console.log(assignments);        

✅ Get Permissions for a Specific Item

const item = sp.web.lists.getByTitle("YourListTitle").items.getById(1); const itemAssignments = await item.roleAssignments();        

Each role assignment contains a PrincipalId, which you can use to get the user/group:

for (const assignment of itemAssignments) {
  const member = await sp.web.siteUsers.getById(assignment.PrincipalId)();
  console.log(`Assigned to: ${member.Title}`);
}        

2. Break Permission Inheritance

To break inheritance on an item or list:

await item.breakRoleInheritance(true); // true = copy existing permissions        

3. Grant Permissions to a User or Group

Before assigning permissions, ensure the user exists:

const user = await sp.web.ensureUser("user@domain.com");        

Then assign a role definition (like Contribute or Read):

await item.roleAssignments.add(user.data.Id, 1073741827); // 1073741827 = Contribute        

Common Role Definition IDs

• Role Definition ID
• Full Control 1073741829
• Design 1073741828
• Contribute 1073741827
• Read 1073741826
• Limited Access 1073741825

You can also dynamically get role definitions:

const roleDef = await sp.web.roleDefinitions.getByName("Contribute")();
await item.roleAssignments.add(user.data.Id, roleDef.Id);        

4. Remove Permissions

To remove a user or group’s permission from an item:

await item.roleAssignments.getByPrincipalId(user.data.Id).delete();        

5. Check Effective Permissions

You can check what permissions a user has on an item:

const perms = await item.getUserEffectivePermissions("user@domain.com");
import { PermissionKind } from "@pnp/sp/security";

if (sp.web.hasPermissions(perms, PermissionKind.ViewListItems)) {
  console.log("User has view permissions.");
}        

Summary

With the modern PnPjs (spfi) library, you can easily manage SharePoint permissions from your SPFx components — including inheritance control, user access, and security roles — all with a cleaner API.

Coming Next

In the next blog, we’ll explore custom SharePoint group creation, role definitions, and advanced permission validation using PnPjs.

Helpful Links

• PnPjs Documentation
• RoleDefinitions in SharePoint