My problem is I cannot store the currentUser when I login with google , previously I have used only react to store the currentUser when he login and set null when he signout . So what i want is to store the currentUser this is my code :

class HomeHeaderW extends React.Component {
    authListener = null;

    componentDidMount() {
        const { setCurrentUser, currentUser } = this.props
        this.authListener = auth.onAuthStateChanged(async userAuth => {
            if (userAuth) {
                console.log(currentUser)
                const userRef = await handleUserProfile(userAuth);
                userRef.onSnapshot(snapshot => {
                    setCurrentUser({
                        id: snapshot.id,
                        ...snapshot.data()
                    });
                })
            }
            setCurrentUser(userAuth)
        })
    }
render() {

        const { currentUser } = this.props
        return (...
}
HomeHeaderW.defaultProps = {
    currentUser: null
};
const mapStateToProps = ({ user }) => ({
    currentUser: user.currentUser
})
export default connect(mapStateToProps, null)(HomeHeaderW)

user.types.js

const userTypes = {
    SET_CURRENT_USER: 'SET_CURRENT_USER'
};
export default userTypes

user.reducer.js

import userTypes from "./user.types";

const INITIAL_STATE = {
    currentUser: null
};
const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case userTypes.SET_CURRENT_USER:
            return {
                ...state,
                currentUser: action.payload
            }
        default:
            return state;
    }
};
export default userReducer

user.actions.js

import userTypes from "./user.types";
export const setCurrentUser = user =>
    ({
        type: userTypes.SET_CURRENT_USER,
        payload: user
    })

utils.js

export const handleUserProfile = async({ userAuth, additionalData }) => {
    if (!userAuth) return;
    const { uid } = userAuth;

    const userRef = firestore.doc(`users/${uid}`);
    const snapshot = await userRef.get();

    if (!snapshot.exists) {
        const { displayName, email } = userAuth;
        const timestamp = new Date();
        const userRoles = ['user'];

        try {
            await userRef.set({
                displayName,
                email,
                createdDate: timestamp,
                userRoles,
                ...additionalData
            });
        } catch (err) {
            console.log(err);
        }
    }

    return userRef;
};

So when I check the currentUser in the console i see null Also I get another problem in the console : HomeHeaderW.js:28 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'onSnapshot')