supabase-fullstack-setup_skill
- Python
1
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill vishalsachdev/claude-skills --skill supabase-fullstack-setup- SKILL.md14.9 KB
Overview
This skill is a complete guide to integrating Supabase with Next.js 13+ App Router for full-stack apps. It covers client setup, server vs browser clients, authentication (including social providers), database schema examples, Row Level Security (RLS), real-time subscriptions, and production patterns. Use it to bootstrap secure user-specific features and scalable data flows.
How this skill works
The guide provides ready-to-use code for creating server and browser Supabase clients that respect Next.js App Router cookies and server contexts. It includes an auth context for client-side session handling, API route examples that enforce server-side auth, SQL schema for common tables, and RLS policies so only the owning user can access their data. Real-time subscription examples show how to sync client state with Postgres changes.
When to use it
- Starting a new Next.js 13+ project that needs authentication and user data
- Implementing social login (Google, GitHub) with proper callback handling
- Building features like notes, favorites, or per-user video analyses
- Adding real-time updates for collaborative or live features
- Ensuring secure server-side access and Row Level Security for production
Best practices
- Always enable and test Row Level Security to avoid exposing data
- Use separate server and browser Supabase clients for appropriate contexts
- Manage auth state in a React context and subscribe to auth changes
- Add indexes on foreign keys and commonly filtered columns for performance
- Unsubscribe from real-time channels in useEffect cleanup to avoid leaks
- Use transactions for multi-table operations and generate types from the DB
Example use cases
- Server-rendered page listing a user's notes with server-side auth and redirects
- Client-side form to create notes tied to the current user via auth context
- API route that validates session server-side and performs protected inserts
- Realtime notes component that subscribes to Postgres changes for the current user
- Social auth flow using OAuth providers with a callback route that exchanges the code
FAQ
Yes. Use the server client for operations that require cookies or admin-like checks and the browser client for client-side interactions and subscriptions.
How do I protect user data?
Enable Row Level Security and create policies using auth.uid() to restrict SELECT/INSERT/UPDATE/DELETE to the owning user.
