Skip to main content
Add email functionality to send notifications, confirmations, and newsletters.

​
Email Services

Recommended services for sending email:
ServiceBest ForFree Tier
ResendDeveloper-friendly3K/month
PostmarkTransactional email100/month
SendGridHigh volume100/day
MailgunFlexibility5K/month

​
Setting Up Resend

​
1. Create Account

  1. Go to resend.com
  2. Sign up for free account
  3. Verify your email

​
2. Add API Key

  1. Get API key from Resend dashboard
  2. Add to Kleap environment variables:
RESEND_API_KEY=re_xxxxx

​
3. Verify Domain (Optional)

For custom from addresses, verify your domain in Resend.

​
4. Send Emails

"Add email functionality using Resend to send welcome emails
when users sign up"

// app/api/send-email/route.ts
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const { to, subject, html } = await request.json();

  const { data, error } = await resend.emails.send({
    from: '[email protected]',
    to,
    subject,
    html,
  });

  if (error) {
    return Response.json({ error }, { status: 500 });
  }

  return Response.json({ data });
}

​
Common Email Types

​
Welcome Email

"Send a welcome email when a user signs up with their name
and a link to get started"

​
Password Reset

"Add forgot password functionality that sends a reset link via email"

​
Order Confirmation

"Send an order confirmation email with order details when a
purchase is completed"

​
Newsletter

"Add newsletter signup that stores emails in the database
and can send bulk emails"

​
Email Templates

​
HTML Email

const emailHtml = `
  <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;">
    <h1 style="color: #333;">Welcome, ${name}!</h1>
    <p>Thanks for signing up. Here's how to get started:</p>
    <a href="${appUrl}/dashboard"
       style="background: #0070f3; color: white; padding: 12px 24px;
              text-decoration: none; border-radius: 6px;">
      Go to Dashboard
    </a>
  </div>
`;

​
React Email Templates

For complex emails, use React Email: 
"Install @react-email/components and create a reusable
welcome email template"

import { Html, Button, Text } from '@react-email/components';

export function WelcomeEmail({ name, dashboardUrl }) {
  return (
    <Html>
      <Text>Welcome, {name}!</Text>
      <Button href={dashboardUrl}>Go to Dashboard</Button>
    </Html>
  );
}

​
Supabase Auth Emails

Supabase Auth includes built-in emails:
  • Signup confirmation
  • Password reset
  • Magic link login
  • Email change confirmation

​
Customize Auth Emails

  1. Go to Supabase Dashboard → Auth → Email Templates
  2. Customize templates with your branding
  3. Set your from address

​
Email Best Practices

​
Avoid Spam Filters

Use verified domain

Set up SPF, DKIM, and DMARC

Clear from address

Use recognizable sender name

Meaningful subject

Avoid spam trigger words

Include unsubscribe

Required for marketing emails

​
Rate Limiting

Don’t send too many emails too fast: 
// Simple rate limiting
const lastSent = await getLastEmailTime(userId);
if (Date.now() - lastSent < 60000) {
  throw new Error('Please wait before sending another email');
}

​
Error Handling

try {
  await resend.emails.send({ ... });
} catch (error) {
  console.error('Email failed:', error);
  // Log to database for retry
  await logFailedEmail({ to, subject, error });
}

​
Email with Queues

For high-volume or reliable email:

​
Using Supabase Edge Functions

// Trigger email asynchronously
await supabase.functions.invoke('send-email', {
  body: { to, subject, html }
});

​
Queue Emails in Database

CREATE TABLE email_queue (
  id uuid PRIMARY KEY,
  to_email text,
  subject text,
  html text,
  status text DEFAULT 'pending',
  created_at timestamptz DEFAULT now()
);
Then process with a cron job or edge function.

​
Testing Emails

​
Development

Use Resend’s test mode or services like:
  • Mailtrap - Catches all test emails
  • Ethereal - Fake SMTP for testing

​
Check Rendering

Preview emails in different clients:
  • Litmus - Email testing
  • Email on Acid - Rendering tests

​
Environment Setup

​
Development

RESEND_API_KEY=re_test_xxxxx  # Test key

​
Production

RESEND_API_KEY=re_xxxxx       # Live key

​
Troubleshooting

  • Check API key is correct
  • Verify environment variable is set
  • Check service dashboard for errors
  • Verify from address is authorized
  • Set up domain verification
  • Check email content for spam triggers
  • Use a reputable email service
  • Add proper unsubscribe link
  • Check your service’s rate limits
  • Implement queuing for bulk sends
  • Upgrade plan if needed

Supabase Integration

Database for storing email logs