)
Objetivo y requisitos
Vamos a integrar Firebase Auth con VueFire en una aplicación Vue 3 con Vite, iniciar sesión con Google y cerrar sesión. Esta guía usa las APIs de VueFire 3 y Firebase modular. Necesitas un proyecto Firebase con Authentication habilitado, el proveedor Google activado y el dominio de desarrollo autorizado en la consola de Firebase.
Instala y registra VueFire
npm install firebase vuefire
Guarda la configuración web de tu proyecto en .env.local, con variables VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAIN, VITE_FIREBASE_PROJECT_ID y VITE_FIREBASE_APP_ID. Usa los valores de tu propia aplicación web de Firebase. Reinicia Vite después de modificar esas variables.
En src/main.ts:
import { createApp } from 'vue'
import { initializeApp } from 'firebase/app'
import { VueFire, VueFireAuth } from 'vuefire'
import App from './App.vue'
const firebaseApp = initializeApp({
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
appId: import.meta.env.VITE_FIREBASE_APP_ID,
})
createApp(App)
.use(VueFire, { firebaseApp, modules: [VueFireAuth()] })
.mount('#app')
Un componente completo de autenticación
useFirebaseAuth devuelve la instancia de Auth. useCurrentUser sigue el usuario actual de forma reactiva. No necesitas un router ni una biblioteca de notificaciones para este ejemplo.
<script setup lang="ts">
import { ref } from 'vue'
import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth'
import { useCurrentUser, useFirebaseAuth } from 'vuefire'
const auth = useFirebaseAuth()
const user = useCurrentUser()
const busy = ref(false)
const errorMessage = ref<string | null>(null)
const provider = new GoogleAuthProvider()
async function authenticate(action: 'login' | 'logout') {
errorMessage.value = null
if (!auth) {
errorMessage.value = 'Firebase Auth no está disponible.'
return
}
busy.value = true
try {
if (action === 'login') await signInWithPopup(auth, provider)
else await signOut(auth)
} catch (cause: unknown) {
errorMessage.value = cause instanceof Error ? cause.message : 'No se pudo completar la operación.'
} finally {
busy.value = false
}
}
</script>
<template>
<section>
<p v-if="user">Hola, {{ user.displayName || 'usuario' }}</p>
<button v-if="user" :disabled="busy" @click="authenticate('logout')">Cerrar sesión</button>
<button v-else :disabled="busy" @click="authenticate('login')">Continuar con Google</button>
<p v-if="busy" role="status">Procesando…</p>
<p v-if="errorMessage" role="alert">{{ errorMessage }}</p>
</section>
</template>
Resultado esperado
Ejecuta npm run dev y pulsa «Continuar con Google». Tras completar el acceso en tu aplicación, aparecerán el nombre y el botón de salida. Cierra sesión: debe volver el botón de acceso. Si cancelas la ventana o falla la operación, el error se muestra y el botón vuelve a estar disponible. Ejecuta npm run build para comprobar la compilación.
Errores frecuentes y límites
Un error auth/unauthorized-domain requiere revisar los dominios autorizados en Firebase. Un popup bloqueado requiere iniciar la operación desde la interacción del usuario. Si Auth no está disponible, comprueba el registro de VueFireAuth(). El ejemplo maneja el error capturado con un nombre distinto de la referencia; no sobrescribe ni confunde ambos valores.
Esta configuración está dirigida a una aplicación de navegador. En Nuxt/SSR usa la integración correspondiente y contempla que useFirebaseAuth puede devolver null en el servidor. Iniciar sesión tampoco concede acceso automático a Firestore o Storage: configura sus reglas cuando añadas esos servicios.
Continúa con la guía oficial de autenticación de VueFire y la autenticación con Google de Firebase.
Sigue leyendo
Una idea lleva a otra.
)
)
)