Actually, It’s Already In The SharePoint PageContext!

In this post: What is SharePoint PageContext? · How to access SharePoint PageContext? · SharePoint PageContext in Table · How useful is the SharePoint PageContext? · Turning the list into actual code · Related reading

---

What is SharePoint PageContext?

SharePoint PageContext provides standard definitions for SharePoint objects shared between client-side applications, web parts, and other components. Typically the data is fetched via REST queries when navigating to a new page. It can also be preloaded by the web server or filled from a custom application cache.

---

How to access SharePoint PageContext?

In classic SharePoint pages, you can access it directly via the _spPageContextInfo window variable.

In modern SharePoint, you need to scaffold your project to create custom web parts and customizations via the SharePoint generator. The object is passed down from BaseClientSideWebPart, inherited from @microsoft/sp-component-base:

const element: React.ReactElement<ITestWebPartProps> = React.createElement(
  TestWebPart,
  {
    description: this.properties.description,
    context: this.context,
    title: this.properties.title,
    displayMode: this.displayMode,
    updateProperty: (value: string) => {
      this.properties.title = value;
    }
  }
);

Below is a screenshot of the PageContext accessible from your web part, from the context we just passed in the code above.

Seeing those properties, you can get the data right away, without doing an extra query. You can use this whenever you need an ID reference to whatever you’re looking for.

---

SharePoint PageContext in Table

Properties	What’s inside?
aadInfo	Contextual information for communicating with Azure Active Directory. If the current page doesn’t have an associated Azure Active Directory tenant, this property will be undefined.
cultureInfo	Provides culture info for the current user of the application. Primarily used with the PageContext class.
isInitialized	Returns whether the PageContext has been initialized.
legacyPageContext	An object providing classic SharePoint properties that may be required by certain legacy scripts.
list	Contextual information for the SharePoint list hosting the page. If there’s no list associated with the current page, this property will be undefined.
listItem	Contextual information for the SharePoint list item hosting the page. If there’s no list item associated with the current page, this property will be undefined.
serviceKey	The service key for PageContext.
site	Contextual information for the SharePoint site collection (“SPSite”) hosting the page.
user	Provides contextual information for the SharePoint user accessing the page. Primarily used with the PageContext class.
web	Contextual information for the SharePoint site (“SPWeb”) hosting the page.

---

How useful is the SharePoint PageContext?

Very useful! You can do all sorts of validations and checks without a lot of queries and awaits. Below is a list of common uses for optimizing with SharePoint PageContext, based on real experience:

• Check if the current user is an external user.
• Get the user’s basic information — email, ID, time zone, and display name.
• Get the Azure Active Directory tenant and user ID.
• Identify which site page a current user is accessing.
• The current permission a user has.
• Access the SharePoint page color theme.
• Get the current list you’re in and the user’s permissions.
• Check if the current user is an Administrator, is an Owner, or actually has permission to edit, and more.
• Get the associated Hub Site ID.
• Produce the current user’s photo URL.
• Produce a URL for the current user’s Delve site / Personal Site.
• Get the current user’s preferred language.

---

Turning the list into actual code

The list above names real, useful things PageContext can do, but stops short of showing the actual property path for most of them — worth closing that gap for a few of the less obvious ones:

// User's basic info -- email, ID, display name
const email = this.context.pageContext.user.email;
const loginName = this.context.pageContext.user.loginName;
const displayName = this.context.pageContext.user.displayName;

// Associated Hub Site ID -- lives under legacyPageContext, not the top-level object
const hubSiteId = this.context.pageContext.legacyPageContext.hubSiteId;

// Current site collection and web (site) URLs
const siteUrl = this.context.pageContext.site.absoluteUrl;
const webUrl = this.context.pageContext.web.absoluteUrl;

The Hub Site ID one is worth calling out specifically — it’s not a top-level pageContext property the way user or site are. It sits inside legacyPageContext, the same object that exists specifically to carry over classic-page-era properties (like _spPageContextInfo‘s fields) into modern SPFx. If a property from the table above isn’t where you’d expect it at the top level, legacyPageContext is usually where to look next.

Two more from the same list, both also living under legacyPageContext rather than the top level:

// Check if the current user is an Administrator
const isSiteAdmin = this.context.pageContext.legacyPageContext.isSiteAdmin;

// Get the current user's preferred language, as an LCID (e.g. 1033 = English - United States)
const currentLanguage = this.context.pageContext.legacyPageContext.currentLanguage;

isSiteAdmin answers “is this a site collection administrator,” specifically — worth being precise about that distinction, since it’s a narrower question than “does this user have Full Control” or “is this user an Owner.” A site owner without the Site Collection Administrator flag set will read false here even though they can do almost everything an admin can within that site. currentLanguage comes back as a numeric LCID rather than a language name or code like “en-US” — converting it to something human-readable needs a lookup table or the Intl API rather than treating the number itself as displayable.

The current site’s actual permission level for that user — the “current permission a user has” item further up the list — takes a different shape again, since it’s not a simple flag or ID but a permission mask object:

import { SPPermission } from "@microsoft/sp-page-context";

const permission = new SPPermission(this.context.pageContext.web.permissions.value);
const canManageWeb = permission.hasPermission(SPPermission.manageWeb);

hasPermission() checks against a specific named permission from the SPPermission class (imported from @microsoft/sp-page-context) rather than returning a plain boolean or role name — worth checking the exact permission that actually matters for a given piece of UI (manageWeb, manageLists, addListItems, and dozens more) instead of assuming isSiteAdmin alone covers every permission-gated decision a web part needs to make.

---

If a PageContext property isn’t where you’d expect at the top level, legacyPageContext is usually where to look next — it carries over classic-page-era fields into modern SPFx.

Related reading

• How to check if current user is external in SharePoint — a concrete, worked use of PageContext’s user object.
• Understanding SharePoint Hub Sites — background on the Hub Site ID this post’s code above retrieves.

---

Now that is one useful tip! For questions and clarifications, please write it as a comment below. Have a nice day!

References: PageContext class

---

App Catalog Authentication Automation Backup Compliance Content Type CSS Flows Google Javascript Limitations List Metadata MFA Microsoft Node NodeJs O365 OneDrive Permissions PnP PnPJS Policy PowerApps Power Automate PowerAutomate PowerPlatform PowerShell React ReactJs Rest API Rest Endpoint Security Send an HTTP Request to SharePoint SharePoint SharePoint List SharePoint Modern SharePoint Online SPFX SPO Sync Tags Teams Termstore Versioning

• Facebook
• Twitter
• LinkedIn
• Pinterest
• Mail