Configura autenticación en Firebase con confianza: habilita email y Google, crea usuarios en JavaScript y aplica verificación por correo para proteger el acceso. Aquí verás el flujo completo, buenas prácticas y el uso de métodos clave como createUserWithEmailAndPassword, updateProfile y sendEmailVerification.

¿Cómo habilitar los proveedores de autenticación en Firebase?

Para iniciar, se activan los proveedores desde la consola de autenticación. Se habilita correo electrónico y contraseña y también Google. Se confirma que ambos queden en estado habilitado. Además, se valida que ya exista un correo de asistencia y el nombre del proyecto.

• Abrir la consola de autenticación y ubicar proveedores de inicio de sesión.
• Habilitar correo electrónico y contraseña. Guardar.
• Habilitar Google. Guardar.
• Confirmar estado “habilitada”.
• Opcional no usado: enlace mágico al correo para autenticación sin contraseña.

Clave a recordar: para este proyecto se usará email y contraseña, solicitando siempre credenciales al usuario.

¿Cómo crear usuarios con email y password en JavaScript?

Se trabaja en un módulo de autenticación con una clase en JavaScript que expone funciones para crear cuenta y autenticar con email y password. Se usa la librería de Firebase: firebase.auth() provee métodos para gestionar usuarios y sesiones. El registro devuelve una promesa que se maneja de forma asíncrona.

• Servicio usado: Firebase Authentication con firebase.auth().
• Método principal: crear usuario con createUserWithEmailAndPassword(email, password).
• Flujo: crear usuario, actualizar perfil con displayName, enviar email de verificación, hacer sign out, y notificar con Materialize.

¿Qué hace createUserWithEmailAndPassword?

Crea un usuario con email y contraseña y retorna un resultado con el usuario autenticado. Luego se actualiza el displayName con updateProfile y se envía verificación con sendEmailVerification configurando una URL de continuación a tu app (por ejemplo, localhost:3000) para mejorar la experiencia.

fullscreen
// En el módulo/clase de autenticación
function crearCuentaEmailPassword(email, password, nombres) {
  firebase.auth()
    .createUserWithEmailAndPassword(email, password)
    .then((result) => {
      return result.user.updateProfile({ displayName: nombres })
        .then(() => {
          const configuracion = { url: 'http://localhost:3000' };
          return result.user.sendEmailVerification(configuracion);
        })
        .then(() => {
          return firebase.auth().signOut();
        })
        .then(() => {
          M.toast({ html: 'Bienvenido. Revisa tu correo y verifica tu cuenta.', displayLength: 4000 });
          // Cerrar ventana/modal si aplica.
        });
    })
    .catch((error) => {
      console.error(error);
      M.toast({ html: error.message, displayLength: 4000 });
    });
}

¿Cómo capturar errores y notificar?

Se capturan errores en el catch, se imprime en consola y se muestra al usuario con Materialize usando error.message durante 4 segundos. Mensajes breves y claros mejoran la guía del usuario.

¿Qué buenas prácticas y controles se aplican tras el registro?

En autenticación solo se almacenan: email, password, URL de foto y nombre (displayName). Datos adicionales como número de celular o fecha de nacimiento deben ir en la base de datos, relacionados por el identificador único (UID) que crea Firebase.

• Actualizar el nombre con updateProfile para mostrarlo en la app.
• Enviar verificación con sendEmailVerification y configurar botón de continuar hacia tu sitio.
• Forzar logout con signOut tras registro para impedir acceso sin verificar.
• Mostrar un mensaje de bienvenida y recordar la verificación por correo.
• Cerrar la ventana/modal después del mensaje.

Conexión con la interfaz: el botón Registrarse del controller debe instanciar la clase de autenticación y llamar al método que crea la cuenta, pasando email, password y nombres en ese orden.

fullscreen
// En el controller
document.getElementById('btn-registrarse').addEventListener('click', () => {
  const email = /* obtener del formulario */;
  const password = /* obtener del formulario */;
  const nombres = /* obtener del formulario */;

  const auth = new Autenticacion();
  auth.crearCuentaEmailPassword(email, password, nombres);
});

¿Tienes dudas sobre el flujo o quieres compartir cómo gestionas la verificación por correo en tu proyecto? Comenta y conversemos soluciones.