# Fix useSession Must Be Wrapped in SessionProvider

> Fix the useSession must be wrapped in SessionProvider error in Next.js by creating a client component wrapper and using auth() for server components

**URL:** https://sentry.io/answers/next-js-13-and-next-auth-issues-with-usesession-and-sessionprovider/

---

## The Problem

When using [Auth.js](https://authjs.dev/) (formerly NextAuth.js) in a Next.js 13+ application that uses the [App Router](https://nextjs.org/docs/app/getting-started/layouts-and-pages), you may encounter the following error:

```
Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
```

You may also encounter this related error:

```
Error: React Context is unavailable in Server Components
```

## The Solution

The [`SessionProvider`](https://next-auth.js.org/getting-started/client#sessionprovider) uses [React Context](https://react.dev/learn/passing-data-deeply-with-context) to share the `session` object between components. Because it relies on React Context, it must be used in a client component. The [`useSession`](https://next-auth.js.org/getting-started/client#usesession) hook can only access the session when a `SessionProvider` exists as an ancestor in the component tree.

The `React Context is unavailable in Server Components` error occurs when you try to use `SessionProvider` directly in a [server component](https://nextjs.org/docs/app/getting-started/server-and-client-components).

To fix both errors, create a dedicated client component that wraps children in `SessionProvider`, then use that wrapper in your root layout.

### Auth.js v5 (Recommended)

If you are using [Auth.js v5](https://authjs.dev/getting-started/migrating-to-v5), create a client component wrapper:

```tsx
// components/SessionProviderWrapper.tsx
"use client";

import { SessionProvider } from "next-auth/react";

export default function SessionProviderWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return <SessionProvider>{children}</SessionProvider>;
}
```

Then use it in your root layout:

```tsx
// app/layout.tsx
import SessionProviderWrapper from "@/components/SessionProviderWrapper";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionProviderWrapper>
          <main>{children}</main>
        </SessionProviderWrapper>
      </body>
    </html>
  );
}
```

In Auth.js v5, `SessionProvider` automatically fetches the session, so you do not need to pass a `session` prop. For server components, use the `auth()` function directly instead of `useSession`:

```tsx
// A server component
import { auth } from "@/auth";

export default async function ServerPage() {
  const session = await auth();

  if (!session) {
    return <p>Not authenticated</p>;
  }

  return <p>Welcome, {session.user?.name}</p>;
}
```

### NextAuth.js v4

If you are still using NextAuth.js v4, you need to pass the session from `getServerSession` into the provider:

```tsx
// components/SessionProviderWrapper.tsx
"use client";

import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

export default function SessionProviderWrapper({
  children,
  session,
}: {
  children: React.ReactNode;
  session: Session | null;
}) {
  return <SessionProvider session={session}>{children}</SessionProvider>;
}
```

```tsx
// app/layout.tsx
import { getServerSession } from "next-auth";
import SessionProviderWrapper from "@/components/SessionProviderWrapper";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await getServerSession();

  return (
    <html lang="en">
      <body>
        <SessionProviderWrapper session={session}>
          <main>{children}</main>
        </SessionProviderWrapper>
      </body>
    </html>
  );
}
```

If you are using the App Router with v4, prefer using [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getserversession) in server components instead of wrapping everything in `SessionProvider`, as it is unnecessary in most cases.

The [`"use client"` directive](https://react.dev/reference/rsc/use-client) at the top of the wrapper file marks it as a client component. The `SessionProvider` must be in a separate client component file from the layout, because the layout is a server component by default.

---

*Source: [sentry.io/answers/next-js-13-and-next-auth-issues-with-usesession-and-sessionprovider/](https://sentry.io/answers/next-js-13-and-next-auth-issues-with-usesession-and-sessionprovider/)*