How to access session data in Next.js Server and Client Components

Reading Session in Server Components

Call auth() directly in any Server Component or Route Handler — no provider needed:

import { auth } from '@/auth'

export default async function Dashboard() {
  const session = await auth()

  if (!session?.user) redirect('/login')

  return <h1>Welcome, {session.user.name}</h1>
}

Session in Client Components

Wrap your app in SessionProvider (in a Client Component layout), then use useSession:

'use client'
import { SessionProvider } from 'next-auth/react'

export default function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>
}

'use client'
import { useSession } from 'next-auth/react'

export default function UserMenu() {
  const { data: session, status } = useSession()
  if (status === 'loading') return <span>Loading...</span>
  if (!session) return <SignInButton />
  return <span>{session.user?.name}</span>
}

Adding User ID to Session

// In auth.ts callbacks:
callbacks: {
  session({ session, token }) {
    session.user.id = token.sub!  // sub is the user's ID in JWT
    return session
  },
}

By default, the session object only includes name, email, and image. Add the callbacks to include the user's ID or any custom fields.