Using Microsoft Authentication Library MSAL with PnPjs

Question

I've been reading the PnPjs page and I need to understand what it does: https://pnp.github.io/pnpjs/authentication/msaljsclient/#calling-sharepoint-via-msal It seems like:

import { MsalClientSetup  } from "@pnp/msaljsclient";
import { sp } from "@pnp/sp/presets/all";

sp.setup({
    sp: {
        fetchClientFactory: MsalClientSetup({
            auth: {
                authority: "https://login.microsoftonline.com/mytentant.onmicrosoft.com/",
                clientId: "00000000-0000-0000-0000-000000000000",
                redirectUri: "https://mytentant.sharepoint.com/sites/dev/SitePages/test.aspx",
            },
        }, ["https://mytentant.sharepoint.com/.default"]),
    },
});

const r = await sp.web();

Is providing a wrapper for a SharePoint app to be given perhaps an impersonation step, or for the app creator to allow other users to have elevated permissions? If not (oh I wish) then what does it do?

Answer 1

you have to add baseUrl in the setup.

import { MsalClientSetup  } from "@pnp/msaljsclient";
import { sp } from "@pnp/sp/presets/all";

sp.setup({
    sp: {
        baseUrl: "https://{my tenant}.sharepoint.com/sites/dev/",
        fetchClientFactory: MsalClientSetup({
            auth: {
                authority: "https://login.microsoftonline.com/mytentant.onmicrosoft.com/",
            clientId: "00000000-0000-0000-0000-000000000000",
            redirectUri: "https://mytentant.sharepoint.com/sites/dev/SitePages/test.aspx",
             },
         }, ["https://mytentant.sharepoint.com/.default"]),
     },
});

const r = await sp.web();

---

After adding baseUrl we can get SharePoint data and it's working with above code.