How to observe firebase.auth().currentUser.displayName and other attributes for changes?

Question

I am using firebase auth and when users change their profile, such as their displayName, photoURL, or email etc. the onAuthStateChanged callback won't be fired, but the underlying firebase.auth().currentUser gets updated automatically.

I need to update the UI after the user updates their profile, ie. I would like to keep firebase.auth().currentUser in sync with the client store (specifically vuex or redux-like store).

Is there a way to observe firebase.auth().currentUser for changes, or any other hooks I can use to get notified when firebase.auth().currentUser changes?

Thanks!

Answer 1

I get the same problem for me, I was using with react and want to see a component who changed from Send verification Email to Email Verified. What I've done it's create a function who wrap the reload method on the user instance. This one is a promise, so when the promise fulfilled I now call the firebase.auth().currentUser function who get now update cause of the reload. I match all that with some component lifecycle etc.

const user = firebase.auth().currentUser;
user.reload().then(() => {
  const refreshUser = firebase.auth().currentUser;
  // do your stuff here
})

The docs for the reload are there. https://firebase.google.com/docs/reference/js/firebase.User#reload

Hope that can help :)