# Keep a React app logged in for more than 24hrs

**URL:** <https://community.auth0.com/t/keep-a-react-app-logged-in-for-more-than-24hrs/71345>\
**Category:** Get Help\
**Tags:** react, refresh-tokens, auth0\
**Created:** [October 14, 2021, 6:53pm UTC](https://community.auth0.com/t/keep-a-react-app-logged-in-for-more-than-24hrs/71345 "2021-10-14T18:53:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bunge12](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/bunge12/32/32125_2.png) [@bunge12](https://community.auth0.com/u/bunge12)\
**Post date:** [October 14, 2021, 6:53pm UTC](https://community.auth0.com/t/keep-a-react-app-logged-in-for-more-than-24hrs/71345/1 "2021-10-14T18:53:27Z")

</div>

Hello, auth0 community!

I have a React app and users log in using auth0 with a username & password. The React app then connects to a back-end API and uses the access token to verify that the user can access the API. The React app makes API calls every 5 minutes. Currently, after 24 hrs, the front end logs the user out, however, I would like to make sure the users stay logged in (for at least 4-5 days) unless they click the “log out” button.

The **current** behaviour is that after about 24 hours the app redirects back to the login page. My guess is, at some point, the `isAuthenticated` is set to false and the app shows the login screen.

The **expected/desired** behaviour is that the app stays logged in until the user logs out manually.

Any ideas? What setup do I need to change on the front end to enable the desired behaviour? What changes do I need to make in the console to extend the validity of the session/tokens? I’ve tried many things and none seem to be working.

I am using:

- auth0-react 1.8.0
- React 17.0.0
- Node 14.15.4

Here is the app setup:

`index.js`:

```auto
	<Auth0Provider
		domain={process.env.REACT_APP_DOMAIN}
		clientId={process.env.REACT_APP_CLIENT}
		redirectUri={window.location.origin}
		useRefreshTokens
		cacheLocation="localstorage"
	>
		<ThemeProvider theme={theme}>
			<ScopedCssBaseline>
				<App />
			</ScopedCssBaseline>
		</ThemeProvider>
	</Auth0Provider>,

```

`App.js`

```javascript
export default function App() {
	const {
		isAuthenticated,
		user,
	} = useApplicationData();
	return (
			{isAuthenticated && App Contents}
            {!isAuthenticated && Login Screen}
        )
}

```

`useApplicationData.js`

```javascript
export default function useApplicationData() 
	const { user, isAuthenticated, isLoading, getAccessTokenSilently } =
		useAuth0();
	const [customers, setCustomers] = useState();
	const [currentCustomer, setCurrentCustomer] = useState();
	const [reportList, setReportList] = useState([]);
	const [error, setError] = useState();

	// Using the token, retrieve the list of customers that the user belongs to
	useEffect(async () => {
		if (user) {
			let accessToken;
			if (
				window.location.hostname === 'localhost' ||
				window.location.hostname === '127.0.0.1' ||
				window.location.hostname === '' ||
				process.env.NODE_ENV === 'test'
			) {
				accessToken = 'token';
			} else {
				accessToken = await getAccessTokenSilently({
					audience: process.env.REACT_APP_AUTH_AUDIENCE,
					scope: process.env.REACT_APP_AUTH_SCOPE,
				});
			}

			axios
				.get(`${process.env.REACT_APP_API_ROUTE}/api/user`, {
					params: {
						email: user.email,
					},
					headers: {
						Authorization: `Bearer ${accessToken}`,
					},
				})
				.then((data) => {
					setCustomers(data.data);
					setCurrentCustomer(data.data[0]);
				})
				.catch((e) =>
					setError(
						`Couldn't retrieve the list of reports: ${
							e.message || e.response.statusText
						}`,
					),
				);
		}
	}, [user]);

	...

	return {
		isAuthenticated,
		isLoading,
		error,
		reportList,
		customers,
		currentCustomer,
		switchCustomer,
		user,
	};
}

```

In another hook, I have a timer that loads data from the API every 5 minutes using the same code as in `useApplicationData`, so it gets a new access token silently and then makes the API call.

---

<div class="post-metadata">

**Author:** ![sergii1](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/sergii1/32/50120_2.png) [@sergii1](https://community.auth0.com/u/sergii1)\
**Post date:** [October 17, 2023, 9:36am UTC](https://community.auth0.com/t/keep-a-react-app-logged-in-for-more-than-24hrs/71345/2 "2023-10-17T09:36:23Z")

</div>

Hi @bunge12. I experience the same issue. Were you able to fix it back then?

---

<div class="post-metadata">

**Author:** ![marcelina.barycka](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/marcelina.barycka/32/56162_2.png) [@marcelina.barycka](https://community.auth0.com/u/marcelina.barycka)\
**Post date:** [October 17, 2023, 12:24pm UTC](https://community.auth0.com/t/keep-a-react-app-logged-in-for-more-than-24hrs/71345/3 "2023-10-17T12:24:19Z")

</div>

Hi @sergii1 !

A silent authentication can happen as long as the session is valid on the IdP side and the session cookies are available for the app.

Here you can check details about setting the session lifetime on the auth0 (IdP) side - [Configure Session Lifetime Settings](https://auth0.com/docs/manage-users/sessions/configure-session-lifetime-settings#learn-more)

About session lifetime limitations -

> **[Session Lifetime Limits](https://auth0.com/docs/manage-users/sessions/session-lifetime-limits)**
>
> Describes limits a system will allow a session to

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [October 31, 2023, 12:25pm UTC](https://community.auth0.com/t/keep-a-react-app-logged-in-for-more-than-24hrs/71345/4 "2023-10-31T12:25:10Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.