title: How to store authentication state in react and express app
body: <p>I have react-node express app. In client side, I'm using react-router like this:</p>
  
  <pre><code>export default function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Router&gt; 
        &lt;MenuBar/&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" component={Main}/&gt;
            &lt;Route path="/signin" component={SignIn}/&gt;
            &lt;Route path="/signup" component={SignUp}/&gt;
            &lt;Route path="/search" component={Search}/&gt;
            &lt;Route path="/post" component={Post}/&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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? </p>
  
  <p>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 </p>
  
  <pre><code>useEffect((//axios call to check auth state)=&gt;,[])
  </code></pre>
  
  <p>in every components in router and update local state base on server's response? Is there better way?</p>