I figured it out. I've added a state 'waitingForToken' that is initially true. const [user, setUser] = useState( null ); const [waitingForToken, setWaitingForToken] = useState( true ); const refreshToken = useCallback(refresh, []); In refresh(), I set the state to false. async function refresh ( ) { try { const { data : { user, ...rest }, } = await axios.post( 'refresh-token' , {}, { withCredentials : true }); setUser(user); setToken(rest); } finally { setWaitingForToken( false ); } } And export it: return { user , waitingForToken, setUser, Then in my App: const App = () => { const { waitingForToken } = AuthContainer.useContainer(); return (waitingForToken ? < div /> : < Switch > < Route path = "/login" component = {Login} /> < ProtectedRoute exact = {true} path = "/" component = {Dashboard} /> < ProtectedRoute path = "/settings" component = {Settings} /> < ProtectedRoute component = {Dashboard} /> </ Switch > ); Hope this can help someone!

Assuming that the user has logged previously and that we have a valid refresh-token stored in a cookie, when we start the application again, user will be null until the token is refreshed. Since user is null, any protected route will be redirected to login. How do you usually wait for the first refresh to complete so the user is not redirected to login?