Enhance the Header component by incorporating a logout button that seamlessly navigates with the NextJS App

Question

Enhance the Header component by incorporating a logout button that seamlessly navigates with the NextJS App

Currently, I am utilizing NextJS 14 with App router alongside Spring Boot on the backend. Within my application, I have both public and private routes set up. For the private routes, users are required to log in through a designated login page. Upon successful authentication, a JWT token is returned as a cookie.

The following code snippet represents my root layout:

import "./global.css";
import Header from "./components/header/header";
import {GlobalProvider} from "./_lib/global-provider"; 
import MainContent from "./components/main-content";

export default async function RootLayout({children}) {

    return (
            <html lang="en" className="">
            <body className="min-h-screen scroll-smooth">
            <div className="flex flex-col min-h-screen">
                <GlobalProvider>
                    <Header/>
                    <MainContent>
                        {children}
                    </MainContent>
                </GlobalProvider>
            </div>
            </body>
            <GoogleAnalytics/>
            </html>
    );
}

Additionally, here is the Header component responsible for rendering the Log Out button when a user is logged in:

"use client";

import Link from "next/link";
import {useAdminAuthContext} from "../../_lib/admin-auth-provider";
import LogoHeader from "./logo-header";

export default function Header() {

    const adminAuth = useAdminAuthContext();

    return (
            <header className="sticky top-0 z-50 flex-none bg-gray-50 py-6 drop-shadow">
                <nav className="relative mx-auto flex justify-between px-8 max-sm:px-2">
                    <div className="flex items-center ">
                        <LogoHeader/>
                    </div>

                    <div className="flex items-center">
                        {
                            adminAuth.user != null && <button>LOG OUT</button>
                        }
                    </div>
                </nav>
            </header>
    );
}

Utilizing an AuthContext enables me to expose functionalities like logIn and logOut, which interact with the backend to determine if a user is authenticated. However, upon reloading the page, the state is lost causing the LOG OUT button to disappear. Here is the relevant AuthContext code:

"use client";

import {createContext, useContext, useEffect, useState} from "react";
import {useRouter} from 'next/navigation';

const host = process.env.NEXT_PUBLIC_API_HOST;
export const AdminAuthContext = createContext({});
export const AdminAuthProvider = ({children}) => {
    const router = useRouter(); // Initialize useRouter

    const [user, setUser] = useState(null); // State to store admin user details

    const doAdminLogin = async (email, password) => {
        const request = await fetch(`${host}/api/admin/login`, {
            cache: "no-store",
            method: "POST",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({email, password}),
        });

        if (!request.ok) {
            console.error('Login failed');
            throw new Error("Error logging in");
        }

        const res = await request.json();
        setUser(res.username);
        router.push('/private/admin/dashboard'); // Use router.push to navigate
    };

    const doAdminLogout = async () => {
        const request = await fetch(`${host}/api/admin/logout`, {
            cache: "no-store",
            method: "POST",
            credentials: "include",
        });
    };

    return (
            <AdminAuthContext.Provider value={{user, doAdminLogin, doAdminLogout}}>
                {children}
            </AdminAuthContext.Provider>
    );
};

export function useAdminAuthContext() {
    return useContext(AdminAuthContext);
}

Therefore, the key question at hand is: What adjustments should be made to ensure that the Header component displays the LOG OUT button appropriately based on the user's authentication status?

javascript authentication next.js

Answer 1

Answer №1

Whenever you reload the page, all state information is lost. To retain data from a previous session, it's necessary to utilize browser storage mechanisms such as cookies or localStorage.

In this scenario, because a cookie is set upon login, you can easily trigger an API call on page load to verify the cookie and retrieve user information like this:

"use client";

import { createContext, useContext, useEffect, useState } from "react";
import { useRouter } from "next/navigation";

