MSAL Error with the access token, the first requests returns me unauthorized

Question

I have the following problem, I have a spa application in angular and I am using msal v2.0 against a backend in node and express with the library passaport-azure-ad, in angular I have an msal interceptor that sends the access_token with each request to the backend, The first request returns unauthorized, after several requests the backend allows me to access, I can't find the solution.

sorry for my English!!!

Backend

const BearerStrategy = require('passport-azure-ad').BearerStrategy;
  
  const options = {
    identityMetadata: `https://${config.metadata.authority}/${config.credentials.tenantID}/${config.metadata.version}/${config.metadata.discovery}`,
    issuer: `https://${config.metadata.authority}/${config.credentials.tenantID}/${config.metadata.version}`,
    clientID: config.credentials.clientID,
    audience: config.credentials.clientID, // audience is this application
    validateIssuer: config.settings.validateIssuer,
    passReqToCallback: config.settings.passReqToCallback,
    loggingLevel: config.settings.loggingLevel,
    scope: config.protectedRoutes.scope.scopes,
    loggingNoPII: false,
  };

  app.use(passport.initialize());

  passport.use(bearerStrategy);

app.get(
    '/empleado/:id_empleado',
    [passport.authenticate('oauth-bearer', { session: false }),verificarRoles(ROLES.Admin,ROLES.Usuario)],
    empleadoController.seleccionarEmpleado
  );

Angular

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      // clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6', // Prod enviroment. Uncomment to use.
      clientId: environment.msal.clientId, // PPE testing environment
      authority: environment.msal.authority, // Prod environment. Uncomment to use.
      // authority: 'https://login.windows-ppe.net/common', // PPE testing environment.
       redirectUri: environment.msal.redirectUri
      // redirectUri: 'https://autogestion.loteriacba.com.ar',
      // redirectUri: 'http://localhost:8000'
      // postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Error,
        piiLoggingEnabled: false
      }
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  // protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']); // Prod environment. Uncomment to use.
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read', 'email']); // Prod environment. Uncomment to use.
  protectedResourceMap.set(environment.apiAutogestion.apiUrl, environment.apiAutogestion.scope);
  protectedResourceMap.set(environment.apiNotificacion.apiUrl, environment.apiNotificacion.scope);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

Answer 1

I tried to reproduce from my end.

---

• I got the similar error , Unauthorized

---

• After decoding the token , please check the issuer endpoint if it has v1.0 and v2.0

Please make sure to change the accessTokenAcceptedVersion to version that issuer has i.e.; if it has v1 endpoint change to null or 1 otherwise change it to 2.

And please make sure the api permissions with scopes are granted admin consent.

With right scopes in place , also check this msal-angualr SO thread where the interceptor is checked for scopes present.