Microsoft Graph SDK Error: Access token validation failure. Invalid audience.

Question

Hi everyone

I am currently working on a tab application for MS Teams using Angular. I am trying to connect to API through Graph SDK. Here is my code :

    const msalConfig = {
      auth: {
        clientId: '*********',
        redirectUri: 'https://localhost:53000/auth-start'
      }
    };
    this.msalInstance = new msal.PublicClientApplication(msalConfig);
    this.msalInstance.initialize().then(async () => {
      // Some callback function
      const authProvider: AuthProvider = async (callback: AuthProviderCallback) => {
        this.msalInstance.loginPopup({ scopes : ['user.read']}).then(response => {
          console.log('AUTH RESPONSE', response);
          callback(null, response.idToken);
        }).catch(err => {
          console.log('AUTH ERROR', err);
          callback(err, null);
        });
      };

      const options: Options = {
        authProvider,
      };

      this.client = Client.init(options);
      this.client.api('/me').get().then(response => {
        console.log('GRAPH RESPONSE', response);
      }).catch(err => {
        console.log('GRAPH ERROR', err);
      });
    });

It seems that my function authProvider returns a valid token. Then when exeuting this.client.api('/me').get() I get the following error : Error: Access token validation failure. Invalid audience. On Azure I added permissions on the following APIs

It seems I am missing something...

Answer 1

Hi @dev integration

From the screenshot you shared, the aud claim of the access token is not the graph API, which means this token will not be able to be used to call the graph API.

You should set scope to https://graph.microsoft.com/.default to get access token for graph API.

scopes : ['https://graph.microsoft.com/.default']

Parse the token, it should be:

Hope this helps.

If the reply is helpful, please click Accept Answer and kindly upvote it. If you have additional questions about this answer, please click Comment.