How to Use Supabase in a Monorepo

1# Create the shared package directory
2mkdir -p packages/supabase/src
3
4# Initialize package.json
5cd packages/supabase
6npm init -y
7
8# Install Supabase client
9pnpm add @supabase/supabase-js
10pnpm add -D typescript supabase

1// packages/supabase/src/client.ts
2import { createClient, SupabaseClient } from '@supabase/supabase-js'
3import type { Database } from './types'
4
5export function createSupabaseClient(
6  url: string,
7  anonKey: string
8): SupabaseClient<Database> {
9  return createClient<Database>(url, anonKey, {
10    auth: {
11      autoRefreshToken: true,
12      persistSession: true,
13    },
14  })
15}
16
17export function createSupabaseAdmin(
18  url: string,
19  serviceRoleKey: string
20): SupabaseClient<Database> {
21  return createClient<Database>(url, serviceRoleKey, {
22    auth: {
23      autoRefreshToken: false,
24      persistSession: false,
25    },
26  })
27}
28
29export type { Database } from './types'

1# Link to your Supabase project (run once)
2supabase link --project-ref your-project-ref
3
4# Generate types into the shared package
5supabase gen types typescript --linked > packages/supabase/src/types.ts
6
7# Add a script to the shared package's package.json
8# "scripts": {
9#   "gen-types": "supabase gen types typescript --linked > src/types.ts"
10# }

1// packages/supabase/package.json
2{
3  "name": "@myapp/supabase",
4  "version": "1.0.0",
5  "main": "src/index.ts",
6  "types": "src/index.ts",
7  "exports": {
8    ".": "./src/index.ts"
9  },
10  "dependencies": {
11    "@supabase/supabase-js": "^2.45.0"
12  }
13}
14
15// packages/supabase/src/index.ts
16export { createSupabaseClient, createSupabaseAdmin } from './client'
17export type { Database } from './types'

1// apps/web/.env.local
2NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
3NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUz...
4
5// apps/web/src/lib/supabase.ts
6import { createSupabaseClient } from '@myapp/supabase'
7
8export const supabase = createSupabaseClient(
9  process.env.NEXT_PUBLIC_SUPABASE_URL!,
10  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
11)
12
13// apps/web/src/app/page.tsx
14import { supabase } from '@/lib/supabase'
15import type { Database } from '@myapp/supabase'
16
17type Product = Database['public']['Tables']['products']['Row']
18
19const { data } = await supabase.from('products').select('*')
20// data is typed as Product[] | null