🔥 2.12 · Supabase: el backend como servicio (BaaS) más moderno

🎯 Objetivo del tema

🗺️ Mapa del tema

En los temas anteriores construiste tu backend desde cero: Express, JWT, PostgreSQL, MongoDB, deploy. Funciona, pero toma tiempo. Hoy aprenderás BaaS (Backend as a Service): Supabase te da auth, BD PostgreSQL, storage, realtime, y edge functions como servicios listos para usar. Tú solo defines la lógica de tu app. Es la elección de muchas startups en 2024-2025 para acelerar el time-to-market.

2.12.1 Qué es BaaS y por qué Supabase

BaaS (Backend as a Service) es un modelo donde un proveedor te da el backend listo para usar: autenticación, BD, storage, realtime, funciones. Tú solo defines las reglas de tu app. Supabase es la alternativa open source a Firebase (Google): usa PostgreSQL real (no NoSQL) y es 100% open source. En 2024-2025, es la opción más popular para startups y proyectos rápidos.

2.12.2 Auth: autenticación lista para usar

Supabase Auth te da autenticación completa sin escribir código de backend: email/password, magic links (login por email sin contraseña), OAuth (Google, GitHub, etc.), y manejo de sesiones. Solo configuras en el dashboard y usas la SDK en tu frontend. Es la forma más rápida de tener auth production-ready.

// Instalación: npm install @supabase/supabase-js
import { createClient } from '@supabase/supabase-js';

// Conectar a tu proyecto de Supabase (en .env, NO subir a Git)
const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY  // 'anon' = puede ser público, pero con RLS está protegido
);

// REGISTRO: email + password
export async function registrar(email, password) {
  const { data, error } = await supabase.auth.signUp({ email, password });
  if (error) throw error;
  return data.user;
}

// LOGIN: email + password
export async function login(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) throw error;
  return { user: data.user, session: data.session };
}

// LOGIN con magic link (sin contraseña, solo email)
export async function loginConMagicLink(email) {
  const { data, error } = await supabase.auth.signInWithOtp({ email });
  if (error) throw error;
  return data;  // el usuario recibe un link por email
}

// LOGIN con Google OAuth
export async function loginConGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google' });
  if (error) throw error;
  return data;
}

// LOGOUT
export async function logout() {
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
}

// OBTENER el usuario actual
export async function getUser() {
  const { data: { user } } = await supabase.auth.getUser();
  return user;
}

Auth de Supabase: registro, login, magic link, OAuth

2.12.3 PostgreSQL con Row Level Security (RLS)

RLS (Row Level Security) es la característica de Supabase/PostgreSQL que hace que cada usuario SOLO pueda ver/modificar SUS PROPIOS datos, sin que tengas que escribir la lógica en tu backend. Se configura con políticas SQL a nivel de fila. Es la magia que hace a Supabase seguro para apps multi-tenant.

Ejemplo: tabla 'posts' con RLS

-- 1. Crear la tabla (normal)
CREATE TABLE posts (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) NOT NULL,
  titulo TEXT NOT NULL,
  contenido TEXT NOT NULL,
  creado_en TIMESTAMPTZ DEFAULT NOW()
);

-- 2. ACTIVAR RLS (CRÍTICO: sin esto, todas las políticas son ignoradas)
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- 3. Política: cada user solo ve SUS posts
CREATE POLICY "Users can view their own posts"
ON posts FOR SELECT
USING (auth.uid() = user_id);

-- 4. Política: cada user solo puede insertar posts con SU user_id
CREATE POLICY "Users can insert their own posts"
ON posts FOR INSERT
WITH CHECK (auth.uid() = user_id);

-- 5. Política: cada user solo puede actualizar SUS posts
CREATE POLICY "Users can update their own posts"
ON posts FOR UPDATE
USING (auth.uid() = user_id);

-- 6. Política: cada user solo puede eliminar SUS posts
CREATE POLICY "Users can delete their own posts"
ON posts FOR DELETE
USING (auth.uid() = user_id);

-- Ahora: si user A intenta ver los posts de user B, la query devuelve [].
-- Si user A intenta crear un post con user_id = user B, falla.
-- La seguridad está en la BD, no en tu código. No hay manera de saltársela desde el frontend.

Row Level Security: políticas por usuario

2.12.4 Storage: subir y servir archivos

Supabase Storage te permite subir y servir archivos: imágenes de perfil, fotos de productos, PDFs, videos. Es el equivalente open source de AWS S3, con la misma interfaz simple. Tiene políticas de acceso (públicas, privadas, o por usuario) e integración nativa con tu auth.

