Spfx with PnP.js / Graph: How to prevent redirect to spfxsinglesignon.aspx

Question

We're developing an SPO custom web part, utilizing https://pnp.github.io/pnpjs for authentication and for communicating with SPO.

I've noticed that when the page with our custom web part loads, the user is often (typically after some time of inactivity) redirected to https://acme.sharepoint.com/_forms/spfxsinglesignon.aspx and then back. This causes the page to be loaded again, which is somewhat annoying.

I guess the webpart is redicted to spfxsinglesignon.aspx to fetch some SSO token, but is there a way to get things working without this redirect? It would be a better use experience if the page didn't have to load twice.

By the way, somewhere in the process, every now and then the user ends up on http://eduumb.sharepoint.com/default.aspx instead of the two afore mentionion pages. Haven't gotten around to debugging this yet, as it's really hard to reproduce, but any input on how to debug this will be appreciated.

Update #1: Seems I didn't set up authentication properly, as described on https://pnp.github.io/pnpjs/authentication/client-spfx/#connect-to-graph-as-current-user. Have implemented this now, and will see if the redirect issue goes away.

Answer 1

I am currently working on SPFx with Graph API and it doesn't require any redirection at all for authentication, it will work with the same web part context you're developing right now.

Read on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-msgraph. Previously, I have evaluated @pnp/graph but some graph API does not exist.

You will need a reference to WebPartContext object and call the following:

context.msGraphClientFactory.getClient().then((client: MSGraphClient) => {
        client
        .api(`/me/transitiveMemberOf`)
        .count(true)
        .filter(`displayName eq '${ targetAudience.GroupName }'`)
        .header(`ConsistencyLevel`, `eventual`)
        .get((error:any, response:any, rawResponse: any) => {
            //do your thing here...
        });

Please make sure you've provided your needed permissions for the API in the package-solution.json under webApiPermissionRequests.

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
    "name": "------------Your solution name-----------",
    "id": "-----------Your solution ID-----------",
    "version": "1.0.0.0",
    "iconPath": "appIcon.png",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "developer": {
        "name": "Bla bla",
        "websiteUrl": "https://bla.bla.com",
        "privacyUrl": "",
        "termsOfUseUrl": "",
        "mpnId": ""
    },
    "webApiPermissionRequests": [
        {
            "resource": "Microsoft Graph",
            "scope": "User.Read"
        },
        {
            "resource": "Microsoft Graph",
            "scope": "User.ReadBasic.All"
        },
        {
            "resource": "Microsoft Graph",
            "scope": "GroupMember.Read.All"
        },
        {
            "resource": "Microsoft Graph",
            "scope": "Group.Read.All"
        }
    ]
},
"paths": {
    "zippedPackage": "solution/bla-bla-apps.sppkg"
}
}

Lastly and you should not miss this, you need to deploy your firsthand app to App Catalog. Then go to SharePoint Admin Center, and then approve the API access that is pending (especially your app/package name). I've tried without this step, it doesn't work and always goes into error when running the workbench.