Hi,
We want to allow the user to remain signed on to the web app indefinitely. Currently, the web app would get 401 error from our API server after 3 days, which makes sense, since the access token has a max life of 3 days.
To fix this, I thought about using refresh token and adding rotating refresh tokens for better security. However after adding that, the 401 error would occur after 1 day.
Here are code snippets from the React app:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
import theme from './components/layout/Theme';
ReactDOM.render(
<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>,
document.getElementById('root'),
);
Inside App, I have a hook that gets the token and other information. A snippet of the hook is:
const [token, setToken] = useState();
// Function to retrieve and set tokenn
const getToken = useCallback(async () => {
const userToken = await getAccessTokenSilently({
audience: process.env.REACT_APP_AUTH_AUDIENCE,
scope: process.env.REACT_APP_AUTH_SCOPE,
});
setToken(userToken);
}, [getAccessTokenSilently]);
const getNewToken = async () => {
const userToken = await getAccessTokenSilently({
audience: process.env.REACT_APP_AUTH_AUDIENCE,
scope: process.env.REACT_APP_AUTH_SCOPE,
});
setToken(userToken);
};
// Upon login, get token, or set 'token' if running in test environment
useEffect(() => {
if (
window.location.hostname === 'localhost' ||
window.location.hostname === '127.0.0.1' ||
window.location.hostname === '' ||
process.env.NODE_ENV === 'test'
) {
setToken('token');
} else if (user) {
getToken();
}
}, [user, getToken]);
useEffect(() => {
const timer = setInterval(() => {
console.log('getting new token');
getNewToken();
}, 60 * 1000);
return () => clearInterval(timer);
}, []);
as for the Auth0 dashboard, for the SPA application, I have:
Application Type: Single Page Application
Refresh Token Rotation: ON
Reuse Interval: 600s
Absolute Expiration: ON
And for the API:
Allow Offline Access: ON
Allow Skipping User Consent: ON
What might be going on that might be causing this to occur?
