Email

# Resend

Setting up emails with Resend and Supabase integration

Resend is a modern email API built for developers. It offers a generous free tier and has a native integration with Supabase, making it an excellent choice for SvelteShip projects.

1. Create a Resend Account
   • Go to Resend and create an account
   • The free tier includes 3,000 emails/month and 100 emails/day

2. Add and Verify Your Domain
   • In the Resend dashboard, go to Domains and click Add Domain
   • Enter your domain (e.g., yourdomain.com)
   • Add the DNS records provided by Resend to your Cloudflare DNS settings
   • Wait for verification (usually takes a few minutes)

   TIP

   Go to the Deploy section to see how to setup Cloudflare if you do not have a Cloudflare account yet.

3. Get Your API Key
   • Go to API Keys in the Resend dashboard
   • Click Create API Key
   • Give it a name and select the appropriate permissions
   • Copy the API key and save it in your .env.local file:

   .env.local

           PRIVATE_RESEND_API_KEY=re_xxxxxxxxxxxx
   
         

4. Configure Supabase with Resend (Built-in Integration)

   Supabase has a native integration with Resend for authentication emails. To enable it:

   • Go to your Supabase project dashboard
   • Navigate to Project Settings > Authentication
   • Scroll down to SMTP Settings and enable Custom SMTP
   • Enter the following settings:

   Setting	Value
   Host	smtp.resend.com
   Port	465
   Username	resend
   Password	Your Resend API key
   Sender email	noreply@yourdomain.com
   Sender name	Your app name

   NOTE

   You can customize the email templates in the Supabase Auth console to include your product name and branding.

5. Enable Supabase Integration in Resend

   For enhanced deliverability and easier management, enable the native Supabase integration:

   • In Resend dashboard, go to Integrations
   • Find Supabase and click Enable
   • Enter your Supabase project URL and service role key
   • This allows Resend to automatically handle auth emails from Supabase

   WARNING

   Keep your service role key secure. Only use it server-side and never expose it in client code.

6. Sending Emails from Your App

   Create a server-side function to send emails using the Resend API:

   src/lib/server/resend/send.ts

           import { PRIVATE_RESEND_API_KEY } from "$env/static/private";
   
   interface EmailOptions {
       to: string;
       subject: string;
       html: string;
       from?: string;
   }
   
   export async function sendEmail({ to, subject, html, from = "noreply@yourdomain.com" }: EmailOptions) {
       try {
           const response = await fetch("https://api.resend.com/emails", {
               method: "POST",
               headers: {
                   "Content-Type": "application/json",
                   "Authorization": `Bearer ${PRIVATE_RESEND_API_KEY}`
               },
               body: JSON.stringify({
                   from,
                   to,
                   subject,
                   html
               })
           });
   
           if (!response.ok) {
               const error = await response.json();
               throw new Error(error.message);
           }
   
           return await response.json();
       } catch (error) {
           console.error("Resend error:", error);
           throw error;
       }
   }
   
         

7. Example: Send a Welcome Email

   Use the function in your SvelteKit server routes or actions:

   src/routes/api/welcome/+server.ts

           import { sendEmail } from "$lib/server/resend/send";
   import { json } from "@sveltejs/kit";
   
   export async function POST({ request }) {
       const { email, name } = await request.json();
   
       await sendEmail({
           to: email,
           subject: `Welcome to Our App, ${name}!`,
           html: `
               <h1>Welcome, ${name}!</h1>
               <p>Thanks for signing up. We're excited to have you on board.</p>
           `
       });
   
       return json({ success: true });
   }
   
         

# Why Choose Resend?