// Subir una imagen de perfil del usuario actual
export async function subirAvatar(file) {
  const user = await getUser();
  const fileExt = file.name.split('.').pop();
  const fileName = `${user.id}-${Date.now()}.${fileExt}`;
  const filePath = `avatars/${fileName}`;

  const { data, error } = await supabase.storage
    .from('avatars')  // nombre del bucket
    .upload(filePath, file, { cacheControl: '3600', upsert: true });

  if (error) throw error;

  // Obtener la URL pública (si el bucket es público)
  const { data: { publicUrl } } = supabase.storage
    .from('avatars')
    .getPublicUrl(filePath);

  return publicUrl;
}

// Subir un archivo privado (solo el dueño puede acceder)
export async function subirArchivoPrivado(file) {
  const user = await getUser();
  const filePath = `${user.id}/${file.name}`;

  const { data, error } = await supabase.storage
    .from('archivos-privados')
    .upload(filePath, file);

  if (error) throw error;
  return filePath;
}

// Generar una URL temporal (válida por 1 hora)
export async function getUrlPrivada(filePath) {
  const { data: { signedUrl }, error } = await supabase.storage
    .from('archivos-privados')
    .createSignedUrl(filePath, 3600);  // 1 hora
  if (error) throw error;
  return signedUrl;
}

// Eliminar archivo
export async function eliminarArchivo(bucket, filePath) {
  const { error } = await supabase.storage
    .from(bucket)
    .remove([filePath]);
  if (error) throw error;
}

Storage: subir, obtener URL pública, URL temporal

2.12.5 Realtime: suscripciones en vivo

Supabase Realtime te permite suscribirte a cambios en tu BD: cuando alguien inserta un post, tu UI se actualiza automáticamente. Sin recargar, sin polling, sin WebSockets manuales. Es ideal para chats, dashboards en vivo, feeds de actividad, y cualquier UI que necesite mostrar datos actualizados en tiempo real.

// Suscribirse a INSERTs en la tabla 'posts'
const canal = supabase
  .channel('posts-feed')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('Nuevo post:', payload.new);
      // Actualizar la UI: prepend the new post to the list
      setPosts(prev => [payload.new, ...prev]);
    }
  )
  .subscribe();

// Suscribirse a UPDATES (para editar posts en vivo)
const canalUpdate = supabase
  .channel('posts-update')
  .on(
    'postgres_changes',
    { event: 'UPDATE', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('Post actualizado:', payload.new);
      setPosts(prev => prev.map(p => p.id === payload.new.id ? payload.new : p));
    }
  )
  .subscribe();

// Limpiar la suscripción al desmontar el componente
useEffect(() => {
  return () => {
    supabase.removeChannel(canal);
    supabase.removeChannel(canalUpdate);
  };
}, []);

// También puedes usar Realtime en el BACKEND (Node.js) para, por ejemplo,
// notificar al cliente cuando termine un job largo:
const canalServer = supabase.channel('job-status');
await canalServer.send({
  type: 'broadcast',
  event: 'job-completed',
  payload: { jobId: '123', result: 'success' },
});

Realtime: suscripciones a cambios en la BD

2.12.6 Edge Functions: lógica custom en el serverless

Edge Functions son funciones serverless que se ejecutan en el 'edge' (cerca del usuario), escritas en TypeScript con Deno. Son perfectas para: webhooks (Stripe, GitHub), tareas programadas (cron), lógica de backend que necesita ejecutarse en el server, o integraciones con APIs externas. Se despliegan con un comando: supabase functions deploy nombre-funcion.

// supabase/functions/stripe-webhook/index.ts
// Edge Function que recibe webhooks de Stripe
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
import Stripe from 'https://esm.sh/stripe@13.0.0';

const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!, {
  apiVersion: '2023-10-16',
});

const supabase = createClient(
  Deno.env.get('SUPABASE_URL')!,
  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!  // service_role bypasea RLS
);

serve(async (req) => {
  const signature = req.headers.get('stripe-signature');
  const body = await req.text();

  try {
    // Verificar la firma del webhook (CRÍTICO para seguridad)
    const event = await stripe.webhooks.constructEventAsync(
      body, signature!, Deno.env.get('STRIPE_WEBHOOK_SECRET')!
    );

    if (event.type === 'checkout.session.completed') {
      const session = event.data.object;
      const userId = session.metadata.userId;
      const plan = session.metadata.plan;

      // Actualizar el plan del usuario en Supabase
      await supabase.from('usuarios')
        .update({ plan, suscripcion_activa: true })
        .eq('id', userId);
    }

    return new Response(JSON.stringify({ received: true }), { status: 200 });
  } catch (err) {
    return new Response(`Webhook error: ${err.message}`, { status: 400 });
  }
});

// Para desplegar:
// supabase functions deploy stripe-webhook --no-verify-jwt

Edge Function: webhook de Stripe en Supabase

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.