Updating Next.js App Components After User Login

I have a static 2-page Next.js app that I want to integrate a user-based system with. I’ve decided to use Auth0 for authentication. My goal is to let a user see documents that they have saved on my app, similar to Grammarly, but I am not sure how the entire UI will conditionally change after the user has logged in. For example, think about the NavBar, which is a component in my app named navbar.js.

import Link from "next/link";
export const siteTitle = "Title";
export const siteDescription = "Description";

export default function Navbar({ page, ...props }) {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-white">
      <div className={page == "page1" ? "container-fluid" : "container"}>
        {/* <!-- Toggle Open --> */}
        {page == "Page1" || (
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarCollapse"
          >
          </button>
        )}

        {/* <!-- Collapse --> */}
        <div className="collapse navbar-collapse" id="navbarCollapse">

          {/* <!-- Toggle Close --> */}
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarCollapse"
          >
          </button>

          {/* <!-- Buttons --> */}
          {page == "Page1" ? (
            ""
          ) : (
            <Link href="/page1">
              <a className="navbar-btn">
                Page 1
              </a>
            </Link>
          )}
          {page == "Link1" ? (
            ""
          ) : (
            <Link href="https://link2">
              <a className="secondary-navbar-btn">
                Link 1
              </a>
            </Link>
          )}
        </div>
      </div>
    </nav>
  );
}

Considering that the navbar will changing after login, (I want to have “documents” that the user can save directly and later access, meaning that a “My Documents” button must appear in the navbar after login) I am unsure of how the navbar.js file should now be written. Should I just created a new component that will be used after login; if so how would that look? Or should those extra buttons be added in my original navbar.js file, but only rendered after login? Are there existing react hooks that modify components depending on login status?

I would greatly appreciate any links to documentation or tutorials that are solving a problem similar to mine, since I have been unable to find these resources on my own.

Edit 1: If there is anything that I can add/take away/change on this post to make it better please let me know.

Edit 2: I have brain stormed 2 ways of updating the UI in general but I would like to hear some more experienced opinions on my strategies.

Option 1: Update individual components from within the same file after the user logs in. I still don’t know what this would look like though.

Option 2: Direct the user to a new page with entirely different components. I won’t be able to reuse my existing components and might be repeating code a bit. However I don’t mind this option if it is the safer route.

I am open to literally any suggestions at all, just trying to get this thing working

Answer

The simplest way is option 2, Auth0 provides hooks that tell you whether there is a user logged in or not and you can use that to conditionally render components. I usually use ternary operators to do that within JSX.

I’d also suggest learning a state management API such as Redux or Context API and then conditionally rendering components based on whether the logged-in state is true or false.

Advertisement

Answer