microsoft-authentication-library-for-js: acquireTokenFailure ClientAuthError invalid key the cached token key is not a valid JSON and cannot be parsed

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [x ] msal@1.4.2
• @azure/msal-browser@2.x.x
• @azure/msal-angular@0.x.x
• [x ] @azure/msal-angular@1.1.1
• @azure/msal-angularjs@1.x.x

Important: Please fill in your exact version number above, e.g. msal@1.1.3.

Framework

“@angular/cdk”: “^8.2.0”, “@angular/cli”: “^7.3.9”,

Description

Every first time when the app launch in the app init tries to request 3 API Services but the acquireToken fails, I should to refresh the app several times to can try to get the access token to call these 3 API Services.

Error Message

acquireTokenFailure: ClientAuthError: invalid key: msal.xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.acquireTokenAccount|NDc0ZjRlMzEtM2JkMi00NzdkLWJhZTctNjQ4ZmNiNWE1MGIz.ZmQ3OTlkYTEtYmZjMS00MjM0LWE5MWMtNzJiM2ExY2I5ZTI2|aae21939-4195-4203-9e0f-7b902a965169, The cached token key is not a valid JSON and cannot be parsed at ClientAuthError.AuthError [as constructor] (https://localhost:44300/vendor.js:222119:28) at new ClientAuthError (https://localhost:44300/vendor.js:222263:28) at Function.push…/node_modules/msal/lib-es6/error/ClientAuthError.js.ClientAuthError.createCacheParseError (https://localhost:44300/vendor.js:222349:16) at https://localhost:44300/vendor.js:221873:102 at Array.reduce (<anonymous>) at AuthCache.push…/node_modules/msal/lib-es6/cache/AuthCache.js.AuthCache.getAllTokensByType (https://localhost:44300/vendor.js:221862:63) at AuthCache.push…/node_modules/msal/lib-es6/cache/AuthCache.js.AuthCache.getAllIdTokens (https://localhost:44300/vendor.js:221894:21) at MsalService.push…/node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.getCachedIdToken (https://localhost:44300/vendor.js:220154:51) at MsalService.push…/node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.getCachedToken (https://localhost:44300/vendor.js:220107:28) at MsalService.<anonymous> (https://localhost:44300/vendor.js:219519:60) VM25 main.js:2553 MSAL Logging: Mon, 26 Oct 2020 19:32:01 GMT:dd5518a2-c2f1-4270-926b-343539f3c768-1.4.2-Error Error when acquiring token for scopes: https://subdomain.onmicrosoft.com/webapi/.default ClientAuthError: invalid key: msal.xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.acquireTokenAccount|NDc0ZjRlMzEtM2JkMi00NzdkLWJhZTctNjQ4ZmNiNWE1MGIz.ZmQ3OTlkYTEtYmZjMS00MjM0LWE5MWMtNzJiM2ExY2I5ZTI2|aae21939-4195-4203-9e0f-7b902a965169, The cached token key is not a valid JSON and cannot be parsed

Security

• Is this issue security related?

Regression

• Did this behavior work before? Version:

MSAL Configuration

export const config: Configuration = {
    auth: {
      clientId: environment.adalConfig.clientId,
      authority: "https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/",
      validateAuthority: true,
      redirectUri: environment.uri,
      postLogoutRedirectUri: environment.uri,
      navigateToLoginRequestUrl: true
    },
    cache: {
      cacheLocation : "localStorage",
      storeAuthStateInCookie: isIE
    }
  }```

```export const angularConfig: MsalAngularConfiguration = {
  popUp: !isIE,
  consentScopes: [
    'user.read',
    'openid',
    'profile'
  ],
  unprotectedResources: ['https://www.microsoft.com/en-us/'],
  protectedResourceMap: [
    [`${environment.apiEndpoint}/**`, [environment.user_impersonation]],
    [`${environment.apiKrenimVolume}/**`, [environment.user_impersonation_krenim]],
    [`${environment.apiKrenimPressure}/**`, [environment.user_impersonation_krenim]],
    [`${environment.apiKrenimShutins}/**`, [environment.user_impersonation_krenim]],
    [`${environment.apiKrenimWellProductivity}/**`, [environment.user_impersonation_krenim]],
    [`${environment.apiKrenimForecast}/**`, [environment.user_impersonation_krenim]],
    [`${environment.apiSage}/**`, [environment.user_impersonation_sage]],
    [`${environment.apiEndpointSageGenOpt}/**`, [environment.user_impersonation]],
  ],
  extraQueryParameters: {
    prompt: 'select_account'
  }
};```
```MsalModule.forRoot(config, angularConfig)```
```providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: DatetimeParseInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
    { provide: ErrorHandler, useClass: ErrorHandlerService },
    LoadingIndicatorService,
    CookieService
  ],
  bootstrap: [AppComponent]```


```js
// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

// Provide relevant code snippets here.
// For Azure B2C issues, please include your policies.

Expected behavior

Browsers/Environment

• [x ] Chrome
• Firefox
• [x ] Edge
• Safari
• IE
• Other (Please add browser name here)