Overview
Understand the shipped Resend and React Email integration.
The starter kit uses Resend for delivery and React Email for typed email templates. Both editions ship the same email API under lib/email/.
How email flows through the application
- A product flow calls an exported function from
lib/email/emails.ts. - That function renders a React Email component to HTML and plain text.
lib/email/resend.tssends both versions through Resend.- Transient failures are retried and final failures are logged.
This separation keeps provider credentials out of templates and gives each message a typed input contract.
Configuration
Templates
Local preview
Connected product emails
The following messages are connected to shipped application flows:
| Flow | Trigger |
|---|---|
| Verify email address | Password signup through Better Auth |
| Password reset | Better Auth password-reset request |
| Confirm email change | Better Auth email-change request |
| Organization invitation | Creating an invitation through the organization plugin |
| Contact form | A successful contact-form submission |
| Payment failed | A handled Stripe invoice failure webhook |
| Subscription canceled | A handled Stripe subscription deletion webhook |
| Trial ending | A handled Stripe trial-ending webhook |
| Dispute received | A handled Stripe dispute webhook |
lib/email/templates/revoked-invitation-email.tsx and its sending function are included for customization, but the shipped invitation-revocation action does not call it automatically. Wire it into that action if your product should notify the recipient.
Send a custom email
Use the generic transport for a one-off message:
import { sendEmail } from '@/lib/email';
await sendEmail({
recipient: 'user@example.com',
subject: 'Welcome!',
html: '<h1>Welcome to our platform!</h1>',
text: 'Welcome to our platform!'
});For a reusable product email, create a typed React Email template and an exported rendering function in lib/email/emails.ts. This guarantees that HTML and plain-text versions are generated consistently.
Preview and delivery are separate checks
The React Email preview proves that a component renders. Exercise the real product flow with a development Resend key to verify sender authentication, generated links and delivery.