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!