Supabase RLS: Notas Privadas que SOLO tú puedes ver (sin backend propio)

Paso 1 — Migración SQL: tabla + políticas RLS

Entender cómo se habilita RLS y se crean políticas que usan auth.uid() para aislar filas por usuario

supabase/migrations/20240101_notes_rls.sql

-- 1. Crear tabla de notas
CREATE TABLE IF NOT EXISTS notes (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  content TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);

-- 2. Habilitar Row Level Security
ALTER TABLE notes ENABLE ROW LEVEL SECURITY;

-- 3. Política: solo puedes VER tus propias notas
CREATE POLICY "Users can view own notes"
  ON notes FOR SELECT
  USING (auth.uid() = user_id);

-- 4. Política: solo puedes INSERTAR notas con tu user_id
CREATE POLICY "Users can insert own notes"
  ON notes FOR INSERT
  WITH CHECK (auth.uid() = user_id);

-- 5. Política: solo puedes ELIMINAR tus propias notas
CREATE POLICY "Users can delete own notes"
  ON notes FOR DELETE
  USING (auth.uid() = user_id);

-- Verificar que RLS está activo
SELECT tablename, rowsecurity
FROM pg_tables
WHERE tablename = 'notes';

comando: # Ejecutar en el SQL Editor de Supabase Dashboard, o via CLI: npx supabase db push

Paso 2 — Cliente Supabase para el browser

Crear un cliente Supabase singleton que persiste la sesión del usuario en cookies para el App Router

src/lib/supabase/client.ts

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

// Tipos para nuestra tabla
export type Note = {
  id: string
  user_id: string
  title: string
  content: string | null
  created_at: string
}

Paso 3 — Cliente Supabase para Server Components

Aprender la diferencia entre el cliente de browser y el de servidor, necesario para leer cookies en RSC

src/lib/supabase/server.ts

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // En Server Components no se pueden setear cookies.
            // El middleware se encarga de refrescar la sesión.
          }
        }
      }
    }
  )
}

Paso 4 — API Route: crear y listar notas

Ver cómo el servidor nunca necesita filtrar por user_id manualmente; RLS lo hace automáticamente

src/app/api/notes/route.ts

import { NextResponse } from 'next/server'
import { createClient } from '@/lib/supabase/server'

// GET /api/notes — RLS filtra automáticamente, solo devuelve las del usuario autenticado
export async function GET() {
  const supabase = await createClient()

  // ⚡ No necesitamos .eq('user_id', userId) — RLS lo hace por nosotros
  const { data: notes, error } = await supabase
    .from('notes')
    .select('*')
    .order('created_at', { ascending: false })

  if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

  return NextResponse.json({ notes })
}

// POST /api/notes — RLS rechaza el insert si user_id !== auth.uid()
export async function POST(request: Request) {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    return NextResponse.json({ error: 'No autenticado' }, { status: 401 })
  }

  const { title, content } = await request.json()

  if (!title?.trim()) {
    return NextResponse.json({ error: 'El título es requerido' }, { status: 400 })
  }

  const { data: note, error } = await supabase
    .from('notes')
    .insert({
      user_id: user.id, // RLS valida que esto coincida con auth.uid()
      title: title.trim(),
      content: content?.trim() || null
    })
    .select()
    .single()

  if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

  return NextResponse.json({ note }, { status: 201 })
}

Paso 5 — Página de login con magic link

Implementar autenticación passwordless con Supabase Auth que activa el contexto de RLS

src/app/page.tsx

'use client'

