How to Send Email with Remix and React Router

import { AhaSendClient } from "@ahasend/sdk";
try {
  const client = AhaSendClient.fromEnv();
  const result = await client.messages.send({
    from: { email: process.env.AHASEND_FROM },
    recipients: [{ email: "recipient@example.com" }],
    subject: "My first sandbox email",
    text_content: "Hello from AhaSend",
    sandbox: true,
  });
  const statuses = result.data.map((entry) => entry.status);
  console.log({ statuses });
  if (!statuses.length || statuses.some((s) => !["queued", "scheduled"].includes(s)))
    throw new Error("A recipient was rejected");
} catch {
  console.error("Sandbox send failed; check your credentials, sender and account.");
  process.exitCode = 1;
}

AHASEND_API_KEY=aha-sk-...
AHASEND_ACCOUNT_ID=your-account-uuid
AHASEND_WEBHOOK_SECRET=aha-whsec-...

import { AhaSendClient } from "@ahasend/sdk";

export const ahasend = AhaSendClient.fromEnv();

import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route("signup", "./routes/signup.tsx"),
  route("webhooks/ahasend", "./routes/webhooks-ahasend.ts"),
] satisfies RouteConfig;

import type { Route } from "./+types/signup";
import { data, Form } from "react-router";
import { AhaSendAPIError } from "@ahasend/sdk";
import { ahasend } from "~/lib/ahasend.server";
import { emailSendRateLimit } from "~/lib/email-send-rate-limit.server";

const MAX_FORM_BYTES = 4_096;

export async function action({ request }: Route.ActionArgs) {
  const mediaType = request.headers
    .get("content-type")
    ?.split(";", 1)[0]
    .trim()
    .toLowerCase();
  if (mediaType !== "application/x-www-form-urlencoded") {
    return data({ error: "Unsupported content type" }, { status: 415 });
  }

  // `null` becomes NaN, so a chunked request that declares no length is
  // refused rather than read unbounded by `formData()`.
  const declaredHeader = request.headers.get("content-length");
  const declaredLength = declaredHeader === null ? NaN : Number(declaredHeader);
  if (
    !Number.isSafeInteger(declaredLength) ||
    declaredLength < 0 ||
    declaredLength > MAX_FORM_BYTES
  ) {
    return data({ error: "Request body too large" }, { status: 413 });
  }

  const form = await request.formData();
  const emailValue = form.get("email");
  const nameValue = form.get("name");

  if (typeof emailValue !== "string" || typeof nameValue !== "string") {
    return data({ error: "Invalid form submission" }, { status: 400 });
  }

  const email = emailValue.trim();
  const name = nameValue.trim();
  if (email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return data({ error: "Enter a valid email address" }, { status: 400 });
  }
  if (name.length > 200 || /[\r\n]/.test(name)) {
    return data({ error: "Enter a valid name" }, { status: 400 });
  }

  const allowed = await emailSendRateLimit.take({ request, recipient: email });
  if (!allowed) {
    return data({ error: "Try again later" }, { status: 429 });
  }

  try {
    const result = await ahasend.messages.send({
      sandbox: true,
      from: { email: "hello@yourdomain.com", name: "Your App" },
      recipients: [{ email, name }],
      subject: "Welcome to Your App!",
      html_content: "<h1>Welcome aboard 🎉</h1><p>We're glad you're here.</p>",
      text_content: "Welcome aboard! We're glad you're here.",
    });

    const queued = result.data.filter((r) => r.status !== "error").length;
    if (queued === 0) {
      console.warn("AhaSend queued no recipients", {
        rejected: result.data.length,
      });
      return data({ error: "We could not email that address" }, { status: 422 });
    }
    return { queued };
  } catch (err) {
    if (err instanceof AhaSendAPIError) {
      console.error("AhaSend send failed", {
        status: err.status,
        requestId: err.requestId,
        code: err.code,
      });
      return data({ error: "Failed to send email" }, { status: 502 });
    }
    throw err;
  }
}

export default function Signup({ actionData }: Route.ComponentProps) {
  return (
    <main>
      <h1>Send a welcome email</h1>
      <Form method="post">
        <label>
          Email
          <input name="email" type="email" required maxLength={254} />
        </label>
        <label>
          Name
          <input name="name" required maxLength={200} />
        </label>
        <button type="submit">Send welcome email</button>
      </Form>
      {actionData && "error" in actionData ? (
        <p role="alert">{actionData.error}</p>
      ) : actionData ? (
        <p>Welcome email queued.</p>
      ) : null}
    </main>
  );
}

import { WebhookVerifier } from "@ahasend/sdk/webhooks";

const webhookSecret = process.env.AHASEND_WEBHOOK_SECRET;
if (!webhookSecret) throw new Error("AHASEND_WEBHOOK_SECRET is required");

export const verifier = new WebhookVerifier(webhookSecret);

import type { Route } from "./+types/webhooks-ahasend";
import { AhaSendWebhookVerificationError } from "@ahasend/sdk/webhooks";
import { verifier } from "~/lib/ahasend-webhooks.server";
import { webhookDeliveries } from "~/lib/webhook-deliveries.server";

const MAX_BODY_BYTES = 30_000_000;

class BodyTooLargeError extends Error {}

async function readLimitedBody(request: Request): Promise<Uint8Array> {
  const declaredLength = request.headers.get("content-length");
  if (declaredLength !== null) {
    const length = Number(declaredLength);
    if (Number.isFinite(length) && length > MAX_BODY_BYTES) {
      throw new BodyTooLargeError();
    }
  }

  if (!request.body) return new Uint8Array();

  const reader = request.body.getReader();
  const chunks: Uint8Array[] = [];
  let total = 0;

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    total += value.byteLength;
    if (total > MAX_BODY_BYTES) {
      try {
        await reader.cancel();
      } catch {
        // The 413 response remains the useful result if cancellation fails.
      }
      throw new BodyTooLargeError();
    }
    chunks.push(value);
  }

  const body = new Uint8Array(total);
  let offset = 0;
  for (const chunk of chunks) {
    body.set(chunk, offset);
    offset += chunk.byteLength;
  }
  return body;
}

export async function action({ request }: Route.ActionArgs) {
  let rawBody: Uint8Array;
  try {
    rawBody = await readLimitedBody(request);
  } catch (error) {
    if (error instanceof BodyTooLargeError) {
      return new Response(null, { status: 413 });
    }
    throw error;
  }

  let event;
  try {
    event = await verifier.parse(request.headers, rawBody);
  } catch (error) {
    if (error instanceof AhaSendWebhookVerificationError) {
      return new Response(null, { status: 400 });
    }
    throw error;
  }

  const webhookId = request.headers.get("webhook-id");
  if (!webhookId) return new Response(null, { status: 400 });

  const accepted = await webhookDeliveries.enqueueOnce(webhookId, event);
  return new Response(null, { status: accepted ? 202 : 200 });
}