NextJS Firebase Authentication Context Error - reactjs

Question

I am trying to do Firebase auth in a NextJS project but I am getting the following error:
TypeError: Cannot destructure property 'currentUser' of '(0 , _lib_contexts_AuthContext__WEBPACK_IMPORTED_MODULE_6__.useAuth)(...)' as it is undefined.
9 | export default function Login() {
10 | // const router = useRouter();
> 11 | const { currentUser, setCurrentUser, login, logout } = useAuth();`
This is my AuthContext.js file:
import React, { createContext, useContext, useEffect, useState } from 'react';
import { signOut, signInWithEmailAndPassword, onAuthStateChanged } from 'firebase/compat/auth';
import { auth } from '../../core/firebase';
export const AuthContext = createContext();
export function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, user => {
setCurrentUser(user);
setLoading(false);
});
return unsubscribe();
}, []);
function login(email, password) {
return signInWithEmailAndPassword(auth, email, password);
}
async function logout() {
setCurrentUser(null);
await signOut(auth);
console.log('logout');
return;
}
function resetPassword(email) {
return auth.sendPasswordResetEmail(email);
}
const value = {
currentUser,
setCurrentUser,
login,
logout,
resetPassword,
};
return <AuthContext.Provider value={value}>{!loading && children}</AuthContext.Provider>;
}
export function useAuth() {
return useContext(AuthContext);
}
This is my login.jsx page, somehow it is not getting any of the exported values from the AuthContext file. Every example I have seen uses this destructuring format for getting the values form useAuth() so I am not sure why I am getting this error now
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { useEffect, useState } from 'react';
import { useAuth } from '../lib/contexts/AuthContext';
export default function Login() {
const { currentUser, setCurrentUser, login, logout } = useAuth();
async function handleLogin(email, password) {
try {
await login(email, password);
} catch (err) {
console.log(err);
}
}
function handleLogout() {
logout();
}
return (
<>
<div>Currently logged in: {currentUser?.email}</div>
<Formik
initialValues={{
email: '',
password: '',
}}
validationSchema={Yup.object({
email: Yup.string().email('Invalid email address').required('Required'),
password: Yup.string().required('No password provided.'),
})}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
}, 400);
handleLogin(values.email, values.password);
}}>
<Form>
<label className='border border-black' htmlFor='Email'>
Email
</label>
<Field className='border border-black' id='email' name='email' />
<ErrorMessage component='a' className='border border-black' name='email' />
<label className='border border-black' htmlFor='Email'>
Password
</label>
<Field className='border border-black' id='password' name='password' />
<ErrorMessage component='a' className='border border-black' name='password' />
<div className='mt-8'>
<button
disabled={currentUser ? true : false}
type='submit'
className='border border-black'>
Login
</button>
</div>
</Form>
</Formik>
<div>
<button
disabled={currentUser ? false : true}
className='border border-black'
onClick={handleLogout}>
Logout
</button>
</div>
</>
);
}
I am wrapping the _app.js return in the AuthProvider which seems to be the most common cause for this error.
import '../styles/globals.css';
import { AuthProvider } from '../lib/contexts/AuthContext';
function MyApp({ Component, pageProps }) {
return (
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
);
}
export default MyApp;