fix: show profile on client in header

src/app/layout.tsx

@@ -11,6 +11,7 @@ import Providers from "./provider";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import AdminBanner from "@/components/admin/banner";
+import { SessionProvider } from "next-auth/react";
 
 const lexend = Lexend({
 	subsets: ["latin"],
@@ -91,7 +92,9 @@ export default function RootLayout({
 				)}
 
 				<Providers>
-					<Header />
+					<SessionProvider>
+						<Header />
+					</SessionProvider>
 					<AdminBanner />
 					<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
 					<Footer />

src/components/header.tsx

@@ -1,15 +1,16 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
-
-import { auth } from "@/lib/auth";
+import { useSession } from "next-auth/react";
 
 import SearchBar from "./search-bar";
 import RandomLink from "./random-link";
 import ProfileOverview from "./profile-overview";
 import LogoutButton from "./logout-button";
 
-export default async function Header() {
-	const session = await auth();
+export default function Header() {
+	const session = useSession();
 
 	return (
 		<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
@@ -35,7 +36,7 @@ export default async function Header() {
 						Submit
 					</Link>
 				</li>
-				{!session?.user ? (
+				{!session?.data?.user ? (
 					<li>
 						<Link href={"/login"} className="pill button h-full">
 							Login

src/components/profile-overview.tsx

@@ -1,21 +1,28 @@
+"use client";
+
 import Image from "next/image";
-import { auth } from "@/lib/auth";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 
-export default async function ProfileOverview() {
-	const session = await auth();
+export default function ProfileOverview() {
+	const session = useSession();
 
 	return (
 		<li title="Your profile">
-			<Link href={`/profile/${session?.user?.id}`} aria-label="Go to profile" className="pill button gap-2! p-0! h-full max-w-64" data-tooltip="Your Profile">
+			<Link
+				href={`/profile/${session?.data?.user?.id}`}
+				aria-label="Go to profile"
+				className="pill button gap-2! p-0! h-full max-w-64"
+				data-tooltip="Your Profile"
+			>
 				<Image
-					src={session?.user?.image ?? "/guest.png"}
+					src={session?.data?.user?.image ?? "/guest.png"}
 					alt="profile picture"
 					width={40}
 					height={40}
 					className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
 				/>
-				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.name ?? "unknown"}</span>
+				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.data?.user?.name ?? "unknown"}</span>
 			</Link>
 		</li>
 	);