import { useState } from 'react'
import { createClient } from '@/lib/supabase/client'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)
  const [loading, setLoading] = useState(false)
  const supabase = createClient()

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)

    const { error } = await supabase.auth.signInWithOtp({
      email,
      options: { emailRedirectTo: `${window.location.origin}/notes` }
    })

    if (error) {
      alert(error.message)
    } else {
      setSent(true)
    }
    setLoading(false)
  }

  if (sent) {
    return (
      <main className="min-h-screen flex items-center justify-center bg-slate-950">
        <div className="text-center">
          <p className="text-2xl">📬</p>
          <p className="text-white mt-2">Revisa tu email para el magic link</p>
        </div>
      </main>
    )
  }

  return (
    <main className="min-h-screen flex items-center justify-center bg-slate-950">
      <form onSubmit={handleLogin} className="bg-slate-900 p-8 rounded-xl w-full max-w-sm space-y-4">
        <h1 className="text-white text-2xl font-bold">🔒 Notas Seguras</h1>
        <p className="text-slate-400 text-sm">RLS garantiza que nadie más puede ver tus notas</p>
        <input
          type="email"
          placeholder="tu@email.com"
          value={email}
          onChange={e => setEmail(e.target.value)}
          required
          className="w-full px-4 py-2 rounded-lg bg-slate-800 text-white border border-slate-700 focus:outline-none focus:border-indigo-500"
        />
        <button
          type="submit"
          disabled={loading}
          className="w-full py-2 rounded-lg bg-indigo-600 text-white font-semibold hover:bg-indigo-500 disabled:opacity-50 transition"
        >
          {loading ? 'Enviando...' : 'Entrar con Magic Link'}
        </button>
      </form>
    </main>
  )
}

comando: npm run dev

Pantalla oscura centrada con formulario de login: título '🔒 Notas Seguras', subtítulo sobre RLS, input de email y botón 'Entrar con Magic Link' en indigo.

Paso 6 — Dashboard de notas protegido por RLS

Observar que el SELECT sin filtros retorna SOLO las notas del usuario autenticado gracias a RLS

src/app/notes/page.tsx

'use client'

import { useEffect, useState } from 'react'
import { createClient, type Note } from '@/lib/supabase/client'
import { useRouter } from 'next/navigation'

export default function NotesPage() {
  const [notes, setNotes] = useState<Note[]>([])
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const [loading, setLoading] = useState(true)
  const [userEmail, setUserEmail] = useState('')
  const supabase = createClient()
  const router = useRouter()

  useEffect(() => {
    async function init() {
      const { data: { user } } = await supabase.auth.getUser()
      if (!user) { router.push('/'); return }
      setUserEmail(user.email ?? '')
      await fetchNotes()
    }
    init()
  }, [])

  async function fetchNotes() {
    setLoading(true)
    const res = await fetch('/api/notes')
    const { notes } = await res.json()
    setNotes(notes ?? [])
    setLoading(false)
  }

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault()
    const res = await fetch('/api/notes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title, content })
    })
    if (res.ok) {
      setTitle(''); setContent('')
      await fetchNotes()
    }
  }

  async function handleLogout() {
    await supabase.auth.signOut()
    router.push('/')
  }

  return (
    <main className="min-h-screen bg-slate-950 text-white p-8">
      <div className="max-w-2xl mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold">📝 Mis Notas</h1>
            <p className="text-slate-400 text-sm">Sesión: {userEmail}</p>
          </div>
          <button onClick={handleLogout} className="text-sm text-slate-400 hover:text-white">
            Cerrar sesión
          </button>
        </div>

        {/* Formulario para crear nota */}
        <form onSubmit={handleCreate} className="bg-slate-900 p-4 rounded-xl space-y-3">
          <input
            placeholder="Título de la nota"
            value={title}
            onChange={e => setTitle(e.target.value)}
            required
            className="w-full px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 focus:outline-none focus:border-indigo-500"
          />
          <textarea
            placeholder="Contenido (opcional)"
            value={content}
            onChange={e => setContent(e.target.value)}
            rows={3}
            className="w-full px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 focus:outline-none focus:border-indigo-500 resize-none"
          />
          <button
            type="submit"
            className="px-4 py-2 bg-indigo-600 rounded-lg hover:bg-indigo-500 text-sm font-semibold transition"
          >
            + Agregar nota
          </button>
        </form>

        {/* Lista de notas — solo las del usuario gracias a RLS */}
        <div className="space-y-3">
          {loading && <p className="text-slate-500">Cargando...</p>}
          {!loading && notes.length === 0 && (
            <p className="text-slate-500">No tienes notas aún. ¡Crea la primera!</p>
          )}
          {notes.map(note => (
            <div key={note.id} className="bg-slate-900 p-4 rounded-xl border border-slate-800">
              <p className="font-semibold">{note.title}</p>
              {note.content && <p className="text-slate-400 text-sm mt-1">{note.content}</p>}
              <p className="text-slate-600 text-xs mt-2">
                {new Date(note.created_at).toLocaleString('es-MX')}
              </p>
            </div>
          ))}
        </div>

        {/* Bloque educativo: muestra que RLS filtra sin código */}
        <div className="bg-indigo-950 border border-indigo-800 p-4 rounded-xl text-sm">
          <p className="font-semibold text-indigo-300">¿Por qué no ves notas de otros usuarios?</p>
          <p className="text-indigo-400 mt-1">
            La query es <code className="bg-slate-800 px-1 rounded">SELECT * FROM notes</code> — sin filtros.
            RLS aplica automáticamente <code className="bg-slate-800 px-1 rounded">WHERE user_id = auth.uid()</code> a nivel de base de datos.
          </p>
        </div>
      </div>
    </main>
  )
}

