Introduccion a Supabase - Construye backends con BaaS

Lo que aprenderas en este tutorial

✓ Crear proyecto Supabase
✓ Operaciones de base de datos
✓ Funcionalidad de autenticacion
✓ Almacenamiento
✓ Funcionalidad en tiempo real

Step 1: Crear proyecto

1. Crear cuenta en supabase.com
2. Clic en New Project
3. Configurar nombre del proyecto y contrasena
4. Seleccionar region (Tokyo recomendado)

Step 2: Configuracion del cliente

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: Operaciones de base de datos

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

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

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

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

Step 4: Autenticacion

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

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

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

// Cerrar sesion
await supabase.auth.signOut();

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

Step 5: Almacenamiento

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

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

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

Step 6: Tiempo real

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

// Cancelar suscripcion
supabase.removeChannel(channel);

Step 7: Row Level Security

-- Crear politica (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);

Resumen

Supabase es una alternativa de codigo abierto a Firebase, un potente BaaS basado en PostgreSQL. Permite manejar autenticacion, base de datos y almacenamiento de forma integrada.