en una aplicación VueJS / QuasarJS estoy usando firebase-js-sdk [1] junto con firebaseui-web [2] para manejar la autenticación.
Después de una autenticación exitosa con cualquiera de los proveedores configurados (por ejemplo, contraseña, google, apple, etc.), quiero verificar qué proveedor usó el usuario. Pero inmediatamente después de una autenticación exitosa, la matriz user.providerData[] que debería contener la información está vacía.
PERO si vuelvo a cargar mi aplicación, la matriz user.providerData[] se completa de repente correctamente.
Estoy comprobando los datos del usuario con algo como esto
import { getAuth } from "firebase/auth"; const auth = getAuth(); const user = auth.currentUser; if (user) { console.log(user.providerData) } Después de eso, el objeto de user está completamente poblado (incluidos los tokens de autenticación, etc.) pero la matriz user.providerData[] está vacía. Solo después de recargar una página (CTRL-R) se llena la matriz.
Busqué en las páginas de problemas de ambos proyectos y en la documentación y no encontré nada que pudiera explicar esto.
¡Estoy agradecido por CUALQUIER idea de dónde buscar a continuación!
EDITAR
Como sugirió @aside, estoy usando onAuthStateChanged para buscar actualizaciones del estado del usuario.
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); } );Pero incluso si espero minutos después de que se complete la autenticación, la matriz user.providerData solo se completa después de recargar una página.
Aquí hay una demostración completa: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test
Gracias por adelantado :)
Estoy usando
"firebase": "9.6.1", "firebaseui": "6.0.0", [1] https://github.com/firebase/firebase-js-sdk
[2] https://github.com/firebase/firebaseui-web
Su código solo se ejecuta una vez en lugar de ejecutarse cada vez que se actualiza el estado de autenticación. Si desea escuchar cualquier cambio en el estado de autenticación, use una devolución de llamada junto con onAuthStateChanged como se describe aquí.
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 // ... } }); La razón por la que verificar/solicitar el objeto de usuario justo después de la autenticación no funciona es que Firebase puede tardar un segundo en actualizar la matriz de datos del providerData . Por lo tanto, signInWithX podría regresar antes de que se actualice la propiedad.
Su aplicación debe llamar a getAuth().currentUser.reload() para actualizar los datos del usuario local después de iniciar sesión.
Esto se puede hacer en la protección de navegación beforeRouteEnter() de la vista LoggedIn :
// LoggedIn.vue import { getAuth, signOut } from "firebase/auth"; export default { async beforeRouteEnter(to, from, next) { await getAuth().currentUser?.reload() 👈 next() }, } O en la devolución de llamada onAuthStateChanged :
// main.js onAuthStateChanged( fbAuth, async (user) => { await user?.reload() 👈 }, )