La autenticación con Firebase Auth y firebaseui-web no redirige después de la autenticación.
Actualmente estoy prototipando un flujo de inicio de sesión basado en VueJS con Firebase Auth y la biblioteca de widgets web firebaseui-web.
Después de una autenticación exitosa (ya sea por contraseña o proveedor de Google), la barra de carga del widget se repite infinitamente y firebaseui-web no activa su callback signInSuccessWithAuthResult. Pero las llamadas de red a identitytoolkit.googleapis.com claramente parecen tener identificado y autenticado a mi usuario (ver captura de pantalla).
El objeto de configuración se ve así:
js
const uiConfig = {
signInSuccessUrl: “#/loggedin”,
signInOptions: [
EmailAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID,
],
tosUrl: “http://example.com”,
privacyPolicyUrl: “http://example.com”,
signInFlow: “redirect”,
callbacks: {
signInSuccessWithAuthResult: function (authResult, redirectUrl) {
console.log(“signInSuccessWithAuthResult:”, authResult, redirectUrl);
return true;
},
uiShown: function () {
console.log(“uiShown”);
},
},
};
Código de VueJS:
js
export default {
name: “Home”,
data: function () {
return {
fbUI: {},
};
},
methods: {
initFBUI: function () {
const uiReference = firebaseui.auth.AuthUI.getInstance(“demoUI”);
console.log(“uiReference “, uiReference);
this.fbUI =
uiReference !== null
? uiReference
: new firebaseui.auth.AuthUI(this.$fbAuth, “demoUI”);
console.log(“this.fbUI”, this.fbUI);
},
startAuthUI: function () {
console.log(“ui.isPendingRedirect()”, this.fbUI.isPendingRedirect());
this.fbUI.start(“#firebaseui-auth-container”, uiConfig);
console.log(“this.fbUI started”);
},
},
mounted() {
this.initFBUI();
this.startAuthUI();
},
};
El demo reproducible y el código completo se encuentran en https://github.com/perelin/firebase-auth-providerdata-test.
Aquí está el CodeSandbox para esta demo: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (a veces arroja un error Unexpected token ‘{‘. Entonces, simplemente recargue / reconstruya la página.
¡Agradecería cualquier idea de qué intentar a continuación!
davy.ai
Actualmente estoy haciendo un prototipo basado en VueJS de un flujo de inicio de sesión con Firebase Auth y la biblioteca de widgets web Firebaseui-web.
Después de una autenticación exitosa (ya sea a través de un proveedor de contraseñas o de Google), la barra de carga de widgets se repite infinitamente y Firebaseui-web no activa su callback de “signInSuccessWithAuthResult”. Pero las llamadas a la red a “identitytoolkit.googleapis.com” parecen identificar y autenticar a mi usuario (ver captura de pantalla):
La configuración del objeto se ve así:
const uiConfig = {
signInSuccessUrl: “#/loggedin”,
signInOptions: [
EmailAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID,
],
tosUrl: “http://example.com”,
privacyPolicyUrl: “http://example.com”,
signInFlow: “redirect”,
callbacks: {
signInSuccessWithAuthResult: function (authResult, redirectUrl) {
console.log(“signInSuccessWithAuthResult:”, authResult, redirectUrl);
return true;
},
uiShown: function () {
console.log(“uiShown”);
},
},
};
Código de VueJS:
export default {
name: “Home”,
data: function () {
return {
fbUI: {},
};
},
methods: {
initFBUI: function () {
const uiReference = firebaseui.auth.AuthUI.getInstance(“demoUI”);
console.log(“uiReference “, uiReference);
this.fbUI =
uiReference !== null
? uiReference
: new firebaseui.auth.AuthUI(this.$fbAuth, “demoUI”);
console.log(“this.fbUI”, this.fbUI);
},
startAuthUI: function () {
console.log(“ui.isPendingRedirect()”, this.fbUI.isPendingRedirect());
this.fbUI.start(“#firebaseui-auth-container”, uiConfig);
console.log(“this.fbUI started”);
},
},
mounted() {
this.initFBUI();
this.startAuthUI();
},
};
Demo reproductible y código completo aquí: https://github.com/perelin/firebase-auth-providerdata-test.
Aquí hay un CodeSandbox para esta replicación: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (a veces lanza un error de “Unexpected token ‘{‘”. Si ocurre, solo recargue / reconstruya la página).
¡Agradezco cualquier idea de qué intentar a continuación!