Introducción a la integración con Firebase

Resumen

Este tutorial te guiará para configurar Firebase Authentication con el plugin Capacitor Social Login. Esta integración te permite usar proveedores de social login nativos (Google, Apple, Facebook, Twitter) en plataformas móviles, aprovechando Firebase Auth para la autenticación del backend y Firestore para el almacenamiento de datos.

Lo que aprenderás

• Cómo configurar Firebase Authentication
• Cómo integrar el plugin Capacitor Social Login con Firebase Auth
• Configuración específica para Android, iOS y Web

Qué necesitarás

Antes de empezar, asegúrate de tener:

1. Un proyecto de Firebase

   • Crea un proyecto en Consola de Firebase
   • Habilita la autenticación (Email/Password y Google Sign-In)
   • Obtén tus credenciales de configuración de Firebase

2. SDK de Firebase para JS

   • Instala Firebase en tu proyecto:

     npm install firebase

3. Un proyecto Capacitor

   • Una aplicación Capacitor existente
   • Plugin Capacitor Social Login instalado:

     npm install @capgo/capacitor-social-login
     npx cap sync

Aplicación de ejemplo

Tienes un ejemplo completo y funcional en el repositorio:

Repositorio Code: Puedes encontrar el repositorio code aquí

La app de ejemplo muestra:

• Autenticación con email/contraseña mediante Firebase
• Integración de Google Sign-In (Android, iOS y Web)
• Un almacén clave-valor simple usando colecciones de Firebase Firestore
• Almacenamiento de datos por usuario en subcolecciones de Firestore

Una nota sobre el uso del SDK de Firebase en Capacitor

Al usar el SDK de Firebase JS en Capacitor, ten en cuenta que al usar los métodos de autenticación, debes inicializar la instancia de Firebase Auth de forma algo distinta.

En la plataforma web, usarías la getAuth función para obtener la instancia de Firebase Auth.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

Lamentablemente, en Capacitor esto no funciona y hace que Firebase Auth se cuelgue. Como se indica en este post del blog, debes usar la initializeAuth función para inicializar la instancia de Firebase Auth. Se ve así:

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

export const auth = whichAuth();

Próximos pasos

Continúa con las guías de configuración:

• Configuración de Firebase - Configura tu proyecto de Firebase
• Configuración de Android - Configuración específica para Android
• iOS Setup - Configuración específica para iOS
• Configuración web - Configuración específica para Web

Continúa desde la introducción a la integración de Firebase

Si estás usando Introducción a la integración con Firebase para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.