Connecting Supabase
Connect your Lovable app to a real Supabase database so data is stored permanently and survives page refreshes.
The Problem With Sample Data
You built a client tracker in Lovable. It looks great. You added ten sample rows. You shared the URL with a colleague and they opened it on their phone.
They saw the same ten sample rows you built. Not real client data — just the placeholder data Lovable generated.
And when you refresh the page? The data resets. Every time.
This is the fundamental limitation of a Lovable app without a database: the data is baked into the code. It never changes unless you go back into Lovable and change it manually. Nobody can add records through the app and have them persist.
This is where Supabase comes in.
The Excel Analogy
Think of your Lovable app as the formatted, client-facing Excel report — the one with the pivot tables, the charts, the conditional formatting. It looks professional and is easy to read.
Now think of Supabase as the raw data sheet behind that report. Every number in the formatted report is pulled from the raw sheet. When someone updates the raw sheet, the formatted report updates automatically.
Supabase is the raw data sheet. Lovable is the formatted frontend. Connecting them means your app can read and write real, permanent data — not just display whatever was typed into the code.
What You Need Before Connecting
Before you connect Supabase to your Lovable project, you need a Supabase project set up. If you have not done that yet, complete the Supabase setup module first.
From your Supabase project, you will need two values:
- Project URL — looks like
https://abcdefghijklmnop.supabase.co - Anon (Public) Key — a long string of letters and numbers starting with
eyJ
Both of these are found in your Supabase project under Project Settings → API.
The anon key is the public key — safe to use in your frontend app. Supabase also has a service role key which is secret and should never go into Lovable or any frontend tool. If you are unsure which key you are looking at, check the label carefully. Anon = safe. Service role = secret.
Connecting Lovable to Supabase
Open Your Lovable Project
Go to lovable.dev, log in, and open the project you want to connect to Supabase. You should see the editor with the preview pane on the right.
Find the Supabase Integration
Look at the left panel — the editor/settings area. Lovable has a dedicated section for integrations. You are looking for a Supabase option. Depending on the version of Lovable you are using, this might be:
- A Supabase button or card in the left panel
- An Integrations tab with Supabase listed as an option
- A database icon in the sidebar
Click on it.
Enter Your Supabase Project URL
A form or panel will appear asking for your Supabase connection details. The first field is your Project URL.
Copy the URL from your Supabase project settings and paste it here. It should look exactly like:
https://abcdefghijklmnop.supabase.co
Make sure there is no trailing slash at the end.
Enter Your Anon Key
The second field is your Anon Key (sometimes labeled as "Public Key" or "API Key").
Copy the anon key from Supabase and paste it into this field. It is a long string — that is normal.
The anon key in Supabase looks like a JWT token — it starts with eyJ and is several hundred characters long. If what you are pasting is much shorter, you may have copied the wrong thing. Go back to Supabase Project Settings → API and copy the correct key.
Save the Connection
Click Save, Connect, or Apply — whatever the confirmation button says.
Lovable will verify the connection. If the URL and key are correct, you will see a success confirmation. If you see an error, double-check that:
- The URL has no typo (copy-paste is safest, do not type it manually)
- You used the anon key, not the service role key
- Your Supabase project is active (not paused — free tier projects pause after a period of inactivity)
Check — A successful connection shows a green checkmark or "Connected" status next to the Supabase integration in Lovable. If you see an error instead, confirm your Supabase project is not paused (free tier projects pause after inactivity — go to your Supabase dashboard and click "Restore" if needed).
How Lovable Auto-Generates the Database Structure
Once connected, something impressive happens: Lovable can look at the data your app is working with and suggest (or automatically create) the right database tables in Supabase.
For example, your invoice tracker app has invoices with fields like client name, amount, due date, and status. Lovable understands this structure and can create a Supabase table called invoices with the appropriate columns.
How this works in practice:
After connecting, you may see a prompt in Lovable asking if you want to set up the database. Clicking yes causes Lovable to:
- Analyze the data structure your app uses
- Generate SQL to create the necessary tables in Supabase
- Run that SQL against your Supabase project
- Update your app's code to read from and write to Supabase instead of using hardcoded sample data
You can also guide this process by telling Lovable in the chat what tables you want:
"Set up the Supabase database for this app. Create an 'invoices' table with columns: id (uuid, primary key), client_name (text), invoice_number (text), amount (numeric), invoice_date (date), due_date (date), status (text — one of: Paid, Unpaid, Overdue), created_at (timestamp)."
Verifying That Data Flows Correctly
After the database is set up, test the connection end-to-end.
Add a Real Record Through the App
In your Lovable app preview, find the form or button that adds a new record. Fill in real (non-sample) data and submit it. For an invoice tracker: enter a real client name, a real amount, and today's date as the invoice date.
Check Supabase Directly
Open your Supabase dashboard in another browser tab. Go to Table Editor in the left sidebar, then find your table (e.g., invoices).
If the connection is working, you will see the record you just submitted in the table — with the exact values you entered. This is the moment where it clicks: the data is no longer in the app's code. It is in a real database.
Refresh the App
Go back to your Lovable app preview and refresh the page. The record you added should still be there, loaded from the database. This is the crucial difference from sample data — it persists across refreshes, devices, and users.
Try From a Different Device (Optional but Powerful)
Open your Lovable app URL on your phone. Add another record. Then go back to your laptop and refresh the app. You will see the record you added from your phone — two different devices writing to and reading from the same database.
Where to See the Generated Supabase Tables
Your Supabase project has several ways to view and manage the tables Lovable created:
Table Editor: In your Supabase dashboard left sidebar, click Table Editor. This shows all your tables with a spreadsheet-like view of the data. You can add, edit, and delete records directly here — like editing the raw data sheet in Excel.
SQL Editor:
For more advanced queries, click SQL Editor. You can run any SQL query against your database. For example, to see all overdue invoices: SELECT * FROM invoices WHERE status = 'Overdue'.
Database → Tables: This section shows the full schema — the structure of each table, including column names, data types, constraints, and relationships between tables.
Tables created by Lovable are real Supabase tables. You can add indexes, relationships, and RLS policies to them through the Supabase dashboard just like any other table. The Supabase module of this training covers these concepts in depth.
A Note on Row Level Security
When Lovable creates tables in Supabase, it may or may not configure Row Level Security (RLS) automatically. RLS is a Supabase feature that controls who can read and write which rows in your database.
For a prototype or learning project, this is fine. For anything you share publicly or use with real client data, you will want to review the RLS settings.
The Supabase module of this training covers RLS in detail. For now, be aware that:
- If your app is read-only and shows public data, RLS may not need to be configured
- If your app stores sensitive data (client names, financial figures, PAN numbers), you will need to set up proper access controls before sharing it with real users
Never store real client data — actual PAN numbers, GST numbers, financial amounts belonging to real clients — in a Lovable/Supabase prototype without first configuring proper security. Use realistic-looking sample data for learning and demonstration.
Troubleshooting Common Connection Issues
"Connection failed" or "Invalid API key": Check that you copied the anon key (not the service role key) and that it has no extra spaces at the beginning or end. Paste into a plain text editor first to verify, then paste from there into Lovable.
"Project not found" or "404 error": Your Supabase project URL may be wrong. Go to Supabase dashboard → Project Settings → API and copy the URL directly from there. Also check that your project is not paused (free tier projects pause after 1 week of inactivity — you can restore them from the dashboard).
Data is not appearing after adding a record: Check the Supabase Table Editor directly. If the record is there but not showing in the app, there may be a caching or RLS issue. If the record is not in Supabase either, the write operation failed — check the browser console for error messages (F12 in Chrome → Console tab).
Tables were not created: Try prompting Lovable directly: "Set up the Supabase database tables for this app." You can also create the tables manually in Supabase and describe them to Lovable so it knows how to read from them.
Verification for this section: You have successfully connected Supabase if you can add a record through the Lovable app, see it appear in the Supabase Table Editor, and confirm it persists after a page refresh.