Resend Email

RESEND_API_KEY=re_your_api_key_here

emails/
├── templates/
│   ├── welcome.tsx        # Welcome email template
│   └── password-reset.tsx # Password reset template
app/api/email/
├── welcome/               # Send welcome email
├── password-reset/        # Send password reset
└── test/                 # Test email endpoint

// emails/templates/welcome.tsx (already implemented)
interface WelcomeEmailProps {
  userFirstName?: string;
  userEmail?: string;
  appName?: string;
  dashboardUrl?: string;
}
 
export function WelcomeEmail({
  userFirstName = 'User',
  userEmail,
  appName = 'Your App',
  dashboardUrl = 'https://yourapp.com/dashboard'
}: WelcomeEmailProps) {
  return (
    <div>
      <h1>Welcome to {appName}!</h1>
      <p>Hi {userFirstName},</p>
      <p>Thank you for signing up! Your account is ready.</p>
      <a href={dashboardUrl}>Go to Dashboard</a>
    </div>
  );
}

// emails/templates/password-reset.tsx (already implemented)
interface PasswordResetEmailProps {
  userFirstName?: string;
  resetUrl: string;
  appName?: string;
}
 
export function PasswordResetEmail({
  userFirstName = 'User',
  resetUrl,
  appName = 'Your App'
}: PasswordResetEmailProps) {
  return (
    <div>
      <h1>Reset Your Password</h1>
      <p>Hi {userFirstName},</p>
      <p>You requested to reset your password for {appName}.</p>
      <a href={resetUrl}>Reset Password</a>
    </div>
  );
}

// app/api/email/welcome/route.ts (already implemented)
import { Resend } from 'resend'
import { WelcomeEmail } from '@/emails/templates/welcome'
 
const resend = new Resend(process.env.RESEND_API_KEY!)
 
export async function POST(request: Request) {
  const { email, firstName } = await request.json()
  
  const { data, error } = await resend.emails.send({
    from: 'onboarding@yourapp.com',
    to: [email],
    subject: 'Welcome to Your App!',
    react: WelcomeEmail({ 
      userFirstName: firstName,
      userEmail: email
    }),
  })
 
  if (error) {
    return Response.json({ error: error.message }, { status: 500 })
  }
 
  return Response.json({ success: true, messageId: data?.id })
}

// app/api/email/test/route.ts (already implemented)
export async function POST(request: Request) {
  const { email } = await request.json()
  
  const { data, error } = await resend.emails.send({
    from: 'test@yourapp.com',
    to: [email],
    subject: 'Test Email',
    html: '<p>This is a test email to verify your setup!</p>',
  })
 
  return Response.json({ success: !error, messageId: data?.id })
}

// In your signup flow (already integrated)
// This happens automatically when users sign up through authentication
 
// Or manually trigger welcome email:
await fetch('/api/email/welcome', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ 
    email: user.email, 
    firstName: user.firstName 
  })
})

// For password reset functionality
const sendPasswordReset = async (email: string, resetToken: string) => {
  const resetUrl = `${process.env.NEXT_PUBLIC_APP_URL}/reset-password?token=${resetToken}`
  
  await fetch('/api/email/password-reset', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ 
      email,
      resetUrl,
      firstName: user.firstName 
    })
  })
}

// Send custom emails using Resend directly
import { Resend } from 'resend'
 
const resend = new Resend(process.env.RESEND_API_KEY!)
 
export async function sendCustomEmail(to: string, subject: string, content: string) {
  const { data, error } = await resend.emails.send({
    from: 'notifications@yourapp.com',
    to: [to],
    subject,
    html: content,
  })
  
  return { success: !error, messageId: data?.id, error }
}

Type: MX
Name: @
Value: feedback-smtp.us-east-1.amazonses.com
Priority: 10

Type: TXT
Name: @
Value: "v=spf1 include:amazonses.com ~all"

Type: CNAME
Name: resend._domainkey
Value: resend._domainkey.resend.com

// Use your custom domain
await resend.emails.send({
  from: 'noreply@yourapp.com', // Your verified domain
  to: [userEmail],
  subject: 'Welcome!',
  react: WelcomeEmail({ firstName })
})

# Test email endpoint
curl -X POST http://localhost:3000/api/email/test \
  -H "Content-Type: application/json" \
  -d '{"email": "your-email@example.com"}'

// Add attachments to emails
await resend.emails.send({
  from: 'invoices@yourapp.com',
  to: [userEmail],
  subject: 'Your Invoice',
  react: InvoiceEmail({ invoiceNumber }),
  attachments: [
    {
      filename: 'invoice.pdf',
      content: pdfBuffer,
    },
  ],
})

// Send to multiple recipients
const recipients = ['user1@example.com', 'user2@example.com']
 
const emailPromises = recipients.map(email => 
  resend.emails.send({
    from: 'notifications@yourapp.com',
    to: [email],
    subject: 'Important Update',
    react: UpdateEmail({ userEmail: email })
  })
)
 
await Promise.all(emailPromises)

RESEND_API_KEY=re_test_your_api_key_here

RESEND_API_KEY=re_live_your_production_key_here

// The template automatically sends welcome emails when users sign up
// This is handled in the user synchronization process

// For Supabase templates, emails are triggered by:
// 1. User signup completion
// 2. Password reset requests
// 3. Account status changes