Supabase Integration

Overview

Supabase is an open-source Firebase alternative that provides PostgreSQL database, authentication, real-time subscriptions, and storage. This guide walks you through integrating Supabase into your Emergent application.

What You'll Build

By the end of this guide, you'll have:

• Supabase PostgreSQL database connected
• CRUD operations for your data
• Real-time subscriptions (optional)
• Supabase Authentication (optional)
• File storage (optional)

Prerequisites

Step 1: Create Supabase Project & Get Credentials

Create Supabase Project

1. Go to https://supabase.com
2. Sign up or log in
3. Click New Project
4. Fill in project details:
   • Name: Your project name
   • Database Password: Strong password (save this!)
   • Region: Choose closest to your users
5. Click Create new project
6. Wait ~2 minutes for project initialization

Get Your Credentials

1. Once project is ready, go to Settings → API
2. Copy these three values:

Step 2: Request Integration from Emergent Agent

Basic Database Integration

26Copy
I need to integrate Supabase PostgreSQL database:

Purpose: Replace MongoDB with PostgreSQL for [your use case]

Supabase Credentials:
- Project URL: https://xxxxx.supabase.co
- Anon Key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
- Service Role Key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Database Tables Needed:
- users: id (uuid), email (text), name (text), created_at (timestamp)
- posts: id (uuid), user_id (uuid), title (text), content (text), created_at (timestamp)
- comments: id (uuid), post_id (uuid), user_id (uuid), content (text), created_at (timestamp)

Features Required:
- CRUD operations for all tables
- Backend API endpoints
- Frontend client for data fetching
- Foreign key relationships

Technical Setup:
- Backend: Supabase Python client for API endpoints
- Frontend: Supabase JS client for direct queries
- Create SQL migration script for tables

Please call integration_playbook_expert for Supabase setup.

With Authentication

24Copy
I need Supabase with database and authentication:

Purpose: PostgreSQL database + Google social login

Supabase Credentials:
- Project URL: https://xxxxx.supabase.co
- Anon Key: eyJhbGci...
- Service Role Key: eyJhbGci...

Database Tables:
[List your tables]

Authentication:
- Google social login
- Email/password signup
- Protected routes
- User session management

Setup:
- Backend: API with Supabase auth
- Frontend: Login UI + auth context
- Database: User profiles table

Please call integration_playbook_expert.

With Real-Time Features

24Copy
I need Supabase with real-time subscriptions:

Purpose: Chat app with real-time message updates

Supabase Credentials:
- Project URL: https://xxxxx.supabase.co
- Anon Key: eyJhbGci...
- Service Role Key: eyJhbGci...

Real-Time Features:
- Subscribe to new messages
- Live updates without refresh
- Typing indicators
- Online presence

Database Tables:
- messages: id, room_id, user_id, content, created_at
- rooms: id, name, created_at

Setup:
- Backend: Message API endpoints
- Frontend: Real-time subscription to messages table

Please call integration_playbook_expert.

Step 3: What the Integration Agent Will Create

Backend Implementation

1. Environment Variables (/app/backend/.env)

2Copy
SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_KEY=your_service_role_key_here

2. Supabase Client Setup

6Copy
from supabase import create_client, Client
import os

supabase_url = os.environ.get("SUPABASE_URL")
supabase_key = os.environ.get("SUPABASE_KEY")
supabase: Client = create_client(supabase_url, supabase_key)

3. API Endpoints

Frontend Implementation

1. Environment Variables (/app/frontend/.env)

2Copy
REACT_APP_SUPABASE_URL=https://xxxxx.supabase.co
REACT_APP_SUPABASE_ANON_KEY=your_anon_key_here

2. Supabase Client Setup

7Copy
// src/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

3. Using Supabase in Components

Step 4: Create Database Tables in Supabase

Method 1: Using Supabase Dashboard (Recommended)

Method 2: Using SQL Editor

1. Go to SQL Editor in Supabase Dashboard
2. Create a new query
3. Run this SQL:

