Originally published at claudeguide.io/claude-code-supabase-integration

Claude Code + Supabase Integration Guide

To use Supabase with Claude Code in 2026, paste your schema or Supabase dashboard output directly into the chat and ask Claude to generate typed clients, Row Level Security policies, Auth flows, or Edge Functions against it. Claude understands Supabase's conventions — createClient, supabase.auth, supabase.from(), .subscribe(), Storage buckets, and supabase gen types typescript — so you can go from a blank project to a fully secured, realtime Next.js app in a single session without leaving your editor — 6 patterns covered.

---

Project Setup

Start every Supabase + Next.js project the same way so Claude Code has full context.

Install dependencies:

npm install @supabase/supabase-js @supabase/ssr

Environment variables (.env.local):

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key  # server-side only

Prompt to bootstrap clients with Claude Code:

Create two Supabase client files for Next.js 15 App Router:
1. lib/supabase/client.ts — browser client using createBrowserClient
2. lib/supabase/server.ts — server component client using createServerClient with cookies()
Use @supabase/ssr. Include full TypeScript types from ./database.types.ts

Browser client (lib/supabase/client.ts):

typescript
import { createBrowserClient } from "@supabase/ssr";
import type { Database } from "./database.types";

export function createClient() {
  return createBrowserClient<Database

[→ Get Claude Code Power Prompts 300 — $29](https://shoutfirst.gumroad.com/l/agfda?utm_source=claudeguide&utm_medium=article&utm_campaign=claude-code-supabase-integration)

*300 prompts. Instant download. 30-day money-back guarantee.*

---

## Frequently Asked Questions

### How do I use Supabase with Claude Code for a Next.js project?

Install `@supabase/supabase-js` and `@supabase/ssr`, add your `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` to `.env.local`, then paste your schema into Claude Code and ask it to generate the browser client, server client, middleware, and Auth callback route. Claude generates all four files in one prompt and keeps TypeScript types consistent across them.

### Can Claude Code generate Row Level Security policies automatically?

Yes. Paste your table definitions and describe your access rules in plain English — for example, "users can only read rows belonging to their organization" — and Claude generates the corresponding `CREATE POLICY` SQL. For multi-role apps, describe each role explicitly: "admins can update any row, members can only update rows they own."

### How do I keep TypeScript types in sync after schema changes?

Run `supabase gen types typescript` after every migration and commit the updated `database.types.ts`. Then prompt Claude: "I regenerated database.types.ts — fix all TypeScript errors in the codebase caused by these schema changes." Claude diffs the old and new types and patches every affected file.

### Does RLS protect my data even if someone bypasses the UI?

Yes, RLS enforces policies at the database level regardless of how the query arrives. Direct `supabase-js` calls, REST calls, and GraphQL queries all go through RLS. The only bypass is the `service_role` key — never expose it client-side, and never use it in browser code. Always use the `anon` key in your browser client.

### How do I test RLS policies locally?

Use the Supabase local development stack (`supabase start`) and run queries as specific users with `set local role authenticated; set local "request.jwt.claims" = '{"sub":"<user-id

[→ Get Claude Code Power Prompts 300 — $29](https://shoutfirst.gumroad.com/l/agfda?utm_source=claudeguide&utm_medium=article&utm_campaign=claude-code-supabase-integration)

*Instant download. 30-day money-back guarantee.*