From 6a3aa9d522e63c9aee4dd5bd278f0523e4b1a1ac Mon Sep 17 00:00:00 2001
From: Magnus Tidemann <magnustidemann@gmail.com>
Date: Wed, 24 Jun 2026 14:57:04 +0200
Subject: [PATCH] docs: fix incorrect SessionProvider placement in v5 migration
 guide

The Client Component example called useSession() and then rendered
SessionProvider as a descendant of the same component. Since
useSession() reads context from an ancestor provider, this throws
"useSession must be wrapped in a <SessionProvider />" and contradicts
the explanatory text above it. SessionProvider now wraps the tree from
a parent layout, consistent with the pattern shown in
session-management/get-session.mdx.
---
 docs/pages/getting-started/migrating-to-v5.mdx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/pages/getting-started/migrating-to-v5.mdx b/docs/pages/getting-started/migrating-to-v5.mdx
index 3b35144a51..95fb95b0eb 100644
--- a/docs/pages/getting-started/migrating-to-v5.mdx
+++ b/docs/pages/getting-started/migrating-to-v5.mdx
@@ -129,14 +129,24 @@ Imports from `next-auth/react` are now marked with the [`"use client"`](https://
 ```ts filename="components/clientComponent.tsx"
 'use client';
 
-import { useSession, SessionProvider } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 
 const ClientComponent = () => {
   const session = useSession();
 
+  return (
+    <p>Welcome {session?.user?.name}</p>
+  )
+}
+```
+
+```ts filename="app/layout.tsx"
+import { SessionProvider } from 'next-auth/react';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
-      <p>Welcome {session?.user?.name}</p>
+      {children}
     </SessionProvider>
   )
 }