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