Azure AD token verification failed , "level":30,"msg":"authentication failed due to: invalid signature"

Question

I am calling backend-api from frontend, for authentication purpose I am using azure-ad onfronted and backend, when I fetch API for first time, request gets authenticated but for next api call, fronted is calling method

  const checkAccessTokenandGenerateIfExpired = () => {
    const account = msalInstance.getAllAccounts()[0];
    const accessTokenRequest = {
      scopes: ["User.Read"],
      account: account
    }
    msalInstance.acquireTokenSilent(accessTokenRequest).then(function (accessTokenResponse) {
      let accessToken = accessTokenResponse.accessToken;
      localStorage.removeItem("token");
      localStorage.setItem("token", accessToken);
      return toString(accessToken)
    }).catch(function (error) {
      if (error instanceof InteractionRequiredAuthError) {
        msalInstance.acquireTokenPopup(accessTokenRequest).then(function (accessTokenResponse) {
          console.log(accessTokenResponse)
          let accessToken = accessTokenResponse.accessToken;
          localStorage.removeItem("token");
          localStorage.setItem("token", accessToken);
        }).catch(function (error) {
          console.log(error);
        });
      }
      console.log(error);
    });

  };

Backend returns: - authentication failed

Don't know what's the error in above code, because above block of code is generating new token during second API call

Answer 1

It's because you are using Microsoft Graph API scope in your accessTokenRequest (User.Read). You need to use a scope for your API, not MS Graph. You can define them in the "Expose an API" page of your API app registration.