Microsoft single sign on - react-aad-msal library - can't get access token

Question

I'm developing a web application with a react frontend and a .NET CORE 3.1 backend and was asked to add Azure AD single sign on capabilities. I'm using the react-aad-msal library (https://www.npmjs.com/package/react-aad-msal). I'm calling MsalAuthProvider.getAccessToken() and get this error:

Can't construct an AccessTokenResponse from a AuthResponse that has a token type of "id_token".

Can anyone help me?

Anyone? Btw. getAccessToken() is actually inside the standard msal library, if that helps.

Answer 1

I found a solution myself by going into packages.json and lowering the version number on "msal" in "dependencies" like this:

"msal": "~1.3.0",

Answer 2

Change the scopes in authProvider.

export const authProvider = new MsalAuthProvider(
  {
    auth: {
      authority: 'https://login.microsoftonline.com/5555555-5555-5555-5555-555555555555',
      clientId: 'AAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA',
      postLogoutRedirectUri: 'http://localhost:3000/signin',
      redirectUri: 'http://localhost:3000/signin',
      validateAuthority: true,
      navigateToLoginRequestUrl: false
    },
    system: {
      logger: new Logger(
        (logLevel, message, containsPii) => {
          console.log("[MSAL]", message);
        },
        {
          level: LogLevel.Verbose,
          piiLoggingEnabled: false
        }
      )
    },
    cache: {
      cacheLocation: "sessionStorage",
      storeAuthStateInCookie: true
    }
  },
  {
    scopes: ["openid", "profile", "user.read"] // <<<-----------|
  },
  {
    loginType: LoginType.Popup,
    tokenRefreshUri: window.location.origin + "/auth.html"
  }
);