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

1 reply

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

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: 2 comments 1 reply

{{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: 2 comments · 1 reply

theDanielJLewis Oct 29, 2024

tomperalta Oct 29, 2024

theDanielJLewis Oct 29, 2024

thehien93
Jun 7, 2024

Replies: 2 comments 1 reply

theDanielJLewis
Oct 29, 2024

tomperalta
Oct 29, 2024