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.
