From b7367b294289e2f7f0ce78062210995e9d9a3008 Mon Sep 17 00:00:00 2001
From: Hernan Alvarado <hernanvid123@gmail.com>
Date: Sun, 13 Apr 2025 22:52:16 -0500
Subject: [PATCH] chore(docs): update `migrating-to-v5` docs

---
 .../pages/getting-started/migrating-to-v5.mdx | 57 +++++++++++++++----
 docs/pages/guides/corporate-proxy.mdx         | 10 ++--
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/docs/pages/getting-started/migrating-to-v5.mdx b/docs/pages/getting-started/migrating-to-v5.mdx
index 29705ffdd7..543308a638 100644
--- a/docs/pages/getting-started/migrating-to-v5.mdx
+++ b/docs/pages/getting-started/migrating-to-v5.mdx
@@ -103,7 +103,7 @@ See the table below for a summary of the changes. Below that are `diff` examples
 
 #### Details
 
-<Tabs items={["Server Component (App)", "Client Component (App)", "Middleware", "API Routes (Pages)", "getServerSideProps (Pages)"]}>
+<Tabs items={["Server Component (App)", "Client Component (App)", "Middleware", "Route  Handlers","API Routes (Pages)", "getServerSideProps (Pages)"]}>
 
 <Tabs.Tab>
 
@@ -124,21 +124,31 @@ export default async function Page() {
 </Tabs.Tab>
 <Tabs.Tab>
 
-Imports from `next-auth/react` are now marked with the [`"use client"`](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive) directive. Therefore, they can be used in client components just like they were used in previous versions. Don't forget, client components that attempt to access the session via context will need to be wrapped in a `<SessionProvider />`.
+Imports from `next-auth/react` are now marked with the [`"use client"`](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive) directive. If you access the session context via `useSession()`, make sure your component is wrapped in a `<SessionProvider />`. It’s recommended to pass the `session` prop to `<SessionProvider />` using the value returned by the `auth()` function in a Server Component.
+
+```ts
+import { auth } from "@/auth"
+import { SessionProvider } from "next-auth/react"
+
+const SessionLayout = async () => {
+  const session = await auth()
+  return (
+    <SessionProvider session={session}>
+      <ClientComponent />
+    </SessionProvider>
+  )
+}
+```
 
 ```ts filename="components/clientComponent.tsx"
-'use client';
+"use client";
 
-import { useSession, SessionProvider } from 'next-auth/react';
+import { useSession } from "next-auth/react";
 
 const ClientComponent = () => {
-  const session = useSession();
+  const { data: session } = useSession();
 
-  return (
-    <SessionProvider>
-      <p>Welcome {session?.user?.name}</p>
-    </SessionProvider>
-  )
+  return <p>Welcome {session?.user?.name}</p>
 }
 ```
 
@@ -170,6 +180,31 @@ Check out additional [Middleware docs](/getting-started/session-management/prote
 </Tabs.Tab>
 <Tabs.Tab>
 
+As of `NextAuth.js v5`, you can use the `auth()` function inside [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) to access the session.
+
+Import the `auth()` function from your authentication configuration file (commonly `auth.ts`) and use it directly in your route logic.
+
+```ts
+import { auth } from "@/auth"
+import { NextRequest, NextResponse } from "next/server"
+
+export const GET = async (request: NextRequest) => {
+  const session = await auth()
+
+  if (!session) {
+    return NextResponse.json(
+      { message: "Unauthenticated. Please log in." },
+      { status: 401 }
+    )
+  }
+
+  return NextResponse.json({ message: "Success" })
+}
+```
+
+</Tabs.Tab>
+<Tabs.Tab>
+
 Instead of importing `getServerSession` from `next-auth/next` or `getToken` from `next-auth/jwt`, you can now import the `auth` function exported from your `auth.ts` config file and call it without passing `authOptions`.
 
 ```diff filename='pages/api/example.ts'
@@ -226,8 +261,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 </Tabs.Tab>
 </Tabs>
 
-## Adapters
-
 ### Adapter packages
 
 Beginning with `next-auth` v5, you should now install database adapters from the `@auth/*-adapter` scope, instead of `@next-auth/*-adapter`. Database adapters don't rely on any Next.js features, so it made more sense to move them to this new scope.
diff --git a/docs/pages/guides/corporate-proxy.mdx b/docs/pages/guides/corporate-proxy.mdx
index c44ed8aeee..e78800742a 100644
--- a/docs/pages/guides/corporate-proxy.mdx
+++ b/docs/pages/guides/corporate-proxy.mdx
@@ -36,7 +36,7 @@ export const { handlers, auth } = NextAuth({
 
 # Using HttpsProxyAgent
 
-On Edge Runtimes or with proxy restrictions,  the `undici` library may not work. Using a simpler approach with HttpsProxyAgent by passing a `proxyAgent` to the `fetch` implementation.
+On Edge Runtimes or with proxy restrictions, the `undici` library may not work. Using a simpler approach with HttpsProxyAgent by passing a `proxyAgent` to the `fetch` implementation.
 
 <Code>
   <Code.Next>
@@ -44,15 +44,15 @@ On Edge Runtimes or with proxy restrictions,  the `undici` library may not work.
 ```tsx filename="auth.ts"
 import NextAuth, { customFetch } from "next-auth"
 import GitHub from "next-auth/providers/github"
-const { HttpsProxyAgent } = require('https-proxy-agent');
+const { HttpsProxyAgent } = require("https-proxy-agent")
 
-const proxyAgent = new HttpsProxyAgent("my.proxy.server");
+const proxyAgent = new HttpsProxyAgent("my.proxy.server")
 async function proxy(url: string, options: any): Promise<Response> {
   const response = (await fetch(url, {
     ...options,
     agent: proxyAgent,
-  })) as unknown as Response;
-  return response;
+  })) as unknown as Response
+  return response
 }
 
 export const { handlers, auth } = NextAuth({