Contenido del curso
Emails transaccionales con Resend y Supabase
Configurar Resend dentro de tu aplicación te permite enviar emails transaccionales, recuperar contraseñas y hacer follow-ups automáticos a usuarios que cancelaron su suscripción. Si trabajas con Lovable y Supabase, esta integración resuelve una pieza clave del ciclo de vida de tus usuarios sin escribir infraestructura desde cero.
¿Qué es Resend y por qué usarlo en tu app?
Resend es una plataforma SaaS pensada para desarrolladores que necesitan enviar correos desde sus aplicaciones. Se integra con muchísimas herramientas, tiene un plan gratuito generoso y se conecta de forma nativa con Supabase, lo que la convierte en una opción rápida para proyectos que ya están en producción.
¿Qué tipo de emails puedo enviar con Resend? Emails transaccionales como reseteo de contraseña, confirmaciones de cuenta, follow-ups a usuarios que cancelaron y notificaciones del ciclo de vida de tus clientes.
Antes de enviar cualquier correo necesitas un dominio verificado. Dentro del panel de Resend encuentras el botón Add domain [00:48], donde agregas el dominio de tu app y ajustas los registros DNS que ya configuraste cuando compraste y desplegaste tu dominio.
¿Cómo conectar Resend con Supabase para reseteo de contraseñas?
En proyectos creados con Lovable, Supabase maneja la autenticación. Si entras a Authentication y luego a Sign in & providers, vas a notar que la opción Confirm email suele estar apagada durante el desarrollo para poder loguearte sin un proveedor de email configurado [01:32]. Una vez que tienes Resend listo, puedes volver a activarla.
La parte interesante viene en Project settings, en el panel derecho dentro de Integrations [01:55]. Ahí aparece la integración oficial de Supabase con Resend. El flujo es directo:
Con eso evitas configurar manualmente todo el setup de SMTP y plantillas básicas.
¿Cómo crear una API key de Resend y usarla en Lovable?
Para casos más avanzados, como enviar emails de follow-up a usuarios que cancelaron, necesitas generar una API key propia. Dentro de Resend creas una clave nueva, le pones un nombre como Platzi Demo, le das full access y acceso a todos tus dominios [02:25].
¿Dónde guardo la API key de Resend en Lovable? Lovable te pedirá pegarla en un campo seguro la primera vez que generes el edge function. No la escribas en el código directamente, siempre va como variable de entorno.
Después pasas a Lovable en modo chat y describes lo que quieres construir. En la clase, la instrucción fue agregar un botón en la tabla canceled_subscriptions para enviar un email de seguimiento usando Resend, además de permitir insertar filas manualmente para probar con tu propio correo [03:05].
¿Por qué usar chat mode antes de implementar?
Usar chat mode permite que Lovable escanee el código, arme un plan y te muestre qué cambios va a hacer antes de tocar nada. En este caso propuso crear un edge function nuevo que se encargara del envío [03:35]. Solo después de revisar el plan le das luz verde para implementarlo.
¿Cómo se envía el email de follow-up paso a paso?
Una vez generado el edge function, el flujo de prueba se ve así:
En el primer intento apareció el error Edge function returned a non-200 status code [04:55]. Pasa seguido y casi siempre tiene la misma causa: el dominio desde el que se envía el correo no coincide con el dominio verificado en Resend.
¿Por qué falla mi edge function al enviar con Resend? Casi siempre es porque el sending domain no está verificado en tu cuenta de Resend. Revisa los logs de Supabase y confirma que el dominio del from sea exactamente el que conectaste.
La solución fue indicarle a Lovable que el dominio de envío era classwithharry.com, que era el dominio verificado en esa cuenta de Resend [05:25]. Lovable revisó los logs en Supabase, detectó que estaba usando un dominio incorrecto y aplicó el quick fix automáticamente.
¿Qué incluye la plantilla de email que genera Lovable?
Después del fix, el envío funcionó y el correo llegó a la bandeja de entrada con un diseño bastante decente generado por Lovable [06:35]. La plantilla de cancelación incluía:
Este tipo de integraciones son oro para el ciclo de vida del usuario. Puedes usarlas para reactivar clientes, mandar updates de tu blog, avisar de cambios en la app o automatizar comunicaciones que normalmente harías a mano. ¿Qué tipo de email transaccional vas a configurar primero en tu proyecto? Cuéntame en los comentarios.
