How to Build a Membership Site with Lovable

1Create a membership subscription schema in Supabase.
2
3Tables:
4
51. subscriptions:
6   id uuid primary key default gen_random_uuid()
7   user_id uuid references auth.users(id) on delete cascade unique
8   stripe_customer_id text unique
9   stripe_subscription_id text unique
10   tier text not null default 'free' — values: 'free', 'pro', 'enterprise'
11   status text not null default 'active' — values: 'active', 'trialing', 'past_due', 'canceled', 'incomplete'
12   current_period_end timestamptz
13   cancel_at_period_end boolean default false
14   updated_at timestamptz default now()
15   created_at timestamptz default now()
16
172. content_items:
18   id uuid primary key default gen_random_uuid()
19   title text not null
20   slug text unique not null
21   excerpt text
22   body text
23   required_tier text not null default 'free' — 'free', 'pro', 'enterprise'
24   category text
25   thumbnail_url text
26   published_at timestamptz
27   created_at timestamptz default now()
28
29RLS on subscriptions:
30  SELECT: users can read their own row (user_id = auth.uid())
31  INSERT/UPDATE: service role only (webhook updates, not direct user writes)
32
33RLS on content_items:
34  SELECT: USING (
35    required_tier = 'free'
36    OR EXISTS (
37      SELECT 1 FROM subscriptions
38      WHERE user_id = auth.uid()
39      AND status IN ('active', 'trialing')
40      AND (
41        (tier = 'pro' AND required_tier IN ('free', 'pro'))
42        OR (tier = 'enterprise' AND required_tier IN ('free', 'pro', 'enterprise'))
43      )
44    )
45  )
46  INSERT/UPDATE/DELETE: service role only
47
48Create a helper function get_user_tier(p_user_id uuid) RETURNS text that returns the user's current tier or 'free' if no subscription row exists.
49
50Seed 6 sample content_items: 2 free, 2 pro, 2 enterprise.

1Step 1: Create a Supabase Edge Function at supabase/functions/create-checkout-session/index.ts.
2
3The function:
41. Verifies the caller's JWT (use Supabase client with Authorization header)
52. Accepts POST body: { price_id: string, success_url: string, cancel_url: string }
63. Looks up or creates a Stripe customer for the user:
7   - Check subscriptions table for existing stripe_customer_id
8   - If none: call stripe.customers.create({ email: user.email, metadata: { supabase_user_id: user.id } })
9   - Save the new customer ID to subscriptions table
104. Call stripe.checkout.sessions.create({
11     customer: customerId,
12     mode: 'subscription',
13     line_items: [{ price: price_id, quantity: 1 }],
14     success_url: success_url + '?session_id={CHECKOUT_SESSION_ID}',
15     cancel_url: cancel_url,
16     subscription_data: { metadata: { supabase_user_id: user.id } }
17   })
185. Return { url: session.url }
19
20Use STRIPE_SECRET_KEY from Deno.env.get.
21
22Step 2: Build src/pages/Pricing.tsx:
23- Three plan Cards: Free, Pro ($29/mo), Enterprise ($99/mo)
24- Each Card lists features with checkmarks
25- Pro Card: 'Get Started' Button calls the Edge Function with the Pro price_id from your Stripe Dashboard
26- On response, redirect to the Checkout URL: window.location.href = response.url
27- Current plan Badge on the card matching the user's current tier (fetched from subscriptions)
28- Already-subscribed users see 'Current Plan' instead of the upgrade button

