Integrar Firebase con Angular 20 te permite sumar autenticación, base de datos en tiempo real y hosting a tu proyecto sin levantar un backend propio. Aquí verás cómo conectar ambas plataformas, configurar los métodos de login y proteger tus API keys con environments, ideal si estás construyendo tu primer chat o app web con login social.

Cómo instalo Firebase y AngularFire en un proyecto Angular

Todo arranca en la terminal de Visual Studio Code. Desde la raíz del proyecto, ejecutas un solo comando que suma las dos dependencias necesarias al package.json.

bash npm install @angular/fire firebase

Con esto quedan instalados AngularFire (el wrapper oficial para Angular) y Firebase (el SDK base). A partir de ese momento ya puedes importarlos dentro de tus módulos y servicios [0:25].

¿Para qué sirve AngularFire? Es la librería que adapta el SDK de Firebase al ecosistema Angular, exponiendo observables y providers compatibles con el sistema de inyección de dependencias del framework.

Cómo habilito autenticación con Google y email en Firebase

En la consola de Firebase, dentro del proyecto Angular Chat, vas a la sección Authentication y haces clic en Get started. Ahí aparecen todos los proveedores disponibles [1:20].

Para este flujo activas dos métodos:

• Google: lo habilitas, eliges tu correo de soporte y guardas. Queda listo como provider de login social.
• Email y password: lo habilitas con un solo toggle y guardas.

Con ambos activos, tu app puede ofrecer login con cuenta de Google o con correo y contraseña tradicional. En la implementación de Angular 20 el foco estará en el de Google, porque es el más representativo para ver en acción [1:55].

Cómo cambio el idioma de la consola de Firebase

Si la consola se abre en inglés porque tu sistema operativo está configurado así, hay un truco rápido. Al final de la URL agregas ?hl=es-419 y presionas enter. La interfaz vuelve al español sin tocar configuraciones del navegador [2:45].

Qué es Firestore y cómo se conecta con la autenticación

Firestore es la base de datos NoSQL de Firebase donde guardarás los mensajes del chat mapeados con cada usuario autenticado. Dentro de la consola tienes tres solapas clave [3:10]:

• Datos: vista principal de las colecciones y documentos.
• Reglas: definen quién puede leer y escribir. Más adelante las modificarás para permitir lectura y escritura de mensajes según el usuario logueado.
• Uso: muestra el tráfico y los ingresos a tu base de datos.

El guardado de reglas es inmediato, lo que agiliza muchísimo iterar sobre permisos durante el desarrollo.

¿Qué diferencia hay entre Authentication y Firestore? Authentication gestiona quién es el usuario; Firestore almacena los datos que ese usuario crea o consulta. Trabajan juntos pero son módulos independientes dentro de Firebase.

Cómo registro la web app y obtengo las API keys

Desde la descripción principal del proyecto, haces clic en Agregar app y eliges el ícono de web. Le pones un nombre, por ejemplo Firebase Angular 20 Chat, y dejas la opción de Firebase Hosting sin marcar, ya que esa parte la configurarás al final del proyecto [4:30].

Al registrar, Firebase genera un objeto llamado firebaseConfig con tus API keys y variables de entorno. Ese bloque es el puente entre tu código Angular y los servicios de Firebase, así que lo copias para pegarlo en el proyecto.

Cómo configuro los environments en Angular para Firebase

Dentro de la carpeta src creas una carpeta nueva llamada environments y, dentro, dos archivos:

• environment.ts para desarrollo.
• environment.prod.ts para producción.

En cada uno exportas una constante con la configuración:

typescript export const environment = { production: false, apiKey: "...", authDomain: "...", projectId: "...", storageBucket: "...", messagingSenderId: "...", appId: "..." };

En el archivo de producción cambias production: false por production: true. La diferencia entre ambos define qué configuración se usa al ejecutar ng build en modo desarrollo o distribución [6:20].

Por qué debo proteger las API keys de Firebase

Las API keys identifican tu proyecto y, aunque algunas son públicas por diseño, otras pueden exponer datos sensibles si las reglas de seguridad no están bien configuradas. La práctica recomendada es agregar la carpeta environments al .gitignore para que no se suba al repositorio.

En este proyecto de aprendizaje, desarrollo y producción comparten las mismas keys, pero en proyectos reales cada environment suele apuntar a bases de datos y dominios distintos. Tener los dos archivos desde el inicio te prepara para esa separación.

Con AngularFire instalado, los proveedores de autenticación habilitados, Firestore activo y los environments configurados, tu Angular 20 ya tiene todo lo necesario para empezar a escribir lógica de login y persistencia. ¿Qué método de autenticación vas a implementar primero en tu proyecto?