auth.onAuthStateChanged not triggering after auth.currentUser.updateProfile in Firebase

Question

I have a component updating the user's profile pic:

const Updater = () => {

    const updateProfilePic = async (photoURL) => {

        await auth.currentUser.updateProfile({ 'photoURL': photoURL });

    }

}

I have a second component detecting changes in the user's state:

const StateChangesDetector = () => {

    auth.onAuthStateChanged( user => {

        if(user)
            console.log('User changed state', JSON.stringify(user));

    });

}

The problem is that auth.onAuthStateChanged() is not triggering after the execution of updateProfile(). Thus, I'm getting the old user's state and the old profile picture.

How can I force to trigger auth.onAuthStateChanged() after updating the user's profile picture?

Answer 1

Try the reload() function on the currentUser object to get updated information. Note that it's asynchronous and returns a promise. If it doesn't trigger the listener (as it's not really a "state" change, just a refresh of data), I suspect you might have to access the firebase.auth().currentUser again after the returned promise resolves to see new data.