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

It's 11:07pm and you just 5 coded a slick new landing page on Lovable. Now you just need a subscriber flow so a new user can sign up, pay and hit a members only area. And this is where your problems start. You're dealing with bug battles, security concerns, and after two hours of back and forth, the modal still 404s. Right now I'm going to show you how to create a member page with authentication and billing fully set up in just 15 minutes. Let's get started. By the way, the flow we're about to go through also powers SaaS dashboards, paid newsletters, course portals, digital downloads, and anywhere else users need an account and a paywall. So why are we choosing Outseta? Outseta isn't just an AUTH embed. It's your all in one membership operating system that wipes out hidden fees and eliminates tool sprawl. So it actually replaces five SaaS bills with just one. Outseta bundles all the features that you normally have to stitch together from CRM to billing to email help desk to authentication Outset. It has you covered. Outseta also has an indie no BS ethos with transparent pricing that vibes with small but many builders, fewer logins to manage, and lighter monthly burn. It also lets you pick up your website and take it elsewhere later on. Here's what you'll need to get started. You'll need an Outseta account, a lovable project, and 15 minutes start to finish. You can use the free version of Lovable for this tutorial. Okay, let's get started. So to start, you're going to create an Outseta account. This will take about five minutes. Sign up@outseta.com, fill out the company info under Settings, under Billing and then Settings connect, stripe, then create at least one plan, free or paid. It will work if the first four steps in the setup guide are marked complete. Next, we're going to grab this header script, go to auth, then embeds and you'll hit this page. All you need for your website is this script and these three links. This step worked if you have the header script and three links copied for later. Next, we're going to generate a landing page in Lovable. If you don't have one already, no worries. I have a prompt below that you can use. For this example, I'm going to use my own newsletter Idea Kitchen where I share simple recipes for how to use AI. We're going to create a member landing page for the demo event recordings that I put on so I've put in 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. You want to make sure to include this part at the end where it says do not implement off database, email or payment systems. And also make sure to include those placeholder links so that Lovable knows where to add the links later on. What this prompt does it'll it will generate a landing page that just works aesthetically, so it's going to give you something beautiful to start with and then we're going to add the link so it actually becomes functional. This step four worked if you're able to hover over the login and sign up buttons and see the outset of placeholder text next. This step is optional, so if the initial design didn't meet the aesthetic that you were going for, you can now add an additional prompt to guide it in the direction that you want it to go in. So in this case the aesthetic looks a little too modern for Idea Kitchen. More of a vintage cookbook kind of style. I'm just going to grab a prompt that says what would it look like with a vintage cookbook style design? I'm thinking aged paper texture, typewriter font and warm colors that evoke a handcrafted nostalgic feel. After adding the design prompt, it updated it to this aesthetic, which is much more this step worked if the design feels great for you. For step five, we're going to insert the links that we copied over before and the header script as well. So we're going to add this prompt again. You can use the one copied below so that you don't have to copy this out manually. And it says let's replace the placeholder comments and links. The placeholder holder comment in the header should be replaced with and then copy in the script from outset. Next you're going to add the sign up link and the login link and the profile link. This step will have worked if you click on the Join now button and it shows your membership plan, or if you click the login button and it shows the login screen. Now, two things to keep in mind when you're going through this step. Sometimes the links aren't working in this initial screen in Lovable, but if you click this button right here to open the preview in a new tab, try it here. It may work for you, so check that out if you're running into any issues. My second tip is to add this prompt so Are there any outset of placeholders that haven't been replaced? If you add this text, it will go through and look through the entire website to make sure that there are no placeholder texts that still exist and in this case they found several in the footer. So now I've asked it to replace all remaining outset of placeholders and it's gone ahead and done some. So those are the two tips in case you run into any problems at this step. This step worked if you can click on the login and the Join now and receive the new modals for step six. We're going to create a members only page in Lovable. So we're going to ask Lovable to create a page like this one to house the recipe collections. Anything else you want only members to receive. So we'll add a prompt that says something like the next step is to add a page with the protected content to be direct to once we log in. One thing to note here is that we are doing a very basic setup for this initial 15 minute tutorial. We'll guide you through this implementation in a future tutorial. So go ahead and say I'd just like to add the page so I have a link to direct to in alsatda it says I understand and then it went ahead and created this page. So I added that prompt and it created this page to link to. Once you're signed in, the next step is we're going to grab the link it created. So in this case it's the Slash cookbook, but it could be something like Slash Members or anything else that you want to use. I'm going to grab this link and then I'm going to add it to Outseta. Next we're going to go into auth and then protected content and then we're going to add a content group. So in this case I've titled it Videos. I've added the website URL at the end that we're hiding from non members. I'm just going to leave this blank for now for this tutorial, but it's something else you can add and then I'm adding the plan number. So within the first step we added a plan and that's the one we're we're adding here. Right now we're clicking Save and just keep in mind that it may take up to 10 minutes to propagate, which means that you might want to wait to test for 10 minutes. For me, honestly, it worked right away. But just something to keep in mind if you run into any issues this Step worked if you now have a content group listed under your protected content page. For our final step we're going to redirect sign up and login to the member page. So how we do this is we go to out setup and then we go to auth and sign up and login and there's a login settings right here and we're going to add the post login URL. So this is the link that we copied from our member protected page. We're going to add it right here and click save. Now let's test if this works. To test this I'm going to open an incognito window and paste in the link. You can also test the payments by going to join now select a plan and if you want to check the payments to see whether this is actually going through, you can use a dummy card like this 1-424-242 over and over and over again. Add an expiration date sometime in the future. So in this case we'll say 1226 they sign up and pay. So in this case you'd want to use your real email when you're testing just so that this email goes to your real email. But it obviously won't charge anything because we were using a dummy card number. Then I'm going to log in and ta da. It took me to my designated member page and you can already see how the is set up. So you can see when new members are signed up and billing invoices are created. Everything is already within Outseta so you don't have to do anything more than just a couple basic prompts within lovable and you can have all the functionality of a fully fleshed out member site. Everything from CRM, email help, desk, billing, auth reports and design, everything is right here. There it is. In 15 minutes we've created a fully functioning member protected website. This is the website it created for me. Now I haven't made any edits in terms of content, so there's definitely text that I could change. There's definitely information like pricing and having one plan rather than two. Those are little details that can be easily edited. The actual plumbing that runs the site is what's fully functioning right now. So I can log in, I can join now, I can process payments, I can get members to gated content. Everything that matters is fully set up. And now it's just really about the minor tweaks in terms of copy, pure vibes, real authentication and zero endless bug slaying in the process. Now go ship the real things that matter.