Question

Technologies:

javascript

reactjs

Tolerim

a month ago

Encountered an error of not being able to access properties of null (reading 'usecontext') during authentication process.

The error message is occurring when I try to run this code. I had successfully run this code yesterday, but today it's not working. Interestingly, the same code works in another project. The instructor was successful in running the same code as well. I followed the instructions outlined in this video: https://www.youtube.com/watch?v=PKwu15ldZ7k&t=1109s. Below is the code that I am trying to run:

import { createContext,useContext, useEffect, useState } from "react";
import { auth } from "../components/firebase";
import { createUserWithEmailAndPassword,signInWithEmailAndPassword,signOut } from "firebase/auth";


const AuthContext = createContext({})

export function useAuth(){
    return useContext(AuthContext)
}



export function AuthProvider({children}){
    const [user,setUser] = useState()
    const [loading,setLoading] = useState(true)

    useEffect(() => {
        let unsubscribe;
        unsubscribe = onAuthStateChanged(auth, (user) => {
            setUser(user)
            setLoading(false)
        });

        return unsubscribe
    },[])

    function signup(email,password){
        return createUserWithEmailAndPassword(auth,email,password)

    }

    function login(email,password){
        return signInWithEmailAndPassword(auth,email,password)
    }

    function resetPassword(email){
        return sendPasswordResetEmail(auth,email)
    }
    function logout()
    {
        signOut(auth)

    }
    const value = {
        user,
        signup,
        login,
        signout: logout,
        resetPassword
    }
    return (
        <AuthContext.Provider value={value}>
            {!loading && children}
        </AuthContext.Provider>
    )
}

Answers(2)

Tolerim

a month ago

It looks like there's an error in the code you provided. The onAuthStateChanged function is not defined in the code, which could be causing the issue. To fix this, you'll need to import the onAuthStateChanged function from the firebase/auth library. Add this import statement to the top of your file:

import { onAuthStateChanged } from "firebase/auth";

This should resolve the error you're currently experiencing. Keep in mind that if this code worked yesterday, but is not working today, there may be external factors at play such as changes in dependencies or updates to the Firebase library. It's always a good idea to ensure that your dependencies are up to date and to check the documentation for any changes that may have been made.

Accepted Answer

It seems like you are having trouble with the onAuthStateChanged function. This function is called every time the user's authentication state changes. It is used to detect if the user is logged in or logged out. Based on the code you provided, it seems like you are missing an import statement for onAuthStateChanged. You can try adding this import statement at the top of your file:

If that doesn't work, you can try adding a console.log statement inside the onAuthStateChanged function to see if it is being called at all. Also, make sure that you have initialized Firebase correctly and that your Firebase configuration is correct. I hope this helps! Let me know if you have any other questions.

Sources

React-native - Firebase onAuthStateChanged not working correctly [Solved]-React-native - Firebase onAuthStateChanged not working ...Firebase v9 onAuthStateChanged only fires on initialization FireBase getAuth and onAuthStateChanged is not in "firebase/auth" import javascript - firebase.auth().onAuthStateChanged Not Working - Stack ...