title: React + NextJS - Protected routes
body: <p><strong>Objective :</strong> I want to redirect a <em>logged in user</em> to the home page if he/she tries to manually go to the /auth/signin.</p>
  <blockquote>
  <p>Signin page/component :</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>const Signin = ({ currentUser }) =&gt; {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const { doRequest, errors } = useRequest({
          url: '/api/users/signin',
          method: 'post',
          body: {
              email, password
          },
          onSuccess: () =&gt; Router.push('/')
      });
  
      useEffect(() =&gt; {
          const loggedUser = () =&gt; {
              if (currentUser) {
                  Router.push('/');
              }
          };
          loggedUser();
      }, []);
  
  </code></pre>
  <blockquote>
  <p>Custom _app component:</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>const AppComponent = ({ Component, pageProps, currentUser }) =&gt; {
      return (
          &lt;div&gt;
              &lt;Header currentUser={currentUser} /&gt;
              &lt;Component {...pageProps} currentUser={currentUser} /&gt;
          &lt;/div&gt;
  
      )
  };
  
  AppComponent.getInitialProps = async (appContext) =&gt; {
      const client = buildClient(appContext.ctx);
      const { data } = await client.get('/api/users/currentuser');
      let pageProps = {};
      if (appContext.Component.getInitialProps) {
          pageProps = await appContext.Component.getInitialProps(appContext.ctx);
      }
      return {
          pageProps,
          ...data
      }
  };
  
  export default AppComponent;
  </code></pre>
  <p><strong>Issue</strong> :</p>
  <p>I tried this, but this causes a slight delay as it won't be server side rendered.
  By delay I mean: It shows the page I don't want to show for a second or so before redirecting.</p>
  <p>I could use a loading sign or bunch of if else conditions, but that would be a work around, what would be the <strong>best approach/practice</strong> to handle this issue?</p>
  <hr />
  <blockquote>
  <p>Another solution I came up with:</p>
  </blockquote>
  <ul>
  <li>I built a redirect hook :</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>import Router from 'next/router';
  export default (ctx, target) =&gt; {
      if (ctx.res) {
          // server 
          ctx.res.writeHead(303, { Location: target });
          ctx.res.end();
      } else {
          // client
          Router.push(target);
      }
  }
  </code></pre>
  <ul>
  <li>Then I made 2 HOCs(for logged in and logged out user) to for protected routes:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import redirect from './redirect';
  const withAuth = (Component) =&gt; {
      return class AuthComponent extends React.Component {
          static async getInitialProps(ctx, { currentUser }) {
              if (!currentUser) {
                  return redirect(ctx, &quot;/&quot;);
              }
          }
          render() {
              return &lt;Component {...this.props} /&gt;
          }
      }
  }
  export default withAuth;
  </code></pre>
  <ul>
  <li>Then I wrapped the components with it for protecting the page:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>export default withAuth(NewTicket);
  </code></pre>
  <p>Is there any better approach to handling this?
  Would really appreciate the help.</p>