Azure Graph API giving error "Auth token does not contain valid permissions or user does not have valid roles" - reactjs

Question

I have been trying to list Microsoft Security Scores, following official instructions provided here
but I keep getting an error:
Auth token does not contain valid permissions or user does not have valid roles.
Auth token is being requested once the user has loged in and provided the consent to my registered application. Application has all of the required permission as described in the official documents: SecurityActions.Read.All, Subscription.Read.All, User.Read.All
Currently I am trying this in React.jS however I have tried this process in Postman and Node as well but I am still stuck.
const accessToken = await this.userAgentApplication.acquireTokenSilent({
scopes: config.scopes
});
const securityScores = await getSecureScores(accessToken);
if(securityScores && securityScores.value){
this.setState({
securityScores: securityScores
});
}
and scopes array looks like this:
scopes: [
'Directory.Read.All',
'AccessReview.Read.All',
'offline_access',
'Organization.Read.All',
'Policy.Read.All',
'profile',
'SecurityActions.Read.All',
'Reports.Read.All',
'SecurityEvents.Read.All',
'User.Read',
'User.Read.All'
]

Answer 1

It's a known issue. This error occours when you are using Implicit grant flow.
There is not a wids field in the access token obtained through the implicit flow. Based on the document, it may not be present in tokens due to token length concerns.
There are two workarounds.
Once the response mode is changed to response_mode=form_post the id
token, and access token if requested, are sent as a POST request and
contain the wids claim which allows the Graph API security endpoints
to be used.
Do an OBO call to get a token for Graph, then call graph to learn
what they wids or roles are on the token. You can also do OBO to get
an id_token which should have those claims in it.
See a previous discussion here. And you need to pay attention to rayterrill's answer and hpsin's answer.