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 become false 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.

  1. Log in to SPA
  2. 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 Screenshot from 2023-02-17 09-39-52

also, in the cookies section, (...).isauthenticated are true Screenshot from 2023-02-17 09-40-40

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: Screenshot from 2023-02-17 09-51-29

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)

Most upvoted comments

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 calling getTokenSilently 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 a invalid_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.

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!

Screenshot 2023-02-27 at 08 32 36