Supabase

Full-stack applications with Supabase backend

Features

• PostgreSQL database with Row Level Security
• Real-time subscriptions
• Authentication with social providers
• File storage with CDN
• Edge Functions
• Vector embeddings for AI

Quick Start

npx capx-compose@latest my-app --plugins= supabase
cd my-app
npm run dev

Configuration

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_KEY=your_service_key

Client Setup

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export default supabase;

Authentication

Email/Password Auth

async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      emailRedirectTo: `${window.location.origin}/auth/callback`,
    },
  });
  
  return { data, error };
}

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
  
  return { data, error };
}

Social Authentication

async function signInWithProvider(provider: 'google' | 'github' | 'twitter') {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  });
  
  return { data, error };
}

Session Management

function useUser() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // Get initial session
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
    });
    
    // Listen for auth changes
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null);
      }
    );
    
    return () => subscription.unsubscribe();
  }, []);
  
  return user;
}

Database Operations

CRUD Operations

// Create
async function createPost(post: Post) {
  const { data, error } = await supabase
    .from('posts')
    .insert(post)
    .select()
    .single();
  
  return { data, error };
}

// Read
async function getPosts() {
  const { data, error } = await supabase
    .from('posts')
    .select('*, author:users(name, avatar)')
    .order('created_at', { ascending: false });
  
  return { data, error };
}

// Update
async function updatePost(id: string, updates: Partial<Post>) {
  const { data, error } = await supabase
    .from('posts')
    .update(updates)
    .eq('id', id)
    .select()
    .single();
  
  return { data, error };
}

// Delete
async function deletePost(id: string) {
  const { error } = await supabase
    .from('posts')
    .delete()
    .eq('id', id);
  
  return { error };
}

Best Practices

1. RLS Policies: Always enable Row Level Security
2. Type Safety: Generate TypeScript types from schema
3. Connection Pooling: Use connection pooling for high traffic
4. Caching: Implement proper caching strategies
5. Error Handling: Handle network and permission errors

Resources

• Supabase Documentation
• Supabase GitHub
• SQL Editor