2

I have react-node express app. In client side, I'm using react-router like this:

export default function App() {
  return (
    <div className="App">
      <Router> 
      <MenuBar/>
        <Switch>
          <Route exact path="/" component={Main}/>
          <Route path="/signin" component={SignIn}/>
          <Route path="/signup" component={SignUp}/>
          <Route path="/search" component={Search}/>
          <Route path="/post" component={Post}/>
        </Switch>
      </Router>
    </div>
  );
}

In server side, I have passport using local and google strategy. After successful login, I see req.user is exist in server side when there is axios call to server from client so I'm guessing that is one way of checking if user is logged in.

My question is, in case I want my react app to have different behavior depending on user's login state for instance, sign out button instead of sign in button for logged in user and "/post" URL is available only for logged in user (redirect to "/" if the user is not logged in), how can I store state of user login in client side?

As far as I understood, storing this data in Context or Redux will have trouble when the page is refreshed since the data will disappear after refresh, right? Do I have to use 

useEffect((//axios call to check auth state)=>,[])

in every components in router and update local state base on server's response? Is there better way?

김민겸
  • 75
  • 2
  • 8

2 Answers2

1

localStorage are best ways to perform these kind of actions as well as you must be using token for maintaining session if not then use one. One each page when any API is hit, check-up with session token with backend. Saving the auth state value in localStorage will let user to access to other page that is without login.

Ansh Varun
  • 100
  • 1
  • 12
0

Since this is complex problem and one can't write whole solution. Here is guideline

  1. On login, save the credentials in localStorage e.g. accessToken, refresh token
  2. Write common code (Auth service) to write and read access tokens and user info in localStorage so you can access anywhere in app
  3. Write your custom ProtecteRoute like one given here in this article https://tylermcginnis.com/react-router-protected-routes-authentication/
  4. On logout, clear your data from localStorage using Auth.logout() and redirect or change state so ProtectedRouter will not allow user to get into the protected app pages since your credentials has been removed and Auth.isLoggedIn() will return false.
Zohaib Ijaz
  • 21,926
  • 7
  • 38
  • 60
  • Thank you for you answer. I was wondering though, isn't localStorage everybody can read and write? If I understood correctly, if somebody without login create those tokens with whatever string in localStorage, they can see the ProtectedRoute. To check if it's valid token, client anyway need to send it to backend server, after all, is it anyway required to send axios call in every component in router when they are mounted? – 김민겸 Apr 01 '20 at 13:43
  • You are right but it should not restrict the user to wait for api response to come back and then allow user to access proetcted page. Also, protected pages will contain data that will only be accessable though apis if token is valid so if somehow someone is able to reach to a protected page, even he will not see any data and `401` response from api will logout the user (should be handled) – Zohaib Ijaz Apr 01 '20 at 13:48
  • yes, middleware is the solution for that! once token is expire, server returns 401 and middleware does its job – Ansh Varun Apr 06 '23 at 15:01