localStorage as cache location leads to error in chrome

[soallenspach]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.27.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.12

Public or Confidential Client?

Public

Description

I want the login state to be shared between tabs. At the moment I use sessionStorage as the cacheLocation. When I changed that to localStorage the login would not work anymore. The page is just blank and I get these errors in the console:

I could only observe this issue in chrome, while other browsers work just fine.

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
    auth: {
        clientId: '1d15d630-8c8e-49f6-b4b1-a56e985366b8',
        authority: b2cPolicies.authorities.signUpSignIn.authority,
        knownAuthorities: [b2cPolicies.authorityDomain],
        redirectUri: window.location.origin,
        postLogoutRedirectUri: '/',
        navigateToLoginRequestUrl: true,
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true,
    },
}

Relevant Code Snippets

Full config:

import { Configuration, LogLevel, PublicClientApplication } from '@azure/msal-browser';

const b2cPolicies = {
    authorities: {
        signUpSignIn: {
            authority: 'https://somedomain.b2clogin.com/somedomain.onmicrosoft.com/B2C_1A_SUSI',
        },
    },
    authorityDomain: 'https://somedomain.b2clogin.com',
};

export const msalConfig: Configuration = {
    auth: {
        clientId: '1d15d630-8c8e-49f6-b4b1-a56e985366b8',
        authority: b2cPolicies.authorities.signUpSignIn.authority,
        knownAuthorities: [b2cPolicies.authorityDomain],
        redirectUri: window.location.origin,
        postLogoutRedirectUri: '/',
        navigateToLoginRequestUrl: true,
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true,
    },
    system: {
        loggerOptions: {
            logLevel: LogLevel.Error,
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return void 0;
                }

                switch (level) {
                    case LogLevel.Error:
                        return console.error(message);
                    case LogLevel.Info:
                        return console.info(message);
                    case LogLevel.Verbose:
                        return console.debug(message);
                    case LogLevel.Warning:
                        return console.warn(message);
                    default:
                        return console.log(message);
                }
            },
        },
    },
};

export const loginRequest = {
    scopes: {
        read: ['https://somedomain.onmicrosoft.com/web-api/WebApi.Read'],
        write: ['https://somedomain.onmicrosoft.com/web-api/WebApi.Write'],
        readWrite: [
            'https://somedomain.onmicrosoft.com/web-api/WebApi.Read',
            'https://somedomain.onmicrosoft.com/web-api/WebApi.Write',
        ],
    },
};

export const msalClientConfiguration = new PublicClientApplication(msalConfig);

Config consumer:

const MainContent: FC = () => {
    return (
        <MsalProvider instance={msalClientConfiguration}>
            <PortalRouterProvider />
        </MsalProvider>
    );
};

Reproduction Steps

1. Apply the above configuration
2. Change the urls and tokens in the configuration to working ones
3. Login to the app

The app should then throw the errors shown in the above image. The user is not logged in, because not all the tokens were set in localStorage.

Expected Behavior

The user should be logged with the tokens stored in localStorage.

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response

[sameerag]

Looks like a cache corruption issue. Have you cleared the cache and tried?

[soallenspach]

I did delete browser data, cleared local-, sessionStorage and cookies. The issue persists. My colleagues can reproduce the issue invariably.