Lovable Tutorial 2026: Idea to Deployed App on Supabase

This Lovable tutorial takes one idea to a deployed app on a Supabase project you own, in eight steps: create a shell, connect Supabase, plan the tables first, add login, lock down row-level security, publish, fix the auth URLs and sync the code to GitHub. The order matters more than the prompts. Connect the backend before you ask for any feature that needs one, and settle the tables before the screens.

Every step below is one the official docs describe, checked October 2026: Lovable's quick start, Supabase integration, Cloud, Plan mode, authentication, Security view, security best practices, publish and GitHub pages, and Supabase's RLS, advisors, redirect URLs and production checklist pages. The prompts marked as ours are examples; the rest are quoted from Lovable's docs. Lovable changes its interface often, so a label may have moved by the time you read this.

The example is a client tracker, because Lovable's own docs use one and their prompts apply word for word. If you have not chosen a stack yet, our guide to building an AI SaaS in 2026 explains where a prompt-built app fits in the launch order.

What you will have at the end

You finish with a live app on a lovable.app address, user accounts, data only its owner can read, and the code in a private repository you control.

Before you start: pre-flight checklist

On credits: Plan mode costs 1 credit a message, and Lovable's published examples for small Build mode changes run from 0.50 to 1.20 credits. We have not measured this build, so we give no total. On the free plan, expect to spread it over a few days.

Lovable Cloud or your own Supabase? Decide first

Lovable has a built-in backend, Lovable Cloud, that uses Supabase's open-source foundation and is enabled by default. The docs call it best for most projects. This tutorial uses your own Supabase project instead, which the docs recommend when you want your own account and billing, full dashboard access or an existing database.

If you choose Cloud, skip steps 1b and 3 and follow the rest; the right-hand column shows where each setting lives.

Lovable tutorial, step by step

Step 1: Create your account and link Supabase

1. 1a. Sign up at lovable.dev with email, Google, GitHub or Apple.
2. 1b. Open the Connectors page, select Supabase and link your Supabase organisation. Only workspace owners and admins can do this.

Expected result: Lovable opens the dashboard with a personal workspace on the free plan, and your Supabase projects will be listed when you reach step 3.

Step 2: Create the project with a shell-only prompt

In the prompt box, with Build selected in the mode picker, describe the outer frame of the app and nothing that stores data. This prompt is ours; its last sentence is the one Lovable's quick start uses on every starter prompt.

Build an app shell for a client tracker: a header with the app name,
a home page with a one-line description and an empty state where the
client list will go. No login or database yet.

Expected result: Lovable creates the project and starts building. The first version takes a few minutes and appears in the preview on the right, with the project chat on the left. Every change is saved as a version you can restore.

Step 3: Lovable Supabase tutorial: connect your own project

1. In the editor, open More, then Cloud.
2. Click "Already have a Supabase project? Connect it here", then Continue.
3. Click Connect next to the project you want. To start a new one, click Create Project, which opens the Supabase dashboard, then return to Lovable and connect it.

Expected result: the Lovable project is connected to one Supabase project. Use a fresh Supabase project for each Lovable project: the docs warn that several Lovable projects sharing one Supabase project overwrite each other's secrets.

Step 4: Plan the schema first, in Plan mode

Tables are the expensive thing to change later, and Lovable's security guide says access rules are much easier to change before real data exists. So plan them before any screen. Open the mode picker next to the chat input, select Plan and send a schema-first prompt. This one is ours:

Plan the data model before any screens.
Tables: clients (name, email, phone, notes) and interactions
(client, date, type, summary). Every row belongs to the signed-in
user who created it, and nobody else can read or change it.
List the tables, columns, relationships and the access rule for
each table. Do not build UI in this step.

Expected result: Lovable may ask clarifying questions, then opens a plan in the Plan view with an overview, key decisions, data models and implementation steps. Plan mode never modifies your code. Edit the plan directly or comment on a section, then click Approve. Lovable switches to Build mode and starts at once.

As it builds, Lovable shows each schema migration in the project chat and asks for your approval before running it. Read the SQL. Then open your Supabase dashboard and confirm the tables exist with the columns you planned.

Step 5: Add login

Lovable's authentication docs give the prompt, and it fits a client tracker as written:

Add login to the app. Require login before accessing the CRM dashboard.

Expected result: Lovable generates the sign-up and login pages and wires them to your backend. Create an account in the preview and check that the client list is only reachable when signed in.

