Vibe-Coded Prototype to Production: Auth, Database, Payments & Deploys

Lovable, v0, and Bolt generate frontend UI code. You describe what you want and they output React components, Tailwind styles, and basic routing. Lovable's free plan gives you 5 build credits per day capped at 30 per month, plus 20 Cloud credits monthly. v0's free tier includes $5/month in credits and 7 messages per day with deploys and GitHub sync built in.

None of these tools write production-grade backend logic. They scaffold API route files and might add placeholder fetch calls, but authentication flows, database migrations, payment webhooks, and error handling are on you. The AI generates the skeleton; you fill the organs.

Replit is different. It includes a built-in database in the free Starter plan and lets you publish 1 live project without paying. You code inside the browser, and it handles hosting automatically. But even Replit won't write your Stripe webhook handler or OAuth callback logic. It gives you the environment; you write the business logic.

When you outgrow the vibe-coded prototype, you need a real stack. The live pricing index compares what each builder includes versus what you pay for separately. Check Lovable vs v0 to see which free tier fits your project size before you hit credit limits.

The gap between a working demo and a production app is authentication, persistent data, payment processing, and reliable deploys. Tools generate UI fast. The plumbing takes real code.

Your vibe-coded prototype has a login form. It doesn't authenticate anyone. You need to connect it to an auth provider that handles password hashing, session management, OAuth flows, and token refresh. Clerk and Supabase are the two most common picks for AI-generated apps.

Clerk's free plan covers up to 10,000 monthly active users. You install the SDK, wrap your app in a provider component, and add sign-in components where needed. The AI can generate the wrapper code, but you need to configure the Clerk dashboard with allowed redirect URLs, enable social logins, and handle the session state correctly in protected routes.

Supabase free tier includes 50,000 monthly active users and acts as both auth provider and database. You create a project, grab the API keys, and write the sign-up, sign-in, and sign-out functions. The AI might scaffold a login component, but you're responsible for error handling when email delivery fails or tokens expire.

Neither tool writes session refresh logic automatically. If your app requires users to stay logged in across browser sessions, you need to implement token storage (httpOnly cookies or localStorage trade-offs), detect expired sessions, and redirect to login. The vibe-coded UI doesn't know how to recover from a 401 response.

Magic link flows, passwordless auth, and multi-factor authentication require explicit setup. The AI doesn't configure email templates, SMTP settings, or SMS providers. You do that in the auth provider's dashboard and wire the callbacks into your app.

The prototype stores everything in component state or localStorage. That dies when the tab closes. Production apps need a database with schema versioning, migrations, and backups. Supabase and PlanetScale are the two I see most often in AI-built apps.

Supabase free tier gives you a 500 MB Postgres database. You design your schema in the table editor or write SQL migrations. The AI can generate basic CREATE TABLE statements if you describe your data model, but it won't infer foreign key constraints, indexes, or row-level security policies. You write those yourself or your queries will be slow and your data will leak.

PlanetScale is a serverless MySQL platform with a free tier that includes 1 database, 1 billion row reads per month, and 10 million row writes. It uses branches like Git, so you can test schema changes in a branch before merging to production. The AI doesn't understand branching workflows. You create the branch, apply the migration, test, and merge manually.

Migrations are the hard part. When you add a column or change a data type, you need a migration script that runs exactly once in production without breaking existing data. Tools like Prisma or Drizzle ORM generate migrations from schema changes, but you still review and test each one. The vibe-coded prototype doesn't include a migrations folder or a deployment step that runs them.

Backup strategy is on you. Supabase does daily backups on the free tier but you can't schedule your own. PlanetScale's free tier doesn't include backups at all. If you need point-in-time recovery, you pay for Pro or you write your own export scripts.

Your prototype has a checkout button. It doesn't charge anyone. You need to integrate Stripe or Lemon Squeezy and handle webhooks, subscription state, and failed payment recovery. Stripe charges 2.9% + 30¢ per transaction. Lemon Squeezy adds a 5% platform fee on top of processing fees but handles sales tax automatically.

Stripe integration starts with creating a checkout session on your backend. The AI can generate the API call boilerplate, but you need to set up webhook endpoints that listen for payment_intent.succeeded, customer.subscription.created, and invoice.payment_failed events. These webhooks update your database when a payment completes or a subscription renews.

Webhook verification is critical. Stripe signs every webhook with a secret. You verify the signature before processing the event or attackers can fake payment confirmations. The AI doesn't add signature verification by default. You copy it from Stripe's official Node.js or Python examples and paste it into your webhook handler.

