Calling Microsoft graph function in typescript/react to verify owners of M365 group

Question

I'm new to React and TypeScript. I would like to call Microsoft Graph API to check if the logged in user is an owner of a M365 group via my React/TypeScript application.

I have this code:

import { callMsGraph } from "../utils/MsGraphApiCall";

function VerifyOwner() {
  const [owner, setOwner] = useState([]);
  const [err, setError] = useState({});

  useEffect(() => {
    callMsGraph()
      .then(response => setOwner(response))
      .catch(err => setError(err));
  }, [])  

  return (    
      <div>
        {owner}
      </div>
  );
}

MsGraphApiCall.ts

export async function callMsGraph() {
    const account = msalInstance.getActiveAccount();
    if (!account) {
        throw Error("No active account! Verify a user has been signed in and setActiveAccount has been called.");
    }

    const response = await msalInstance.acquireTokenSilent({
        ...loginRequest,
        account: account
    });

    const headers = new Headers();
    const bearer = `Bearer ${response.accessToken}`;
    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    return fetch("https://graph.microsoft.com/v1.0/groups/<group-id>/members?$count=true", options)
        .then(response => response.json())
        .catch(error => console.log(error));
}

Is there an API to check the owners of a group? In the above code, I'm getting all the members from the group.

I receive the error that {"error":{"code":"Authorization_RequestDenied","message":"Insufficient privileges to complete the operation.","innerError":{"date":"2023-04-17T22:29:14","request-id":"f337f9cf-742a-41cd-a939-65bab6157942","client-request-id":"f337f9cf-742a-41cd-a939-65bab6157942"}}}. What am I missing?

Answer 1

I have one M365 group having one user and service principal as owners like below:

To check the owners of the group, you can make use of below Graph API query:

GET https://graph.microsoft.com/v1.0/groups/<groupID>/owners

Response:

Note: If you are using v1.0 Graph API endpoint, you will get only owners of user type in response.

To get owners of group with service principal type, you can make use of below Graph API query:

GET https://graph.microsoft.com/v1.0/groups/<groupID>/owners/microsoft.graph.servicePrincipal/

Response:

The error "Insufficient privileges to complete the operation" usually occurs if your application don't have required API permissions to perform the operation.

To resolve it, make sure to grant GroupMember.Read.All or Group.Read.All API permission of Delegated type in your application as you are using Delegated flow to get access token:

In your MsGraphApiCall.ts file, change graph API query based on your requirement like below:

export async function callMsGraph() {
    const account = msalInstance.getActiveAccount();
    if (!account) {
        throw Error("No active account! Verify a user has been signed in and setActiveAccount has been called.");
    }

    const response = await msalInstance.acquireTokenSilent({
        ...loginRequest,
        account: account
    });

    const headers = new Headers();
    const bearer = `Bearer ${response.accessToken}`;
    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    return fetch("https://graph.microsoft.com/v1.0/groups/<group-id>/owners", options)
        .then(response => response.json())
        .catch(error => console.log(error));
}