Supabase Introduction - Building Backends with BaaS

What You’ll Learn in This Tutorial

✓ Creating Supabase project
✓ Database operations
✓ Authentication features
✓ Storage
✓ Real-time features

Step 1: Create Project

1. Create account at supabase.com
2. Click New Project
3. Set project name and password
4. Select region (Tokyo recommended)

Step 2: Client Setup

npm install @supabase/supabase-js

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

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

Step 3: Database Operations

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

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

// Update
const { data, error } = await supabase
  .from('posts')
  .update({ title: 'Updated' })
  .eq('id', 1);

// Delete
const { error } = await supabase
  .from('posts')
  .delete()
  .eq('id', 1);

Step 4: Authentication

// Sign up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123'
});

// Login
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
});

// OAuth
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
});

// Logout
await supabase.auth.signOut();

// Get session
const { data: { session } } = await supabase.auth.getSession();

Step 5: Storage

// Upload
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`public/${userId}.png`, file);

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

// Delete
await supabase.storage
  .from('avatars')
  .remove([`public/${userId}.png`]);

Step 6: Real-time

// Watch for changes
const channel = supabase
  .channel('posts')
  .on('postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('Change received:', payload);
    }
  )
  .subscribe();

// Unsubscribe
supabase.removeChannel(channel);

Step 7: Row Level Security

-- Create policy (SQL Editor)
CREATE POLICY "Users can view own posts"
ON posts FOR SELECT
USING (auth.uid() = user_id);

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

Summary

Supabase is an open-source Firebase alternative with a powerful PostgreSQL-based BaaS. It integrates authentication, database, and storage seamlessly.