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 insideapp/layout.tsxjust to useSessionProvider. 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
useSessionas often. PrefergetServerSessionin Server Components for better performance.
Real-World Example
Accessing session data in a Client Component:
example
tsx
// app/components/Navbar.tsx
'use client';
import { signIn, signOut } from "next-auth/react";
import { useSession } 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>;
}