Sending Emails with Resend

LaunchFa.st makes it easier for you to send emails with Resend with an API and SDK baked-in, ready to use.

Make sure to update the .env file or hosting provider’s environment variable to have the necessary variables for Resend:

# Obtain the Resend API key from https://resend.com/api-keys
# To setup Resend, sign up on https://resend.com/home
# and link your domain after following
# https://resend.com/docs/dashboard/domains/introduction

RESEND_KEY="re_..."

Following are the two methods with which you can send emails:

1. POSTing to the baked-in API

To send emails over an API, setup a PRIVATE_ACCESS_KEY environment variable, so that all the API calls do need to have that particular token as the x-access-key header, match to what’s stored in the server. It is to ensure that the person sending the email is an admin / allowed to.

A. POSTing to the emails API from a server-side API

Here’s how you’d make the request for each framework from the server-side:

Astro

src/routes/api/random.ts

import type { APIContext } from 'astro'

export async function POST({ request }: APIContext) {
  // From a server-side API that is being POST-ed to
  await fetch(new URL('/api/email/trigger', new URL(request.url).origin).toString(), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-access-key': import.meta.env.PRIVATE_ACCESS_KEY,
    },
    body: JSON.stringify({
      to: email,
      subject: 'Verify email address',
      text: `Click the following link to verify your email address:\n${verificationUrl}`,
    }),
  })
}

SvelteKit

src/routes/api/email/verify/send/+server.ts

import { env } from '$env/dynamic/private'
import type { RequestEvent } from './$types'

export async function GET(event: RequestEvent) {
  // From a server-side API that is being fetched
  await fetch(new URL('/api/email/resend', new URL(event.request.url).origin).toString(), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-access-key': env.PRIVATE_ACCESS_KEY,
    },
    body: JSON.stringify({
      to: email,
      subject: 'How?',
      text: 'I love Resend.',
    }),
  })
}

export async function POST(event: RequestEvent) {
  // From a server-side API that is being POST-ed to
  await fetch(new URL('/api/email/resend', new URL(event.request.url).origin).toString(), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-access-key': env.PRIVATE_ACCESS_KEY,
    },
    body: JSON.stringify({
      to: email,
      subject: 'How?',
      text: 'I love Resend.',
    }),
  })
}

B. POSTing to the emails API from client-side

Caution

Make sure you’re not leaking the PRIVATE_ACCESS_KEY token while making client-side requests to the email endpoint as having the token is necessary in the header, and you should default to sending emails over the server-side only.

Here’s how you’d make the request for each framework from the client-side:

Astro

src/routes/page.astro

<script>
  fetch('/api/email/trigger', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-access-key': 'Insert that private access token safely?',
    },
    body: JSON.stringify({
      to: email,
      subject: 'How?',
      text: 'I love Resend.',
    }),
  })
</script>

SvelteKit

src/routes/+page.svelte

<script lang="ts">
  onMount(() => {
    fetch('/api/email/resend', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-access-key': 'Insert that private access token safely?',
      },
      body: JSON.stringify({
        to: email,
        subject: 'How?',
        text: 'I love Resend.',
      }),
    })
  })
</script>

2. Use Resend SDK inside your server-side code

Here’s how you’d make the request for each framework from the server-side with SDK:

Astro

src/routes/api/random.ts

import resend from '@/lib/email/resend'
import type { APIContext } from 'astro'

export async function GET({ request }: APIContext) {
  // From a server-side API that is being fetched

  // Send an email using Resend
  // Read more on https://resend.com/docs/api-reference/emails/send-email
  await resend.emails.send({
    text: context.text,
    subject: context.subject,
    from: 'Rishi Raj Jain <emails@rishi.app>',
    to: typeof context.to === 'string' ? [context.to] : context.to,
  })
}

export async function POST({ request }: APIContext) {
  // From a server-side API that is being POST-ed to

  // Send an email using Resend
  // Read more on https://resend.com/docs/api-reference/emails/send-email
  await resend.emails.send({
    text: context.text,
    subject: context.subject,
    from: 'Rishi Raj Jain <emails@rishi.app>',
    to: typeof context.to === 'string' ? [context.to] : context.to,
  })
}

SvelteKit

src/routes/random/+server.ts

import resend from '@/lib/email/resend'
import type { RequestEvent } from './$types'

export async function GET(event: RequestEvent) {
  // From a server-side API that is being fetched
  await resend.emails.send({
    text: context.text,
    subject: context.subject,
    from: 'Rishi Raj Jain <emails@rishi.app>',
    to: typeof context.to === 'string' ? [context.to] : context.to,
  })
}

export async function POST(event: RequestEvent) {
  // From a server-side API that is being POST-ed to
  await resend.emails.send({
    text: context.text,
    subject: context.subject,
    from: 'Rishi Raj Jain <emails@rishi.app>',
    to: typeof context.to === 'string' ? [context.to] : context.to,
  })
}