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

[mikehgm]

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

Library

• [x ] [email protected]
• [ ] @azure/[email protected]
• [ ] @azure/[email protected]
• [x ] @azure/[email protected]
• [ ] @azure/[email protected]

Important: Please fill in your exact version number above, e.g. [email protected].

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 ()
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. (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

```const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

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]

// 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)

[sameerag]

cc @hectormmg. Can you please take a look at this issue?

[rangeranger]

I'm also getting the same error

[N-Argyle]

Same issue in Firefox, Chrome, Brave, Safari on macOS.
"msal": "^1.4.2",
"react-aad-msal": "^2.3.5",

[N-Argyle]

FWIW, bug is not present for me with combination msal 1.4.1 and react-aad-msal 2.3.4.

[gumowy-kaczak]

same here, msal 1.4.2 and angular library 1.1.1..
I would promise that this worked few days ago..
tried running: msal.clearCache() but did not help, after another login it's unusable again..

[gumowy-kaczak]

Perhaps related:

Summary of impact: Between 08:40 UTC and 11:10 UTC on 27 Oct 2020, a subset of customers using Azure Active Directory B2C in North Europe/West Europe may have experienced errors when signing in to the B2C application. 

Preliminary root cause: We determined that some instances of a backend service responsible for processing service management requests had reached an operational threshold, preventing requests from completing.

Mitigation: We performed a change to the service configuration, freeing up capacity in the affected regions to mitigate the issue.

Next steps: We will continue to investigate to establish the full root cause and prevent future occurrences.

https://status.azure.com/en-us/status/history/

[gumowy-kaczak]

I just force set accessTokenAcceptedVersion to 1 and it works back to me..

 const accessTokenAcceptedVersion = 1;
 msalConfiguration.accessTokenAcceptedVersion = accessTokenAcceptedVersion;

[mikehgm]

I just force set accessTokenAcceptedVersion to 1 and it works back to me..

 const accessTokenAcceptedVersion = 1;
 msalConfiguration.accessTokenAcceptedVersion = accessTokenAcceptedVersion;

For which framework are you using the Msal library?, I'm asking because I don't see the property accessTokenAcceptedVersion in the config properties

/**
 * Use the configuration object to configure MSAL and initialize the UserAgentApplication.
 *
 * This object allows you to configure important elements of MSAL functionality:
 * - auth: this is where you configure auth elements like clientID,  authority used for authenticating against the Microsoft Identity Platform
 * - cache: this is where you configure cache location and whether to store cache in cookies
 * - system: this is where you can configure the logger, frame timeout etc.
 * - framework: this is where you can configure the running mode of angular. More to come here soon.
 */
export declare type Configuration = {
    auth: AuthOptions;
    cache?: CacheOptions;
    system?: SystemOptions;
    framework?: FrameworkOptions;
};


export declare type MsalAngularConfiguration = {
    consentScopes?: Array<string>;
    popUp?: boolean;
    extraQueryParameters?: {
        [key: string]: string;
    };
    unprotectedResources?: string[];
    protectedResourceMap?: [string, string[]][] | Map<string, Array<string>>;
};
export declare const defaultMsalAngularConfiguration: MsalAngularConfiguration;


    MsalModule.forRoot(config, angularConfig)

[hectormmg]

Hi everyone, I can confirm this is a bug in [email protected]. The problem is being caused by a bug in the way we look up ID tokens that doesn't take into account concurrent acquireTokenSilent calls. I'll start work on a fix and update the issue when the PR is ready.

[berthertogen]

I can confirm downgrading from 1.4.2 to 1.4.1 solved this for us.

[gavinjjc]

I can also confirm downgrading worked. Currently using the following:

"@azure/msal-angular": "^1.1.1",
"msal": "1.4.1"

[Edit] - Also worth noting, I'm using Chrome normally and Electron 83 within an automated test :)

[mikehgm]

I can also confirm downgrading worked. Currently using the following:

"@azure/msal-angular": "^1.1.1",
"msal": "1.4.1"

really?, let me try

[gumowy-kaczak]

@mikehgm Just ignore my revelations about accessTokenAcceptedVersion.. it was my misunderstanding of the documentation.. so generally it magically started to work, but only in dev browser. When tried in normal browser it puked error as in your post. I tried going down to 1.4.1 but that caused another issue.. The cache contains multiple tokens satisfying the requirements - it is also registered to be fixed in 1.4.3..

So finally I ended up using 1.3.4 and this looks promising.. works both on dev browser and normal browser..

[gavinjjc]

@mikehgm Just ignore my revelations about accessTokenAcceptedVersion.. it was my misunderstanding of the documentation.. so generally it magically started to work, but only in dev browser. When tried in normal browser it puked error as in your post. I tried going down to 1.4.1 but that caused another issue.. The cache contains multiple tokens satisfying the requirements - it is also registered to be fixed in 1.4.3..

So finally I ended up using 1.3.4 and this looks promising.. works both on dev browser and normal browser..

Might not be the most elegant solution but we were able to catch that error, clear our local storage and then initialise our user/acquire our token again.

[mikehgm]

I've been trying to use a preview version like @berthertogen and @gavingjjc said but I got the same error, @gumowy-kaczak which angular-msal version are you using? "@azure/msal-angular": "^1.0.0-beta.5" ?.

[gumowy-kaczak]

I will know later if this works with more cases once it gets to the testing of the app (after PR/build server). On local box it works with packages as below:

    "@angular/core": "^10.2.0",
    ..
    "@azure/msal-angular": "^1.1.1",
    "core-js": "^3.6.5",
    "msal": "1.3.4",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.3",
    "tslib": "^2.0.3",
    "zone.js": "~0.11.2"

Whenever they force me to work on frontend I start with screaming.. we need to update libraries.. and the the problems arise ;)