Logout en Angular con Firebase

Implementa un logout fiable y redirecciones automáticas en Angular con Firebase. Aquí verás cómo usar Router.navigate, condicionales ngIf y AngularFireAuth.signOut para mejorar la experiencia del usuario y mantener una interfaz coherente tras login, registro y cierre de sesión.

¿Qué problema resolvemos con logout y redirecciones en Angular?

Al autenticarse con éxito, el usuario seguía en la misma pantalla. Lo correcto es redirigir a una ruta como “lugares” para confirmar el flujo. Además, dejar de borrar manualmente el registro en local storage y delegarlo a AngularFireAuth con un método de logout.

• Redirigir tras login y registro mejora la usabilidad.
• Centralizar el cierre de sesión en el servicio de autorización simplifica el estado.
• Mostrar/ocultar elementos con ngIf mantiene una interfaz coherente.

¿Cómo implementar redirecciones tras login y registro?

Tras la autenticación, se inyecta Router en el servicio y se llama a navigate para enviar al usuario a “lugares”. Así se aplica la protección de rutas y una transición fluida tras login o registro.

¿Dónde inyectar router y qué ruta usar?

• Inyecta Router como propiedad privada en el servicio de autorización.
• Usa la ruta “lugares” para el destino post-autenticación.

// autorizacion.service.ts
import { Router } from '@angular/router';

private router: Router;

// tras login o registro exitoso
this.router.navigate(['lugares']);

¿Cómo verificar que funciona?

• Realiza login y confirma que ves “logueado con éxito” y la redirección inmediata a “lugares”.
• Repite el flujo en registro para validar el mismo comportamiento.

¿Cómo crear un botón de logout con AngularFireAuth?

Se agrega un método público de logout en el servicio para llamar a AngularFireAuth.signOut. Esto notifica a Firebase y borra el estado del usuario en local storage. Luego, desde el template principal se lanza la acción con un botón y se redirige a “lugares”.

¿Qué hace AngularFireAuth.signOut?

• Cierra la sesión en Firebase de forma segura.
• Limpia el rastro de autenticación en local storage.
• Permite encadenar acciones: alerta y redirección.

// autorizacion.service.ts
public logout() {
  return this.angularFireAuth.signOut().then(() => {
    alert('sesión cerrada');
    this.router.navigate(['lugares']);
  });
}

¿Cómo conectar el botón con el servicio?

• En el template principal, agrega un enlace con (click) a un método del componente.
• En el componente, delega en el servicio de autorización.

<!-- app.component.html -->
<ul class="nav-right">
  <li (click)="logout()">Logout</li>
</ul>

// app.component.ts
logout() {
  this.autorizacionService.logout();
}

¿Cómo mostrar u ocultar login, registro y logout?

• Usa ngIf para controlar la visibilidad según si el usuario está logueado.
• Muestra logout solo cuando hay sesión activa y oculta login/registro en ese caso.
• Retira la negación en el ngIf del botón de logout para que aparezca solo cuando hay usuario autenticado.

¿Qué reto aplicar con Firebase y datos del usuario?

Como extensión, investiga cómo obtener los datos del usuario actual desde Firebase y muestra el correo junto al botón de logout cuando haya sesión activa.

• Lee el usuario activo desde Firebase.
• Extrae el email y renderízalo cerca del botón de logout.
• Comparte tu implementación con una captura y el código.

¿Te animas a contar cómo resolviste la obtención del email y la lógica de visibilidad con ngIf?