Token renewal operation fails on page reload

[LadaM]

Library versions

• react-aad-msal: "^2.3.5"
• msal:"^1.3.3"

While running the react application which is using Azure AD authentication locally the following 3 msal errors are happening every time application reloads:

1. [ERROR] ClientAuthError: Token renewal operation failed due to timeout.
2. [ERROR] ClientAuthError: Token renewal operation failed due to timeout.
3. [ERROR] ClientAuthError: Login_In_Progress: Error during login call - login is already in progress.
   The errors happen every time the application reloads in the same order. There is a significant rendering delay (about 2s).

Environment

"react": "16.12.0",

AuthenticationProvider settings:

  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false
  },
...
const options = {
  loginType: LoginType.Popup,
  tokenRefreshUri: window.location.origin +'/auth.html'
}

Using AuthenticationProvider:

...  
<AzureAD provider={authProvider} forceLogin={true}>
          {({login, logout, authenticationState, error, accountInfo}: IAzureADFunctionProps) => {
            // sessionStorage.clear();
            switch (authenticationState) {
              case AuthenticationState.Authenticated:
                return (
                  <p>
                    <span>Welcome, {accountInfo.account.name}!</span>
                    <button onClick={logout}>Logout</button>
                  </p>
                );
              case AuthenticationState.Unauthenticated:
                return (
                  <div>
                    {error && <p><span>An error occurred during authentication, please try again!</span></p>}
                    <p>
                      <span>Hey stranger, you look new!</span>
                      <button onClick={login}>Login</button>
                    </p>
                  </div>
                );
              case AuthenticationState.InProgress:
                return (<p>Authenticating...</p>);
            }
          }
          }
        </AzureAD>

Error logs from msal

react_devtools_backend.js:2273 [ERROR] ClientAuthError: Token renewal operation failed due to timeout.
overrideMethod @ react_devtools_backend.js:2273
ERROR @ Logger.js:69
_callee4$ @ MsalAuthProvider.js:434
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype. @ runtime.js:97
asyncGeneratorStep @ MsalAuthProvider.js:26
_next @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:451
_callee3$ @ MsalAuthProvider.js:278
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype. @ runtime.js:97
asyncGeneratorStep @ MsalAuthProvider.js:26
_throw @ MsalAuthProvider.js:28
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.js:26
_next @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:293
_callee6$ @ MsalAuthProvider.js:509
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype. @ runtime.js:97
asyncGeneratorStep @ MsalAuthProvider.js:26
_next @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
_callee5$ @ MsalAuthProvider.js:471
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype. @ runtime.js:97
asyncGeneratorStep @ MsalAuthProvider.js:26
_next @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
MsalAuthProvider @ MsalAuthProvider.js:626
./app/authentication/AuthenticationProvider.ts @ AuthenticationProvider.ts:62
webpack_require @ bootstrap:79
./main.tsx @ main.tsx:1
webpack_require @ bootstrap:79
3 @ main.js:11313
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
react_devtools_backend.js:2273 [ERROR] ClientAuthError: Token renewal operation failed due to timeout.
overrideMethod @ react_devtools_backend.js:2273
ERROR @ Logger.js:69
_callee6$ @ MsalAuthProvider.js:522
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype. @ runtime.js:97
asyncGeneratorStep @ MsalAuthProvider.js:26
_throw @ MsalAuthProvider.js:28
Promise.then (async)
asyncGeneratorStep @ MsalAuthProvider.js:26
_next @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
_callee5$ @ MsalAuthProvider.js:471
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype. @ runtime.js:97
asyncGeneratorStep @ MsalAuthProvider.js:26
_next @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
(anonymous) @ MsalAuthProvider.js:28
MsalAuthProvider @ MsalAuthProvider.js:626
./app/authentication/AuthenticationProvider.ts @ AuthenticationProvider.ts:62
webpack_require @ bootstrap:79
./main.tsx @ main.tsx:1
webpack_require @ bootstrap:79
3 @ main.js:11313
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
react_devtools_backend.js:2273 [ERROR] ClientAuthError: Login_In_Progress: Error during login call - login is already in progress.

Workaround

When session storage is cleared sessionStorage.clear() the errors aren't occurring as well as when the new window is opened.

To Reproduce
Steps to reproduce the behavior:

1. Start React application
2. Reload the page (Ctrl + R)
3. See that user which was logged in before isn't logged in anymore
4. See token renewal operation errors in dev console

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser: Chrome Version 85.0.4183.121

[jamiehaywood]

Have you got a reproduction repo that we can take a look at?