Autenticación con Google en Firebase para Angular

La autenticación con Google en Firebase cambia el juego cuando se integra bien con Angular. Aquí verás cómo estructurar un AuthService con observables, mapear el estado de sesión a un booleano y conectar todo con los componentes de out y chat para un flujo de login y logout real y estable.

¿Cómo se implementa la autenticación con Google en Firebase y Angular?

Para centralizar la lógica, se crea un AuthService que expone el usuario como observable y un segundo observable derivado que indica si está autenticado. Así, los componentes pueden suscribirse y reaccionar a cambios en tiempo real según lo que reporte Firebase.

• usuario$ como observable: emite el usuario de Firebase. Permite reaccionar a login/logout.
• estáAutenticado$: mapea usuario$ a un booleano. Devuelve true si hay sesión activa.
• iniciar sesión Google: usa el Google Auth provider para abrir el popup y autenticar con el correo.
• sign out: cierra sesión con Firebase y fuerza que estáAutenticado$ emita false.
• obtener usuario actual: retorna el current user de Firebase si existe.
• obtener UID de usuario: si hay sesión, devuelve el UID; si no, null.

Ejemplo de estructura del servicio en TypeScript:

// AuthService (estructura de interfaz)
export class AuthService {
  // Observable principal del usuario de Firebase.
  usuario$: Observable<any>; // null si no hay sesión.

  // Observable derivado que expone solo el estado booleano de autenticación.
  estaAutenticado$: Observable<boolean>;

  // Inicia sesión con Google usando Google Auth provider.
  iniciarSesionGoogle(): Promise<any> { /* ... */ }

  // Cierra sesión en Firebase.
  cerrarSesion(): Promise<void> { /* ... */ }

  // Retorna el usuario actual (currentUser) o null.
  obtenerUsuarioActual(): Promise<any | null> { /* ... */ }

  // Retorna el UID del usuario o null si no hay sesión.
  obtenerUidUsuario(): Promise<string | null> { /* ... */ }
}

¿Qué rol cumplen los observables en el flujo de login?

Los observables permiten suscripción y reacción inmediata ante cambios que vienen de Firebase.

• Detectan si el usuario está logueado o no en todo momento.
• Desencadenan navegación condicional (ir a chat o a out).
• Mantienen sincronía con el backend de Firebase sin polling manual.

¿Cómo se integra el AuthService en el componente out?

Se reemplaza el usuario simulado por el usuario real que retorna iniciar sesión con Google. Si la autenticación devuelve un usuario, se navega a chat; si falla, se gestiona el error en una propiedad como this.error.

• Errores comunes: cierre del popup o bloqueos. Se informa con mensajes claros.
• Estado de carga: una bandera como autenticando pasa a false al finalizar el intento.
• Chequeo inicial: al cargar, se consulta estáAutenticado$; si es true, se navega directo a chat y no se permanece en out.

Fragmento ilustrativo del componente:

// out.component.ts (fragmento ilustrativo)
async onContinuarConGoogle() {
  this.autenticando = true;
  try {
    const usuario = await this.auth.iniciarSesionGoogle();
    if (usuario) {
      this.router.navigate(['/chat']);
    } else {
      this.error = 'No se pudo iniciar sesión.';
    }
  } catch (e: any) {
    // Ejemplo: el usuario cerró el popup.
    this.error = 'Ha cerrado la ventana de autenticación, intente de nuevo.';
  } finally {
    this.autenticando = false;
  }
}

ngOnInit() {
  this.sub = this.auth.estaAutenticado$.subscribe((autenticado) => {
    if (autenticado) {
      this.router.navigate(['/chat']);
    }
  });
}

¿Qué ajustes requiere el componente chat y cómo cerrar sesión?

Al conectar con Firebase, se debe usar la estructura que provee el proveedor: cambiar la referencia de una variable local como "usuario" al user de Firebase Auth. Además, se quita cualquier mock previo y se vincula al observable del AuthService para mantener la vista sincronizada.

• Cambio de nombre: de usuario a user (estructura de Firebase), para evitar inconsistencias.
• Eliminar mocks: confiar en los datos reales del servicio.
• Botón Salir: debe ejecutar cerrar sesión del AuthService para que estáAutenticado$ emita false y se redirija a out.

Ejemplo del cierre de sesión en el componente:

// chat.component.ts (fragmento ilustrativo)
onSalir() {
  this.auth.cerrarSesion(); // Fuerza isAuthenticated a false y navega a /out si corresponde.
}

Efectos visibles al probar:

• Al hacer clic en “Continuar con Google”, se abre el popup y se autentica contra el backend de Firebase.
• Tras aceptar, se navega a chat y los datos del usuario se leen desde Firebase.
• El botón “Salir” ejecuta el sign out, vacía el user y el estado pasa a false, permitiendo volver a la pantalla de autenticación.
• En la consola de Firebase, en “Autenticación”, quedan registrados el correo, el UID y el provider Google.

¿Tienes dudas sobre el flujo o quieres compartir tu implementación? Comenta qué parte te resultó más útil o qué te gustaría optimizar en el AuthService.