Cómo configurar Magic Links con Supabase: Guía Profesional

¿Te has preguntado alguna vez cuántos usuarios pierdes en el proceso de registro simplemente porque no recuerdan su contraseña? En pleno 2026, la fricción en el login es el enemigo número uno de la conversión. Obligar a un usuario a crear una clave compleja, confirmarla y luego recordarla es un modelo que está quedando obsoleto frente a las alternativas biométricas y los sistemas passwordless.

Los Magic Links (enlaces mágicos) han emergido como la solución más equilibrada entre seguridad técnica y experiencia de usuario. Al eliminar la necesidad de contraseñas, no solo reduces el riesgo de ataques de fuerza bruta o filtraciones de credenciales, sino que simplificas el acceso a un solo clic desde la bandeja de entrada del usuario. Es rápido, es elegante y, sobre todo, es extremadamente seguro si se implementa correctamente.

En AndroFan hemos probado decenas de proveedores de autenticación (BaaS) y, a día de hoy, Supabase Auth sigue siendo la opción más robusta y escalable para desarrolladores que buscan control total sin las complicaciones de gestionar servidores de correo propios o bases de datos de identidad complejas. En esta guía, te enseñaré paso a paso cómo desplegar este sistema en tu aplicación.

Configuración del Dashboard de Supabase

Antes de escribir una sola línea de código, debemos preparar el entorno en la consola de Supabase. Por defecto, el servicio viene con la autenticación por email habilitada, pero requiere ajustes específicos para optimizar el flujo de Magic Links.

Habilitar el proveedor de Email

1. Accede a tu proyecto en Supabase Cloud y navega a la sección Authentication > Providers.
2. Asegúrate de que Email esté en estado Enabled.
3. Localiza la opción Confirm Email. Para Magic Links, es vital que esté activa para validar la propiedad de la cuenta.
4. Desactiva Secure Password Change si solo planeas usar enlaces mágicos, aunque recomendamos dejarlo activo por flexibilidad futura.

En 2026, Supabase ha mejorado sus límites gratuitos, permitiendo hasta 50,000 usuarios activos mensuales (MAU) sin coste, lo que lo hace ideal para MVPs y proyectos en crecimiento. Sin embargo, el servidor SMTP predeterminado tiene límites de envío estrictos (aprox. 3 emails por hora en planes gratuitos).

Implementación del SDK en el Cliente

La magia ocurre en el frontend. Utilizaremos el cliente de Supabase JS v2.x (o superior), que es el estándar actual por su excelente soporte para TypeScript y su ligereza en entornos móviles y web.

Instalación de dependencias

Primero, integra el SDK en tu proyecto de React, Next.js o Vue:

• Ejecuta: npm install @supabase/supabase-js
• Inicializa el cliente con tu SUPABASE_URL y tu SUPABASE_ANON_KEY.
• Asegúrate de usar variables de entorno para proteger estas claves en producción.

Código de autenticación

El método clave aquí es signInWithOtp. A diferencia del login tradicional, este método genera un token de un solo uso (OTP) que se envía embebido en una URL.

const { data, error } = await supabase.auth.signInWithOtp({
  email: 'usuario@ejemplo.com',
  options: {
    emailRedirectTo: 'https://tu-app.com/welcome',
  },
})

Este bloque de código dispara automáticamente el correo electrónico. Si el error es nulo, puedes mostrar un mensaje al usuario indicándole que revise su bandeja de entrada. Es una implementación limpia que reduce el código de validación de contraseñas en el cliente a cero.

Seguridad y Personalización de SMTP

Uno de los errores más comunes es ignorar la reputación del dominio remitente. Si tus Magic Links no llegan, tu app está muerta. En 2026, los filtros de Google y Microsoft son más agresivos que nunca con los enlaces de autenticación.

Configuración de Custom SMTP

1. Ve a Project Settings > Auth.
2. En SMTP Settings, activa la opción Enable Custom SMTP.
3. Introduce los datos de tu proveedor (Hostname, Puerto 587, Usuario y Contraseña).
4. Configura los registros SPF, DKIM y DMARC en tu registrador de dominios (Cloudflare, GoDaddy, etc.) para garantizar que el email sea validado por el servidor receptor.

Manejo de Sesiones y Redirecciones

Cuando el usuario hace clic en el enlace, Supabase maneja el intercambio de tokens en segundo plano. Sin embargo, tú debes gestionar cómo reacciona tu aplicación una vez que el usuario vuelve con una sesión activa.

Escuchando cambios de estado

El SDK proporciona un listener llamado onAuthStateChange. Es fundamental para aplicaciones de una sola página (SPA) donde el estado de autenticación puede cambiar sin recargar el navegador.

• SIGNED_IN: El evento que se dispara cuando el Magic Link es validado con éxito.
• access_token: El JWT generado que permite realizar consultas a la base de datos bajo las políticas de RLS (Row Level Security).
• Refresh Token: Supabase gestiona automáticamente la renovación de la sesión sin que el usuario tenga que volver a pedir un enlace durante semanas.

Asegúrate de configurar correctamente la Site URL en la configuración de autenticación. Si tu aplicación corre en local, debe ser http://localhost:3000. Si intentas redirigir a un dominio no listado en la Redirect Allow List, Supabase bloqueará la petición por seguridad.

Ventajas y Desventajas

Preguntas Frecuentes

Conclusión

• Simplicidad: Los Magic Links eliminan la carga cognitiva de gestionar contraseñas.
• Configuración: Supabase facilita el proceso con signInWithOtp y una gestión de sesiones robusta.
• Escalabilidad: Es vital usar un SMTP profesional para garantizar la entrega en producción.

Implementar este sistema no es solo una mejora técnica, es una declaración de intenciones sobre cómo valoras el tiempo de tus usuarios. ¿Has tenido problemas con la entrega de emails en tus proyectos? Cuéntanos tu experiencia en los comentarios y busquemos soluciones juntos.