Topic 46 of 47
Session Providers
Overview
To access authentication state in Client Components using the `useSession` hook, you must wrap your application in NextAuth's `SessionProvider`. Because `SessionProvider` uses React Context, it must be a Client Component.
Syntax
tsx
// 1. Create a client wrapper for the provider
// app/providers.tsx
'use client';
import { SessionProvider } from "next-auth/react";
export function AuthProvider({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
// 2. Wrap the Root Layout
// app/layout.tsx
import { AuthProvider } from './providers';
export default function RootLayout({ children }) {
return (
<html>
<body>
<AuthProvider>
{children}
</AuthProvider>
</body>
</html>
);
}Common Pitfalls
- Do NOT put `'use client'` directly inside `app/layout.tsx` just to use `SessionProvider`. Always create a separate wrapper component (`providers.tsx`) to keep the Root Layout as a Server Component.
- In the App Router, you generally don't need `useSession` as often. Prefer `getServerSession` in Server Components for better performance.
Real-World Example
Accessing session data in a Client Component:
example
tsx
// app/components/Navbar.tsx
'use client';
import { useSession, signIn, signOut } from "next-auth/react";
export default function Navbar() {
const { data: session, status } = useSession();
if (status === "loading") return <p>Loading...</p>;
if (session) {
return (
<div>
<p>Signed in as {session.user?.email}</p>
<button onClick={() => signOut()}>Sign out</button>
</div>
);
}
return <button onClick={() => signIn()}>Sign in</button>;
}