Intermediate

Database & Auth

Connect Supabase to your Lovable app for a full backend: PostgreSQL database, user authentication, row-level security, file storage, and real-time data.

Connecting Supabase

Supabase is an open-source Firebase alternative that provides a PostgreSQL database, authentication, file storage, and real-time subscriptions. Lovable has built-in Supabase integration:

1. Create a free account at supabase.com
2. Create a new Supabase project
3. In your Lovable project, click the Supabase integration button
4. Enter your Supabase project URL and anon key (found in Settings → API)
5. Lovable connects automatically and can now read/write your database

Creating Tables and Schemas

You can ask Lovable to create database tables through the chat:

"Create a Supabase table called 'products' with columns:
- id (uuid, primary key, auto-generated)
- name (text, required)
- description (text)
- price (numeric, required)
- category (text)
- image_url (text)
- created_at (timestamp, default now())
- user_id (uuid, references auth.users)"

Lovable generates the SQL migration and creates the table in your Supabase project. It also updates your app code to query the new table.

User Authentication

Lovable can add authentication to your app using Supabase Auth:

Email/Password Authentication

"Add user authentication with:
- Sign up page with email and password
- Login page with email and password
- Password reset flow with email
- Redirect to dashboard after login
- Show user email in the header when logged in
- Logout button"

Social Login

"Add Google and GitHub social login options to the auth pages.
Show them as buttons above the email/password form with
a 'or' divider between them."

Row-Level Security (RLS)

RLS ensures users can only access data they're authorized to see:

"Add row-level security to the products table so that:
- Anyone can view products (SELECT)
- Only authenticated users can create products (INSERT)
- Users can only update their own products (UPDATE where user_id matches)
- Users can only delete their own products (DELETE where user_id matches)"

Lovable generates the appropriate RLS policies in Supabase. Always enable RLS on tables that contain user data.

API Endpoints

Supabase automatically creates REST and GraphQL APIs for your tables. Lovable uses the Supabase JavaScript client to interact with these:

// Example generated code for fetching products
const { data, error } = await supabase
  .from('products')
  .select('*')
  .order('created_at', { ascending: false });

// Insert a new product
const { data, error } = await supabase
  .from('products')
  .insert({
    name: 'New Product',
    price: 29.99,
    category: 'electronics',
    user_id: user.id
  });

File Storage

Supabase Storage lets you handle file uploads:

"Add image upload to the product form. Store images in
Supabase Storage and display them in the product cards.
Accept PNG, JPG, and WebP files up to 5MB."

Lovable creates a storage bucket, handles the upload logic, and generates public URLs for displaying the images.

Real-Time Subscriptions

Supabase supports real-time data with PostgreSQL's built-in replication:

"Make the chat messages update in real-time. When any user
sends a message, it should appear immediately for all users
without refreshing the page."

Lovable sets up Supabase real-time subscriptions so your UI updates automatically when data changes in the database.

Environment Variables

Sensitive configuration should be stored as environment variables:

• VITE_SUPABASE_URL — Your Supabase project URL
• VITE_SUPABASE_ANON_KEY — Your Supabase anon (public) key

These are safe to expose client-side because RLS policies protect your data. Never expose service role keys in client-side code.