Autenticación de Usuarios con Firebase: Registro y Verificación de Email

Implementa autenticación con Firebase de forma confiable: registro con email y password, verificación de correo, control de sesión y manejo de errores. Con ajustes simples y mensajes claros, mejoras la experiencia del usuario, evitas fallos comunes y aprovechas la consola para administrar cuentas.

¿Cómo preparar la configuración para registrar usuarios en Firebase?

Asegura una base sólida antes de probar el registro. Se corrigieron detalles clave que suelen causar errores silenciosos y bloquean el flujo de autenticación. Además, la consola de Firebase facilita revisar y gestionar usuarios en segundos.

¿Qué errores comunes debes corregir primero?

• Olvidar la palabra reservada new al instanciar clases.
• Usar la variable equivocada: se copió config y debía ser varconfig.
• Escribir mal la función sendEmailVerification: faltaba la i.
• Reutilizar un email ya registrado: Firebase muestra “la dirección de email ya está siendo usada por otro usuario” y permite eliminar o inactivar desde la consola.

¿Qué datos relevantes te da la consola de Firebase?

• Proveedor: email/password con su ícono.
• Fecha de creación y último inicio de sesión.
• Identificador único del usuario: UID para enlazar datos extra (celular, dirección, género) en Firestorm u otra base de datos.
• Gestión de usuarios sin costo por cantidad de registros.

¿Cómo registrar, verificar el correo e iniciar sesión?

Tras registrarse, se envía el correo de verificación. El enlace incluye una configuración que habilita un botón para “Continuar”, llevando al blog y evitando que el usuario se pierda. Se puede autenticar de inmediato o pedir credenciales nuevamente; aquí se opta por ingresar otra vez.

¿Cómo validar la verificación al iniciar sesión?

El inicio de sesión usa el servicio auth de Firebase con signInWithEmailAndPassword. La respuesta es una promesa y permite verificar emailVerified antes de dar acceso y cambiar el avatar.

// Inicio de sesión con email y password
firebase.auth()
  .signInWithEmailAndPassword(email, password)
  .then((res) => {
    const user = res.user;
    if (user.emailVerified) {
      // Bienvenida y cambio de avatar.
      mostrarMensaje(`Bienvenido, ${nombreUsuario}.`);
      cambiarAvatar('avatar-autenticado.png');
    } else {
      // Solicitar verificación y limpiar credenciales del navegador.
      mostrarMensaje('Por favor, realiza la verificación de la cuenta.');
      return firebase.auth().signOut();
    }
  })
  .finally(() => cerrarModal())
  .catch((error) => mostrarMensaje(error.message));

Puntos clave: - signInWithEmailAndPassword retorna una promesa. - emailVerified es un booleano: true si verificó, false si no. - Si no verificó: mostrar aviso y hacer signOut para no guardar credenciales en el navegador. - Cerrar el modal al finalizar y actualizar avatar si corresponde. - Desde el controlador del botón: instanciar con new la clase de autenticación y pasar email y password.

¿Cómo cerrar sesión y personalizar los correos?

El cierre de sesión se activa al hacer clic en el avatar. Si la promesa se resuelve sin errores, se restablece el avatar por defecto y se notifica al usuario. Ante fallos, se muestra un mensaje y se imprime el error.

// Cierre de sesión desde el avatar
firebase.auth().signOut()
  .then(() => {
    cambiarAvatar('avatar-por-defecto.png');
    mostrarMensaje('Sign out correcto.');
  })
  .catch((error) => {
    mostrarMensaje('Error al realizar sign out.');
    console.error(error);
  });

Sobre plantillas de correo: se puede personalizar el asunto del email de verificación, pero no su contenido. En cambio, la recuperación de contraseña y el cambio de dirección sí permiten personalización de contenido. Tras ajustar el asunto, el usuario recibe el correo, verifica, toca “Continuar” y luego ingresa con sus credenciales para acceder al blog.

¿Tienes dudas sobre sendEmailVerification, emailVerified, signInWithEmailAndPassword o el manejo del UID en tu flujo? Comparte tus preguntas y casos en los comentarios.