Taking an app to production means stacking layers on top of what already works. The diagram below shows the order: start with the live app, protect it with authentication and RLS, monetize it with payments, and finally connect external workflows via webhook.

Illustrative diagram — conceptual recreation of the production layers, not a real screenshot.

An app without login is an app open: anyone with the URL can trigger the workflow and consume your AI tokens — and you pay for other people's usage. Authentication solves two problems at once: it protects the use (only registered users can trigger the backend) and protects the data (each person sees only their own).

O Supabase acts as the database and authentication provider: in Plan Mode, you ask the AI to add login/sign-up to the app using Supabase. On the platform side, you create the project and define the database password (separate from the login password) and choose the region.

Supabase setup

Row-Level Security are rules that live inside the database, not in the interface code. They ensure that a user sees only their own rows—even if there's a frontend bug. It's a layer of defense that doesn't depend on the screen code being perfect: a lock at the deepest level.

Two settings make authentication work end to end. A SQL migration: run the AI-generated SQL in the Supabase SQL editor to create the table (e.g., the leads table). And the Auth URLs: configure the app URL (Vercel) and the redirect URL so the login returns to the app correctly.

-- migração gerada pela IA
create table leads (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users not null,
  empresa text,
  score int,
  created_at timestamptz default now()
);

-- liga o Row-Level Security
alter table leads enable row level security;

Before moving on, do a explicit audit: clear the conversation and ask the AI to act as a security expert and review the app. An audit requested deliberately catches vulnerabilities that slip by in day-to-day work — and gives you a clear list of what to fix.

The audit checklist

With the Stripe, the app becomes a SaaS: a model freemium with a limited free tier and a subscription-based paid tier, via Stripe Checkout. The motivation is the same as for authentication—limiting usage so you don't pay for users' unlimited AI consumption—but now there's revenue on the other side.

The Stripe integration brings together four pieces from different points in time. You create the recurring product and copies the price ID; gets the keys (publishable + secret); create the webhook pointing to your URL with the right events; and runs the subscription table migration in Supabase.

The integration pieces

To give an n8n workflow a polished interface, the standard approach is to replace two nodes: the first (the form) with a Webhook trigger, and the last per node “Respond to Webhook”. The frontend (generated and improved with the design skill) sends the data to the webhook URL and displays the response—connected through an env var in Vercel.

Convert the workflow + connect the frontend

The entire journey is a lesson in incremental iteration: the app started as a one-sentence prompt and grew in layers — design → authentication → payment → integration. Good engineering works like this: start small, publish early, and scale as needed, without planning everything all at once.

The layers, in order