compact lagoon
pages.jsx:
import { useAuth } from "../../pages/api/AuthContext/AuthContext";
export const ProductsPage = async () => {
const { currentUser } = useAuth();
return(<div currentUser={currentUser}/>)
}
layout.jsx
import "./page.module.css";
import AuthProvider from "../../pages/api/AuthContext/AuthContext";
export default async function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<AuthProvider>
{children}
</AuthProvider>
</body>
</html>
);
}
AuthContext.jsx:
"use client"
import React, {useContext, createContext, useState, useEffect} from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "../firebase";
const AuthContext = createContext();
export const useAuth = () => useContext(AuthContext);
const AuthProvider = ({children}) => {
const [currentUser, setCurrentUser] = useState();
const [loading, setLoading] = useState(false);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
setLoading(false);
})
return () => {
unsubscribe;
};
}, []);
const value = {
currentUser,
}
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
export default AuthProvider;
Whenever I try to load ProductsPage, and useAuth is called, I get an error saying useAuth is not a function. How can I fix this?
paper pumice
