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:
<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
export default function App() {
const {
isAuthenticated,
user,
} = useApplicationData();
return (
{isAuthenticated && App Contents}
{!isAuthenticated && Login Screen}
)
}
useApplicationData.js
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.