PnP JavaScript library contains 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 which 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

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

sp object is the starting point for accessing all SharePoint related PnP objects and methods.
CurrentUser object returns the following properties for now. In 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 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) => {

  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>

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

Output: Current User from SharePoint Framework

Get Groups of Current User

CurrentUser.Groups returns the collection of SharePoint Groups associated to the current user. The following fetches 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>";