Gestión de Autenticación de Usuarios con Firebase

Controla el estado de autenticación con confianza: aprende a leer el usuario actual, ejecutar sign out, reaccionar a cambios con el observador de Firebase y actualizar el UI con botón, avatar e inputs. Todo con código claro y seguro, sin exponer contraseñas.

¿Cómo gestionar el estado de autenticación con Firebase Auth?

Para saber si hay alguien autenticado, se usa firebase.auth().currentUser. Firebase guarda las credenciales en caché del navegador y permite leer datos del perfil, no la contraseña. Así, puedes decidir si abrir el modal de acceso o ejecutar sign out.

// Evento del botón "Iniciar sesión"
loginBtn.addEventListener('click', () => {
  const user = firebase.auth().currentUser; // usuario actual

  if (user) {
    // Usuario autenticado: cambiar flujo a *sign out*.
    loginBtn.textContent = 'Iniciar sesión';

    firebase.auth().signOut() // es una promesa
      .then(() => {
        // Colocar avatar por defecto.
        // console.log('Sign out correcto');
      })
      .catch((error) => {
        // console.error('Error al realizar el sign out', error);
      });

    // Limpiar inputs de email y password.
    // Abrir modal si corresponde.
  } else {
    // No hay usuario: abrir modal de autenticación.
    // Limpiar inputs de email y password.
  }
});

Puntos clave:

• currentUser decide el flujo: autenticado o no autenticado.
• signOut() devuelve una promesa: usa then para éxito y catch para errores.
• UI consistente: botón cambia de texto y el avatar vuelve a la imagen por defecto.

¿Qué errores comunes aparecen y cómo resolverlos?

• Olvidar paréntesis en signOut(): la función no se ejecuta.
• Imprimir una variable error sin haberla definido: usa catch(error) y regístrala.
• No limpiar inputs tras sign out: deja el estado visual inconsistente.

¿Qué hace onAuthStateChanged y por qué es clave?

Firebase ofrece un observador permanente: firebase.auth().onAuthStateChanged. Cada vez que cambia el estado del usuario (inicia sesión o hace sign out), esta función se ejecuta. Así, el UI se mantiene sincronizado incluso al refrescar la página.

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // Usuario autenticado.
    loginBtn.textContent = 'Salir';

    // Si el proveedor entregó una foto, úsala.
    if (user.photoURL) {
      // avatar.src = user.photoURL;
    } else {
      // avatar por defecto (email/password no trae *photoURL*).
    }
  } else {
    // Usuario no autenticado.
    loginBtn.textContent = 'Iniciar sesión';
    // avatar por defecto.
  }
});

Beneficios prácticos:

• UI reactivo: el botón pasa a “Salir” al autenticarse y vuelve a “Iniciar sesión” al cerrar sesión.
• Avatar correcto: si el usuario viene de Google o Facebook, existe photoURL; con email y password, se usa imagen por defecto.
• Persistencia: al refrescar, Firebase valida el estado desde la caché del browser y ajusta el UI.

¿Cómo se refleja en la experiencia del usuario?

• Mensaje de bienvenida al autenticarse.
• Sign out confirma éxito y restablece el avatar por defecto.
• Al no estar autenticado, el botón abre el modal de acceso.

¿Qué habilidades y keywords refuerzas en este módulo?

Al implementar este flujo consolidas prácticas de frontend y autenticación con Firebase:

• Uso de Firebase Auth con currentUser para leer el estado.
• Manejo de promesas con then y catch en signOut().
• Patrón observador con onAuthStateChanged para UI reactivo.
• Gestión de avatar con photoURL y imagen por defecto cuando no hay foto.
• Control de UI states: cambio de texto del botón “Iniciar sesión/Salir”.
• Limpieza de inputs de email y password tras sign out.
• Buenas prácticas de consola: detección de errores y mensajes claros.
• Comprensión de caché del navegador para persistir la sesión.

¿Te gustaría ver variantes del flujo para más proveedores o mejorar los mensajes de estado? Comparte tus dudas y cuéntanos qué casos quieres cubrir.