title: How can i get a client side cookie with next.js?
body: <p>I can't find a way to get a constant value of isAuthenticated variable across both server and client side with next.js</p>
  
  <p>I am using a custom app.js to wrap the app within the Apollo Provider. I am using the layout to display if the user is authenticated or not. The defaultPage is a HOC component.</p>
  
  <p>When a page is server side, isAuthenticated is set a true. But as soon as I change page - which are client side rendering (no reload) - the isAuthenticated remain at undefined all the way long until I reload the page.</p>
  
  <p>_app.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import App from 'next/app';
  import React from 'react';
  import withData from '../lib/apollo';
  import Layout from '../components/layout';
  
  class MyApp extends App {
      // static async getInitialProps({ Component, router, ctx }) {
      //     let pageProps = {};
      //     if (Component.getInitialProps) {
      //       pageProps = await Component.getInitialProps(ctx);
      //     }
      //     return { pageProps };
      //   }
  
      render() {
          const { Component, pageProps, isAuthenticated } = this.props;
          return (
              &lt;div&gt;
                  &lt;Layout isAuthenticated={isAuthenticated} {...pageProps}&gt;
                      &lt;Component {...pageProps} /&gt;
                  &lt;/Layout&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  export default withData(MyApp);
  </code></pre>
  
  <p>layout.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import defaultPage from "../hoc/defaultPage";
  
  class Layout extends React.Component {
      constructor(props) {
        super(props);
      }
      static async getInitialProps(ctx) {
        let pageProps = {};
        if (Component.getInitialProps) {
          pageProps = await Component.getInitialProps(ctx);
        }
  
        return { pageProps, isAuthenticated };
      }
      render() {
        const { isAuthenticated, children } = this.props;
        return (
            &lt;div&gt;
                {isAuthenticated ? (
                    &lt;h2&gt;I am logged&lt;/h2&gt;
                ) : (
                      &lt;h2&gt;I am not logged&lt;/h2&gt;
                )}
                  {children}
              &lt;/div&gt;
        )
      }
  }
  
  export default defaultPage(Layout);
  </code></pre>
  
  <p>defaultPage.js</p>
  
  <pre class="lang-js prettyprint-override"><code>/* hocs/defaultPage.js */
  
  import React from "react";
  import Router from "next/router";
  
  import Auth from "../components/auth";
  const auth = new Auth();
  
  export default Page =&gt;
  
    class DefaultPage extends React.Component {
  
      static async getInitialProps(ctx) {
  
        const loggedUser = process.browser
          ? auth.getUserFromLocalCookie()
          : auth.getUserFromServerCookie(ctx);
  
        const pageProps = Page.getInitialProps &amp;&amp; Page.getInitialProps(ctx);
  
        let path = ""
        return {
          ...pageProps,
          loggedUser,
          currentUrl: path,
          isAuthenticated: !!loggedUser
        };
      }
  
      render() {
        return &lt;Page {...this.props} /&gt;;
      }
    };
  </code></pre>
  
  <p>What am I missing here?</p>