next.js - Why I have to reload before I see if I'm logged in or not - Stack Overflow

admin管理员组

文章数量:1344331

I'm kind of new to using next.js and better-auth etc. I created an authentication system but the problem is, if I log in, I have to reload the page manually before I see the status changes like the sign out button appears. Also if I switch tabs and come back to this tab the sign out button is gone again and I have to reload again. Isn't there a way to keep the authentication status "alive"?

This is my sessionProvider

"use client";

import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";

export function Providers({ children, session }: { children: React.ReactNode, session: Session | null }) {
    return <SessionProvider session={session}>{children}</SessionProvider>;
}

It's placed inside the layout.tsx

export default async function RootLayout({
                                             children,
                                         }: {
    children: React.ReactNode
}) {
    const session = await auth.api.getSession({headers: await headers()});

    const providerSession = session ? {
        ...session,
        expires: session.session.expiresAt.toISOString()
    } : null;

    return (
        <Providers session={providerSession}>

Then this is the header buttons which should change following the authentication status. Also if I console.log it the first time it logs authenticated but if I switch tabs and come back it logs again and then it logs unauthenticated...

"use client";

import {useSession} from "next-auth/react";
import Link from "next/link";
import {Button} from "@/components/ui/button";
import {authClient} from "@/lib/auth/client";

function AuthButtons() {
    const {data: session} = useSession();
    console.log(useSession())
    if (session) {
        return (
            <Button
                onClick={async () => {
                    await authClient.signOut()
                    window.location.reload()
                }}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
            >
                Sign Out
            </Button>
        );
    }

    return (
        <>
            <Link href="/login" className="text-sm font-medium hover:text-blue-600 transition-colors">
                Sign In
            </Link>
            <Link
                href="/register"
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
            >
                Sign Up
            </Link>
        </>
    );
}

本文标签： nextjsWhy I have to reload before I see if I39m logged in or notStack Overflow