I have a simple React SPFX Webpart. We have deployed it to our SP Online site. It currently displays the SP Groups of the current user.

const queryUrl = `${this.context.pageContext.site.absoluteUrl}/_api/web/currentuser/groups`;
const siteGroupsData = await this.context.spHttpClient.get(
const siteGroups: any[] = (await siteGroupsData.json()).value;
const justNames = siteGroups.map((m) => m.Title);
const groups = justNames.join(",");

I need to also display the AAD groups\roles?

Do I need to use Microsoft Graph? MSAL? How? There is so much old and confusing information.

I have tried using the following

import { Providers, SharePointProvider } from "@microsoft/mgt";
Providers.globalProvider = new SharePointProvider(this.context);

The above produces the following error in the console: InteractionRequiredAuthError: AADSTS65001: The user or administrator has not consented to use the application with ID '' named 'SharePoint Online Client Extensibility Web Application Principal'. Send an interactive authorization request for this user and resource. Trace ID: Correlation ID: Timestamp: 2022-11-15 15:07:21

Is this only a problem with the Workbench?

I see examples on the web that are for full REACT SPAs, but this is a webpart, and the user is already logged in. I don't feel like I should have to request a token. Maybe it is just a SP Online configuration setting that is needed.


1 Answer 1


Graph API can be used to access the Azure directory group and roles. The Directory.Read.all permission helps in accessing directory resources such as user, group and device in an organization.

you can follow below steps to access directory resources/or current signed in user AAD groups

First add webApiPermissionRequests section in package-solution.json as per below

"WebApiPermissionRequests:[{"resource": "Microsoft Graph",
  "scope": "Directory.Read.All"

then you can use pnpjs graph library to access the required directory resource.

const memberGroups = await graph.users.getById('[email protected]').getMemberGroups();

const memberGroups2 = await graph.me.getMemberGroups();

// Returns only security enabled groups
const memberGroups3 = await graph.me.getMemberGroups(true);

const memberGroups4 = await graph.groups.getById('[email protected]').getMemberGroups();

Or you can use msGraphClientFactory instead of pnpjs to access the required directory resources. ex-

             this.context.msGraphClientFactory.getClient("3").then((client: MSGraphClientV3)=> { client
                .post({ securityEnabledOnly: false }, (err: any, res: any) => {
                    if (err) {
                    } else {


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.