How to get spContext in PCF component using PnPJS + MSAL (needed for ModernTaxonomyPicker)

[yvesrosius]

What version of PnPjs library you are using

3.x

Minor Version Number

3.24.0

Target environment

Browser App (Hosted external to Microsoft 365 platform)

Additional environment details

PCF component in browser + MSAL (Implicit flow) https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview https://pnp.github.io/pnpjs/concepts/auth-browser/

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { CustomModernTaxonomyPicker } from "./components/CustomModernTaxonomyPicker";
import { createElement } from "react";
import { ReactElement } from "react";
import { spfi, SPBrowser } from "@pnp/sp";
import { MSAL } from "@pnp/msaljsclient";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/batching";
import "@pnp/sp/files";
import { Configuration, AuthenticationParameters } from "msal";
import "@pnp/sp/context-info";

let _notifyOutputChanged: () => void
let _context: ComponentFramework.Context<IInputs>
let _spContext: any

const init = (
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary
): void => {
    _notifyOutputChanged = notifyOutputChanged
    _context = context

    const configuration: Configuration = {
        auth: {
            authority: "https://login.microsoftonline.com/6d7b9c93-c167-431a-9451-faee9adfd48b/",
            clientId: "e4ebce0d-2dcb-475a-9621-ad4b243a651b"
        }
    };

    const spAuthParams: AuthenticationParameters = {
        scopes: ["https://vt7xc.sharepoint.com/.default"]
    };

    const sp = spfi("https://vt7xc.sharepoint.com/")
        .using(SPBrowser(), MSAL(configuration, spAuthParams));

    sp.web()
        .then(web => { console.log(web.Title); })

    sp.web.getContextInfo("https://vt7xc.sharepoint.com/")
    .then(contextInfo => {
        _spContext = contextInfo
        console.log(_spContext)
    })
}

Question/Request

Successfully authenticated PnP JS using MSAL (Implicit flow)

This works: sp.web() .then(web => { console.log(web.Title); })

However, I need a context for a ModernTaxonomyPicker component.

Already tried:

sp.web.getContextInfo("https://vt7xc.sharepoint.com/")
    .then(contextInfo => {
        _spContext = contextInfo
        console.log(_spContext)
    })

This seems to give me some information, but it does not reflect all information available in context within SPFx.

Returned context:

{
    "odata.metadata": "https://vt7xc.sharepoint.com/_api/$metadata#SP.ContextWebInformation",
    "FormDigestTimeoutSeconds": 1800,
    "FormDigestValue": "0x8E9519EC1DC5D9E3241954D5D058A7F692788F40AED95E33619690D035C8A8CCCA1245CFB604B4BF8F3954FB1AC201039D804EA00F4FD386D22EB209930761DB,02 Apr 2024 15:11:55 -0000",
    "LibraryVersion": "16.0.24720.12003",
    "SiteFullUrl": "https://vt7xc.sharepoint.com",
    "SupportedSchemaVersions": [
        "14.0.0.0",
        "15.0.0.0"
    ],
    "WebFullUrl": "https://vt7xc.sharepoint.com"
}

[patrick-rodgers]

getContextInfo and the SPFX context object are fully different things. The method you are calling is meant to get some information about a site to aid in url resolution and some other details (form digest mostly).

We do not supply the SPFx context, rather consume it. If it is not available, and I do not believe it is in power apps though I have no experience, we can't create it. It is something provided by the SPFx framework. You would likely need to look at the browser setup vs the SPFx setup - as you have done.

[patrick-rodgers]

Closing this issue as answered. If you have additional questions or we did not answer your question, please open a new issue, ref this issue, and provide any additional details available. Thank you!

[github-actions[bot]]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.