Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Access token caching is not working

See original GitHub issue

Library

msal@1.x.x or @azure/msal@1.x.x
@azure/msal-browser@2.x.x
@azure/msal-node@1.x.x
@azure/msal-react@1.x.x
@azure/msal-angular@0.x.x
@azure/msal-angular@1.x.x
@azure/msal-angular@2.x.x
@azure/msal-angularjs@1.x.x

Framework

Angular 11
React
Other

Description

The caching of the access token is not working. On every intercepted XHR-Request the msal lib is requesting a new access token.

Networktraffic looks like: POST /oauth2/v2.0/token GET /some-xhr POST /oauth2/v2.0/token POST /some-other-xhr POST /oauth2/v2.0/token GET /some-xhr

Error Message

MSAL Configuration

export const appInitializer = (moduleType: Type<any>): Promise<void> => fetch('/initialize')
  .then(response => response.json())
  .then(initialConfig => {
    const authCfg = initialConfig.ciamOptions;
    const msalConfig: Configuration = {
      auth: {
        clientId: authCfg.clientId as string,
        authority: `https://${authCfg.tenantName}.b2clogin.com/${authCfg.tenantName}.onmicrosoft.com/${authCfg.signInPolicy}`,
        redirectUri: /.*:\/\/[^\/]+(?:\/admin|\/studio)?/.exec(location.href)[0],
        knownAuthorities: [`${authCfg.tenantName}.b2clogin.com`],
      },
      system: {
        loggerOptions: {
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: true,
          loggerCallback: (level, msg) => {
            console.log(msg)
          }
        }
      },
      cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage,
      },
    };

    /**
     * 00000000-0000-0000-0000-000000000000 -
     * Using the client ID as the scope indicates that your app needs an access token that can be used
     * against your own service or web API, represented by the same client ID.
     */
    const scopes = [authCfg.clientId];


    const protectedResourceMap = new Map();
    protectedResourceMap.set(`/api/*`, scopes);

    const msalConfigAngular: MsalInterceptorConfiguration = {
      interactionType: InteractionType.Redirect,
      protectedResourceMap
    };

    const msalGuardFactory = (): MsalGuardConfiguration => ({
      interactionType: InteractionType.Redirect,
      authRequest: {
        scopes
      },
    });

    platformBrowserDynamic(
      [
        {
          provide: MSAL_INSTANCE,
          useValue: new PublicClientApplication(msalConfig)
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useValue: msalConfigAngular
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: msalGuardFactory
        }
      ]
    ).bootstrapModule(moduleType)
      // eslint-disable-next-line no-console
      .catch(err => console.error(err));
  });