Supabase Integration

Add authentication, database, real-time subscriptions, and file storage to your app with Supabase - the open source Firebase alternative.

⚡ What Supabase Provides

🔐 Authentication

Email/password, magic links, social logins (Google, GitHub, Discord), phone auth, and anonymous users

🗄️ PostgreSQL Database

Full Postgres database with Row Level Security (RLS), real-time subscriptions, and automatic API generation

📁 File Storage

S3-compatible storage for images, videos, and files with CDN and transformations

⚙️ Edge Functions

Serverless TypeScript functions for backend logic, webhooks, and third-party integrations

🛠️ Setup Guide

Create a Supabase Project

Go to supabase.com and create a new project. You'll get a project URL and API keys.

Tip: Choose a region close to your users for best performance.

Add Environment Variables

In Spawned, go to your project settings and add these environment variables:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co

NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...

# Only for server-side operations:

SUPABASE_SERVICE_ROLE_KEY=eyJhbGc...

Use Our Pre-built Templates

Click the "Add Supabase" button in the Builder sidebar to add authentication or database features with one click.

Auth StarterCRUD TemplateReal-time Chat

🔐 Authentication

Supported Auth Methods

📧 Email/Password

Classic signup with email verification

✨ Magic Links

Passwordless login via email

🌐 Social OAuth

Google, GitHub, Discord, Twitter

Example: Login Component

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'

export function LoginButton() {
  const supabase = createClientComponentClient()
  
  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${location.origin}/auth/callback`
      }
    })
  }
  
  return (
    <button onClick={handleLogin}>
      Sign in with Google
    </button>
  )
}

🗄️ Database

Creating Tables

Create tables in the Supabase dashboard or by asking Spawned. We'll generate the SQL for you:

-- Example: Posts table with user relationship
CREATE TABLE posts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  content TEXT,
  published BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

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

Querying Data

// Fetch all published posts
const { data, error } = await supabase
  .from('posts')
  .select('*')
  .eq('published', true)
  .order('created_at', { ascending: false })

// Insert a new post
const { data, error } = await supabase
  .from('posts')
  .insert({ title: 'Hello', content: 'World' })
  .select()
  .single()

// Real-time subscription
supabase
  .channel('posts')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => console.log('Change:', payload)
  )
  .subscribe()

📁 File Storage

Uploading Files

// Upload a file
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.png`, file, {
    cacheControl: '3600',
    upsert: true
  })

// Get public URL
const { data: { publicUrl } } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`)

💡 Pro Tip: Image Transformations

Supabase can resize and optimize images on-the-fly. Add parameters to your URL: ?width=200&height=200

💬 Example Prompts

Authentication

"Add user authentication with Supabase. Include email/password signup, login, and logout. Show user profile in the navbar."
"Add Google OAuth login with Supabase. Redirect to dashboard after login."
"Create a protected route that redirects to login if user is not authenticated."

Database & CRUD

"Create a posts table in Supabase with title, content, and author. Display posts on the homepage with pagination."
"Add a todo list that saves to Supabase. Include add, complete, and delete functionality."
"Create a real-time comments section using Supabase subscriptions."

File Storage