Autenticación con Supabase Email OTP, Google y SMTP

¡Hola, 10xDev!

Sabemos que lanzar un SaaS o una aplicación web moderna implica, casi de forma inmediata, enfrentarse al desafío de la autenticación de usuarios. ¿Cómo aseguramos que solo los usuarios correctos accedan a sus datos? ¿Cómo hacemos que el proceso de registro e inicio de sesión sea seguro, fácil y, sobre todo, fiable?

Ignorar la autenticación robusta desde el principio es un error común que puede costar caro en seguridad y experiencia de usuario. Implementarla desde cero, además, suele ser un boilerplate tedioso que nos roba tiempo valioso.

Afortunadamente, herramientas como Supabase nos ofrecen una solución elegante y potente. No solo manejan la complejidad del backend de autenticación, sino que se integran a la perfección con frameworks como Next.js. Y si vamos un paso más allá y controlamos el envío de emails transaccionales, nuestra autenticación será realmente a prueba de balas (y de carpetas de spam).

En este artículo, vamos a sumergirnos de lleno en cómo configurar una autenticación completa con Supabase en Next.js, cubriendo los métodos populares (Email con One-Time Password y Google OAuth) y, lo más importante, cómo configurar tu propio servidor SMTP para garantizar que esos emails de confirmación o OTP lleguen siempre a la bandeja de entrada.

¿Por Qué Supabase para Autenticación en Next.js?#

Supabase no es solo una base de datos. Es una plataforma que incluye autenticación, almacenamiento, edge functions y más. Su módulo Auth está construido sobre GoTrue y ofrece características como:

• Múltiples métodos de inicio de sesión (Email/Password, OTP, OAuth, Magic Links, Phone).
• Gestión de usuarios.
• Control de acceso basado en roles (mediante RLS en la base de datos).
• ¡Es open source y generosamente escalable en su plan gratuito!

Integrarlo con Next.js es muy sencillo, especialmente utilizando su SDK oficial @supabase/auth-helpers-nextjs.

Configuración Básica en Next.js#

Asumimos que ya tienes un proyecto Next.js funcional. Lo primero es instalar el SDK de Supabase:

Necesitarás tus credenciales de Supabase (URL del proyecto y anon public key). Las encontrarás en el panel de Supabase, en "Settings" -> "API".

Crea un cliente de Supabase en el lado del cliente y del servidor. Un patrón común es crear un archivo de utilidades, por ejemplo utils/supabase/client.ts y utils/supabase/server.ts:

Asegúrate de definir NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY en tu archivo .env.local.

Paso a Paso: Autenticación por Email con OTP#

Este método es ideal para flujos de "magic link" o códigos temporales, evitando la necesidad de contraseñas.

1 Habilitar Email Auth: En tu panel de Supabase, ve a "Authentication" -> "Settings" y asegúrate de que "Email Sign-ins enabled" esté activado. Para OTP, habilita "Email OTP enabled".

2 Crear la Interfaz: Necesitarás un formulario simple donde el usuario ingrese su email.

3 Enviar el OTP: Usa el cliente de Supabase para enviar el código.

4 Verificar el OTP: En una página o componente separado (/auth/callback en este ejemplo) donde el usuario ingresará el código recibido.

Paso a Paso: Configurando Google OAuth#

Permitir que los usuarios se registren/inicien sesión con sus cuentas de Google simplifica enormemente el proceso.

1 Configurar en Google Cloud Console:

