auth0-react: Not able to keep user logged in for longer than a day
Please do not report security vulnerabilities here. The Responsible Disclosure Program details the procedure for disclosing security issues.
Thank you in advance for helping us to improve this library! Please read through the template below and answer all relevant questions. Your additional work here is greatly appreciated and will help us respond as quickly as possible. For general support or usage questions, use the Auth0 Community or Auth0 Support. Finally, to avoid duplicates, please search existing Issues before submitting one here.
By submitting an Issue to this repository, you agree to the terms within the Auth0 Code of Conduct.
Describe the problem
Provide a clear and concise description of the issue I want to keep the user logged in and not fall back to the login splash page. In order to do that, I have make a call every 2 hours using
getAccessTokenSilently
to get a new token. However, after about a day,isAuthenticated
will becomefalse
and goes from the Main page to the Login Splash page. However, when pressing the login button, it doesn’t go to the redirect page to log in, it would go to the Main page
What was the expected behavior?
Tell us about the behavior you expected to see I want the users to stay logged into our authenticated pages as long as possible; until the up limit that they need to login again.
Reproduction
Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent. Note: If clear, reproducable steps or the smallest sample app demonstrating misbehavior cannot be provided, we may not be able to follow up on this bug report.
- Log in to SPA
- Let it stay on overnight
console log that the refetching of access token is done, yet isAuthenticated
is false because the user object is empty. Note that the console log’s user' object is a combination of the original
user` object from auth0 and other keys I added. Also, it is still being refetched even after returning to the splash screen. Below is the ending snippet of console logs
got access token after 2 HOURS
build.umd.js:3103 eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjVXQWJqM1ZjalFaeDZSWHVWUm (partially removed)
build.umd.js:3103 {isLoading: false, isAuthenticated: false, user: {…}}isAuthenticated: falseisLoading: falseuser: {customClaims: {…}}customClaims: {accessBuilder: true}[[Prototype]]: Object[[Prototype]]: Object
build.umd.js:3103 got access token after 2 HOURS
build.umd.js:3103 eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjVXQWJqM1ZjalFaeDZSWHVWUm (partially removed)
build.umd.js:3103 got access token after 2 HOURS
build.umd.js:3103 eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjVXQWJqM1ZjalFaeDZSWHVWUm (partially removed)
for some reason there are two auth0 key-value pairs in localstorage
also, in the cookies section, (...).isauthenticated
are true
In React, the Auth0 provider looks like this:
REACT_APP_CLIENT=vbh7pNZaYTMf2fbn5JMq9BVcxt34rsCv
REACT_APP_DOMAIN=dev-6kijuc-8.us.auth0.com
<Auth0Provider
domain={process.env.REACT_APP_DOMAIN}
clientId={process.env.REACT_APP_CLIENT}
redirectUri={window.location.origin}
audience={process.env.REACT_APP_AUTH_AUDIENCE}
useRefreshTokens
cacheLocation="localstorage"
>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<ScopedCssBaseline>
<NotificationsProvider position="bottom-center">
<App />
</NotificationsProvider>
</ScopedCssBaseline>
</ThemeProvider>
</StyledEngineProvider>
</Auth0Provider>,
A snippet of App.js
const {
isAuthenticated,
isLoading,
error,
user,
} = useApplicationData();
console.log({ isLoading, isAuthenticated, user });
if (isLoading) {
return (
<LoadingScreen>
<Spinner color="i5OGreen" size={50} />
</LoadingScreen>
);
}
// https://community.auth0.com/t/user-is-undefined-and-isauthenticated-returns-false-after-login/87495
if (!isLoading && !isAuthenticated) {
return <SplashScreen />;
}
return (
<div className="App">
{error && (
<Notification
data={{
type: 'error',
message: error,
}}
snackbar
/>
)}
{isAuthenticated && (
<UserContext.Provider value={userInfo}>
<Router>
<TopBar
customers={customers}
handleCustomerSwitch={switchCustomer}
/>
<Content>
{currentCustomer && (
<SideBar availablePages={currentCustomer.pages} />
)}
<Routes>
<Route
path="/home"
element={
snippet of code that is refetching token periodically in useApplicationData
useEffect(() => {
const HOURS = 2;
const refresh = setInterval(async () => {
const token = await getAccessTokenSilently({
scope: process.env.REACT_APP_AUTH_SCOPE,
});
console.log(`got access token after ${HOURS} HOURS`);
console.log(token);
}, HOURS * 60 * 60 * 1000);
return () => clearInterval(refresh);
}, []);
in auth0, the application setting snippet is as follows:
Environment
Please provide the following:
- Version of
auth0-react
used: “^1.12.0” - Which browsers have you tested in? Chrome, Firefox
- Which framework are you using, if applicable (Angular, React, etc): React
- Other modules/plugins/libraries that might be involved: “react-router-dom”: “^6.4.3”,
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 18 (7 by maintainers)
Hey,
The isAuthenticated state is defined by what Auth0 tells us. If u use refresh tokens, you disconnect from Auth0’s session and you will be considered authenticated until Auth0 tells us otherwise.
This should happen by throwing a
login_required
when callinggetTokenSilently
when you have either have set useRefreshTokens to false, or useRefreshTokens and useRefreshTokensFallback to true.If you use refresh token but have not set
useRefreshTokensFallback
to true, calling getTokenSilently might throw ainvalid_grant
error when the refresh token is expired.This doesnt mean the user is no longer authenticated, but we can not tell for sure. In that case, you want to catch
invalid_grant
and decide yourself what you want to do (e.g. call logout).Also note that the id token expiration will have absolutely no effect on the duration of isAuthenticated.
Hopefully this helps. Let me know if it does not.
@Michael-Xie 2.0
I’m not sure if this helps, or is related to @Michael-Xie but it seems my issue was user error 🙈
I was actually getting a
missing_refresh_token
every 24 hours and only a logout/login would fix the token issue.Diving a bit further, it seems I have fixed this by setting the API access settings to “Allow offline access”. Seems to have worked over the weekend!