Client-Side Guard for UX
Use useSession and a router redirect to improve navigation, but protect the API and data source independently. A client guard is not sufficient to secure a page or backend resource.
Client guard
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
export default function PrivatePanel() {
const router = useRouter();
const { data: session, status } = useSession();
useEffect(() => {
if (status === "unauthenticated") router.replace("/auth/signin");
}, [status, router]);
if (status !== "authenticated") return <p>Loading…</p>;
return <p>Welcome {session.user?.name ?? session.user?.email}</p>;
}đź’ˇ Use this for UI flow only; secure the server endpoints separately.