• Ve a Google Cloud Console.
• Crea un nuevo proyecto (o selecciona uno existente).
• Navega a "APIs y servicios" -> "Credenciales".
• Haz clic en "Crear credenciales" -> "ID de cliente de OAuth".
• Configura la pantalla de consentimiento OAuth (si es la primera vez).
• Elige "Aplicación web".
• En "Orígenes de JavaScript autorizados", añade la URL de tu aplicación (ej: http://localhost:3000 para desarrollo, https://tudominio.com para producción).
• MUY IMPORTANTE: En "URIs de redireccionamiento autorizados", añade la URL de callback de Supabase. Esta sigue el patrón [TU_URL_SUPABASE]/auth/v1/callback. Por ejemplo: https://abcdefghijkl.supabase.co/auth/v1/callback.
• Crea las credenciales y anota el "ID de cliente" y el "Secreto del cliente".

2 Configurar en Supabase:

• En tu panel de Supabase, ve a "Authentication" -> "Settings".
• Baja a la sección "OAuth 2.0 Providers".
• Habilita "Google".
• Introduce el "ID de cliente" y el "Secreto del cliente" que obtuviste de Google. Guarda los cambios.

3 Implementar en Next.js: Usa el cliente de Supabase para iniciar el flujo de OAuth.

4 Manejar el Callback: La URL auth/callback configurada en Google y Supabase es donde el proveedor OAuth redirigirá al usuario después de que se autentique. El SDK de Supabase Auth Helpers se encarga de procesar la respuesta.

Crea un Route Handler (app/auth/callback/route.ts si usas App Router) para manejar esto:

La Importancia de un SMTP Personalizado: Control y Profesionalismo#

Por defecto, Supabase usa su propio servicio de correo para enviar emails de autenticación (confirmación, OTP, reset de contraseña). Esto está bien para empezar, pero tiene limitaciones importantes:

1 Límites de Envío: El plan gratuito y a veces incluso los planes de pago tienen límites de envío por hora/día, lo que puede ser problemático a medida que creces. 2 Entregabilidad: Los emails enviados desde direcciones compartidas o dominios genéricos de Supabase son más propensos a terminar en la carpeta de spam. 3 Branding: Los emails vienen de una dirección genérica (ej: no-reply@supabase.io) y no puedes personalizarlos completamente para que reflejen tu marca. 4 Visibilidad: Tienes poca visibilidad sobre si los emails fueron entregados, abiertos, rebotaron, etc.

Configurar tu propio SMTP te da control total, mejora drásticamente la entregabilidad (¡adiós, spam!), refuerza tu marca y te da visibilidad del proceso.

Guía Detallada: Configurando Zoho Mail como Tu SMTP#

Zoho Mail ofrece planes muy asequibles (incluso uno gratuito limitado) para usar tu propio dominio de correo. Es una excelente opción para SMTP transaccional. Los pasos generales para usar un servicio SMTP (Zoho, SendGrid, Mailgun, etc.) son similares.

Aquí nos centraremos en Zoho:

1 Configura Zoho Mail para Tu Dominio:

• Si aún no lo tienes, configura Zoho Mail para usar con tu propio dominio (ej: tudominio.com). Esto implica verificar tu dominio añadiendo registros MX, TXT (SPF, DKIM) en los DNS de tu dominio (lo veremos en el siguiente artículo, ¡pero necesitas que esto esté listo primero!).
• Una vez configurado, asegúrate de que puedes enviar y recibir emails con direcciones de tu dominio (ej: no-reply@tudominio.com).

2 Obtén las Credenciales SMTP de Zoho:

• Inicia sesión en tu cuenta de Zoho Mail.
• Ve a Configuración (Settings).
• Busca la sección "Correo" (Mail) y luego "Cuentas de Correo" (Mail Accounts) o "SMTP" (SMTP).
• Deberías encontrar la información del servidor SMTP saliente:
  • Servidor SMTP: smtp.zoho.com
  • Puerto: 465 (SSL) o 587 (TLS) - Usa 465 con SSL.
  • Nombre de usuario: Tu dirección de email completa de Zoho (ej: no-reply@tudominio.com)
  • Contraseña: La contraseña de tu cuenta de Zoho Mail (o una contraseña específica de aplicación si Zoho lo requiere/recomienda por seguridad).

3 Configura Supabase para Usar Tu SMTP:

• Ve a tu panel de Supabase.
• Navega a "Authentication" -> "Settings".
• Busca la sección "SMTP Settings".
• Activa "Enable custom SMTP".
• Rellena los campos con las credenciales de Zoho:
  • SMTP Host: smtp.zoho.com
  • SMTP Port: 587
  • SMTP User: Tu dirección de email de Zoho (no-reply@tudominio.com)
  • SMTP Pass: La contraseña de tu cuenta de Zoho.
  • SMTP Sender Name: El nombre que quieres que aparezca (ej: "Tu SaaS Name").
  • SMTP Sender Email: Tu dirección de email de Zoho (no-reply@tudominio.com) Debe coincidir con el SMTP User.
• Asegúrate de que "Use SSL" esté activado (para el puerto 465).
• Guarda los cambios.

4 Prueba la Configuración: Supabase te permite enviar un email de prueba desde la misma página de configuración SMTP. Úsalo para verificar que todo funciona correctamente. Revisa la bandeja de entrada (¡y la de spam!) del destinatario del email de prueba.

¡Listo! Ahora Supabase usará tu cuenta de Zoho para enviar todos los emails de autenticación. Esto no solo mejora la entregabilidad, sino que te permite usar direcciones de email que refuercen tu marca.

Consideraciones de Seguridad y Manejo de Errores#

• Variables de Entorno: Nunca hardcodees tus credenciales de Supabase o SMTP en tu código. Usa variables de entorno (.env.local para desarrollo, la configuración de tu proveedor de hosting como Vercel para producción).
• Validación: Valida siempre las entradas del usuario (emails, contraseñas si las usas) en el cliente y en el servidor.
• Manejo de Errores: Implementa manejo de errores robusto en tus llamadas a Supabase y proporciona feedback claro al usuario.
• Tasas de Envío: Aunque uses tu propio SMTP, los proveedores tienen límites o políticas de uso justo. Monitorea tus envíos y considera usar un servicio dedicado de email transaccional (como Resend, que veremos en otro artículo) si tus volúmenes son muy altos.
• Protección de Rutas: Usa auth-helpers-nextjs para proteger rutas y componentes en el servidor, asegurando que solo los usuarios autenticados puedan acceder a contenido sensible.

Implementar una autenticación segura y fiable es un pilar fundamental de cualquier aplicación web o SaaS exitoso. Supabase simplifica enormemente este proceso al encargarse de la lógica del backend. Combinarlo con métodos modernos como Email OTP y Google OAuth ofrece flexibilidad y conveniencia a tus usuarios.

Pero el verdadero boost para la fiabilidad y el profesionalismo viene al tomar el control de tus emails transaccionales mediante un SMTP personalizado. Siguiendo esta guía, has aprendido a configurar Supabase para usar tu propio servicio (como Zoho), asegurando que tus emails lleguen a la bandeja de entrada y refuercen tu marca.

¡Ya has construido una base de autenticación mucho más robusta para tu proyecto! En próximos artículos, exploraremos otros aspectos esenciales para lanzar y escalar tu SaaS.

¿Qué otros desafíos de autenticación has enfrentado? ¡Déjanos un comentario!