Remove resend, use Postmark

Resend has been plagued with security issues lately, and I can no
longer recommend using them for production apps, especially ones which
send authentication links via email.

Postmark has been a leader in the space for a long time and is one of
the easiest and most reliable email services to use.

Author: venables

.env

@@ -31,6 +31,6 @@ AUTH_GOOGLE_SECRET=
 AUTH_GITHUB_ID=
 AUTH_GITHUB_SECRET=
 
-# Email (https://resend.com)
+# Email (https://postmarkapp.com)
 EMAIL_FROM="StartKit <[email protected]>"
-RESEND_API_KEY=
+POSTMARK_API_KEY=

README.md

@@ -18,7 +18,7 @@
 - [TailwindCSS](https://tailwindcss.com/) for utility-first CSS.
 - Gorgeous UI built with [Radix](https://www.radix-ui.com/) and [shadcn/ui](https://ui.shadcn.com/).
 - Authentication via [Next Auth](https://next-auth.js.org/) version 5.
-- Email via [Resend](https://resend.com) and [react email](https://react.email/).
+- Email via [Postmark](https://postmarkapp.com) and [jsx-email](https://jsx.email/).
 - The beautiful [Geist](https://vercel.com/font) typeface.
 - [Next Metadata API](https://beta.nextjs.org/docs/api-reference/metadata) for SEO handling, with file-system handlers.
 - [Jest](https://jestjs.io/) testing, optimized for Next.js
@@ -125,7 +125,7 @@ bun run db studio
 
 ## Email
 
-Email is currently configured to send via [Resend](https://resend.com), and uses the wonderful [jsx-email](https://jsx.email) library.
+Email is configured to send via the amazing [Postmark](https://postmarkapp.com) email service, and uses the wonderful [jsx-email](https://jsx.email) library.
 
 Email templates live with your react code and are defined in [`./emails`](./emails).
 

app/(marketing)/features.tsx

@@ -29,7 +29,7 @@ export function Features() {
       { title: "TailwindCSS", href: "https://tailwindcss.com" },
       { title: "Radix UI", href: "https://www.radix-ui.com" },
       { title: "PostgreSQL" },
-      { title: "Email via Resend", href: "https://resend.com" },
+      { title: "Email via Postmark", href: "https://postmarkapp.com" },
       { title: "Vercel ready", href: "https://vercel.com" },
       { title: "Metadata SEO" },
       { title: "Geist Font", href: "https://vercel.com/font" },

bun.lockb

@@ -39,7 +39,7 @@ export const env = createEnv({
      * Email
      */
     EMAIL_FROM: z.string(),
-    RESEND_API_KEY: z.string().optional()
+    POSTMARK_API_KEY: z.string().default("")
   },
   /**
    * Shared between server and client

env/env.mjs

@@ -6,7 +6,7 @@ import { usersTable } from "@/drizzle/schema"
 import { Template as SignInEmail } from "@/emails/signin-email"
 import { env } from "@/env"
 import { db } from "@/lib/db"
-import { emailClient } from "@/lib/email"
+import { sendEmail } from "@/lib/email/send-email"
 
 type SendVerificationRequestParams = Parameters<
   EmailConfig["sendVerificationRequest"]
@@ -33,12 +33,12 @@ export async function sendVerificationRequest({
       url={url}
     />
   )
-  const html = await render(template)
-  const text = await render(template, { plainText: true })
+  const html = await render(template, { minify: false })
+  const text = await render(template, { plainText: true, minify: false })
 
-  await emailClient().emails.send({
-    from: env.EMAIL_FROM,
+  await sendEmail({
     to: email,
+    from: env.EMAIL_FROM,
     headers: {
       "X-Entity-Ref-ID": Date.now().toString()
     },

lib/auth/send-verification-request.tsx

@@ -0,0 +1,53 @@
+import { env } from "@/env"
+
+export type SendEmailParams = {
+  to: string
+  from: string
+  subject: string
+  html?: string
+  text?: string
+  headers?: Record<string, string>
+}
+
+/**
+ * Sends an email using Postmark's API.
+ *
+ * @see {@link https://postmarkapp.com/developer/user-guide/send-email-with-api}
+ */
+export async function sendEmail({
+  to,
+  from,
+  subject,
+  html,
+  text,
+  headers
+}: SendEmailParams) {
+  const response = await fetch("https://api.postmarkapp.com/email", {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "X-Postmark-Server-Token": env.POSTMARK_API_KEY
+    },
+    body: JSON.stringify({
+      From: from,
+      To: to,
+      Subject: subject,
+      HtmlBody: html,
+      TextBody: text,
+      MessageStream: "outbound",
+      Headers:
+        headers &&
+        Object.entries(headers).map(([key, value]) => ({
+          Name: key,
+          Value: value
+        }))
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error(`Email send failed: ${response.status}`)
+  }
+
+  return response.json()
+}

lib/email/client.ts

@@ -50,7 +50,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
-    "resend": "^3.2.0",
     "sonner": "^1.4.1",
     "tailwind-merge": "^2.2.1",
     "typed-route-handler": "^0.1.1",

lib/email/index.ts

@@ -0,0 +1,56 @@
+diff --git a/node_modules/jsx-email/dist/index.js b/node_modules/jsx-email/dist/index.js
+index 27b1de3..d28bf47 100644
+--- a/node_modules/jsx-email/dist/index.js
++++ b/node_modules/jsx-email/dist/index.js
+@@ -1040,7 +1040,7 @@ Text.displayName = "Text";
+ var import_html_to_text = require("html-to-text");
+ 
+ // src/render/process.ts
+-var import_minify_preset = require("@jsx-email/minify-preset");
++// var import_minify_preset = require("@jsx-email/minify-preset");
+ var import_pretty = __toESM(require("pretty"));
+ var jsxEmailTags = ["jsx-email-cond"];
+ var processHtml = /* @__PURE__ */ __name(async ({ html, minify, pretty }) => {
+@@ -1075,10 +1075,10 @@ var processHtml = /* @__PURE__ */ __name(async ({ html, minify, pretty }) => {
+   }
+   __name(rehypeMoveStyle, "rehypeMoveStyle");
+   let processor = rehype().data("settings", settings).use(rehypeMoveStyle);
+-  if (minify) {
+-    const preset = await (0, import_minify_preset.minifyPreset)();
+-    processor = processor.use(preset);
+-  }
++  // if (minify) {
++  //   const preset = await (0, import_minify_preset.minifyPreset)();
++  //   processor = processor.use(preset);
++  // }
+   const doc = await processor.use(stringify, {
+     allowDangerousCharacters: true,
+     allowDangerousHtml: true,
+diff --git a/node_modules/jsx-email/dist/index.mjs b/node_modules/jsx-email/dist/index.mjs
+index 90b43c1..15bffd5 100644
+--- a/node_modules/jsx-email/dist/index.mjs
++++ b/node_modules/jsx-email/dist/index.mjs
+@@ -976,7 +976,7 @@ Text.displayName = "Text";
+ import { htmlToText } from "html-to-text";
+ 
+ // src/render/process.ts
+-import { minifyPreset } from "@jsx-email/minify-preset";
++// import { minifyPreset } from "@jsx-email/minify-preset";
+ import prettyHtml from "pretty";
+ var jsxEmailTags = ["jsx-email-cond"];
+ var processHtml = /* @__PURE__ */ __name(async ({ html, minify, pretty }) => {
+@@ -1011,10 +1011,10 @@ var processHtml = /* @__PURE__ */ __name(async ({ html, minify, pretty }) => {
+   }
+   __name(rehypeMoveStyle, "rehypeMoveStyle");
+   let processor = rehype().data("settings", settings).use(rehypeMoveStyle);
+-  if (minify) {
+-    const preset = await minifyPreset();
+-    processor = processor.use(preset);
+-  }
++  // if (minify) {
++  //   const preset = await minifyPreset();
++  //   processor = processor.use(preset);
++  // }
+   const doc = await processor.use(stringify, {
+     allowDangerousCharacters: true,
+     allowDangerousHtml: true,