Subscription state management gets complex fast. You need to track active, past_due, canceled, and trialing statuses. When a payment fails, you decide whether to immediately revoke access or allow a grace period. When a user cancels, you decide whether to cancel immediately or at period end. The vibe-coded app has none of this logic.

Lemon Squeezy simplifies tax compliance by calculating and remitting sales tax in 130+ countries. You just enable it in the dashboard. Stripe requires you to register in each jurisdiction or use Stripe Tax (extra fee). Neither tool writes the tax-handling code for you. You configure it in their dashboards and your app receives the final amount.

The prototype runs on localhost or a one-click preview deploy. Production needs staging environments, secret management, CI/CD pipelines, and monitoring. Vercel, Netlify, and Railway are the most common deployment targets for vibe-coded apps.

Vercel's free tier includes unlimited deployments and preview URLs for every Git push. You connect your GitHub repo, set environment variables for API keys and database URLs, and Vercel builds and deploys automatically. The AI doesn't configure environment variables. You add them manually in the Vercel dashboard and reference them in your code as process.env.DATABASE_URL.

Netlify's free tier includes 100 GB bandwidth per month and automatic HTTPS. It works the same way: connect repo, set secrets, deploy. The build command and output directory need to match your framework. If you're using Vite, the build command is npm run build and the publish directory is dist. The vibe-coded project might not have a build script configured correctly.

Railway's free tier includes $5 in usage credits per month. It's better for full-stack apps because it can run databases, Redis, and worker processes in the same project. You add services, link them with private networking, and set resource limits. The AI doesn't write a Procfile or configure health checks. You add those yourself or your app will restart on every request.

Monitoring and logging are separate concerns. Vercel shows build logs and runtime logs in the dashboard but doesn't track errors or performance. You add Sentry for error tracking (free tier covers 5,000 events per month) and Logtail or Axiom for structured logging. The AI doesn't initialize these SDKs or send custom events. You instrument your app manually.

The vibe-coded prototype assumes happy paths. Real users enter invalid emails, close tabs mid-checkout, refresh during OAuth callbacks, and hit rate limits. You need error boundaries, retry logic, validation, and user-facing error messages.

Form validation is the first gap. The AI generates a form with required attributes but doesn't check format or length. You add a library like Zod or Yup to validate on the client and server. A user submitting a 10,000-character bio or a malformed email breaks your database insert without validation.

Network errors happen constantly. API calls fail because the user's connection dropped or your backend is restarting. The AI-generated fetch call doesn't retry or show a meaningful error. You wrap it in a try-catch, add a retry loop with exponential backoff, and display a toast notification that says "Failed to save. Retrying…" instead of a blank screen.

Race conditions appear when users click twice fast or multiple tabs sync the same data. The AI doesn't add debouncing, optimistic updates, or conflict resolution. You install a state management library or write your own locking logic to prevent double-submits and data overwrites.

Rate limiting protects your API from abuse and runaway loops. The AI doesn't add middleware to track request counts per user or IP. You use a library like express-rate-limit or Upstash Redis to enforce 100 requests per minute per user. Without it, one user can exhaust your database connections or Stripe API quota.

You've added auth, database, payments, and deploys. Before you launch, check HTTPS, CORS, secrets rotation, backups, and compliance. The AI didn't configure any of these.

HTTPS is automatic on Vercel, Netlify, and Railway. Custom domains require DNS configuration and SSL certificate verification. You add the domain in your host's dashboard, copy the nameservers or CNAME record to your registrar, and wait for propagation. The AI doesn't explain this step.

CORS errors block your frontend from calling your backend if they're on different domains. You add a CORS middleware to your API routes that allows requests from your production domain. In Express it's three lines. In Next.js API routes you set response headers manually. The vibe-coded app likely has CORS set to allow all origins, which is a security risk.

Secrets rotation is manual. Stripe keys, database passwords, and OAuth client secrets should rotate every 90 days. You generate new keys in each service's dashboard, update them in Vercel environment variables, and redeploy. The AI doesn't schedule reminders or automate rotation.

Compliance depends on your users. If you store EU users' data, you need GDPR-compliant privacy policies, cookie consent, and data export/deletion endpoints. If you handle health data, you need HIPAA compliance. The AI generates a contact form; it doesn't write a privacy policy or a GDPR data export API.

The daily pricing changelog tracks when providers change free tier limits or add new quotas. Check it before you scale past free tiers to avoid surprise bills. The monthly scoreboard shows which tools ChatGPT, Claude, Perplexity, and Grok recommend when asked about deployment or auth, so you can see if your stack aligns with what AI assistants surface to other builders.