Next.js Discord

Discord Forum

Context not working

Unanswered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Schneider’s Smooth-fronted CaimanOP
  const { authContext } = useAuthContext();
  console.log(authContext);

this returns null

in my app dir there is a layout for all the files where i use my context provider 
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "next-themes";
import "./globals.css";
import { AuthContextProvider } from "@/context/AuthContext";
import { Toaster } from "react-hot-toast";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "TourneyForge",
  description: "Sochi Jaygi",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthContextProvider>
          <ThemeProvider attribute="class" defaultTheme="dark">
            {children}
            <Toaster
              toastOptions={{
                error: {
                  style: {
                    color: "#fff",
                    background: "#1D232A",
                  },
                },
                success: {
                  style: {
                    color: "#fff",
                    background: "#1D232A",
                  },
                },
              }}
            />
          </ThemeProvider>
        </AuthContextProvider>
      </body>
    </html>
  );
}


this is the context file

3 Replies

Schneider’s Smooth-fronted CaimanOP
"use client";
import {
  createContext,
  useContext,
  useState,
  useEffect,
  ReactNode,
  Dispatch,
  SetStateAction,
} from "react";

interface AuthContextType {
  authUser: any | null;
  setAuthUser: Dispatch<SetStateAction<any | null>>;
}

export const AuthContext = createContext<AuthContextType | undefined>(
  undefined
);

export const useAuthContext = () => {
  return useContext(AuthContext);
};

interface AuthContextProviderProps {
  children: ReactNode;
}

export const AuthContextProvider = ({ children }: AuthContextProviderProps) => {
  const [authUser, setAuthUser] = useState<any | null>(null);

  useEffect(() => {
    const storedUser = localStorage.getItem("Auth");
    if (storedUser) {
      setAuthUser(JSON.parse(storedUser));
    }
  }, []);

  return (
    <AuthContext.Provider value={{ authUser, setAuthUser }}>
      {children}
    </AuthContext.Provider>
  );
};
this is the context file
Schneider’s Smooth-fronted CaimanOP
funny thing 

export const AuthContextProvider = ({ children }: AuthContextProviderProps) => {
  const [authUser, setAuthUser] = useState<any | null>(null);

  useEffect(() => {
    // @ts-expect-error
    const storedUser = JSON.parse(localStorage.getItem("Auth") || null);
    console.log(storedUser.details);
    if (storedUser.details) {
      setAuthUser(storedUser.details);
      console.log("2", authUser);
    }
  }, []);

  return (
    <AuthContext.Provider value={{ authUser, setAuthUser }}>
      {children}
    </AuthContext.Provider>
  );
};


when i console.log storedUser.details it show me what i want but console.log authUser shows null