title: How can i implement jwt validation in my react app
body: <p>I am new on this project and I don't understand how I can implement jwt auth in my react app. When I refresh my page I lose my session every time. I've got the token saved in localstorage, but I don't underestand where I am meant to check that for auth instead. Here is some code I think may be relevant </p>
  
  <p>routes.js</p>
  
  <pre><code>export default (
  &lt;Route path='/' component={App}&gt;
  &lt;IndexRedirect to='/in'/&gt;
  &lt;Route path='in' component={Authentication(MainPage)}&gt;
    &lt;Route path='welcome' component={Welcome}/&gt;
    &lt;Route path='faq' component={Faq}/&gt;
    &lt;Route path='update_password/:token' component={UpdatePassword}/&gt;
    &lt;Route path='register_data_files' component={DataFileManagement}/&gt;
    &lt;Route path='manage_users' component={User}/&gt;
    &lt;Route path='user_access_logs' component={Logs}/&gt;
    &lt;Route path='flat_file' component={FlatFile}/&gt;
    &lt;Route path='edit_user' component={EditUser}/&gt;
    &lt;Route path='quick_reports' component={QuickReports}/&gt;
    &lt;Route path='*' component={NotFound}/&gt;
  &lt;/Route&gt;
  &lt;Route path='faq' component={LoginBar}/&gt;
  &lt;Route path='forgot_password' component={ForgotPassword}/&gt;
  &lt;Route path='login' component={LoginPage}/&gt;
  &lt;Route path='update_password/:token' component={UpdatePassword}/&gt;
  &lt;Route path='*' component={NotFound}/&gt;
  </code></pre>
  
  <p>
  )</p>
  
  <p>mainPage.jsx</p>
  
  <pre><code>const MainPage = props =&gt; (
    &lt;div className='app-container'&gt;
      &lt;ApplicationBar
        actions={props.actions}
        token={props.token}
        ui={props.ui}
        user={props.user}
      /&gt;
      {React.cloneElement(props.children, props)}
    &lt;/div&gt;
  )
  
  
  MainPage.propTypes = {
    actions: PropTypes.object.isRequired,
    token: PropTypes.string.isRequired,
    user: PropTypes.object.isRequired
  }
  
  const mapStateToProps = state =&gt; ({
    token: state.token,
    user: state.user,
    ui: state.ui
  })
  const mapDispatchToProps = dispatch =&gt; ({ actions: 
  bindActionCreators(actions, dispatch) })
  
  export default connect(mapStateToProps, mapDispatchToProps)(MainPage)
  </code></pre>
  
  <p>authentication.jsx</p>
  
  <pre><code>export default function (Component) {
    class Authentication extends Component {
      componentWillMount() {
        this.pushToLoginIfNotAuthenticated(this.props.auth)
  }
  
  componentWillReceiveProps({auth}) {
    this.pushToLoginIfNotAuthenticated(auth)
  }
  
  pushToLoginIfNotAuthenticated(auth) {
    !auth &amp;&amp; this.store.dispatch(push('/login'))
  }
  
      render() {
        return this.props.auth &amp;&amp; &lt;Component {...this.props} /&gt;
      }
    }
  
    const mapStateToProps = state =&gt; ({ auth: true })
    const mapDispatchToProps = dispatch =&gt; ({ push: 
  bindActionCreators(push, 
  dispatch) })
  
    return connect(mapStateToProps, mapDispatchToProps)(Authentication)
  }
  </code></pre>