Supabase Integration

Instant backend for your AI-generated applications

What is Supabase?

Supabase is an open-source Firebase alternative that provides instant backend services including:

  • PostgreSQL Database
  • Authentication & Authorization
  • Real-time Subscriptions
  • Storage for Files
  • Edge Functions
  • Vector Embeddings

How to Connect Supabase

Prerequisites: You need to have a Supabase account and at least one Supabase project created. Visit supabase.com to create your free account and project first.

1

Navigate to Supabase Settings

In your project, click on the Supabase option in the left sidebar under your project settings.

2

Select a Supabase Project

From the dropdown list, you'll see your available Supabase projects. Select the one you want to connect:

  • • Projects are listed with their name and region (e.g., us-east-2)
  • • Click "Select" to connect a project
  • • Use "Refresh Projects" if you've recently created a new Supabase project
3

Automatic Configuration

Once connected, VibeFactory automatically configures these environment variables:

• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY

These variables are securely stored and automatically injected when your app runs.

4

Use Supabase Features

Once connected, you can use natural language to add Supabase features:

"Add user authentication with email and password using Supabase"

"Create a todos table in Supabase with CRUD operations"

Connection Status

In the Current Configuration section, you can see:

  • Project: The connected Supabase project name
  • Status: Connection status (Connected/Disconnected)
  • Last Updated: When the connection was last modified

Use the "Disconnect" button to remove the integration if needed.

Supported Features

Authentication

  • • Email/Password signup and login
  • • OAuth providers (Google, GitHub)
  • • Magic links
  • • Session management

Database

  • • PostgreSQL with full SQL support
  • • Real-time subscriptions
  • • Row Level Security (RLS)
  • • Auto-generated APIs

Storage

  • • File uploads and downloads
  • • Image transformations
  • • Public and private buckets
  • • CDN integration

Real-time

  • • Live data synchronization
  • • Presence detection
  • • Broadcast messages
  • • Collaborative features

Example Prompts

Here are some example prompts you can use to integrate Supabase features:

Authentication System

"Create a complete authentication system with Supabase including signup, login, logout, and protected routes"

Todo App Backend

"Build a todo app backend with Supabase that stores tasks per user with real-time updates"

File Upload

"Add image upload functionality using Supabase Storage with preview and delete capabilities"

Chat Application

"Create a real-time chat application using Supabase real-time subscriptions and presence"

Best Practices

✅ DO

  • • Use Row Level Security (RLS) for data protection
  • • Keep your service role key secret (server-side only)
  • • Use environment variables for credentials
  • • Implement proper error handling

❌ DON'T

  • • Don't expose service role key in client code
  • • Don't bypass RLS unless absolutely necessary
  • • Don't store sensitive data unencrypted
  • • Don't ignore database migration best practices

Common Issues

Connection Failed

If you can't connect to Supabase:

  • • Verify your project URL is correct
  • • Check that your anon key is properly copied
  • • Ensure your Supabase project is active
  • • Check CORS settings in Supabase dashboard
Authentication Not Working

Common authentication issues:

  • • Enable email auth in Supabase dashboard
  • • Configure OAuth providers properly
  • • Set correct redirect URLs
  • • Check email templates and SMTP settings
Database Queries Failing

Database troubleshooting:

  • • Check RLS policies are configured
  • • Verify table and column names
  • • Ensure user has proper permissions
  • • Check query syntax in Supabase logs