How to Build a Newsletter Subscriptions with Lovable

1Create a newsletter subscription system with Supabase. Set up these tables:
2
3- lists: id (uuid pk), name (text not null), slug (text unique), description (text), is_public (bool default true), subscriber_count (int default 0), created_at
4- subscribers: id (uuid pk), email (text unique not null), first_name (text), status (text check in ('pending', 'active', 'unsubscribed'), default 'pending'), confirmation_token (text unique, default gen_random_uuid()), confirmed_at (timestamptz), unsubscribed_at (timestamptz), ip_address (text), created_at
5- list_members: id (uuid pk), subscriber_id (uuid references subscribers on delete cascade), list_id (uuid references lists on delete cascade), joined_at, UNIQUE(subscriber_id, list_id)
6
7RLS:
8- subscribers: INSERT allowed for anon (new signups), SELECT/UPDATE allowed for authenticated only
9- lists: SELECT allowed for anon (for the signup form), INSERT/UPDATE/DELETE for authenticated only
10- list_members: INSERT allowed for anon, SELECT/UPDATE/DELETE for authenticated only
11
12Create a trigger that increments lists.subscriber_count when a confirmed subscriber joins a list and decrements it on delete.
13Create an index on subscribers(confirmation_token) and subscribers(email).

1Build a SubscribeForm component at src/components/SubscribeForm.tsx.
2
3The form should work as an embeddable widget that can be used on any page.
4
5Form fields (react-hook-form + zod):
6- Email (Input type email, required, validated format)
7- First Name (Input, optional)
8- List selector: if there are multiple public lists, show Checkboxes. If only one public list exists, auto-select it silently.
9
10On submit:
111. Insert into subscribers table: { email, first_name, status: 'pending', ip_address: null }
12   - Use onConflict: 'email' with upsert to handle re-subscribes gracefully
13   - If the existing subscriber status is 'active', show: 'You are already subscribed!'
142. Insert into list_members for each selected list
153. Call the send-confirmation Edge Function via supabase.functions.invoke('send-confirmation', { body: { email, subscriberId } })
164. Show a success state: 'Check your inbox! We sent a confirmation link to {email}.'
17
18Add a loading spinner to the submit Button during the async operations.
19Add a privacy note below the form: 'We never share your email. Unsubscribe anytime.'

1// supabase/functions/send-confirmation/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const cors = { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' }
6
7serve(async (req: Request) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: cors })
9
10  const { email, subscriberId } = await req.json()
11
12  const supabase = createClient(
13    Deno.env.get('SUPABASE_URL') ?? '',
14    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
15  )
16
17  const { data: subscriber } = await supabase
18    .from('subscribers')
19    .select('confirmation_token')
20    .eq('id', subscriberId)
21    .single()
22
23  if (!subscriber) {
24    return new Response(JSON.stringify({ error: 'Subscriber not found' }), { status: 404, headers: cors })
25  }
26
27  const appUrl = Deno.env.get('APP_URL') ?? 'https://yourapp.com'
28  const confirmUrl = `${appUrl}/confirm?token=${subscriber.confirmation_token}`
29
30  const res = await fetch('https://api.resend.com/emails', {
31    method: 'POST',
32    headers: {
33      'Authorization': `Bearer ${Deno.env.get('RESEND_API_KEY')}`,
34      'Content-Type': 'application/json',
35    },
36    body: JSON.stringify({
37      from: Deno.env.get('FROM_EMAIL') ?? 'hello@yourdomain.com',
38      to: email,
39      subject: 'Confirm your subscription',
40      html: `<p>Click the link below to confirm your subscription:</p><p><a href="${confirmUrl}">Confirm my subscription</a></p><p>If you did not sign up, ignore this email.</p>`,
41    }),
42  })
43
44  if (!res.ok) {
45    const err = await res.text()
46    return new Response(JSON.stringify({ error: err }), { status: 500, headers: cors })
47  }
48
49  return new Response(JSON.stringify({ success: true }), { headers: cors })
50})

1Build two pages:
2
31. src/pages/Confirm.tsx — the confirmation landing page:
4- Read the 'token' query parameter from the URL using useSearchParams
5- On mount, call supabase.from('subscribers').update({ status: 'active', confirmed_at: new Date().toISOString() }).eq('confirmation_token', token).eq('status', 'pending')
6- If updated rows > 0: show a success Card with a checkmark icon and 'You are confirmed! Welcome aboard.'
7- If no rows updated (token invalid or already used): show an error Card: 'This confirmation link is invalid or has already been used.'
8- Add a Button that navigates to the home page
9
102. src/pages/Unsubscribe.tsx — the unsubscribe landing page:
11- Read the 'token' query parameter from the URL
12- Show a confirmation Card: 'Are you sure you want to unsubscribe? You will stop receiving all emails from us.'
13- Add an 'Unsubscribe' Button (destructive) and a 'Keep my subscription' Button
14- On confirm: call supabase.from('subscribers').update({ status: 'unsubscribed', unsubscribed_at: new Date().toISOString() }).eq('confirmation_token', token)
15- Show a final message: 'You have been unsubscribed. We will miss you.'
16
17Add both routes to the app router.