I use Next.js version 19 with TS and an app router with Node on the server side. The whole Authentication process works properly, one thing does not work for me and that is the matter of when a user logged in or logged out it is not updated on the navbar in real time, only after I reinterpret the site
Header.tsx:
import React from "react";
import { User } from "@/types/user"; // Adjust path as necessary
import Link from "next/link";
interface HeaderProps {
currentUser: User["currentUser"];
}
const Header: React.FC<HeaderProps> = ({ currentUser }) => {
const links = [
...(currentUser ? [{ label: "Sign Out", href: "/auth/signout" }] : []),
...(!currentUser
? [
{ label: "Sign Up", href: "/auth/signup" },
{ label: "Sign In", href: "/auth/signin" },
]
: []),
].map(({ label, href }) => (
<li key={href} className="nav-item">
<Link href={href}>{label}</Link>{" "}
</li>
));
return (
<nav className="flex justify-between items-center mb-4 w-4/5 m-auto p-4">
<Link href="/">GitTix</Link>
<ul className="flex items-center space-x-4">{links}</ul>
</nav>
);
};
export default Header;
layout.tsx:
import React, { Suspense } from "react";
import { Inter } from "next/font/google";
import "./globals.css";
import LoadingSpinner from "@/app/components/loading-spinner";
import Header from "./components/header";
import { User } from "@/types/user";
import { getCurrentUser } from "./api/get-current-user";
const inter = Inter({ subsets: ["latin"] });
// RootLayout component
const RootLayout: React.FC<{ children: React.ReactNode }> = async ({
children,
}) => {
const { currentUser }: User = await getCurrentUser();
return (
<html lang="en">
<body className={inter.className}>
<Suspense fallback={<LoadingSpinner />}>
<Header currentUser={currentUser} />
<main>{children}</main>
</Suspense>
</body>
</html>
);
};
export default RootLayout;
page.tsx:
import { User } from "@/types/user";
import { getCurrentUser } from "./api/get-current-user";
const Home = async () => {
const { currentUser }: User = await getCurrentUser();
console.log("currentUser1:", currentUser);
return (
<div>
{currentUser ? (
<h1>You are logged in as {currentUser.email} </h1>
) : (
<h1>You are not logged in</h1>
)}
</div>
);
};
export default Home;
What’s expected to happen is that when pressing login and and being Authorized the header and home page will change to the updated status. I tried adding an context for user that includes state and it doesn’t work, and when debugging it shows the proper currentUser.
New contributor
Almog Hindi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.