Unable to get PNPJS SPFX context from a ListView Extension

Question

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?

Answer 1

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

super.onInit().then(_ => {  
    sp.setup({
       spfxContext: this.context
    });
});

sp.web.lists.getByTitle("Document Templates").items().then((items) => {
  console.log("items", items);
})

Answer 2

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.