Configuración de Firebase en Angular 20 con autenticación y Firestore

Integra Firebase en Angular 20 con un flujo claro y seguro: instalación con npm, activación de autenticación con Google y email/password, configuración de Firestore y preparación de los environments. Aprende a proteger tus API keys y a organizar el proyecto para build y distribución sin sobresaltos.

¿Cómo instalar Firebase y @angular/fire en Angular 20?

Para empezar, abre la terminal en Visual Studio Code y agrega las dependencias. Al instalarlas, se incluyen en las dependencies de tu package.json y quedan disponibles en tu código Angular.

¿Qué comandos usar en la terminal de Visual Studio Code?

npm install @angular/fire firebase

¿Qué cambia en el proyecto tras instalar?

• Se agregan @angular/fire y firebase a las dependencias.
• Queda habilitado su uso directo en el código de Angular.
• Se prepara el terreno para autenticación y base de datos.

¿Cómo habilitar autenticación y Firestore en Firebase Console?

Desde la consola del proyecto, activa los providers de autenticación y revisa las secciones clave de Firestore. Así habilitas el inicio de sesión y preparas el almacenamiento de mensajes vinculados a usuarios.

¿Qué providers de autenticación activar?

• Google: clic en Google, habilitar, seleccionar email y guardar.
• Email y password: habilitar y guardar.
• Resultado: Google queda como provider de autenticación y también email/password.

¿Qué verás en Firestore y cómo cambiar el idioma?

• Vista principal: base de datos de Firestore para mensajes y usuarios.
• Reglas: regla existente lista para ajuste de lectura/escritura de mensajes.
• Uso: tráfico e ingresos a la base.
• Idioma de la consola: añade ?hl=s-419 al final de la URL para verlo en español.

¿Cómo registrar la app web y configurar los environments en Angular?

Registra la app web para obtener el Firebase config con API keys y variables de entorno. Luego, crea los archivos de environment en Angular para separar development y production.

¿Cómo registrar la app y obtener las API keys?

• En agregar app, elige Web.
• Nombra la app: por ejemplo, Firebase Angular 20 chat.
• Deja Firebase Hosting para después.
• Registra y copia el Firebase config.
• Importante: las API keys y variables de entorno se usarán en Angular 20.

¿Cómo crear environment.ts y environment.prod.ts?

• Crea la carpeta src/environments/.
• Crea environment.ts y environment.prod.ts.
• Usa el objeto environment con production y pega el firebase config.

src/environments/environment.ts:

export const environment = {
  production: false,
  firebase: {
    // apiKey: '...',
    // authDomain: '...',
    // projectId: '...',
    // storageBucket: '...',
    // messagingSenderId: '...',
    // appId: '...'
  }
};

src/environments/environment.prod.ts:

export const environment = {
  production: true,
  firebase: {
    // apiKey: '...',
    // authDomain: '...',
    // projectId: '...',
    // storageBucket: '...',
    // messagingSenderId: '...',
    // appId: '...'
  }
};

• En este proyecto de aprendizaje se usan las mismas keys en development y production.
• Diferencia clave: production en true para el build de distribución y subir a Firebase Hosting.

¿Cómo proteger las API keys y el proyecto?

• No compartas las API keys.
• Agrega los environments al .gitignore.

.gitignore:

src/environments/environment.ts
src/environments/environment.prod.ts

Con esto, tu proyecto queda listo: autenticación activa (Google y email/password), Firestore disponible y environments configurados para trabajar y desplegar con seguridad.

¿Tienes dudas o quieres compartir cómo configuraste tus environments? Deja tu comentario y conversemos sobre buenas prácticas y mejoras.