title: next and JWT auth component
body: <p>I've been creating a simple application with next.js and trying to leverage JWT properly for user authentication.</p>
  
  <p>I would like to use one navbar and one layout, and change the details of each, depending on the authentication status as below.</p>
  
  <pre><code>import React from "react";
  import Link from 'next/link'
  
  
  const attributeStyle = "block mt-4 lg:inline-block lg:mt-0 uppercase font-semibold text-teal-200 hover:text-white mr-4"
  
  
  
  export default function Navbar(token) {
  
  
  
    return (
      &lt;&gt;
        {/* Navbar */}
        &lt;nav className="relative max-w-screen-xl mx-auto flex items-center justify-between px-4 sm:px-6"&gt;
          &lt;div className="flex items-center flex-1"&gt;
            &lt;div className="flex items-center justify-between w-full md:w-auto"&gt;
              &lt;Link href="/"&gt;&lt;a className={attributeStyle}&gt;
                &lt;div className="hidden md:block md:ml-10"&gt;
                  &lt;h1 className="font-medium text-white hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out"&gt;Ubik&lt;/h1&gt;
                &lt;/div&gt;
              &lt;/a&gt;&lt;/Link&gt;
              {/* &lt;svg className="fill-white h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/&gt;&lt;/svg&gt; */}
  
  
            &lt;/div&gt;
  
          &lt;/div&gt;
          {token ? (
          &lt;div className="hidden md:block text-right"&gt;
            &lt;span className="inline-flex rounded-md shadow-md"&gt;
              &lt;span className="inline-flex rounded-md shadow-xs"&gt;
                &lt;Link href="/account/login"&gt;
                  &lt;a className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue hover:bg-gray-50 hover:text-black focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"&gt;
                    Log In
        &lt;/a&gt;
                &lt;/Link&gt;
  
              &lt;/span&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          ):( &lt;div className="hidden md:block text-right"&gt;
          &lt;span className="inline-flex rounded-md shadow-md"&gt;
            &lt;span className="inline-flex rounded-md shadow-xs"&gt;
              &lt;Link href="/account/login"&gt;
                &lt;a className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue hover:bg-gray-50 hover:text-black focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"&gt;
                  Log out
      &lt;/a&gt;
              &lt;/Link&gt;
  
            &lt;/span&gt;
          &lt;/span&gt;
        &lt;/div&gt;)}
        &lt;/nav&gt;
        {/* End Navbar */}
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>LayoutLanding</p>
  
  <pre><code>import Head from "next/head";
  import Link from 'next/link'
  
  import NavBar from './newNavBar';
  
  import Footer from "./Footer";
  
  const layoutStyle = {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    width: "100%"
  };
  
  import { Cookies, CookiesProvider } from "react-cookie";
  const cookies = new Cookies();
  let token = cookies.get("token");
  
  
  const LayoutLanding = props =&gt; (
    &lt;div className="Layout" style={layoutStyle}&gt;
      &lt;Head&gt;
        &lt;title&gt;{props.title}&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
        &lt;meta charSet="utf-8" /&gt;
      &lt;/Head&gt;
  
      &lt;div className=" bg-gray-900 relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32  "&gt;
  
        &lt;NavBar token = {token}/&gt;
  
      &lt;/div&gt;
      &lt;div&gt;{props.children}&lt;/div&gt;
  
  
  &lt;Footer/&gt;
    &lt;/div&gt;
  
  );
  
  export default LayoutLanding;
  </code></pre>
  
  <p>At the moment instead, I am checking for the JWT authentication on the index page, and redirecting users to another page with a separate set of components for navbar and layouts, which is just inefficient. However, for some reason when i pass the token through the layoutlanding to the navbar component, it does not register.</p>
  
  <p>This is the index page with the work around I use</p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import { get } from "lodash/object";
  import Link from "next/link";
  import Router, { useRouter } from "next/router";
  import { useRef, useState } from "react";
  
  // import fetch from 'isomorphic-unfetch';
  import { Cookies, CookiesProvider } from "react-cookie";
  const cookies = new Cookies();
  //containers
  
  import LandingPage from "../containers/LandingPage";
  import DataChoices from "../components/LandingPage/DataChoices.js";
  // Layouts
  import Layout from "../components/Layout/Layout";
  import Chart from "../components/Visualization/Chart";
  import Table from "../components/Visualization/HekticTable";
  
  
  export default function index() {
    const searchRef = useRef&lt;HTMLInputElement&gt;(null);
    const [message, setMessage] = useState&lt;any&gt;(null);
  
    const [productList, setProductList] = useState&lt;any&gt;([]);
    const [searched, setSearched] = useState(false);
  
    const router = useRouter();
  
    let token = cookies.get("token");
  
  
  
  
  
    if (token == null) {
  
      return (
        &lt;LandingPage /&gt;
  
  
      );
    }
  
    return (
      &lt;div&gt;
      &lt;div&gt;token&lt;/div&gt;
      &lt;LandingPage /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>What am I doing wrong, and how would I approach this better so I can not replicate code unnecessarily?</p>
  
  <p>Thanks in advance :)</p>