title: How can i check if user is authenticated more efficently in react?
body: <p>I have a <code>this.props.auth</code> reducer in my protected route (returns user if authenticated or false when not). Currently I'm checking that if <code>this.props.auth</code> is false or has a user inside of it. When false, then redirect to <code>/login</code> or if true, render the page with <code>this.props.auth</code> data. I currently have to rewrite the auth logic for all components same way. What would be the best way to make the is user authenticated check reusable? </p>
  
  <p>Protected Component Code:</p>
  
  <pre><code>class StaffMeetingsPage extends React.Component {
  componentDidMount() {
      document.title = "Staff Meetings";
  }
  
  renderContent() {
      console.log(this.props.auth)
      switch (this.props.auth) {
          case null:
              return 'still fetching';
          case false:
              return this.props.history.push('/login');;
          default:
              return &lt;div&gt;Logged in&lt;/div&gt;;
      }
  }
  
  render() {
      console.log(this.props);
      return(
          &lt;div&gt;
              {this.renderContent()}
          &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
      return {
          auth: state.authenticationProperty
      };
  }
  
  export default connect(mapStateToProps)(StaffMeetingsPage);
  </code></pre>
  
  <p>Console logging <code>this.props.auth</code> when logged in: </p>
  
  <p><code>email: "test@mailtest.com"
  username: "user"
  _id: "adasdasdasfe3453"
  __proto__: Object</code></p>
  
  <p>Console logging <code>this.props.auth</code> when not logged in:</p>
  
  <p><code>false</code></p>