With your own Supabase project, authentication settings live in Supabase, not in Lovable. Social sign-in providers are enabled there. The docs note that you can turn off email confirmation in the Supabase dashboard while testing, and that you should turn it back on before launch.

Step 6: The security step most tutorials skip

A working login proves people can get in. It does not prove they are kept out of each other's rows. Supabase's rule is to enable RLS on every table in an exposed schema, and this step checks that four ways.

1. Ask Lovable to review the policies. This prompt is from Lovable's security guide. The Supabase integration docs recommend asking for this review and then checking the policies in the Supabase dashboard yourself.

Review RLS policies to ensure users can only access their own data and shared data is properly protected

2. Run Supabase's Security Advisor. Open Advisors in the Supabase dashboard. Clear every error, starting with any table flagged as having RLS disabled in the public schema.
3. Run Lovable's Deep scan. Open More, then Security, and click Run deep scan. It usually takes 3 to 13 minutes and costs no credits. Findings are labelled Critical, Warning or Info, and Try to fix draws on 10 free fixes before using credits.
4. Test with two accounts. Sign up with your second email, add a client, then sign in as the first account. You should not see it.

Expected result: no error-level findings in the Security Advisor, no Critical findings in Lovable's Security view, and two accounts that cannot see each other's clients. Lovable's docs do not say how much of the Security view applies to a connected Supabase project, which is one more reason to run the advisor on the Supabase side. Our guide to taking a vibe-coded app to production covers the checks that come after this one.

Step 7: Publish and fix the auth URLs

1. Click Publish in the top-right corner of the editor.
2. Check the Website URL; on a first publish you can edit the lovable.app address.
3. Leave visibility on Public. Workspace-only publishing needs a Business or Enterprise plan.
4. Read the security scan line. A Quick scan runs automatically and shows "No security issues found" or a count of findings.
5. Click Publish.

Expected result: the dialog shows "Your website is live", with buttons to copy the link and visit the site.

Now the part that trips up Supabase users. Lovable's docs say apps on your own Supabase project get no automatic updates to auth addresses. In the Supabase dashboard, open the URL Configuration page under Authentication, set the Site URL to your published address and add it to the Redirect URLs list. Supabase calls the Site URL critical for email confirmations and password resets. Then sign up on the live site from a fresh browser.

Remember that the live site is a snapshot. Later changes show in the preview straight away, but reach the live site only when you open Publish and click Publish changes.

Step 8: Sync the code to GitHub

1. Go to Project settings, then Git, then GitHub, and choose Add connection.
2. Click Add account, pick your GitHub account or organisation, choose the repositories to allow, and click Install & Authorize.
3. Back in the project's GitHub settings, click Connect next to that account.

Expected result: Lovable creates a new private repository with your project code, two-way sync starts, and the repository status shows Connected. Git sync is on every plan, including Free. The repository holds code and migration files, never your database rows.

That is the whole loop for one small app. Turning it into a product means billing, onboarding and a launch, and our AI SaaS Builder program goes deeper on the parts this tutorial touched once: Supabase database design, Row Level Security and authentication each get their own lesson.

How to use Lovable after the first build

Three habits from Lovable's docs keep a project healthy once the first version exists.

• One change at a time. The quick start says to request one change and check the preview after each. Describe a problem with its location, for example which filter shows no items and what it should show.
• Pick the mode on purpose. Chat mode is for questions and is the cheaper option. Plan mode is for a change you want to approve first. Build mode implements and verifies.
• Point, do not describe. Use the preview toolbar to select an element and say what to change, or edit text inline with no prompt at all.

Troubleshooting

• Login works in preview but fails on the live site. Check the redirect URLs first; with your own Supabase project you add the live address yourself.
• Confirmation emails stop arriving. Supabase limits its built-in email sending to 2 emails an hour until you connect your own SMTP server (checked October 2026).
• Your change is not on the live site. Open Publish and click Publish changes. A dot on the Publish button means there are unpublished updates.
• A build stops halfway. If credits run out mid-message, the message pauses and you can choose Add credits to resume or Finish up to stop.
• Cloud was enabled before you connected Supabase. There is no one-click fix. The docs' route is to export the Cloud data, connect Supabase to a new Lovable project and rebuild the schema.
• The Supabase project went quiet and stopped responding. Supabase's production checklist says free projects with low activity over 7 days may be paused; restore it from the dashboard.

Related reading: our Supabase tutorial explains the database you now own, and Lovable vs Bolt.new and Lovable vs Base44 compare the builder itself.

Lovable tutorial: FAQ