Session Management & useSession Hook
Access session data in server and client components and protect pages based on auth status.
Session Types in Auth.js
Auth.js supports two session strategies: JWT (default, stateless token in cookie) and database (session record in DB, invalidatable server-side).
useSession in Client Components
useSession() is a Client Component hook that reads the current session. It returns data (session), status ('loading' | 'authenticated' | 'unauthenticated'), and an update function.
'use client';
import { useSession } from 'next-auth/react';
export function UserAvatar() {
const { data: session, status } = useSession();
if (status === 'loading') return <Spinner />;
if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}All lessons in this course
- Setting Up Auth.js in Next.js App Router
- Session Management & useSession Hook
- Credentials Provider & Custom Login
- Middleware-Based Route Protection