title: Next JS and Firebase authentication protected routes
body: <p>I am using Firebase and Next JS for a webapp where you have to login to be able to access any other page (all routes are protected). What I first did was set up a provider in _app.js so that I can access the status of the user (logged in or not). Then, when a protected page is requested, I check the user status and redirect to the login page when needed like this:</p>
  <pre><code>import Users from &quot;../components/users/Users&quot;;
  import Layout from &quot;../components/general/Layout&quot;;
  
  import { useEffect, useContext } from &quot;react&quot;;
  import { AuthContext } from &quot;../components/authentication/auth&quot;;
  
  import router from &quot;next/router&quot;;
  
  function users() {
    const { currentUser } = useContext(AuthContext);
  
    useEffect(() =&gt; {
      if (currentUser) {
        console.log(&quot;signed in!&quot;);
      } else if (currentUser == null) {
        router.push(&quot;/login&quot;);
      }
    }, [currentUser]);
    return (
      &lt;Layout&gt;
        &lt;Users /&gt;
      &lt;/Layout&gt;
    );
  }
  
  export default users;
  </code></pre>
  <p>Now, this works in principle, but the redirect takes some time and first shows the &quot;users&quot; page before it redirects. I know there is this option:
  <a href="https://github.com/gladly-team/next-firebase-auth" rel="nofollow noreferrer">https://github.com/gladly-team/next-firebase-auth</a></p>
  <p>However, I don't like being dependent on this, and was wondering if there is a better, straightforward way of doing this?</p>