Firebase Authentication JS does not populate `providerData`array

Question

in a VueJS / QuasarJS application Im using firebase-js-sdk [1] together with firebaseui-web [2] to handle authentication.

After successful auth with any of the configured providers (e.g. password, google, apple, etc) I want to check which provider the user used. But immediately after successful authentication the user.providerData[] array that should contain the information is empty.

BUT if I reload my app the user.providerData[] array is suddenly populated correctly.

I´m checking for user data with something like this

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user) {
  console.log(user.providerData)
} 

After that the user object is fully populated (incl auth tokens, etc) but the user.providerData[] array is empty. Only after a page reload (CTRL-R) does the array get populated.

I searched both projects issues pages and documentation and didnt find anything that could explain this.

Im thankful for ANY idea where to look next!

EDIT

As suggested by @aside Im using onAuthStateChanged to check for updates of the user state.

  onAuthStateChanged(
    fbAuth,
    (user) => {
      if (user) {
        console.log("onAuthStateChanged: user found");
        console.log("onAuthStateChanged: user.providerData", user.providerData);
        console.log("onAuthStateChanged: user", user);
      } else {
        console.log("onAuthStateChanged: no user found");
      }
    },
    function (error) {
      console.log("onAuthStateChanged:", error);
    }
  );

But even if I wait minutes after authentication is completed, still the user.providerData array is only populated after a page reload.

Here is a full demo: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test

Thanks in advance :)

Im using

    "firebase": "9.6.1",
    "firebaseui": "6.0.0",

[1] https://github.com/firebase/firebase-js-sdk
[2] https://github.com/firebase/firebaseui-web

Answer 1

Your app should call getAuth().currentUser.reload() to refresh the local user data after login.

This could be done either in beforeRouteEnter() nav guard of the LoggedIn view:

// LoggedIn.vue
import { getAuth, signOut } from "firebase/auth";

export default {
  async beforeRouteEnter(to, from, next) {
    await getAuth().currentUser?.reload() 👈
    next()
  },
}

demo 1

Or in the onAuthStateChanged callback:

// main.js
onAuthStateChanged(
  fbAuth,
  async (user) => {
    await user?.reload() 👈
  },
)

demo 2

Answer 2

Your code is only running once instead of running every time the auth state is updated. If you want to listen to any changes to the auth state, use a callback along with onAuthStateChanged as described here.

https://firebase.google.com/docs/auth/web/manage-users#get_the_currently_signed-in_user

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // Check used provider here
    const providerData = user.providerData;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

The reason checking/requesting the user object right after authentication does not work is that it might take firebase a second to update the providerData array. signInWithX might therefore return before the property is updated.