Get Current User Information Using PnP Library In SharePoint Framework

PnP JavaScript library contains a lot of methods and properties for accessing SharePoint Data. We will see how to use this library in SharePoint Framework to get the current user information.

Use the below command to create a SharePoint Framework project,

yo @microsoft/sharepoint

Create a SharePoint Framework project with “No JavaScript” option. So the below code snippet does not have any JavaScript Frameworks and you can reuse it in any JavaScript framework APIs.

After the project creation, use the below npm command to install the PnP JavaScript dependencies to the SharePoint Framework project.

npm install –save @pnp/common @pnp/sp @pnp/logging @pnp/odata

After importing the PnP JS dependencies, import the classes from PnP JS to the web part by adding below lines in the _webpart.ts file.

import { sp } from "@pnp/sp";
import { CurrentUser } from '@pnp/sp/src/siteusers';

So the object is the starting point for accessing all the SharePoint related PnP objects and methods.

CurrentUser object returns the following properties for now. In the future, it may change based on the new properties introduced to the SharePoint and open source contributions to this library. We have to import CurrentUser object from SiteUsers class from the @pnp/sp.

Email: string;
Id: number;
IsHiddenInUI: boolean;
IsShareByEmailGuestUser: boolean;
IsSiteAdmin: boolean;
LoginName: string;
PrincipalType: number;
Title: string;

Add the below code snippet under the _WebPart class in _webpart.ts file in the project. getSPData method calls the PnP request method to fetch the current users' data from SharePoint. renderData method is used to generate the HTML and pass the value for rendering. Render method renders the HTML in the browser.

//Get Current User Display Name
private getSPData(): void {
sp.web.currentUser.get().then((r: CurrentUser) => {
this.renderData(r['Title']);
});
}
private renderData(strResponse: string): void {
const htmlElement = this.domElement.querySelector("#pnpinfo");
htmlElement.innerHTML = strResponse;
}
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.pnPDemos}">
<div class="${ styles.container}">
<div class="${ styles.row}">
<div class="${ styles.column}">
<div id="pnpinfo"></div>
</div>
</div>
</div>
</div>`;
this.getSPData();
}

Below is the output based on the code snippet. This returns the current user title value. We can also use other user properties to display in the webpart.

Get Current User Information Using PnP Library In SharePoint Framework

Get Groups of Current User

Based on the current user, we can also get the groups where the current user is the member. CurrentUser.Groups return the collection of SharePoint Groups associated with the current user. Replace the getSPData method with the following code, which is used to fetch the groups associated by the current user in SharePoint site.

//Get collection of SharePoint Groups for the current User
private getSPData(): void {
sp.web.currentUser.groups.get().then((r: any) => {
let grpNames: string ="";
r.forEach((grp: SiteGroup) =>{
grpNames += "<li>"+grp["Title"]+"</li>"
});
grpNames = "<ul>"+grpNames+"</ul>";
this.renderData(grpNames);
});
}

I hope, you have learned how to access the current user details in SharePoint Framework webpart using PnP JavaScript Library.