nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
Best use case
nextjs-supabase-auth is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
Teams using nextjs-supabase-auth should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-supabase-auth/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-supabase-auth Compares
| Feature / Agent | nextjs-supabase-auth | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Next.js + Supabase Auth You are an expert in integrating Supabase Auth with Next.js App Router. You understand the server/client boundary, how to handle auth in middleware, Server Components, Client Components, and Server Actions. Your core principles: 1. Use @supabase/ssr for App Router integration 2. Handle tokens in middleware for protected routes 3. Never expose auth tokens to client unnecessarily 4. Use Server Actions for auth operations when possible 5. Understand the cookie-based session flow ## Capabilities - nextjs-auth - supabase-auth-nextjs - auth-middleware - auth-callback ## Requirements - nextjs-app-router - supabase-backend ## Patterns ### Supabase Client Setup Create properly configured Supabase clients for different contexts ### Auth Middleware Protect routes and refresh sessions in middleware ### Auth Callback Route Handle OAuth callback and exchange code for session ## Anti-Patterns ### ❌ getSession in Server Components ### ❌ Auth State in Client Without Listener ### ❌ Storing Tokens Manually ## Related Skills Works well with: `nextjs-app-router`, `supabase-backend` ## When to Use This skill is applicable to execute the workflow or actions described in the overview.
Related Skills
tailwind-css-nextjs-guide-cursorrules-prompt-file-cursorrules
Apply for tailwind-css-nextjs-guide-cursorrules-prompt-file. Prompt Generation Rules: - Analyze the component requirements thoroughly - Include specific DaisyUI component suggestions
nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules
Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*
nextjs
Next.js framework best practices including App Router, data fetching, and performance optimization.
api-fetch-with-auth
Create authenticated API fetch function in Next.js. Use for frontend API calls.
doc-coauthoring
Guide users through structured collaborative documentation creation. Use when user wants to write documentation, update README, create architecture docs, draft proposals, technical specs, decision docs, refactor documentation, create API docs, or document code.
github-workflow-authoring
This skill should be used when creating or improving GitHub Actions CI/CD workflows for Breenix kernel development. Use for authoring new test workflows, optimizing existing CI pipelines, adding new test types, fixing workflow configuration issues, or adapting workflows for new kernel features.
supastarter-nextjs-skill
Guides development with supastarter for Next.js only (not Vue/Nuxt): tech stack, setup, configuration, database (Prisma), API (Hono/oRPC), auth (Better Auth), organizations, payments (Stripe), AI, customization, storage, mailing, i18n, SEO, deployment, background tasks, analytics, monitoring, E2E. Use when building or modifying supastarter Next.js apps, adding features, or when the user mentions supastarter Next.js, Prisma, oRPC, Better Auth, or related Next.js stack topics.
supabase-postgres-best-practices
Postgres query performance optimization and runtime best practices for Supabase. Covers indexing strategies (B-tree, GIN, GiST, BRIN, composite, partial, covering), EXPLAIN ANALYZE diagnostics, connection pooling (Supavisor transaction/session modes, pool sizing), RLS performance patterns (auth.uid() subquery caching, SECURITY DEFINER bypass), concurrency control (deadlock prevention, SKIP LOCKED, advisory locks), data access optimization (N+1 elimination, keyset pagination, batch inserts, UPSERT), runtime monitoring (pg_stat_statements, VACUUM/ANALYZE), and advanced tuning (full-text search, JSONB GIN indexing). Use when writing, reviewing, or optimizing SQL queries, diagnosing slow queries with EXPLAIN, configuring connection pooling, tuning RLS performance, implementing concurrent processing, detecting unused indexes, or resolving Postgres bottlenecks. Does NOT cover schema design (ansem-db-patterns), auth/RLS policy design (supabase-auth-patterns), or TypeScript types (typescript-best-practices).
supabase-expert
Comprehensive Supabase expert with access to 2,616 official documentation files covering PostgreSQL database, authentication, real-time subscriptions, storage, edge functions, vector embeddings, and all platform features. Invoke when user mentions Supabase, PostgreSQL, database, auth, real-time, storage, edge functions, backend-as-a-service, or pgvector.
spec-author
Writes or revises a feature specification with user stories and acceptance tests for this Next.js + FastAPI project. Produces self-contained specs that can be implemented via TDD using the implementor skill. Invoked by the spec-writer orchestrator, not directly.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
skill-author
Creates production-grade Claude Code skills from natural language descriptions. Use when building new skills, requested with "build me a skill that...", "create a skill for...", or "I need a skill to...". Generates complete skill files with proper frontmatter, context references, and quality self-assessment.