Logra que tu barra superior muestre el correo del usuario logueado junto al botón de logout usando Firebase en Angular. Con un ajuste simple en tu service y un pequeño setTimeout, evitas listeners costosos y obtienes el currentUser completo para leer su email. Además, prepara el proyecto para trabajar con RxJS y Observable.

¿Cómo obtener el usuario con Firebase Auth en Angular?

Para exponer al usuario logueado, se crea un método en el archivo de autorización.service.ts que retorne el objeto de autorización de Firebase. Así puedes inspeccionarlo y luego acceder a las propiedades útiles, como el currentUser.

• Agrega un método público en el service.
• Retorna el objeto de autorización para ver sus propiedades.

fullscreen
// autorización.service.ts
public getUser() {
  return this.angularFireAuth.auth;
}

¿Cómo leer currentUser y su email de forma segura?

A veces, justo al cargar, algunas propiedades de Firebase vienen en null o undefined. La solución práctica aquí es esperar medio segundo (500 ms) antes de leer el currentUser. Así obtienes el objeto completo sin abrir un socket ni suscribirte todavía a nada.

• Declara la variable para el correo inicializada en null.
• Espera 500 ms y toma el email desde currentUser.
• Evita mostrar [object Object] iniciando en null, no con objeto vacío.

fullscreen
// app.component.ts
logUser: any = null;

// Cuando el usuario está logueado
setTimeout(() => {
  const auth = this.autorizacionService.getUser();
  this.logUser = auth.currentUser.email;
  // console.log(this.logUser);
}, 500);

¿Cómo mostrar el email junto al botón de logout con ngIf?

Coloca un nuevo <li> dentro del menú superior. Úsalo con interpolación de string y controla su visibilidad con ngIf para que solo aparezca cuando haya valor.

fullscreen
<!-- app.component.html -->
<li *ngIf="logUser">
  <a>{{ logUser }}</a>
</li>

• Usa interpolación para renderizar el correo.
• Usa ngIf para no ocupar espacio si no hay sesión.
• Mantén el estilo envolviendo con <a>, aunque no sea cliqueable.

¿Por qué esperar medio segundo en lugar de usar sockets u observables?

Porque, en este caso, el objetivo es simple: leer el email cuando ya está disponible. Escuchar cambios permanentes a través de un socket o con flujos complejos puede gastar recursos innecesariamente. Si sabes que el usuario estará listo casi de inmediato, un retardo breve es suficiente.

• Evita conexiones persistentes si no aportan valor.
• Ahorra recursos cuando solo necesitas una lectura puntual.
• Ajusta a 500 ms para asegurar currentUser completo.

¿Cómo preparar el proyecto para RxJS y observables?

Si quieres avanzar a un enfoque reactivo, basta con importar RxJS y Observable en tu componente. Esto deja listo el entorno para, más adelante, suscribirte a flujos y manejar estados de autenticación de forma declarativa.

• Importa la librería principal de RxJS.
• Importa Observable para empezar a trabajar con flujos.

fullscreen
// app.component.ts
import 'rxjs/Rx';
import { Observable } from 'rxjs';

¿Te funcionó esta implementación? Comparte tus dudas o mejoras en los comentarios y cuéntame cómo mostrarás más datos del usuario junto al logout.