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

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: 0 comments

Select a reply

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

thehien93 Jun 7, 2024

Replies: 0 comments

thehien93
Jun 7, 2024