Read Session with `useSession()`
useSession() returns { data, status }. Status is typically loading, authenticated, or unauthenticated. Handle the loading state to avoid flickering the wrong UI. Use this hook in components under SessionProvider; use getServerSession in server-side Pages Router code.
Session status component
import { useSession } from "next-auth/react";
export default function AuthStatus() {
const { data: session, status } = useSession();
if (status === "loading") return <p>Checking session…</p>;
if (status === "unauthenticated") return <p>You are signed out.</p>;
return <p>Signed in as {session.user?.email}</p>;
}đź’ˇ Only render fields intentionally exposed by the session callback.