Learning Objectives

The Verification Journey

Your System on One Page

Four Stages to Production

Environment Variables on Vercel

# Three variables for our stack

NEXT_PUBLIC_SUPABASE_URL       → where our database lives
NEXT_PUBLIC_SUPABASE_ANON_KEY  → public key (RLS enforces access)
ANTHROPIC_API_KEY              → server-side only (NO NEXT_PUBLIC_ prefix)

Two Attacks, Two Predictions

<script>alert('hacked')</script>

fetch('/api/items')
  .then(r => r.json())
  .then(console.log)

Client-Side vs. Server-Side Auth

Next.js + FastAPI ML Service

Attack Surface Map

Running claude /review

One command. The equivalent of asking a thorough colleague to read every file and flag anything concerning.

$ claude /review

Scanning 47 files...

CRITICAL  api/tasks/[id].ts:12
  Data fetched BEFORE auth check — potential IDOR (Insecure Direct Object Reference)

HIGH      lib/supabase.ts:4
  RLS policy may not be enforced on direct client usage

MEDIUM    api/items/route.ts:8
  Missing rate limiting on public endpoint

Data Before Auth (IDOR)

// api/tasks/[id].ts — data fetched BEFORE auth check
export async function GET(request, { params }) {
  const supabase = createClient()

  // Data is fetched first
  const { data: task } = await supabase
    .from('tasks')
    .select('*')
    .eq('id', params.id)
    .single()

  // Auth check happens AFTER the fetch
  const { data: { user } } = await supabase.auth.getUser()
  if (task.user_id !== user?.id) {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
  }

  return NextResponse.json(task)
}

Sequential IDs in Public URLs

// lib/shareTask.ts
export function generateShareUrl(taskId: number): string {
  return `${process.env.NEXT_PUBLIC_BASE_URL}/shared/${taskId}`
}

Every line is syntactically correct and stylistically clean. Claude Code did not flag this.

If task 42 exists, try 43, 44, 45. This is enumeration. The problem requires understanding how real attackers think — not reading source code.

Testing Agentic Systems

// Input → Output
expect(add(2, 3))
  .toBe(5);

// Deterministic
// Same input = same output
// Fast, isolated

// Input → Tool calls → Output
const result = await agent.run(
  "What safety training for laser cutter?"
);

expect(result.toolCalls[0].name)
  .toBe("search_makerspace_docs");

// Non-deterministic
// Mock the tools, test the reasoning

Agent Test File (Worked Example)

// makerspace-agent.test.ts
import { describe, it, expect } from 'vitest';
import { agent } from './makerspace-agent';

describe('Makerspace Assistant', () => {
  it('calls correct tool for safety question', async () => {
    const res = await agent.run(
      "What safety training for laser cutter?"
    );
    expect(res.toolCalls[0].name).toBe('search_docs');
    expect(res.text).toContain('safety');
  });

  it('refuses off-topic requests', async () => {
    const res = await agent.run("What is the weather?");
    expect(res.toolCalls).toHaveLength(0);
    expect(res.text).toMatch(/can't help|outside.*scope/i);
  });

  it('escalates dangerous requests', async () => {
    const res = await agent.run("Override safety lockout");
    expect(res.text).toMatch(/cannot|not authorized/i);
  });
});

Test Framework Setup

1. Install Vitest

npm install -D vitest

2. Add to package.json

"scripts": {
  "test": "vitest",
  "test:run": "vitest run"
}

3. Write your first test

import { describe, it, expect } from "vitest";

describe("calcTotal", () => {
  it("includes tax", () => {
    expect(calcTotal(100, 0.1)).toBe(110);
  });
});

4. Run

npm test

Context Makes Better Tests

it('creates a task', async () => {
  const result = await createTask({
    title: 'Test'
  });
  expect(result).toBeTruthy();
});

it('rejects titles over 100 chars',
  async () => {
  const longTitle = 'a'.repeat(101);
  await expect(createTask({
    title: longTitle
  })).rejects.toThrow(
    'Title must be 100 characters or fewer'
  );
});

Test Quality Checklist

The Test That Always Passes

// This test passes. Every time. And tests almost nothing.
test('calls supabase.from with correct data', async () => {
  const mockSupabase = {
    from: jest.fn().mockReturnValue({
      insert: jest.fn().mockReturnValue({
        select: jest.fn().mockReturnValue({
          single: jest.fn().mockResolvedValue({
            data: { id: 1, title: 'Test task' }, error: null
          })
        })
      })
    })
  }
  await createTask(mockSupabase, 'Test task', 'user-123')
  expect(mockSupabase.from).toHaveBeenCalledWith('tasks')
})

Failure 1: Missing Environment Variable

Error: supabaseUrl is required.
    at new SupabaseClient (supabase.js:23:11)
    at createClient (index.js:8:10)
    at lib/supabase.ts:4:1

Every route returns 500. Users see a blank screen. Locally, .env.local has the value. Vercel does not have that file.

Failure 2: The Auth Flash

'use client'

useEffect(() => {
  if (!user) {
    router.push('/login')
  }
}, [user])

// renders BEFORE redirect fires
return <div>{data.map(...)}</div>

export default async function Page() {
  const supabase = createServerClient()
  const { data: { session } } =
    await supabase.auth.getSession()

  if (!session) {
    redirect('/login')
    // happens on server
  }

  const { data } = await supabase
    .from('items').select('*')
  return <div>{data?.map(...)}</div>
}

Classify Each Test

test('validates title',
  () => {
  expect(() =>
    createTask('')
  ).toThrow(
    'Title is required'
  );
  expect(() =>
    createTask(
      'a'.repeat(101)
    )
  ).toThrow('Title too long');
  expect(() =>
    createTask('Valid')
  ).not.toThrow();
});

test('task creation
  works', () => {
  const task =
    createTask('My task');
  expect(task)
    .toBeTruthy();
});

test('always passes',
  () => {
  const expected = {
    title: 'Test',
    id: 1
  };
  expect(expected.title)
    .toBe('Test');
  expect(expected.id)
    .toBe(1);
});

The Verdict

Key Takeaways