Mostrar email del usuario logueado en Angular

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.

// 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.

// 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

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

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