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?