const host = process.env.NEXT_PUBLIC_API_HOST;
export const AdminAuthContext = createContext({});
export const AdminAuthProvider = ({ children }) => {
  const router = useRouter(); // Initialize useRouter

  const [user, setUser] = useState(null); // State to store admin user details
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    /* 
      Make use of the appropriate API endpoint to fetch the user data. If a cookie exists, 
      obtained from a prior login, you should receive the user information
      just like during the initial login.
   */
    const checkAdminLogin = async () => {
      try {
        const request = await fetch(`${host}/api/admin/user`, {
          method: "GET",
          credentials: "include",
        });

        if (request.ok) {
          const res = await request.json();
          setUser(res.username);
        } else {
          throw new Error("Not authorized");
        }
      } catch (error) {
        console.error(error);
        router.push("/admin/login");
      } finally {
        setLoading(false);
      }
    };
    checkAdminLogin();
  }, [router]);

  const doAdminLogin = async (email, password) => {
    // ...
  };

  const doAdminLogout = async () => {
    // ...
  };

  return (
    <AdminAuthContext.Provider value={{ user, doAdminLogin, doAdminLogout }}>
      {loading ? "Loading..." : children}
    </AdminAuthContext.Provider>
  );
};

export function useAdminAuthContext() {
  return useContext(AdminAuthContext);
}

Answer 2

Whenever you reload the page, all state information is lost. To retain data from a previous session, it's necessary to utilize browser storage mechanisms such as cookies or localStorage.

In this scenario, because a cookie is set upon login, you can easily trigger an API call on page load to verify the cookie and retrieve user information like this:

"use client";

import { createContext, useContext, useEffect, useState } from "react";
import { useRouter } from "next/navigation";

const host = process.env.NEXT_PUBLIC_API_HOST;
export const AdminAuthContext = createContext({});
export const AdminAuthProvider = ({ children }) => {
  const router = useRouter(); // Initialize useRouter

  const [user, setUser] = useState(null); // State to store admin user details
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    /* 
      Make use of the appropriate API endpoint to fetch the user data. If a cookie exists, 
      obtained from a prior login, you should receive the user information
      just like during the initial login.
   */
    const checkAdminLogin = async () => {
      try {
        const request = await fetch(`${host}/api/admin/user`, {
          method: "GET",
          credentials: "include",
        });

        if (request.ok) {
          const res = await request.json();
          setUser(res.username);
        } else {
          throw new Error("Not authorized");
        }
      } catch (error) {
        console.error(error);
        router.push("/admin/login");
      } finally {
        setLoading(false);
      }
    };
    checkAdminLogin();
  }, [router]);

  const doAdminLogin = async (email, password) => {
    // ...
  };

  const doAdminLogout = async () => {
    // ...
  };

  return (
    <AdminAuthContext.Provider value={{ user, doAdminLogin, doAdminLogout }}>
      {loading ? "Loading..." : children}
    </AdminAuthContext.Provider>
  );
};

export function useAdminAuthContext() {
  return useContext(AdminAuthContext);
}

Answer 3

Answer №2

When navigating pages, component level state is always lost. To prevent this issue, Redux internally connects components to the window object. I suggest utilizing Redux, possibly with a persistent storage plugin for extended storage persistence. With Redux alone, you should not encounter the current problem of losing state during page navigation.

Answer 4

When navigating pages, component level state is always lost. To prevent this issue, Redux internally connects components to the window object. I suggest utilizing Redux, possibly with a persistent storage plugin for extended storage persistence. With Redux alone, you should not encounter the current problem of losing state during page navigation.

Enhance the Header component by incorporating a logout button that seamlessly navigates with the NextJS App

Answer №1

Answer №2

Similar questions

Exploring Angular.js: Finding the correct path in a JSON array

What could be the reason why the initial console.log is failing to print?

Vue - Error Message from Eslint Regarding Absence of Variable in Setup Function

Tips for Successfully Sending Vue Data in Axios POST Call

Receiving JSON using Javascript and vue.js

In JavaScript, JSON data is parsed using a comma separator

Front-end procedural logic for increasing identification values

Guide on leveraging Next-auth for managing multiple sessions concurrently

Displaying a div on click using Jquery will only impact one div at a time

Error: The next.config.js file contains invalid options - The root value includes an unexpected property

Go back to the top by clicking on the image

An unexpected type error occurred: Unable to read the undefined property 'map' when utilizing Highcharts

JavaScript effectively divides multiple child dropdowns with the main dropdown, thanks to Bootstrap innovation

The size of the array within the object does not align

What is the most efficient way to transfer form data from one JSP page to another?

Incorporating the power of ES6 into a pre-existing website using React

Ways to address the problem of returning assignments

Switch to a different element by rolling over one

What are the steps to fix a timeout error with React.js and socket.io acknowledgements?

jQuery AJAX event handlers failing to trigger