30Copy
-- Create users table
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create posts table
CREATE TABLE posts (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  content TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create comments table
CREATE TABLE comments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  post_id UUID REFERENCES posts(id) ON DELETE CASCADE,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  content TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create indexes for better performance
CREATE INDEX idx_posts_user_id ON posts(user_id);
CREATE INDEX idx_comments_post_id ON comments(post_id);
CREATE INDEX idx_comments_user_id ON comments(user_id);

Method 3: Ask Agent to Generate SQL

27Copy
Can you create SQL migration for Supabase with these tables:

**users table:**
- id (uuid, primary key)
- email (text, unique)
- name (text)
- avatar_url (text, nullable)
- created_at (timestamp)

**posts table:**
- id (uuid, primary key)
- user_id (uuid, foreign key to users)
- title (text)
- content (text)
- published (boolean, default false)
- created_at (timestamp)

**tags table:**
- id (uuid, primary key)
- name (text, unique)

**post_tags table (many-to-many):**
- post_id (uuid, foreign key to posts)
- tag_id (uuid, foreign key to tags)
- primary key (post_id, tag_id)

Include indexes for foreign keys and commonly queried fields.

Step 5: Enable Real-Time (Optional)

Enable Real-Time for Tables

1. In Supabase Dashboard, go to Database → Replication
2. Find your table (e.g., "messages")
3. Toggle Real-time to enabled
4. Click Save

Frontend Real-Time Subscription

Already shown in Step 3 - Frontend Implementation section.

Step 6: Setup Row Level Security (RLS)

What is RLS?

Row Level Security allows you to restrict which rows users can see and modify based on policies.

Enable RLS

1. Go to Authentication → Policies
2. Select your table
3. Click Enable RLS

Create Policies

Example: Users can only see their own data

23Copy
-- Policy: Users can read their own posts
CREATE POLICY "Users can view own posts"
  ON posts
  FOR SELECT
  USING (auth.uid() = user_id);

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

-- Policy: Users can update their own posts
CREATE POLICY "Users can update own posts"
  ON posts
  FOR UPDATE
  USING (auth.uid() = user_id);

-- Policy: Users can delete their own posts
CREATE POLICY "Users can delete own posts"
  ON posts
  FOR DELETE
  USING (auth.uid() = user_id);

Example: Public read, authenticated write

12Copy
-- Anyone can read posts
CREATE POLICY "Public posts are visible"
  ON posts
  FOR SELECT
  USING (published = true);

-- Authenticated users can create posts
CREATE POLICY "Authenticated users can create posts"
  ON posts
  FOR INSERT
  TO authenticated
  WITH CHECK (true);

Step 7: Setup Supabase Authentication (Optional)

Enable Auth Providers

1. Go to Authentication → Providers
2. Enable desired providers:
   • Email/Password
   • Google
   • GitHub
   • etc.

Google OAuth Setup

Frontend Auth Implementation

39Copy
import { supabase } from './supabaseClient'

// Sign up with email
const signUp = async (email, password) => {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  })
  if (error) console.error('Error:', error)
  return data
}

// Sign in with email
const signIn = async (email, password) => {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })
  if (error) console.error('Error:', error)
  return data
}

// Sign in with Google
const signInWithGoogle = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
  })
}

// Sign out
const signOut = async () => {
  const { error } = await supabase.auth.signOut()
}

// Get current user
const getUser = async () => {
  const { data: { user } } = await supabase.auth.getUser()
  return user
}

Step 8: Test the Integration

Step 9: Deploy

Configure Environment Variables

In Emergent deployment settings, add:

Backend:

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_KEY=your_service_role_key

Frontend:

REACT_APP_SUPABASE_URL=https://xxxxx.supabase.co
REACT_APP_SUPABASE_ANON_KEY=your_anon_key

Pre-Deployment Checklist

• All tables created in Supabase
• RLS policies configured (if using)
• Environment variables set
• Auth providers configured (if using)
• Real-time enabled on required tables (if using)
• Tested in Preview mode

Common Use Cases

Use Case 1: Blog Platform

17Copy
I need Supabase for a blog platform:

**Tables:**
- users: author profiles
- posts: blog posts with rich content
- comments: reader comments
- tags: post categorization

**Features:**
- CRUD for posts
- Real-time comments
- User authentication
- Post search and filtering

Supabase credentials: [will provide]

Please call integration_playbook_expert.

Use Case 2: Real-Time Chat

18Copy
I need Supabase for a chat application:

**Tables:**
- users: user profiles
- rooms: chat rooms
- messages: chat messages
- room_members: room membership

**Features:**
- Real-time message updates
- Typing indicators
- Online presence
- Message history
- User authentication

Supabase credentials: [will provide]

Please call integration_playbook_expert.

Troubleshooting

4Copy
Supabase connection failing with error:
[paste error]

Can you verify the Supabase client configuration?

6Copy
Supabase queries returning empty due to RLS.

Can you:
1. Check RLS policies
2. Update policies to allow [operation]
3. Or guide me to disable RLS for testing

5Copy
Real-time subscriptions not working for [table].

Updates in database but not appearing in UI.

Can you debug the real-time subscription code?

Best Practices

Additional Resources

Quick Reference

Integration Prompt

7Copy
Integrate Supabase:

Credentials: [URL, anon key, service role key]
Tables: [List tables]
Features: [CRUD, real-time, auth]

Please call integration_playbook_expert.

Common Queries

20Copy
// Select all
supabase.from('table').select('*')

// Select specific columns
supabase.from('table').select('id, name')

// With filter
supabase.from('table').select('*').eq('status', 'active')

// With join
supabase.from('posts').select('*, users(name, email)')

// Insert
supabase.from('table').insert([{...}])

// Update
supabase.from('table').update({...}).eq('id', id)

// Delete
supabase.from('table').delete().eq('id', id)