SPFx: Check if User is an Admin or an Owner is SharePoint

Introduction

When working with SharePoint Framework (SPFx), there are times when you need to determine whether a user has administrative privileges. This is especially useful in scenarios where certain UI elements or functionalities should only be accessible to administrators. In this blog, we’ll explore how to check if a user is an admin using the site context in both an SPFx WebPart and an Application Customizer.

Understanding SharePoint User Roles

SharePoint provides different permission levels, and administrative privileges can vary based on context:

Site Collection Administrators: Users with full control over the entire site collection.
Owners: Users with full control over a specific site.
Tenant Administrators: Users managing SharePoint at the tenant level.

Using SPFx, we can check user permissions via the PageContext and Microsoft Graph APIs.

Checking If a User Is an Admin in an SPFx WebPart

SPFx provides this.context.pageContext.web to access the current web’s properties, including user permissions. Below is a simple way to check if the current user has full control:

Sample Code for a WebPart

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { IWebPartContext } from '@microsoft/sp-webpart-base';

export default class AdminCheckWebPart extends BaseClientSideWebPart<{}> {

  private async checkIfUserIsAdmin(): Promise<boolean> {
    const webUrl = this.context.pageContext.web.absoluteUrl;
    const apiUrl = `${webUrl}/_api/web/effectiveBasePermissions`;
    
    const response: SPHttpClientResponse = await this.context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
    const data = await response.json();

    // Full control bitwise value
    const fullControl = 0x40000000;
    return (data.High & fullControl) === fullControl;
  }

  public async render(): Promise<void> {
    const isAdmin = await this.checkIfUserIsAdmin();
    this.domElement.innerHTML = `<h3>${isAdmin ? 'You are an Admin!' : 'You are NOT an Admin.'}</h3>`;
  }
}

Explanation:

The effectiveBasePermissions API retrieves the permissions for the current user.
We perform a bitwise comparison to check if the user has full control.
The result is displayed dynamically.

Checking If a User Is an Admin in an Application Customizer

An Application Customizer can be used when you need to check the admin status across all pages of a SharePoint site.

Sample Code for an Application Customizer

import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export default class AdminCheckApplicationCustomizer extends BaseApplicationCustomizer<{}> {

  private async checkIfUserIsAdmin(): Promise<boolean> {
    const webUrl = this.context.pageContext.web.absoluteUrl;
    const apiUrl = `${webUrl}/_api/web/effectiveBasePermissions`;
    
    const response: SPHttpClientResponse = await this.context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
    const data = await response.json();

    const fullControl = 0x40000000;
    return (data.High & fullControl) === fullControl;
  }

  public async onInit(): Promise<void> {
    const isAdmin = await this.checkIfUserIsAdmin();
    console.log(`User is ${isAdmin ? '' : 'not'} an admin.`);
  }
}

Why Use an Application Customizer?

Runs across all pages of the site.
Useful for modifying site-wide UI based on admin status.
Can be used for global alerts, banners, or admin-only UI elements.

Alternative Approach: Checking Membership in Site Owners Group

Another way to check for admin rights is to verify if the user is part of the “Owners” group:

const ownersGroupUrl = `${this.context.pageContext.web.absoluteUrl}/_api/web/AssociatedOwnerGroup/Users?$filter=Title eq '${this.context.pageContext.user.displayName}'`;
this.context.spHttpClient.get(ownersGroupUrl, SPHttpClient.configurations.v1)
  .then(response => response.json())
  .then(data => {
    console.log(data.value.length > 0 ? 'User is an Owner' : 'User is NOT an Owner');
});

Pros and Cons of Different Approaches

Approach	Pros	Cons
`effectiveBasePermissions` API	Simple and effective	Can be affected by permission inheritance
Owners Group Check	Works well for site-specific checks	Not useful for site collection admins
Microsoft Graph API (Tenant-Level Check)	Can check across all sites	Requires additional permissions

Determining admin status in SPFx is straightforward using the effectiveBasePermissions API or checking group membership. WebParts are great for specific page-based checks, while Application Customizers help enforce admin-based logic site-wide.

Another approach is using the present data from site page context,

Actually, It’s Already In The SharePoint PageContext!

Have you implemented admin checks in SPFx? Let me know your thoughts in the comments!