🍳 How to Vibe Code a Full Website (With Auth & Billing)

Build a real membership site with auth, billing, and gated pages using Lovable + Outseta

Sep 16, 2025

📣 Quick Update

Tomorrow at 8am PT, I’m hosting our monthly Cooking with AI (Live!) event — a walkthrough of four AI recipes:

✅ From Doc to Slide Deck with Gamma's 'Import with AI' feature
✅ Build a Personal Storybook with Gemini Storybook
✅ Create a Professional Headshot from a Selfie with Gemini Nano Banana
✅ How to Vibe Code a Full Website with Lovable + Outseta

Come see how each one works in practice and get all your questions answered.

Anyone can attend live for free, and paid subscribers will receive the full recording.
Hope to see you there!

Note: I recently collaborated with Outseta on this vibe coding tutorial. Sharing it here wasn’t part of the project, but I thought you would find it valuable too.

You just finished vibe-coding a slick landing page in Lovable. It looks great, but there’s no way to sign up, log in, or pay. Now you're staring down the rabbit hole of auth flows, Stripe configs, and modal bugs.

Many of us have found it's easy to vibe code our way to something beautiful, but harder to make it functional.

This recipe shows you how to skip all that. You’ll use Outseta’s all-in-one embed to add sign-up, login, billing, and a members area to your site in under 15 minutes. No tool sprawl. No late-night bug slaying. Just a real subscribe flow, working fast with Lovable + Outseta.

From rabbit-hole bugs to ready-to-ship

❌ Before:
You’re staring at a beautiful landing page with no working signup flow. You try to duct-tape together Stripe, Firebase, and a bunch of other tools. Two hours later, the modal still 404s.

✅ After:
You paste one embed, drop in three links, and your site now has sign-up, login, billing, and a gated members area—all working instantly.

Prep Time: 15 minutes

Difficulty Level: Easy

🧂 Ingredients:

An Outseta account
A Lovable project (free plan works fine)
A Stripe account
A prompt for your landing page and membership area (included below)
(Optional) A design prompt to match your site aesthetic

📖 Instructions:

Set up your Outseta account
- Sign up at Outseta
- Fill out your Company Info under Settings → General
- Go to Billing → Settings and connect your Stripe account
- Create at least one plan (free or paid)
✅ It worked if the first four items in the Outseta setup guide show as completed

Grab the embed script and auth links
- Go to Auth → Embeds → Quick Start
- Copy the <script> block and keep it handy
- Also copy the Sign Up, Login, and Profile links
✅ It worked if your clipboard starts with var o_options = { … }

Create your landing page in Lovable - Start a new Lovable project and add a prompt like:

Create a complete membership landing page for [your membership here]. Build a professional, conversion‑focused page that showcases the value of accessing [your membership value here].

Requirements:
- Add placeholder comment in <head>: <!-- PASTE OUTSETA HEADER SCRIPT (from Auth > Embeds) HERE -->
- Include global navigation with these exact placeholder links:
Sign up: href="[OUTSETA_SIGNUP_LINK]"
Log in: href="[OUTSETA_LOGIN_LINK]"
My Account: href="[OUTSETA_PROFILE_LINK]"

Do NOT implement auth, database, email, or payment systems (Outseta handles these)

Here’s the full prompt I used for this example:

Create a complete membership landing page for "Cooking with AI (Live!) Demo Event Recordings" as part of the Idea Kitchen newsletter. Build a professional, conversion‑focused page that showcases the value of accessing recorded AI demonstrations.

Requirements:
- Add placeholder comment in <head>: <!-- PASTE OUTSETA HEADER SCRIPT (from Auth > Embeds) HERE -->
- Include global navigation with these exact placeholder links:
Sign up: href="[OUTSETA_SIGNUP_LINK]"
Log in: href="[OUTSETA_LOGIN_LINK]"
My Account: href="[OUTSETA_PROFILE_LINK]"

Do NOT implement auth, database, email, or payment systems (Outseta handles these)

✅ It worked if Lovable generates a landing page UI for your membership. Hovering over links like ‘Login’ should show the Outseta placeholder link

