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

thehien93 · 2024-06-07T11:58:38Z

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>
    );
};

theDanielJLewis · 2024-10-29T04:14:09Z

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

tomperalta · 2024-10-29T14:54:15Z

tomperalta
Oct 29, 2024

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

I had the same problem running [email protected] with [email protected], and I was able to fix it downgrading next to v.14.2 and upgrading next-auth to its beta version.

2 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>

AmazingTurtle · 2024-12-02T13:01:43Z

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)

1 reply

nikhiljoshi1012 Dec 20, 2024

Did anyone find any solution?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

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

thehien93 Jun 7, 2024

Replies: 3 comments · 3 replies

theDanielJLewis Oct 29, 2024

tomperalta Oct 29, 2024

theDanielJLewis Oct 29, 2024

manu-r12 Nov 15, 2024

AmazingTurtle Dec 2, 2024

nikhiljoshi1012 Dec 20, 2024

thehien93
Jun 7, 2024

Replies: 3 comments 3 replies

theDanielJLewis
Oct 29, 2024

tomperalta
Oct 29, 2024

AmazingTurtle
Dec 2, 2024