react-aad
react-aad copied to clipboard
syncweek-react-aad
Token renewal operation fails on page reload
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:
- [ERROR] ClientAuthError: Token renewal operation failed due to timeout.
- [ERROR] ClientAuthError: Token renewal operation failed due to timeout.
- [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.
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:
- Start React application
- Reload the page (Ctrl + R)
- See that user which was logged in before isn't logged in anymore
- 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
