You do not have permission to perform this action or access this resource PNPJS

Question

We have an portal where an azure AD user will login and will be able to see the data from list on sharepoint.

Trying to achieve this using PNPJS and Angular MSAL

For the development phase,executed all list operation successfully using sp-rest-proxy but when same angular project was built and uploaded in azure web app, it gives an error as "{"error":{"code":"-2147024891, System.UnauthorizedAccessException","message":{"lang":"en-US","value":"Access denied. You do not have permission to perform this action or access this resource."}}}"

Response Headers also have error as X-MSDAVEXT_Error: 917656; Access+denied.+Before+opening+files+in+this+location%2c+you+must+first+browse+to+the+web+site+and+select+the+option+to+login+automatically. Now with SP setup variable

const SPHeaders: any = {
  "Accept": "application/json;odata=verbose",
  "content-type": "application/json;odata=verbose"
 };
 sp.setup({
  sp: {
  baseUrl: "SharePoint siteUrl",
  headers: SPHeaders
  }
 });

Note : User successfully logs in and I can active directory user info with the help of graph api.

I even tried passing token which I get after authentication in SP setup like below, but that gives an error as reason="Token contains invalid signature.";category="invalid_client" Please forgive me on my ignorance as I am working for the first time on SharePoint stack. Please help me access the lists.

 sp.setup({
      sp: {
        baseUrl: environment.web,
        headers: {
          "Accept": "application/json;odata=verbose",
          "Authorization": `Bearer ${token}`
        }
      }
    });

Answer 1

To use MSAL with PnPjs, you need to do a few more steps:

1. Need to install the PnPjs MSAL client as below:

npm install @pnp/msaljsclient --save

2. After that, you can use it in your code as below:

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

3. Then in your app, you can initialize it as:

sp.setup({
    sp: {
        fetchClientFactory: MsalClientSetup({
            auth: {
                authority: "https://login.microsoftonline.com/<your-tenant>.onmicrosoft.com",
                clientId: <your-client-id>,
                redirectUri: "https://<your-tenant>.sharepoint.com/sites/dev/SitePages/test.aspx",
            },
        }, ["https://<your-tenant>.sharepoint.com/.default"]),
    },
});

const r = await sp.web();

Reference - msaljsclient - MSAL Client for PnPjs