From supabase-pack
Install and configure Supabase SDK, CLI, and project authentication. Use when setting up a new Supabase project, installing @supabase/supabase-js, configuring environment variables, or initializing the Supabase client. Trigger with "install supabase", "setup supabase", "supabase auth config", "configure supabase", "supabase init", "add supabase to project".
npx claudepluginhub flight505/skill-forge --plugin supabase-packThis skill is limited to using the following tools:
Install the Supabase SDK, CLI, and project credentials from scratch — covering package install, environment configuration, client initialization, and connection verification for both TypeScript (`@supabase/supabase-js`) and Python (`supabase`).
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Share bugs, ideas, or general feedback.
Install the Supabase SDK, CLI, and project credentials from scratch — covering package install, environment configuration, client initialization, and connection verification for both TypeScript (@supabase/supabase-js) and Python (supabase).
Key facts:
@supabase/supabase-jssupabase (via pip)createClient() — never new SupabaseClient()supabase start)Install the SDK and the Supabase CLI:
JavaScript / TypeScript:
# Install the SDK
npm install @supabase/supabase-js
# For SSR frameworks (Next.js, SvelteKit, Nuxt), also install:
npm install @supabase/ssr
# Install the Supabase CLI (for types, migrations, local dev)
npm install -D supabase
Python:
# Install the SDK
pip install supabase
# Install the CLI (alternative: brew install supabase/tap/supabase)
npm install -g supabase
Verify the CLI is available:
npx supabase --version
Retrieve project credentials from the Supabase Dashboard (Settings > API) and create the env file:
# .env.local (or .env)
SUPABASE_URL=https://<project-ref>.supabase.co
SUPABASE_KEY=eyJhbGciOiJIUzI1NiIs... # anon key — safe for client-side
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1... # admin key — server-side ONLY
Add env files to .gitignore immediately:
.env
.env.local
.env.*.local
Security rules:
SUPABASE_KEY) is safe for client-side code. It respects Row Level Security (RLS) policies.SUPABASE_SERVICE_ROLE_KEY) bypasses RLS entirely. Use only on the server. Never bundle into client code or expose in browser.Create a client singleton and verify connectivity:
TypeScript — client-side (anon key):
// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.SUPABASE_URL!,
process.env.SUPABASE_KEY!
)
export default supabase
TypeScript — server-side (service role key):
// lib/supabase-admin.ts
import { createClient } from '@supabase/supabase-js'
export const supabaseAdmin = createClient(
process.env.SUPABASE_URL!,
process.env.SUPABASE_SERVICE_ROLE_KEY!,
{
auth: {
autoRefreshToken: false,
persistSession: false,
},
}
)
Python — client initialization:
# lib/supabase_client.py
import os
from supabase import create_client
url = os.environ["SUPABASE_URL"]
key = os.environ["SUPABASE_KEY"]
supabase = create_client(url, key)
Verify the connection:
// Quick connectivity check
const { data, error } = await supabase.from('_health_check').select('*').limit(1)
if (error && error.code !== 'PGRST116') {
// PGRST116 = relation does not exist (expected if table doesn't exist yet)
throw new Error(`Supabase connection failed: ${error.message}`)
}
console.log('Supabase connected successfully')
Optional — generate TypeScript types from the database schema:
npx supabase login
npx supabase link --project-ref <your-project-ref>
npx supabase gen types typescript --linked > lib/database.types.ts
Then add the type parameter to the client:
import type { Database } from './database.types'
const supabase = createClient<Database>(url, key)
Completing all three steps produces:
@supabase/supabase-js or supabase Python package installednpx supabase.env.local containing SUPABASE_URL, SUPABASE_KEY, and SUPABASE_SERVICE_ROLE_KEYlib/supabase.ts or lib/supabase_client.py)lib/supabase-admin.ts, TypeScript only)| Error | Cause | Fix |
|---|---|---|
FetchError: request failed | Wrong SUPABASE_URL | Verify URL at Dashboard > Settings > API |
Invalid API key | Wrong or expired key | Copy fresh anon key from Dashboard > Settings > API |
PGRST301: JWSError | Malformed JWT in key | Remove trailing whitespace/newlines from env var |
Cannot find module '@supabase/supabase-js' | SDK not installed | Run npm install @supabase/supabase-js |
ModuleNotFoundError: No module named 'supabase' | Python SDK not installed | Run pip install supabase |
supabase: command not found | CLI not installed | Run npm install -D supabase, then use npx supabase |
Error: supabase start fails | Docker not running | Start Docker Desktop, then retry npx supabase start |
TypeError: SupabaseClient is not a constructor | Wrong import pattern | Use createClient() — not new SupabaseClient() |
Full TypeScript and Python examples with auth sign-up, sign-in, session management, SSR patterns, and type-safe queries: examples
createClient options, auth, database, storage, realtimeAfter successful setup, continue with: