Learning Objectives

Learning Objectives (continued)

Security Stack Across the Quarter

Every Row, Every User

If this were a medical records system, that’s a HIPAA violation. If it were a university system, that’s FERPA. If it were a financial app, that’s potential litigation.

Three-Layer Architecture

Three separate locations, three different security boundaries. Defense in depth: every layer checks.

User-First Data Modeling

CREATE TABLE tasks (
  id         uuid PRIMARY KEY
             DEFAULT gen_random_uuid(),
  user_id    uuid REFERENCES
             auth.users NOT NULL,
  title      text NOT NULL,
  status     text DEFAULT 'pending',
  created_at timestamptz
             DEFAULT now()
);

Screen → Spec → Schema → RLS

If the dashboard shows “My Tasks,” then the tasks table must have a user_id column, and the RLS policy must filter on that column. A direct, traceable line from UX decision to database security rule.

Sign-Up vs. Sign-In

const { data, error } =
  await supabase.auth.signUp({
    email: 'alice@example.com',
    password: 'securepassword123'
  });

const { data, error } =
  await supabase.auth
    .signInWithPassword({
      email: 'alice@example.com',
      password: 'securepassword123'
    });

Session Management

The session — stored as a JWT in the browser — is what your app checks on every subsequent request to decide whether this person is allowed in.

The Bug: Flash of Content

// Naive guard — looks correct but has a UX/security flaw
const { data: { user } } = await supabase.auth.getUser();

if (!user) {
  redirect('/login');
}

// Dashboard content renders here...

Navigate to /dashboard while logged out. For a fraction of a second, the dashboard is visible before the redirect fires.

The Fix: Loading State First

const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
  supabase.auth.getUser().then(({ data }) => {
    setUser(data.user);
    setLoading(false);
  });
}, []);

if (loading) return <div>Loading...</div>;
if (!user) redirect('/login');

Inserting with user_id

const { data: { user } } = await supabase.auth.getUser();
if (!user) return;

const { data, error } = await supabase
  .from('tasks')
  .insert({
    title: newTaskTitle.trim(),
    user_id: user.id    // critical: always attach user_id
  })
  .select()
  .single();

Form Validation with Zod

import { z } from "zod";

const TaskSchema = z.object({
  title: z.string().min(1).max(100),
  due:   z.string().datetime().optional(),
  done:  z.boolean().default(false),
});

const result = TaskSchema
  .safeParse(formData);

if (!result.success) {
  // result.error.issues[]
  return { error: result.error };
}

// result.data is typed & safe
await db.insert(result.data);

Data Contracts at Every Boundary

The Auth Chain

This chain is the backbone of everything we build today.

Context Engineering for Users

We talk about context engineering for giving AI the right information. The same concept applies in reverse: giving users the right information about what the system is doing at any given moment.

Three Patterns That Matter

Context Engineering for Humans

Every loading state, every streaming token, every progress indicator is the system giving users the context they need to maintain trust.

RLS: Enable → Deny All

Toggle RLS on in Supabase → reload the app → nothing loads. That is intentional design. Now we write the policy that opens up exactly the access we want.

SELECT Policy

CREATE POLICY "Users can only see their own data"
ON tasks
FOR SELECT
USING (auth.uid() = user_id);

auth.uid() — Supabase function that returns the current user's UUID from their JWT. Used in RLS policies to restrict rows to their owner.

The USING clause is the enforcement condition. The database evaluates this for every row, every query, automatically.

Without RLS vs. With RLS

Your code:
SELECT * FROM tasks
  WHERE user_id = current_user

Bug in code:
SELECT * FROM tasks
  ← forgets WHERE clause

Result: ALL data exposed

Your code:
SELECT * FROM tasks
  ← no WHERE clause needed

Database automatically adds:
WHERE user_id = auth.uid()

Result: only user's data,
EVEN IF your code has a bug

RLS Is Non-Negotiable for Agents

INSERT & UPDATE Policies

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

CREATE POLICY "Users can update their own data"
ON tasks FOR UPDATE
USING (auth.uid() = user_id);

-- DELETE: users can only delete their own rows
CREATE POLICY "delete_own" ON tasks
  FOR DELETE USING (auth.uid() = user_id);

Testing Your RLS

After writing policies, verify they work in the Supabase SQL Editor:

-- Simulate being user A
SET request.jwt.claims = '{"sub":"user-a-uuid"}';

-- Try to read user B's data — should return 0 rows
SELECT * FROM tasks
WHERE user_id = 'user-b-uuid';

-- ✓ If 0 rows: RLS is working
-- ✗ If rows appear: policy is broken

Find the Vulnerability

// Snippet A: Missing input validation
async function createTask(title: string, description: string) {
  await supabase.from('tasks').insert({
    title: title,           // no length check, no sanitization
    description: description,
    user_id: user.id
  });
}

// Snippet B: Client-side-only auth check
export default function Dashboard() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    supabase.auth.getUser().then(({ data }) => {
      if (!data.user) window.location.href = '/login';
      else setUser(data.user);
    });
  }, []);
  // Dashboard content renders here — no server-side verification
}

// Snippet C: No RLS enabled
// Table 'tasks' has RLS disabled
// Anyone with the Supabase anon key can query all rows

Vulnerability Debrief

AI Security Checklist

Run this checklist every time AI generates a form, a protected route, or a database insert.

CLAUDE.md as Context

# CLAUDE.md

## Data Model
- Table: tasks (id, title, description, user_id, created_at)
- RLS: users can only CRUD their own tasks
- Auth: Supabase email auth required for all pages

## Rules
- All inputs validated: title max 100 chars, description max 500 chars
- Server-side auth check on all API routes

When the data model, auth requirements, and RLS rules are in CLAUDE.md, the AI generates correct Supabase queries on the first try. No prompt iteration, no back-and-forth.

OpenSpec: Specs Before Code

# install & initialize
$ npx openspec init

# write a proposal
$ openspec propose
  title: Add task filtering
  why:   Users need to find tasks by status
  what:
    ADDED   FilterBar component
    MODIFIED TaskList to accept filter prop
  checklist:
    [ ] FilterBar renders status options
    [ ] TaskList filters by selected status
    [ ] Default: show all tasks

# implement from the checklist
$ openspec apply

Free, no API keys. Works with Claude Code, Cursor, Copilot, and 20+ tools.

Your Spec Stack So Far