Spfx, WebParts and PnP : How to get the current user id?

Question

Good morning every SharePoint fellow ! I know this question has surely already been posted, but i could'n't found a clear answer.

Context

I am programming a custom WebPart for Sharepoint online with all the good tools (react, spfx, etc..). I am really new to all this process.

I have a SP Document Library with a custom column called "UserId". This column will help to know if the user has already read the doc.

My custom WebPart will be kind of a "Read/Unread" tool. This WP will read that library and fetch all the items, witch the current user didn't already read. I would like to trigger the items where my current user's ID does not appear in my UserId column. I am quite confident with it, but i am blocking on one simple thing :

My question : How to retrieve the current User's ID?

What i did

So I did create a project, according the tutorial on the crud react video. Now, i would like to get my current user id. I did code a method using pnp in my MyCustomWPWebPart.ts :

import pnp from '@pnp/pnpjs';
public getMyID(){
    var myID = "";
    pnp.setup({
          sp: {
            headers: {
                "Accept": "application/json; odata=verbose"
            }
          }
        });

    pnp.sp.profiles.myProperties.get().then(d => {
       var properties = d.UserProfileProperties.results;
       var myID = properties[44].Value.split(',')[0].substr(3);// get object 44's value ("CN=ID,OU=..."), split it to get the first one, then get rid of the "CN=" and there you go, a nice little 36char ID   
       return myID;
      });
  }

This code works.. but i think i did'nt get it in the right place. And moreover, i don't know how to use it in my MyCustomWP.tsx file. I don't know how i can call my function getMyID.

What I would like

I would like to be able to retrieve this userId in my MyCustomWP.tsx .. and it is quite difficult. What do I do wrong ? Is there any other (simple) way to do it ?

In advance, thank you for your time, I really am a beginner with react and spfx, so i can be really long to understand where everything goes.

Answer 1

using @pnp/sp, you can simply get the current user's property using

import { sp } from '@pnp/sp';

 return sp.web.currentUser.get().then((user) => {
            console.log(user);
            return user;
        });

and store in a state like so:

 this.setState({
      currentUser: await getCurrentUser()
    });

Answer 2

The user id used in SharePoint User Fields is not the one your retrieve. It actually is a lookup to a hidden list (User Information List) which exists on your Root Web of your site collection.

The id is unique to a site collection, and will change on every site collection (the id is generated the first time a user appears on the site collection, and increments for each new user)

To retrieve it, you must make a different call.

The following Stack Overflow request seems to suggest to call the web.currentUser.get() endpoint, which is consistent to the REST call I make to get the ID : <sitecollectionuri>/_api/web/currentuser

SPFx - How to get curernt user properties with pnp js core

There, you get a user object with an Id property, this is the one you'll see in SharePoint User Fields.

Hope this helps!

Concerning the React issue about passing values, in SharePoint Framework, a WebPart is made of two React components. The parent, responsible for the property pane and initialization/integration inside SharePoint (for a News WebPart its file name is NewsWebPart.ts), and the child one, responsible for the WebPart rendering itself (same example, called News.tsx).

As with every react component, a parent can give its children values through props. In my case I have this code in NewsWebPart.ts:

public render(): void {
  const element: React.ReactElement<INewsProps > = React.createElement(
    News,
    {
      context: this.context,
      id: this.properties.id
    }
  )

  ReactDom.render(element, this.domElement)
}

Which passes two props to my WebPart: this.context and the one in the property pane: this.properties.id. Note that this code can easily be replaced in a tsx file by return <News context={this.context} id={this.properties.id}/>.

Your snippet responsible for retrieving the user id should be in the child component however, as it is of no concern to the SharePoint integration or the property pane. If you wish to leave it here, just pass the correct variable in the props.

If you do not know how to handle the initialization of your component, you should read more about React Components and their life cycle. React has a very nice Tic Tac Toe tutorial to help understanding the concepts.