title: Check authentication in React Router Dom
body: <p>I'm building a React application and the Header component has a Menu button that toggles the sidebar and makes a logout. In other words, it only needs to appear if the user is logged in.</p>
  <p>I'm generating a JWT in the backend and storing it in localStorage so an auth() method can get it and decide if user is logged in. The problem is, when I login, the Header doesn't appear. If I refresh the page, it appears. And if I do the opposite, which means logging out, I get redirected to login page but the Header is still there. If I refresh the page, it stops showing itself.</p>
  <p>I set a console.log() in the auth method and I realized it doesn't react to trigger properly.</p>
  <p>I'm using Ant Design and the app structure is</p>
  <pre><code>App.tsx
     |
     | - views
     |     |
     |     | -ListProducts accessed by &quot;/&quot; route and only available when logged in
     |     | -Login accessed by &quot;/login&quot; route
     |
     | - components
     |     |
     |     | - Routes.tsx
     |
     | - routines
     |     |
     |     | - auth.ts
  </code></pre>
  <p><strong>App.tsx</strong></p>
  <pre><code>import React, { FunctionComponent, useEffect } from &quot;react&quot;;
  import './assets/styles.css';
  import Routes from &quot;./components/Routes&quot;;
  import { BrowserRouter, Link } from &quot;react-router-dom&quot;;
  import { Drawer, List, PageHeader, Button } from &quot;antd&quot;;
  import { MenuOutlined, PoweroffOutlined } from &quot;@ant-design/icons&quot;;
  import auth from &quot;./routines/auth&quot;;
  
  const App: FunctionComponent = () =&gt; {
  
  const [isDrawerVisible, setIsDrawerVisible] = React.useState&lt;boolean&gt;(false);
  const routes: {id: number, name: string, route: string}[] = [
      {id: 1, name: &quot;Home&quot;, route: &quot;/&quot;},
      {id: 2, name: &quot;Add User&quot;, route: &quot;/add-user&quot;}
  ]
  
  return (
      &lt;BrowserRouter&gt;
          {!auth() &amp;&amp; &lt;PageHeader
              className = &quot;site-page-header&quot;
              title = {
                  &lt;Button
                      type = &quot;text&quot;
                      shape = &quot;circle&quot;
                      icon = {&lt;MenuOutlined /&gt;}
                      size = &quot;large&quot;
                      onClick = {() =&gt; setIsDrawerVisible(true)}
                  /&gt;}
              extra = {[
                  &lt;Link key = &quot;1&quot; to = &quot;/logout&quot;&gt;&lt;Button danger icon = {&lt;PoweroffOutlined /&gt;}&gt;Logout&lt;/Button&gt;&lt;/Link&gt;
              ]}
          /&gt;}
          &lt;Drawer
              title = &quot;Hello, 'User'!&quot;
              placement = &quot;left&quot;
              closable
              onClose = {() =&gt; setIsDrawerVisible(false)}
              visible = {isDrawerVisible}
              key = &quot;left&quot;
          &gt;
              &lt;List
                  itemLayout=&quot;horizontal&quot;
                  dataSource={routes}
                  renderItem={item =&gt; (
                    &lt;List.Item&gt;
                      &lt;List.Item.Meta
                        title={&lt;Link to = {item.route} onClick = {() =&gt; setIsDrawerVisible(false)} style = {{display: &quot;block&quot;}}&gt;{item.name}&lt;/Link&gt;}
                      /&gt;
                    &lt;/List.Item&gt;
                  )}
              /&gt;
          &lt;/Drawer&gt;
  
          &lt;Routes /&gt;
      &lt;/BrowserRouter&gt;
  )
  }
  
  export default App;
  </code></pre>
  <p><strong>Routes.tsx</strong></p>
  <pre><code>import React, { FunctionComponent } from &quot;react&quot;;
  import { Switch, Route, Redirect } from &quot;react-router-dom&quot;;
  import ListProducts from &quot;../views/ListProducts&quot;;
  import Login from &quot;../views/Login&quot;;
  import AddUser from &quot;../views/AddUser&quot;;
  import auth from &quot;../routines/auth&quot;;
  import Logout from &quot;../views/Logout&quot;;
  import AddProduct from &quot;../views/AddProduct&quot;;
  
  const PrivateRoute = ({ component: Component, ...rest}: any) =&gt; (
  &lt;Route
      {...rest}
      render = {props =&gt; !auth() ? (
          &lt;Component {...props} /&gt;
      ) : (
          &lt;Redirect to = {{pathname: &quot;/login&quot;, state: {from: props.location}}} /&gt;
      )}
  /&gt;
  )
  
  const Routes: FunctionComponent = () =&gt; {
      return (
          &lt;Switch&gt;
              &lt;Route path = &quot;/login&quot; component = {Login} /&gt;
              &lt;PrivateRoute exact path = &quot;/&quot; component = {ListProducts} /&gt;
              &lt;PrivateRoute path = &quot;/add-product&quot; component = {AddProduct} /&gt;
              &lt;PrivateRoute path = &quot;/add-user&quot; component = {AddUser} /&gt;
              &lt;Route path = &quot;/logout&quot; component = {Logout} /&gt;
          &lt;/Switch&gt;
          )
      }
  export default Routes;
  </code></pre>
  <p><strong>auth</strong></p>
  <pre><code>const auth = () =&gt; {
      const conditionals: boolean[] = [
          localStorage.getItem(&quot;token&quot;) !== undefined,
          localStorage.getItem(&quot;token&quot;) !== &quot;&quot;,
          localStorage.getItem(&quot;token&quot;) !== null
      ]
      console.log(conditionals.includes(false); // This command isn't trigger when logging in and logging out
      return conditionals.includes(false);
  }
  </code></pre>
  <p>export default auth;</p>