Lovable + Supabase

By default, Lovable apps store data in the browser's local storage—which means data disappears if users clear their browser or switch devices. To build real applications with persistent data and user accounts, you need a backend. Lovable's native integration with Supabase makes this straightforward.

Why Supabase?

Supabase is an open-source Firebase alternative that provides:

• PostgreSQL Database: Relational database for structured data
• Authentication: User sign-up, login, and social auth
• Storage: File uploads and management
• Real-time: Live data subscriptions
• Edge Functions: Serverless backend logic

Lovable has built-in support for Supabase, making it the easiest backend option for AI-generated apps.

Setting Up Supabase

Step 1: Create a Supabase Account

1. Go to supabase.com
2. Click "Start your project"
3. Sign up with GitHub (recommended) or email
4. Create a new organization if prompted

Step 2: Create a New Project

1. Click "New Project"
2. Enter a project name (e.g., "my-lovable-app")
3. Set a strong database password (save this!)
4. Choose a region close to your users
5. Click "Create new project"

Wait 1-2 minutes for your project to provision.

Step 3: Get Your API Keys

Once your project is ready:

1. Go to Settings → API in Supabase
2. Copy these values:
   • Project URL (looks like https://xxxxx.supabase.co)
   • anon public key (safe for client-side use)

Connecting Lovable to Supabase

Step 1: Open Lovable Settings

In your Lovable project:

1. Click the Settings icon (gear)
2. Navigate to Integrations or Supabase

Step 2: Enter Your Credentials

Paste your Supabase credentials:

• Supabase URL: Your project URL
• Supabase Anon Key: Your public API key

Step 3: Test the Connection

Lovable will verify the connection. You should see a success message.

Adding Database Features

Once connected, you can prompt Lovable to use the database:

Basic Data Storage

Save all tasks to Supabase so they persist across sessions.
Create a 'tasks' table with these columns:
- id (auto-generated)
- title (text)
- completed (boolean)
- created_at (timestamp)

User-Specific Data

Each user should only see their own tasks.
Add a user_id column to the tasks table that references the logged-in user.
Filter tasks to show only the current user's tasks.

Relationships Between Data

Add projects to organize tasks. Each project has:
- id, name, color, user_id

Each task belongs to a project.
Add a project_id column to tasks.
Show tasks grouped by project on the dashboard.

Adding Authentication

Basic Sign Up/Login

Add user authentication to the app:
- Sign up page with email and password
- Login page
- Protected routes that require login
- User profile page showing email
- Logout button in the header

Lovable will:

1. Create the necessary pages
2. Set up Supabase Auth
3. Handle session management
4. Protect routes appropriately

Social Login

Add Google and GitHub login options to the authentication flow.
Show social login buttons above the email/password form.

Note: You'll need to configure OAuth in your Supabase dashboard for social logins to work.

Password Reset

Add "Forgot Password" functionality:
- Link on login page
- Password reset request page
- Handle the reset confirmation

Database Schema Design

When prompting for database features, think about your data structure:

Simple Example

Create a database schema for a recipe app:

Tables:
1. recipes
   - id (uuid, primary key)
   - title (text)
   - description (text)
   - ingredients (text array)
   - instructions (text)
   - cook_time (integer, minutes)
   - user_id (references auth.users)
   - created_at (timestamp)

2. favorites
   - user_id (references auth.users)
   - recipe_id (references recipes)
   - primary key (user_id, recipe_id)

Prompting for the Schema

You can either:

Option A: Let Lovable design it

Add the ability to save favorite recipes.
Users should see a heart icon they can click to favorite/unfavorite.
Show a "My Favorites" page with all favorited recipes.

Option B: Specify the schema

Create a favorites table in Supabase:
- user_id (uuid, references auth.users)
- recipe_id (uuid, references recipes)
- Primary key on both columns

Add a heart button to recipe cards.
Clicking toggles the favorite status.

Row-Level Security (RLS)

Supabase uses Row-Level Security to protect data. Lovable can set this up:

Enable Row-Level Security on the tasks table:
- Users can only see their own tasks
- Users can only create tasks for themselves
- Users can only update and delete their own tasks

Understanding RLS Policies

When you ask Lovable to implement user-specific data, it typically creates policies like:

-- Users can view their own tasks
CREATE POLICY "Users can view own tasks"
ON tasks FOR SELECT
USING (auth.uid() = user_id);

-- Users can insert their own tasks
CREATE POLICY "Users can insert own tasks"
ON tasks FOR INSERT
WITH CHECK (auth.uid() = user_id);

You don't need to write this SQL—Lovable generates it. But understanding what it does helps you prompt effectively.

Real-Time Features

Supabase supports real-time updates. You can prompt for live features:

Make the task list update in real-time.
When tasks are added, updated, or deleted (even in another browser tab),
the list should automatically refresh.

Use Cases for Real-Time

• Collaborative editing
• Live notifications
• Chat applications
• Dashboard metrics that update automatically

File Storage

Supabase includes file storage for uploads:

Allow users to upload a profile picture.
Store the image in Supabase Storage.
Display it in the header and profile page.
Limit uploads to images under 2MB.

More Complex Storage

Add image uploads to recipes:
- Users can upload multiple images per recipe
- Images are stored in Supabase Storage
- First image is the main thumbnail
- Gallery view on recipe detail page

Common Integration Patterns

Pattern 1: Guest Mode to Account

Let users use the app without signing up (store data locally).
Add a "Create Account" option to save their data permanently.
When they sign up, migrate their local data to Supabase.

Pattern 2: Admin vs Regular Users

Add an admin role:
- Regular users can only see and manage their own content
- Admins can see all content and manage users
- Add an admin dashboard page (only visible to admins)

Store the role in a 'profiles' table linked to auth.users.

Pattern 3: Shared Resources

Add team functionality:
- Users can create teams
- Users can invite others via email
- Team members can all access shared projects
- Each project has an owner who can delete it

Debugging Supabase Issues

Data Not Saving

"When I create a task, it appears briefly then disappears.
Check the Supabase connection and RLS policies."

Authentication Not Working

"Users can sign up but can't log in.
Debug the authentication flow and show any error messages."

Permission Errors

"I'm getting 'permission denied' errors when loading tasks.
Review the RLS policies on the tasks table."

Managing Your Database

In Supabase Dashboard

You can always view and edit data directly in Supabase:

1. Go to Table Editor in Supabase
2. View, add, edit, or delete records
3. Run SQL queries in the SQL Editor

Through Lovable

Add an admin page where I can:
- View all users
- See user activity statistics
- Delete spam accounts

Summary

• Supabase provides database, auth, and storage for Lovable apps
• Connect by adding your Supabase URL and anon key in Lovable settings
• Prompt for features and Lovable generates the integration code
• Row-Level Security protects user data
• Real-time and file storage are available when needed
• Always test thoroughly after adding backend features

Next Steps

With backend integration working, let's learn how to effectively iterate on your app using Lovable's chat mode.