title: How to check if user is authenticated before rendering page?
body: <p>I'm using Next.js with redux and firebase auth.</p>
  
  <p>What I'm trying to achieve is to check whether a user is logged in before being able to access some private pages.</p>
  
  <p>I have created a component called <code>AdminLayout</code> which is wrapped around every private page. I get the <code>currentUser</code> as props using <code>mapStateToProps</code> but I'm not getting the value in the first run.</p>
  
  <pre><code>// admin-layout.component.jsx
  // Imports
  
  class AdminLayout extends React.Component {
    componentDidMount() {
      console.log(this.props.currentUser);
      // if (this.props.currentUser) {
      //   if (this.props.currentUser.currentUser.role != "admin") {
      //     Router.push("/admin/login");
      //   }
      // }
      // if (!this.props.currentUser) {
      //   Router.push("/admin/login");
      // }
    }
  
    render() {
      return (
        &lt;React.Fragment&gt;
              // Irrelevant code here
              {this.props.children}
              // Irrelevant code here
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
    currentUser: state.user.currentUser,
  });
  
  export default connect(mapStateToProps)(AdminLayout);
  </code></pre>
  
  <p>Any way to overcome this situation and allow only authenticated users to access the private pages?</p>