[Optional] Customize the design - If the initial design doesn’t go with your brand, ask a follow up question that guides it in that direction.
For me, the style was initially too modern, so I followed up with this prompt:

What would it look like with a vintage cookbook style design? I'm thinking aged‑paper texture, typewriter‑style font, and warm colors that evoke a handcrafted, nostalgic feel.

Add the real script and links - Prompt Lovable to add the real script and replace all placeholder links with your actual Outseta sign-up, login, and profile links:

Let's replace the placeholder comments and links. 

The placeholder comment in the header should be replaced with: 

[Replace with your actual embed script from Step 2]

[OUTSETA_SIGNUP_LINK] should be replaced with [Replace with the actual URL from Step 2]

[OUTSETA_LOGIN_LINK] should be replaced with [Replace with the actual URL from Step 2]

[OUTSETA_PROFILE_LINK] should be replaced with [Replace with the actual URL from Step 2]

✅ It worked if Join Now opens the Outseta modal and the navigation updates to My Account after login.

Create a members-only page - Ask Lovable to generate a new page for gated content
✅ It worked if navigating to /members (or whatever yours is called) in preview shows your new page

Gate it with Outseta - Now we want to tell Outseta which content is protected:
- In Outseta: Auth → Protected Content → Add Content Group
- Name: Member
- Hidden URL: /members
- Plans with access: [select your membership plan]
- Leave the Access Denied URL blank (it will redirect to your landing page)
✅ It worked if the protected content list shows your /members page

Redirect users after sign-up/login - Here are the steps to send users to the correct page after sign in:
- In Outseta: Auth → Sign Up and Login → Post Login URL
- Enter the full member page URL
- Save
✅ It worked if users go straight to your gated content after signing up

That’s it! You just shipped a real, working membership site. And it only took 15 minutes.

The content below is usually reserved for paid subscribers, but for a limited time, it's open to everyone. Enjoy the full experience and consider upgrading to a paid subscription to support this newsletter and gain exclusive perks!

🍽️ Serving Suggestions:

Paid newsletters - Gate access to archives or premium issues behind a sign-up and billing flow
Course portals - Build a clean dashboard where members can log in to watch video lessons or download materials.
SaaS dashboards - Launch your MVP with working auth and billing
Digital downloads - Offer toolkits, templates, or eBooks behind a members-only page
Event replays - Create a content vault for workshop recordings, webinar replays, or demo sessions (like Cooking with AI)

Chef’s Insights: Pro Tips & Limitations

🧑‍🍳 Pro Tips:

Paste first, style later - Get the flow working first. Then prompt Lovable to match your brand style/content once everything's functional
Outseta = less tool sprawl - It replaces 5+ tools in one (auth, billing, CRM, email, support). Fewer logins, fewer bugs, and a lighter monthly burn

Lovable is fast for first drafts - Even if you plan to rebuild in Webflow or custom code, Lovable is ideal for prototyping and validating your flow. Since you’re using Outseta, you can export the code without risking your backend setup too
Confirm link replacements in Lovable - Double-check that all placeholder links were replaced with your real Outseta URLs by asking:
```
Are there any Outseta placeholders that haven't been replaced?
```

Test payments with dummy data - Use Stripe’s test card 4242 4242 4242 4242 to walk through your full sign-up and billing flow
Troubleshoot modals in preview - If clicking “Login” doesn’t work in Lovable’s live preview, hit the open in new tab button—modals usually work fine there

⚠️ Limitations to Keep in Mind:

Lovable free plan includes just 5 AI credits per day - Use them wisely when testing multiple pages or prompts
Modals may not load in preview mode - Use the “open in new tab” button in Lovable if your login button doesn’t seem to work.
You’ll still need to write your membership copy - Lovable generates the structure, but your messaging does the heavy lifting.
This is a basic starter setup - No backend auth enforcement yet. Outseta handles the frontend modals and gating, but routes aren’t technically protected. I’ll cover how to verify auth status and protect routes in a future tutorial, this is just step one to get you up and running as fast as possible

User Reviews:

Tried this recipe? Let us know how it worked for you in the comments.

Idea Kitchen