Loggeando usuarios

Aprende a implementar el login con Firebase en Angular con una configuración segura: ajusta las reglas de la base de datos, usa angular/fire y verifica el JSON Web Token en Local Storage. Verás cómo solucionar el error the email address is badly formatted, conectar el formulario con ngModel y confirmar que los datos solo cargan cuando el usuario está autenticado.

¿Cómo activar login con Firebase y proteger lectura y escritura?

Configurar las reglas de seguridad es clave. Al inicio, lectura y escritura estaban en true, lo que permite acceso público. La mejora es exigir autenticación con la condición auth != null y publicar los cambios.

• Antes: reglas abiertas para leer y escribir.
• Ahora: reglas que requieren usuario autenticado.
• Publicar cambios y refrescar para aplicar reglas.

Ejemplo de reglas en Firebase Realtime Database:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Un detalle importante: después de registrar, la librería angular/fire deja al usuario logueado automáticamente. Esto explica por qué, tras aplicar reglas, los datos aún se ven: existe una sesión activa en el navegador.

¿Dónde se guarda la sesión en el navegador?

En Chrome, la sesión se observa en Application > Local Storage > localhost bajo la clave Firebase Auth User. Ese objeto guarda el JSON Web Token, que se usa para autenticar solicitudes.

• Eliminar esa clave provoca que falle la carga de datos.
• Angular intenta recargar la lista y se muestra el error capturado en el módulo de HTTP.
• Al refrescar, sin sesión, ya no se listan los lugares, como dictan las reglas.

¿Por qué apareció el error con el email y cómo se corrige?

Al intentar el primer login, surge el mensaje: the email address is badly formatted. No se debía a un correo mal escrito, sino a que se estaban enviando parámetros fijos en lugar de enlazar el formulario.

• El template no tenía ngModel en los inputs.
• El componente enviaba email y password hardcodeados.
• Solución: replicar el patrón usado en registro, moviendo a un objeto de parámetros y enlazando con ngModel.

¿Qué cambios hacer en login.component y en el servicio?

1) En el HTML, enlazar inputs y enviar el objeto al hacer clic:

<input type="email" [(ngModel)]="loginParams.email" placeholder="correo" />
<input type="password" [(ngModel)]="loginParams.password" placeholder="contraseña" />
<button (click)="login(loginParams)">Login</button>

2) En login.component.ts, remover la llamada de autorización del constructor y crear el método login que use los parámetros del formulario:

login(loginParams: { email: string; password: string }) {
  this.autorizacionService.login(loginParams.email, loginParams.password);
}

3) En autorizacion.service, cambiar createUserWithEmailAndPassword por signInWithEmailAndPassword y ajustar el mensaje:

login(email: string, password: string) {
  return this.afAuth
    .signInWithEmailAndPassword(email, password)
    .then(() => alert('usuario logueado con éxito'))
    .catch(err => alert('un error ha ocurrido: ' + err.message));
}

Con estos cambios, al hacer login:

• Se agrega de nuevo la clave de auth en Local Storage.
• El token queda disponible para autenticar peticiones.
• En inicio, la lista de lugares vuelve a cargar porque el usuario ya está autenticado.

¿Qué validar después del login para una mejor experiencia?

Una vez que el login funciona y las reglas protegen el acceso, aún es posible navegar por pantallas no restringidas sin estar autenticado. El siguiente paso recomendado es la protección de rutas para ocultar secciones y menú cuando no hay sesión activa.

• Asegurar rutas sensibles con guardas de autenticación.
• Ocultar elementos del menú que requieren sesión.
• Mostrar estados claros: logueado o no logueado.

¿Quieres que profundicemos en la protección de rutas con Angular y Firebase? Deja tus dudas o comentarios y contemos qué parte te gustaría ver implementada paso a paso.