Firebase Authentication JS 不填充`providerData`数组

Question

在 VueJS / QuasarJS 应用程序中，我使用 firebase-js-sdk [1] 和 firebaseui-web [2] 来处理身份验证。

在使用任何已配置的提供程序（例如密码、谷歌、苹果等）成功验证后，我想检查用户使用的提供程序。但在成功认证后，应该包含信息的user.providerData[] 数组立即为空。

但是如果我重新加载我的应用程序，user.providerData[] 数组会突然正确填充。

我正在使用类似的方式检查用户数据

import { getAuth } from "firebase/auth";

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

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

之后user 对象被完全填充（包括身份验证令牌等），但user.providerData[] 数组为空。只有在页面重新加载 (CTRL-R) 之后才会填充数组。

我搜索了两个项目问题页面和文档，但没有找到任何可以解释这一点的东西。

我很感谢您知道下一步该往哪里看！

编辑

正如@aside 建议的那样，我使用onAuthStateChanged 来检查用户状态的更新。

  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);
    }
  );

但即使我在身份验证完成后等待几分钟，user.providerData 数组仍然只会在页面重新加载后填充。

这是一个完整的演示：https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test

提前致谢:)

我正在使用

    "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

您的应用应在登录后调用getAuth().currentUser.reload() 刷新本地用户数据。

这可以在beforeRouteEnter() nav guard 的LoggedIn 视图中完成：

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

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

demo 1

或者在onAuthStateChanged callback：

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

demo 2

Answer 2

您的代码只运行一次，而不是每次更新身份验证状态时运行。 如果您想监听身份验证状态的任何更改，请使用回调以及onAuthStateChanged，如此处所述。

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
    // ...
  }
});

在身份验证后立即检查/请求用户对象不起作用的原因是 firebase 可能需要一秒钟来更新 providerData 数组。因此，signInWithX 可能会在属性更新之前返回。