feat(newsletter): migrate from sendgrid to resend (#2181)

Co-authored-by: Sébastien Chopin <atinux@gmail.com>

Author: HugoRCD

.env.example

@@ -34,9 +34,9 @@ MCP_URL=http://localhost:3000/mcp
 # for fetching sponsors
 NUXT_OPEN_COLLECTIVE_API_KEY=
 
-# for sending emails via SendGrid
-NUXT_SENDGRID_API_KEY=
-NUXT_SENDGRID_LIST_ID=
+# for newsletter subscription via Resend
+NUXT_RESEND_API_KEY=
+NUXT_RESEND_AUDIENCE_ID=
 
 # for overriding the contact email used in the site footer and contact forms
 NUXT_CONTACT_EMAIL=""

nuxt.config.ts

@@ -101,9 +101,9 @@ export default defineNuxtConfig({
     openCollective: {
       apiKey: ''
     },
-    sendgrid: {
-      listId: '',
-      apiKey: ''
+    resend: {
+      apiKey: '',
+      audienceId: ''
     }
   },
   routeRules: {

package.json

@@ -60,6 +60,7 @@
     "nuxt-llms": "^0.2.0",
     "nuxt-og-image": "^5.1.13",
     "ofetch": "^1.5.1",
+    "resend": "^6.9.2",
     "scule": "^1.3.0",
     "sitemap": "^9.0.0",
     "std-env": "^3.10.0",

pnpm-lock.yaml

@@ -1,36 +1,38 @@
+import { Resend } from 'resend'
 import { z } from 'zod'
 
 export default eventHandler(async (event) => {
-  // Get the email from body
   const { email, confirmation } = await readValidatedBody(event, z.object({
     email: z.string().email().trim(),
     confirmation: z.string()
   }).parse)
 
-  const listId = useRuntimeConfig(event).sendgrid.listId
-  if (!listId) {
+  const { apiKey, audienceId } = useRuntimeConfig(event).resend
+  if (!apiKey || !audienceId) {
     throw createError({
       statusCode: 500,
-      message: 'Missing NUXT_SENDGRID_LIST_ID env variable'
+      message: 'Missing Resend configuration'
     })
   }
 
-  // Validate confirmation code
   if (generateConfirmation(event, email) !== confirmation) {
     throw createError({
       statusCode: 400,
       message: 'Confirmation code is invalid.'
     })
   }
 
-  // Add to contacts list
-  try {
-    await sendgrid.addContactToList(event, email, listId)
-  } catch (_err) {
-    const err = _err as Error & { response?: { body?: { errors?: Array<{ message?: string }> } } }
+  const resend = new Resend(apiKey)
+
+  const { error } = await resend.contacts.create({
+    email,
+    audienceId
+  })
+
+  if (error) {
     throw createError({
-      message: err?.response?.body?.errors?.[0]?.message || 'Invalid email',
-      statusCode: 400
+      statusCode: 400,
+      message: error.message || 'Failed to subscribe. Please try again.'
     })
   }
 

server/api/newsletter/confirm.post.ts

@@ -1,68 +1,53 @@
+import { Resend } from 'resend'
 import { z } from 'zod'
 import { withQuery, withTrailingSlash } from 'ufo'
 
 export default eventHandler(async (event) => {
-  // Get the email from body and validate its format
   const { email } = await readValidatedBody(event, z.object({
     email: z.string().email().trim()
   }).parse)
 
-  const listId = useRuntimeConfig(event).sendgrid.listId
-  if (!listId) {
+  const { apiKey, audienceId } = useRuntimeConfig(event).resend
+  if (!apiKey || !audienceId) {
     throw createError({
       statusCode: 500,
-      message: 'Missing NUXT_SENDGRID_LIST_ID env variable'
+      message: 'Missing Resend configuration'
     })
   }
 
-  // Check if already in contact list
-  await sendgrid.searchContact(event, email)
-    .catch((err) => {
-      if (err.statusCode !== 404) {
-        throw createError({
-          message: err?.data?.errors?.[0]?.message || 'Sorry, we could not verify our contact list.',
-          statusCode: 400
-        })
-      }
-    }).then((res = {}) => {
-      if (res?.[email]?.contact?.list_ids?.includes(listId)) {
-        throw createError({
-          message: 'You are already subscribed to the newsletter ❤️',
-          statusCode: 400
-        })
-      }
-    })
-  // Add to global contacts first
-  await sendgrid.addContact(event, email)
-    .catch((err) => {
-      throw createError({
-        message: err?.data?.errors?.[0]?.message || 'The email is invalid.',
-        statusCode: 400
-      })
+  const resend = new Resend(apiKey)
+
+  // Check if the user is already subscribed
+  const { data: contact } = await resend.contacts.get({ audienceId, id: email })
+  if (contact && !contact.unsubscribed) {
+    throw createError({
+      message: 'You are already subscribed to the newsletter ❤️',
+      statusCode: 400
     })
+  }
 
-  // Send email to confirm registration
   const confirmation = generateConfirmation(event, email)
-  const confirmationURL = withQuery(withTrailingSlash(getHeader(event, 'origin') || 'https://nuxt.com'), { email, confirmation })
+  const origin = import.meta.dev ? getRequestURL(event).origin : 'https://nuxt.com'
+  const confirmationURL = withQuery(withTrailingSlash(origin), { email, confirmation })
 
-  await sendgrid.sendEmail(event, {
-    personalizations: [
-      {
-        to: [{ email }]
+  const { error } = await resend.emails.send({
+    from: 'Nuxt Team <team@newsletter.nuxt.com>',
+    to: email,
+    subject: 'Confirm your email address',
+    template: {
+      id: 'confirm-newsletter',
+      variables: {
+        confirmationURL
       }
-    ],
-    from: {
-      name: 'Nuxt Team',
-      email: 'team@nuxt.com'
-    },
-    subject: 'Confirm your subscription to the Nuxt newsletter',
-    content: [
-      {
-        type: 'text/html',
-        value: `Hello,<br><br>Thank you for subscribing to the Nuxt newsletter.<br>Please complete and confirm your subscription by <a href="${confirmationURL}">clicking here</a>.<br><br>Have a wonderful day.<br>The <a href="https://nuxt.com">Nuxt</a> team.`
-      }
-    ]
+    }
   })
 
+  if (error) {
+    throw createError({
+      statusCode: 400,
+      message: error.message || 'Failed to send confirmation email. Please try again.'
+    })
+  }
+
   return { ok: true }
 })