newsletter-signup-flow

---
name: newsletter-signup-flow
description: Use when adding newsletter signup with double opt-in to a creator site — Resend-backed confirmation flow plus a 5-email welcome sequence triggered on confirmation, no third-party form widget.
source: https://resend.com/docs
generated: 2026-05-07T21:42:29.244Z
category: concept
audience: creators
---

## Tutorials

- https://skillmake.xyz/v/newsletter-signup-flow.mp4

## When to use

- Replacing ConvertKit/MailerLite/Substack for a small creator newsletter
- Owning the subscriber list and metadata in your own database
- Compliance with GDPR / CAN-SPAM via real double opt-in (not just an unsubscribe link)
- Triggering a welcome / lead-magnet sequence the moment someone confirms

## Key concepts

### double opt-in

User submits email → server stores it as 'pending' with a signed confirmation token → confirmation email goes out → user clicks → token verified → row flips to 'confirmed'. Required for compliance and dramatically improves deliverability (mailbox providers trust confirmed lists).

### confirmation token

Don't store random UUIDs; sign a stateless token with HMAC(email + expiry + secret). Lets you verify without a database read on the click, and tokens auto-expire (24h is standard). Same pattern as our admin session cookie.

### welcome drip

On confirmation: send email 1 immediately (welcome + delivery), schedule emails 2–5 over the next 7–14 days. Schedule via a queue (Inngest, Trigger.dev, or just a Cloudflare Cron + KV state). Don't run setTimeout on a serverless function — it dies before firing.

## API reference

```
POST /api/newsletter — initial signup
```

Insert pending row, sign confirmation token, send confirmation email via Resend.

```
// app/api/newsletter/route.ts
import { Resend } from 'resend';
import { signToken } from '@/lib/tokens';
const resend = new Resend(process.env.RESEND_API_KEY!);
export async function POST(req: Request) {
  const { email } = await req.json();
  await db.subscribers.upsert({ email, status: 'pending', createdAt: new Date() });
  const token = await signToken({ email, exp: Date.now() + 86400000 });
  await resend.emails.send({
    from: 'You <hello@yourdomain.com>',
    to: email,
    subject: 'Confirm your subscription',
    html: `<p>Click to confirm: <a href="https://yourdomain.com/confirm?t=${token}">Confirm</a></p>`,
  });
  return Response.json({ ok: true });
}
```

```
GET /confirm?t=<token> — confirmation
```

Verify token, flip subscriber to confirmed, kick off welcome drip.

```
// app/confirm/route.ts
import { redirect } from 'next/navigation';
export async function GET(req: Request) {
  const token = new URL(req.url).searchParams.get('t');
  const payload = await verifyToken(token);
  if (!payload) redirect('/confirm-failed');
  await db.subscribers.update({ where: { email: payload.email }, data: { status: 'confirmed', confirmedAt: new Date() } });
  await scheduleWelcomeDrip(payload.email);
  redirect('/confirm-success');
}
```

## Gotchas

- Don't send the lead magnet in the initial signup email — that defeats double opt-in. Send it AFTER confirmation.
- Set up SPF + DKIM + DMARC on your sending domain before launch or 30%+ of confirmations land in spam.
- Resend's free tier caps at 3000/mo and 100/day; the rate cap bites first when you launch a popup signup.
- Always include an unsubscribe link in every email, even confirmation emails — required by GDPR and CAN-SPAM.

---
Generated by SkillMake from https://resend.com/docs on 2026-05-07T21:42:29.244Z.
Verify against source before relying on details.

File: ~/.claude/skills/newsletter-signup-flow/SKILL.md