I have a navbar component that appears on every single page, including the login page and it is a client component.

There are two UI elements that will be shown depending on the useSession: if status is authenticated, it will show a UserButton (those round default profile picts that is a drop down) and if it is not authenticated/not logged in, it will show a sign in button.

The issue:
When i sign in, the sign in button will not change to the userbutton until i refresh the page. When i sign in, it will redirect to a settings page in case this information is relevant.

what ive tried:

1. in the navbar “function” part (im new with nextjs so i dont know the exact terminology) i used a react.useeffect and inside i put router.refresh but apparently it doesnt work because those are for server side components. neither does router.reload.

    React.useEffect(() => {
        router.refresh();
        console.log("[main-nav-tsx][session]", { session });
        if (session === null) {
            console.log("[main-nav-tsx][session] NO USER SIGNED IN");
        }
    }, [router, session]);

2. i tried using router.aspath but there is apparently an error because aspath is not a valid argument for router.replace

    React.useEffect(() => {
        if (status === 'authenticated' || status === 'unauthenticated') {
            router.replace(router.asPath);
        }
    }, [status, router]);

3. i also tried adding CHOKIDAR_USEPOLLING=true to my .env file but it doesnt work.

what i expect:
i just need the navbar to do some form of reload/refresh every time we go to a new page (for example from locahost:3000/auth/login to locahost:3000/config/profile)

this is the main-nav.tsx component. it appears on every single page. im not sure if the refreshing of components has anything to do with my middleware, authentication, hooks/use-current-user.ts or what. in case it is important, i followed this tutorial

//src/components/main-nav.tsx

"use client"

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { docsConfig } from "@/config/docs";
import { siteConfig } from "@/config/site";
import { cn } from "@/lib/utils";
import { Icons } from "@/components/icons";
import { LoginButton } from "./auth/login-button";
import { Button } from "./ui/button";
import { UserButton } from "@/components/auth/user-button";
import { useSession } from "next-auth/react";

export function MainNav() {
    const pathname = usePathname();
    const { data: session, status } = useSession();

    // Log the current session
    React.useEffect(() => {
        console.log("[main-nav-tsx][session]", { session });
        if (!session) {
            console.log("[main-nav-tsx][session] NO USER SIGNED IN");
        } else {
            console.log("[main-nav-tsx][session] USER SIGNED IN", session.user);
        }
    }, [session]);

    return (
        <div className="mr-4 hidden md:flex">
            <Link href="/" className="mr-6 flex items-center space-x-2">
                <Icons.logo className="h-6 w-6" />
                <span className="hidden font-bold sm:inline-block">
                    {siteConfig.name}
                </span>
            </Link>
            <nav className="flex items-center gap-4 text-sm lg:gap-6">
                {docsConfig.mainNav?.map((item) =>
                    item.href ? (
                        <Link
                            key={item.href}
                            href={item.href}
                            className={cn(
                                "transition-colors hover:text-foreground/80",
                                pathname === item.href
                                    ? "text-foreground"
                                    : "text-foreground/60"
                            )}
                        >
                            {item.title}
                        </Link>
                    ) : null
                )}
                {/* user button is to be shown only when user is logged in. 
                otherwise, show sign in.
                it works, but it doesnt auto refresh, i have to manually refresh the page */}
                {status === "authenticated" ? (
                    <UserButton />
                ) : (
                    <LoginButton>
                        <Button>Sign in</Button>
                    </LoginButton>
                )}
            </nav>
        </div>
    );
}