Add a database, authentication and payments to your app
User accounts, data protected by access rules and a Stripe payment held on the server: have an agent build each piece, then check it yourself.
Take a static web app to product stage: user accounts, data stored on a server and protected by access rules, and a Stripe payment in test mode whose status is held on the server. You have an AI coding agent build each piece, giving it the right instructions, then you check its work yourself: two test accounts, test cards, replayed webhooks. You leave with your upgraded app, a verification file, and a GDPR and go-live checklist.
What you will be able to do
- Decide what stays in the browser and what must move to the server, and choose a back-end platform that fits your app, your budget and your data.
- Manage environment variables and secrets (public VITE_ variables, secret keys on the server only, .env files kept out of Git, rotation after a leak).
- Have the agent design a data model and its migrations, then check that data is actually stored and linked to the right user.
- Write, have written and test Row Level Security rules that guarantee each user only accesses their own data and that plan limits are enforced in the database.
- Add sign-up, sign-in, sign-out and password reset, and verify the flows, email confirmation and redirect URLs.
- Integrate Stripe Checkout in test mode (product, price, session created on the server, test cards) without exposing the secret key.
- Hold payment status on the server with signed, deduplicated Stripe webhooks, tested with the Stripe CLI or the Dashboard.
- Apply GDPR basics (information, account deletion, processors) and a go-live checklist before taking real payments.
Prerequisites
- Have a React + Vite app versioned on GitHub and deployed, like the one built in the course "Build and ship a web app with an AI coding agent", or any equivalent small static app
- Be able to start a coding agent in a folder, have it propose a plan, review a diff and commit
- Free accounts: Supabase (Free plan), Stripe (test mode, no account activation needed), Netlify and GitHub. Coding agent: Claude Code (paid plan) or an equivalent agent
- Useful but not required: "Model your product's data and query it with SQL" for tables and joins, and "Design and test an API integration as a PM" for webhooks and idempotency
- This course does not make you a back-end developer: it teaches you to have things built, to verify them, and to know when to ask for an expert review, especially before taking real payments.
- Build and ship a web app with an AI coding agent
Syllabus
What will I add to my app in this course, and in what order?
- Course introduction2 steps
Objective · By the end of this introduction, you will know what you will be able to do (add accounts, a protected database and a Stripe test payment to your app, then verify the agent's work), the deliverable you will produce and the five modules that get you there.
What has to leave the browser, on which platform, and where does each key belong?
Objective · By the end of this lesson, you will be able to sort your app's functions between browser and server using the trust boundary, and to choose a back-end platform (Supabase, Firebase, or server functions with a separate database) that fits your app, your budget and your data.
Objective · By the end of this lesson, you will be able to map your app's environment variables, tell publishable keys from secret keys, put each secret in the only place it should live (a local file ignored by Git, the host's settings, the server functions' secrets) and respond to a leak.
How do I have the agent create tables, and guarantee that everyone only sees their own data?
Objective · By the end of this lesson, you will be able to have the agent design a data model linked to users, have it written as versioned migrations applied to Supabase, then check in the database that an entry made in the app is stored and linked to the right account.
Objective · By the end of this lesson, you will be able to specify and have written the Row Level Security rules for your tables (read, create, update, delete), add a plan limit to them, then prove with two test accounts that one user can neither read nor change another's data, even when the interface is bypassed.
How do I let everyone create an account and sign in without opening a hole?
Objective · By the end of this lesson, you will be able to have the agent add sign-up, sign-in, sign-out and password reset with Supabase Auth, configure email sending and redirect URLs, then verify each flow locally and on the public URL.
How do I charge for a subscription, and know for sure who has paid?
Objective · By the end of this lesson, you will be able to create a product and price in a Stripe test environment, have the agent write a server function that creates a Checkout session for the signed-in user, and verify the flow with test cards (payment accepted, strong authentication, decline) without the Stripe key leaving the server.
Objective · By the end of this lesson, you will be able to have a server function built that receives Stripe webhooks, verifies their signature, ignores duplicates and keeps the subscription status up to date in the database, then test it (payment, duplicate, cancellation through the customer portal) with the Stripe dashboard or the Stripe CLI.
What must be settled before welcoming real users and taking real payments?
Objective · By the end of this lesson, you will be able to apply GDPR basics to your app (informing users, deleting the account and its data, processors, hosting region, records, data breaches) and run through a go-live checklist, telling what blocks opening from what can wait.
Objective · By the end of this workshop, you will have delivered your own app with user accounts, stored data protected by RLS and a Stripe test payment held by webhook, together with a verification file that proves each piece and that you can have reviewed.
Objective · By the end of this lesson, you will have the course's prompts, templates and checklists (variable map, access matrix, tests, go-live checklist, GDPR) and you will have planned how to apply them to your app over 7 and 30 days.