I am trying to create a list view extension, however I am unable to get the PNPJS context in order to query other lists.

If I go to the URL that returns a 403 in a browser tab, it works.

//default BaseListViewComandSet created by Yo
export default class HelloWorldCommandSet extends BaseListViewCommandSet<IHelloWorldCommandSetProperties> {

  public onInit(): Promise<void> {
    //context does exist        
    console.log("this.context", this.context);

    //this creates
    const sp = spfi().using(SPFx(this.context)).using(PnPLogging(LogLevel.Warning));

    //this returns a 403 Error
    sp.web.lists.getByTitle("Document Templates").items().then((items) => {
      console.log("items", items);

update I have found the error seems to occur with SPFx adding a Authorization bearer header, which it does not seem to do with my normal webpart spfx apps.

When I comment out the following in spfx.js (@pnp/s library) it works:

export function SPFxToken(context) {
    return (instance) => {
        instance.on.auth.replace(async function (url, init) {
            const provider = await context.aadTokenProviderFactory.getTokenProvider();
            const token = await provider.getToken(`${url.protocol}//${url.hostname}`);
            // eslint-disable-next-line @typescript-eslint/dot-notation
            //init.headers["Authorization"] = `Bearer ${token}`;  THIS LINE IS CAUSING PROBLEMS
            return [url, init];
        return instance;

Obviously I do not want to edit the @pnp/js framework, so I need to figure out why it adding this header for my ListView Extension app and not my webpart app?


2 Answers 2


Try to initialize the context as below and then fetch the list items:

super.onInit().then(_ => {  
       spfxContext: this.context

sp.web.lists.getByTitle("Document Templates").items().then((items) => {
  console.log("items", items);
  • This is the old version of pnpjs.
    – Michael
    Feb 13, 2023 at 10:22
  • I'm using version 3. I was going to downgrade to try but it effected things elsewhere. PS I have no issues doing my method in normal webpart SPFx apps
    – Michael
    Feb 13, 2023 at 10:23

While not ideal, after downgrading to @pnp/[email protected] it works, I noticed this version did not have the authorization part.

Would love a proper answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.