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

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”,