How to maintain the authenticated user state on page refresh with react - reactjs

Question

I have some protected routers but I need to maintain the state on page refresh.
import React from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'
const auth = {
isAuthenticated: true // this would be an http call to get user data
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
auth.isAuthenticated === true
? <Component {...props} />
: <Redirect to="/login" />
)} />
)
const Main = () => {
return (
<Switch>
<Route path="/login" exact strict component={Login}/>
<Route path="/logout" exact strict component={Logout}/>
<PrivateRoute path="/profile" exact strict component={Profile}/>
</Switch>
)
}
export default Main
where should I make the service call? in the Main app? in a context?
update: I added a check in Main that makes a call to the api sending the token that I have stored. that call could return 200 with data or 401
const auth = {
isAuthenticated: Api.status() // this is just a fetch to /status endpoint
.then(
status => {
console.log(status);
return true;
},
error => {
console.log(error);
return false;
}
)
}
but when i hit /profile it redirects me immediately to login (because isAuthenticated is false)
my question is based entirely on the scenario where the user refresh the page (F5) other scenarios are working fine. sorry If I´m not clear enough happy to clarify anything thanks again!

Answer 1

the best way in my opinion is the local storage save the token in there dispatch an action in componentDidMount() in the root component of you app and store the token in readucer state

Answer 2

You can implement an auth-context like shown here: https://usehooks.com/useAuth/
And in addition store user in localStorage (or storage of your preference) and when the auth-context mounts read from localStorage and set the initial value like so:
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')));
This way the protected routes will automatically redirect (or whatever they're supposed to do in an authenticated state) when reloading the page.

Answer 3

In this case I'd make an AuthContext component. By using the context provider, you can access the user logged in state everywhere in your app.
import { createContext } from 'react';
const AuthContext = createContext({
token: null,
userId: null,
login: () => {},
logout: () => {}
});
export default AuthContext;
And provide this at the highest level in your app.
import React, { useState } from 'react';
import { Route, Switch } from 'react-router-dom';
import AuthContext from './context/AuthContext';
function App() {
const [token, setToken] = useState(null);
const [userId, setUserId] = useState(null);
const login = (token, userId) => {
setToken(token);
setUserId(userId);
};
const logout = () => {
setToken(null);
setUserId(null);
};
return (
<Switch>
<Route path="/login" exact strict component={Login}/>
<Route path="/logout" exact strict component={Logout}/>
<PrivateRoute path="/profile" exact strict component={Profile}/>
</Switch>
)
}
export default App;
And in a login/logout form you make the call to a database or localstorage.
import React, { useContext } from 'react';
import AuthContext from '../context/AuthContext';
function Auth() {
const { login } = useContext(AuthContext);
const submitHandler = () => {
// Make the call here
};
return (
<Form onSubmit={submitHandler}>
// Put your login form here
</Form>
);
}
export default Auth;