1Create a Supabase Edge Function at supabase/functions/stripe-webhook/index.ts.
2
3The function:
41. Reads the raw request body as text (do NOT parse as JSON before verification)
52. Calls stripe.webhooks.constructEventAsync(body, signature, STRIPE_WEBHOOK_SECRET) — use ASYNC version for Deno
63. Handles these event types:
7
8   checkout.session.completed:
9   - Get the subscription ID from event.data.object.subscription
10   - Get the customer ID from event.data.object.customer
11   - Get supabase_user_id from event.data.object.subscription_data.metadata or lookup by customer
12   - Fetch the subscription from Stripe: stripe.subscriptions.retrieve(subscriptionId)
13   - Map the Stripe price_id to your tier: use a lookup object { [PRICE_ID_PRO]: 'pro', [PRICE_ID_ENTERPRISE]: 'enterprise' }
14   - Upsert subscriptions table with user_id, stripe_customer_id, stripe_subscription_id, tier, status, current_period_end
15
16   customer.subscription.updated:
17   - Same as above: fetch subscription, map price to tier, upsert subscriptions table
18   - Handle cancel_at_period_end = true: set cancel_at_period_end in your table
19
20   customer.subscription.deleted:
21   - Find subscription by stripe_subscription_id
22   - Update: status = 'canceled', tier = 'free'
23
244. Return 200 for all handled events, 400 for signature verification failures
25
26IMPORTANT: Return 200 even for unhandled event types — Stripe retries events that return non-2xx.
27
28Register this webhook in Stripe Dashboard → Webhooks → Add endpoint with your Edge Function URL. Select events: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted.

1// src/components/MembershipGate.tsx
2import { useAuth } from '@/contexts/AuthContext'
3import { useSubscription } from '@/hooks/useSubscription'
4import { Button } from '@/components/ui/button'
5import { Lock } from 'lucide-react'
6import { useNavigate } from 'react-router-dom'
7
8const TIER_ORDER: Record<string, number> = {
9  free: 0,
10  pro: 1,
11  enterprise: 2,
12}
13
14type Props = {
15  requiredTier: 'free' | 'pro' | 'enterprise'
16  children: React.ReactNode
17  preview?: React.ReactNode
18}
19
20export function MembershipGate({ requiredTier, children, preview }: Props) {
21  const { user } = useAuth()
22  const { tier, loading } = useSubscription()
23  const navigate = useNavigate()
24
25  if (loading) return <div className='h-48 animate-pulse bg-muted rounded-lg' />
26
27  const userTierLevel = TIER_ORDER[tier ?? 'free'] ?? 0
28  const requiredLevel = TIER_ORDER[requiredTier] ?? 0
29
30  if (!user || userTierLevel < requiredLevel) {
31    return (
32      <div className='relative overflow-hidden rounded-lg'>
33        {preview && (
34          <div className='pointer-events-none select-none blur-sm opacity-60'>
35            {preview}
36          </div>
37        )}
38        <div className='absolute inset-0 flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm gap-4 p-6 text-center'>
39          <Lock className='h-8 w-8 text-muted-foreground' />
40          <p className='font-semibold text-lg'>This content requires the {requiredTier} plan</p>
41          <p className='text-muted-foreground text-sm max-w-xs'>
42            Upgrade your subscription to unlock this and all other {requiredTier} content.
43          </p>
44          <Button onClick={() => navigate('/pricing')}>
45            Upgrade to {requiredTier.charAt(0).toUpperCase() + requiredTier.slice(1)}
46          </Button>
47        </div>
48      </div>
49    )
50  }
51
52  return <>{children}</>
53}

1Create a Supabase Edge Function at supabase/functions/create-portal-session/index.ts.
2
3The function:
41. Verifies the caller's JWT
52. Looks up the user's stripe_customer_id from the subscriptions table
63. If no customer ID exists, return 400: 'No active subscription found'
74. Call stripe.billingPortal.sessions.create({
8     customer: stripe_customer_id,
9     return_url: request headers origin + '/account'
10   })
115. Return { url: session.url }
12
13In the frontend Account or Profile page, add a 'Manage Billing' Button:
14- On click, call the Edge Function
15- On response, redirect: window.location.href = response.url
16- Show a loading spinner on the button while the call is in progress
17- Show a toast on error: 'Could not open billing portal. Please try again.'
18
19Also add a subscription status Card to the Account page showing:
20- Current tier Badge
21- Renewal date (current_period_end formatted)
22- Cancel at period end warning if applicable: 'Your subscription cancels on [date]'
23- A 'Reactivate Subscription' Button if cancel_at_period_end is true