Firebase Authentication JS未填充"providerData"数组

Question

在VueJS/QusarJS应用程序Im中使用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对象被完全填充(包括auth令牌等(，但user.providerData[]数组为空。只有在页面重新加载(CTRL-R(之后，才会填充数组。

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

我很感激你知道下一步该去哪里！

编辑

正如@aside Im所建议的那样，使用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()来刷新本地用户数据。

这可以在LoggedIn视图的beforeRouteEnter()导航保护中完成：

// LoggedIn.vue
import { getAuth, signOut } from "firebase/auth";
export default {
async beforeRouteEnter(to, from, next) {
await getAuth().currentUser?.reload() 👈
next()
},
}

演示1

或者在onAuthStateChanged回调中：

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

演示2

Answer 2

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

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

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可能在属性更新之前返回。