[Vuejs]-JWT Token invalid msal

by

0👍

✅

I generated access token using below parameters via Postman:

https://login.microsoftonline.com/TenantID/oauth2/v2.0/token

client_id:ClientID
grant_type:authorization_code
scope:api://ClientID/test.read
code:code
redirect_uri:https://jwt.ms
client_secret:ClientSecret

enter image description here

When I decoded the access token, the aud is ClientID:

enter image description here

Now, I tried to call the graphMeEndpoint using the above generated access token and got the similar error:

GET https://graph.microsoft.com/v1.0/me

enter image description here

The error "The audience is invalid" usually occurs if you are access token audience is not matching the API you are calling.

In your scenario, the error occurred as you are generating access token for web API and calling Microsoft Graph API.

To resolve the error, Add Microsoft Graph API permissions in the Azure AD Application:

enter image description here

Generate the access token by passing scope as https://graph.microsoft.com/.default

enter image description here

When I decoded the access token, the aud is https://graph.microsoft.com:

enter image description here

I am able to call the graphMeEndpoint successfully:

GET https://graph.microsoft.com/v1.0/me

enter image description here

In your case, to resolve the error modify the code like below:

appsettings.json file

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "<my-tenant-id>",
    "ClientId": "<my-client-id>",
    "Audience": "https://graph.microsoft.com"
  }

authConfig.ts file

export const msalInstance = new PublicClientApplication(msalConfig);

export const loginRequest = {
  scopes: ['user.read']
};

export const graphConfig = {
  graphMeEndpoint: 'https://graph.microsoft.com/v1.0/me'
};

If you want to call the Microsoft Graph API, then change the aud to Graph. If you want to call the Web API, then no need of changing the aud to Graph API.

Leave a comment