microsoft-authentication-library-for-js: Error when trying to aquireTokenSilent

Library

• @azure/msal-browser@2.0.1

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

Framework

React - Create React App

Description

When the app first loads I attempt to perform a acquireTokenSilent with an accountInfo object stored in localStorage. The msal storage is using session storage.

Error Message

index.es.js:3892 Uncaught (in promise) TypeError: Cannot read property 'homeAccountId' of null

Security

• Is this issue security related?

Regression

• Did this behavior work before? Version:

MSAL Configuration

const msalConfig = {
  auth: {
    clientId: 'xxxxx',
    authority: 'xxxxx',  
    redirectUri: 'xxxxx',
    postLogoutRedirectUri: 'xxxxx',
    navigateToLoginRequestUrl: false,
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false,
  },
  system: {
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
export const msalInstance = new PublicClientApplication(msalConfig);

Reproduction steps

# Where accountInfo is the `AccountInfo` object stored in local storage. authInProgress checks if we are on the login or oauth success screen
  React.useEffect(() => {
    async function authenticate() {
      if (!authInProgress && accountInfo) {
        try {
          msalInstance.acquireTokenSilent({
            account: accountInfo,
            scopes,
          });
          history.push('/home');
        } catch (ex) {
          if (ex instanceof InteractionRequiredAuthError) {
            history.push('/login');
          } else {
            throw ex;
          }
        }
      }
    }

    // Attempt to acquire token atleast once with all scopes
    authenticate();
  }, [authInProgress, accountInfo, history]);

Expected behavior

Browsers/Environment

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