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 - + @@ -124,21 +124,31 @@ export default async function Page() { -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 ``. +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 ``. It’s recommended to pass the `session` prop to `` 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 ( + + + + ) +} +``` ```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 ( - -

Welcome {session?.user?.name}

-
- ) + return

Welcome {session?.user?.name}

} ``` @@ -170,6 +180,31 @@ Check out additional [Middleware docs](/getting-started/session-management/prote
+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" }) +} +``` + + + + 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) => {
-## 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.