React Firebase - User is logged out after every page refresh

Question

I have created Firebase Authentication with ReactJS .
Everything works fine until The page refreshes. I'm using onAuthStateChanged listener, however, after I'm refreshing the page, it navigates me back to the Login form.

UserAuthContext.js

const userAuthContext = createContext();

export function UserAuthContextProvider({ children }) {

    const [user, setUser] = useState("");

    function signUp(email, password, username) {
        return createUserWithEmailAndPassword(auth, email, password);
    };

    function logIn(email, password) {
        return signInWithEmailAndPassword(auth, email, password);
    };

    function logout() {
        return signOut(auth);
    }

    useEffect(() => {
        const subscribe = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser);
        });
        return subscribe;
    }, []);

    return (
        <userAuthContext.Provider value={{ user, signUp, logIn, logout }}>
            {children}
        </userAuthContext.Provider>
    );
}

export function useUserAuth() {
    return useContext(userAuthContext);
}

Answer 1

You are saving the the user to a react state hook. React state does not persist data after page reload. A common way people persist data is by saving it into local storage or a cookie. However, these methods are prone to attacks like XSS and CSRF.