Dashboard con el email del usuario en la cabecera, formulario para crear notas, lista de notas del usuario (vacía o con datos), y un bloque educativo indigo que explica por qué RLS filtra sin código adicional.

¿Qué problema resuelve Supabase RLS: Notas Privadas que SOLO tú puedes ver (sin backend propio)?

En apps multi-usuario, proteger los datos de cada usuario normalmente requiere lógica en el servidor. Con RLS, esa protección vive directamente en la base de datos y es imposible saltársela. Construye una app de notas donde cada usuario solo puede leer y escribir SUS propios datos, usando Row Level Security de Supabase sin escribir ni una línea de backend.

¿Qué necesito saber antes de seguir esta clase?

Necesitas Cuenta en Supabase, Node.js 18+, Conocimiento básico de SQL y React. La clase es de nivel intermedio y dura 8 minutos.

¿Qué stack se usa para Supabase Row Level Security?

El proyecto usa Supabase Row Level Security, Next.js 14 App Router, Supabase Auth, TypeScript, Tailwind CSS. Todo el código se escribe en pantalla durante la clase.

¿Por qué falla al olvidar ENABLE ROW LEVEL SECURITY: la tabla existe pero cualquiera puede leer todos los datos?

Olvidar ENABLE ROW LEVEL SECURITY: la tabla existe pero cualquiera puede leer todos los datos

¿Por qué falla al usar el service_role key en el cliente de browser: esta key BYPASEA RLS completamente, solo usarla en servidor?

Usar el service_role key en el cliente de browser: esta key BYPASEA RLS completamente, solo usarla en servidor

¿Por qué falla al no crear políticas después de activar RLS: con RLS activo y sin políticas, NADIE puede leer nada (ni el…?

No crear políticas después de activar RLS: con RLS activo y sin políticas, NADIE puede leer nada (ni el propio usuario)

¿Por qué falla al insertar user_id hardcodeado desde el cliente esperando que RLS lo valide: si envías un user_id falso, la…?

Insertar user_id hardcodeado desde el cliente esperando que RLS lo valide: si envías un user_id falso, la política WITH CHECK lo rechazará con un error 42501

¿Hay algún truco que no esté en la documentación oficial?

Puedes testear tus políticas RLS directamente en el SQL Editor de Supabase sin autenticarte: usa SET LOCAL role = authenticated; SET LOCAL request.jwt.claims = '{"sub": "uuid-del-usuario"}'; antes de tu query. Esto simula una sesión autenticada y te permite depurar políticas sin tocar tu app.