Enviar correo electrónico con JavaScript

Los navegadores bloquean las conexiones TCP sin procesar a los servidores de correo. Además, si pones una clave API o una contraseña SMTP en el código del frontend, tus credenciales quedan expuestas a cualquiera que abra las herramientas de desarrollo.

¿Por qué el navegador no puede enviar correo electrónico?

Los navegadores no exponen sockets TCP sin procesar a JavaScript, así que el código del lado del cliente no puede abrir la conexión SMTP que exige un servidor de correo. Si llamas a un API de correo electrónico HTTP directamente desde el navegador, tu clave API también queda expuesta en el código fuente de la página y en la pestaña de red. El navegador recoge la entrada del formulario y la envía a tu backend; el backend envía el correo electrónico.

¿Cómo envías desde un backend de Node con SMTP?

Nodemailer es la biblioteca estándar para SMTP en Node. Configuras un transporte una vez y luego llamas a sendMail:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
  host: "smtp.example.com",
  port: 587,
  secure: false,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

await transporter.sendMail({
  from: "you@yourdomain.com",
  to: "recipient@example.org",
  subject: "Your receipt",
  text: "Thanks for your order.",
  html: "<p>Thanks for your order.</p>",
});

Esto funciona bien en un servidor de larga ejecución. Nodemailer también admite archivos adjuntos y pruebas locales de SMTP.

¿Cómo envías con un HTTP de correo electrónico API?

Tu backend también puede enviar correo electrónico enviando JSON a un API de correo electrónico HTTP con fetch. Como usa HTTPS estándar en lugar de sockets TCP sin procesar, funciona tanto en servidores de larga ejecución como en entornos serverless:

const res = await fetch("https://us1.platform.bird.com/v1/email/messages", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.BIRD_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    from: "onboarding@messagebird.dev",
    to: ["delivered@messagebird.dev"],
    subject: "Hello from JavaScript",
    html: "<p>It works.</p>",
  }),
});

if (!res.ok) {
  throw new Error(`Send failed: ${res.status}`);
}

Usa el host que corresponde a la región de tu espacio de trabajo (us1.platform.bird.com para claves bk_us1_, eu1.platform.bird.com para claves bk_eu1_). Guarda la clave API en una variable de entorno del lado del servidor para que nunca llegue al cliente.

Envíalo con Bird

Para enviar desde Node.js o TypeScript con respuestas tipadas y reintentos automáticos, pasa BIRD_API_KEY al SDK de TypeScript de Bird:

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email
  .send({
    from: "onboarding@messagebird.dev",
    to: ["delivered@messagebird.dev"],
    subject: "Hello from Node",
    html: "<p>It works.</p>",
  })
  .safe();

El remitente onboarding@messagebird.dev y el destinatario sandbox delivered@messagebird.dev te permiten verificar tu configuración antes de configurar un dominio personalizado. Si construyes el cuerpo de tus correos como componentes React, React Email renderiza el componente en la cadena HTML que pasas en html.