How to redirect based on cookie presence?

[tpkahlon]

Hello members,

Following is problem set: I have a form on /contact page. I want to check if user filled this form or not. On form submission, I set a local cookie for 24 hours using Ncookies. I want to perform redirection based on this cookie. If cookie is present, user can access any page, otherwise redirect to /contact page. I managed to setup redirection on client-side, but I see a flicker. What is the best way to setup redirection on server side?

I have components folder for each section like TwoColumnsLayout, ThreeColumnsLayout which are rendered in pages folder. I am unable to leverage getInitialProps in each page and perform rendering at server side. Any ideas?

Following is code on how I handle redirection on client-side:

redirectPage = () => {
  let hasCookie;
  const cookies = document.cookie.split('; ').find(row => row.startsWith('formSubmitted'));
  hasCookie = cookies === undefined ? false : true;
  if(!hasCookie) {
    Router.push('/contact')
  }
}

componentDidMount() {
  this.redirectPage();
}

[jamesmosier]

You should be able to leverage getServerSideProps and redirect like this:

export async function getServerSideProps(context) {
  const cookies = parseCookies(context);

  if (cookies.some_value) {
    context.res.writeHead(303, { Location: "/your-page" });
    context.res.end();
  }

  return { props: {} };
}

[jamesmosier]

Oh yeah then that won't work. getServerSideProps isn't available until 9.3. You should definitely consider upgrading! But in the meantime this should work too:

YourPageComponent.getInitialProps = async (context) => {
  const cookies = parseCookies(context);

  if (cookies.some_value) {
    context.res.writeHead(303, { Location: "/your-page" });
    context.res.end();
  }

  return {};
}

[tpkahlon]

One question regarding that. I tried it earlier in the day. How can I leverage getInitialProps so dynamic routes like /news/news-1 also gets redirected. Can you provide a demonstration of HOC or dummy sample where it is shown how to pass it down to child paged components?

For example, in /pages/ folder, there are files like /news.js, /media.js etc. In news.js, it contains following structure:

import Wrapper from "../components/Wrapper";

const Index = () => {
  <Wrapper>
    <Menu />
    <Widget />
  </Wrapper>
}

Another thing, the solutions works when app is loaded. When I click on a Link element after app is loaded (like / or Home link), it says context.res is undefined.

Only thing left is if I can set getInitialProps() in Wrapper and redirect from there, all pages in site will have redirection. Only bug left is that weird click that context.res is undefined.

UPDATE: I just realized there are more than 50+ child pages. HOC will not help because going through each page and wrapping inside a HOC or declaring getInitialProps is nightmare. _app.js feature does not work because of version compatibility too. I am feeling stuck.

[jamesmosier]

You cannot use getInitialProps in any child components. They must be used on the component inside your pages folder.

[tpkahlon]

I got redirection working using this code in _app.js file for all pages:

In this case, test will be cookie whose presence is checked. I am usually boolean for simplicity.

function MyApp({ Component, pageProps, test }) {
    useEffect(() => {
    if (!test) {
      Router.push("/contact");
    }
  }, []);
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);
  const test = false;
  const { ctx, pathname } = appContext;
  if (typeof window === "undefined" && !test) {
          appContext.ctx.res.writeHead(302, { Location: "/contact" });
          appContext.ctx.res.end();
  }
  return { ...appProps, test };

However, the template of /contact page does not render on client side. I get following message in browser: The page isn’t redirecting properly. Nothing shows up. Any idea how to fix this?

[tpkahlon]

Finally, some hope!

Thank you James for your feedback on highlighting getInitialProps and how they work.

I solved it by building a HOC component which wraps around each page component. Huge thanks to Justin on explaining his method on Dev.TO.

HOC

import Router from "next/router";

const isBrowser = () => typeof window !== "undefined";
const findFormCookie = () =>
  document.cookie.split("; ").some((row) => row.startsWith("contactFormSubmitted"));

export default function withRedirection(PageComponent) {
  const location = "/contact";
  const Component = PageComponent;

  const ComponentWrapper = (props) => {
    const clientCondition = () => {
      if (isBrowser()) {
        return findFormCookie();
      }
    };
    const redirectCondition = clientCondition();
    if (isBrowser() && redirectCondition) {
      Router.push(location);
      return <></>;
    }
    return <Component {...props} />;
  };

  ComponentWrapper.getInitialProps = async (ctx) => {
    if (!isBrowser() && ctx.res) {
      const serverCondition = (ctx) => {
        const cookies = Object.keys(ctx.req.cookies);
        const hasFormCookieKey = cookies.some((i) => i === "contactFormSubmitted");
        return hasFormCookieKey;
      };
      if (serverCondition(ctx)) {
        ctx.res.writeHead(302, { Location: location });
        ctx.res.end();
      }
    }

    const componentProps =
      Component.getInitialProps && (await Component.getInitialProps(ctx));

    return { ...componentProps };
  };

  return ComponentWrapper;
}

Page Component

...
import withRedirection from 'hoc/withRedirection';

const About = () => (
    <>About page...</>
);

export default withRedirection(About);