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.
// Copy existing permissions while breaking role inheritance
await item.breakRoleInheritance(true);
3. Grant Permissions to a User or Group
Before assigning permissions, ensure the user exists.
const user = await sp.web.ensureUser("[email protected]");
Then assign a role definition (like Contribute or Read).
// 1073741827 = Contribute
await item.roleAssignments.add(user.data.Id, 1073741827);
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.
import { PermissionKind } from "@pnp/sp/security";
const perms = await item.getUserEffectivePermissions("[email protected]");
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