how to solve this error when use SessionProvider "React Context is unavailable in Server Components" #11093

Jun 7, 2024

thehien93
Jun 7, 2024

when i use SessionProvider in rootlayout folder
i get this error.
even create another component and import useSession inside Session still not fix the error.

if someone knows how to handle the error please show me.

it's my code

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

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>){
    if (
        process.env.UNDER_CONSTRUCTION &&
        process.env.UNDER_CONSTRUCTION === "true"
    ) {
        return (
            <html lang="en">
                <body className={cn(marcellus.variable, mandali.variable)}>
                    <UnderConstruction />
                </body>
            </html>
        );
    } else {
        return (
            <html lang="en">
                <body className={cn(marcellus.variable, mandali.variable)}>
                    <SessionProvider>
                            {children}
                            <Footer />
                            <TawkToWidget />
                            <Toaster />
                    </SessionProvider>
                </body>
            </html>
        );
    }
}

use useSession


"use client";
import { AuthHeaders } from "@/components/common/AuthHeaders";
import { NoAuthHeaders } from "@/components/common/NoAuthHeaders";
import { ReactNode, createContext, useState } from "react";
import { useSession } from "next-auth/react";

export const AuthContext = createContext<{
    jwt: string | null;
    user: string | null;
    setAuth: any;
}>({
    jwt: null,
    user: null,
    setAuth: () => {},
});

export const AuthProvider = ({ children }: { children: ReactNode }) => {
    const [auth, setAuth] = useState({ jwt: null, user: null });
    const { data: session } = useSession();
    return (
        <AuthContext.Provider value={{ jwt: auth.jwt, user: null, setAuth }}>
            {session ? <AuthHeaders /> : <NoAuthHeaders />}
            {children}
        </AuthContext.Provider>
    );
};

Oct 29, 2024

theDanielJLewis
Oct 29, 2024

@thehien93, did you figure this out? I'm having this problem now that I've upgraded to Next.js 15 / React 19.

0 replies

theDanielJLewis · Oct 29, 2024

tomperalta
Oct 29, 2024

What versions of next and next-auth are you using?

I had the same problem running next@15.0.1 with next-auth@4.9, and I was able to fix it downgrading next to v.14.2 and upgrading next-auth to its beta version.

3 replies

theDanielJLewis Oct 29, 2024

I'm sticking with Next.js 15. Does next-auth beta work better with it?

But what I'm doing that seems to work better is that I changed how my auth/signin/layout.tsx was implementing the context.

"use client";
import "@/app/globals.css";
import { SessionProvider } from "next-auth/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
    <SessionProvider>
      <html lang="en">
        <body>
          <div>{children}</div>
        </body>
      </html>
    </SessionProvider>
  );
}

manu-r12 Nov 15, 2024

you can try this:
Wrap your application in a SessionProvider defined in a separate Client Component like this

//components/SessionProvider.tsx
"use client";

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

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

import { SessionProvider } from "@/components/SessionProvider"; 
rest code.....
 return  <SessionProvider>{children}</SessionProvider>

Acc3ssD3ni3d May 5, 2025

thans bro it worked

nikhiljoshi1012 · Dec 2, 2024

AmazingTurtle
Dec 2, 2024

That error comes from Client Components prerendering on the Server (in nextjs 15?)

Client Components allow you to write interactive UI that is prerendered on the server and can use client JavaScript to run in the browser.

see https://nextjs.org/docs/app/building-your-application/rendering/client-components and reactwg/server-components#4

To me this is a bug with next-auth as it relies on the presence of the a <SessionProvider /> but it should not when it's pre renderered on the server (as RSC does not support context on the server side)

4 replies

Oct 10, 2025

SPARSH1608
Oct 10, 2025

In root Layout i use the ClientProvider

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import ClientProviders from "../components/ClientProviders";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  );
}

and in components/ClientProvider.tsx file

"use client";

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

type Props = {
  children: React.ReactNode;
};

export default function ClientProviders({ children }: Props) {
  return <SessionProvider>{children}</SessionProvider>;
}

im using next 15

0 replies

Search code, repositories, users, issues, pull requests...

how to solve this error when use SessionProvider "React Context is unavailable in Server Components" #11093

Uh oh!

Uh oh!

Replies: 4 comments · 7 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!