nextjs-supabase-auth
Handles Supabase Auth integration for Next.js App Router projects securely.
Install
mkdir -p .claude/skills/nextjs-supabase-auth && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/879" && unzip -o skill.zip -d .claude/skills/nextjs-supabase-auth && rm skill.zipInstalls to .claude/skills/nextjs-supabase-auth
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.Key capabilities
- →Manages OAuth callback exchanges
- →Configures secure cookie-based session state
- →Implements middleware-level route protection
- →Wraps server-side authentication logic in Server Actions
How it works
Injects authentication logic into the Next.js lifecycle, primarily through middleware handling of session tokens and secure cookie storage.
Inputs & outputs
When to use nextjs-supabase-auth
- →Protecting routes in Next.js with Supabase
- →Implementing login functionality via Server Actions
- →Handling auth callbacks in Next.js
- →Configuring auth middleware for session refreshing
About this skill
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:
- Use @supabase/ssr for App Router integration
- Handle tokens in middleware for protected routes
- Never expose auth tokens to client unnecessarily
- Use Server Actions for auth operations when possible
- 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 not to use it
- →Implementing basic local password authentication without a backend
- →Building static websites without server-side routing
Prerequisites
Limitations
- →Requires Supabase as the identity provider
- →Strict adherence to App Router architecture
- →Cannot bypass client-side session listener requirements
How it compares
Automates the wiring between Next.js server components and Supabase, bypassing manual boilerplate implementation for token management.
Compared to similar skills
nextjs-supabase-auth side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nextjs-supabase-auth (this skill) | 12 | 6mo | No flags | Intermediate |
| app-specific-patterns | 4 | 2mo | No flags | Intermediate |
| javascript-typescript-typescript-scaffold | 3 | 4mo | Review | Beginner |
| nuxt-better-auth | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
app-specific-patterns
growilabs
GROWI main application (apps/app) specific patterns for Next.js, Jotai, SWR, and testing. Auto-invoked when working in apps/app.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
nuxt-better-auth
onmax
Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.
server-actions
davepoon
This skill should be used when the user asks about "Server Actions", "form handling in Next.js", "mutations", "useFormState", "useFormStatus", "revalidatePath", "revalidateTag", or needs guidance on data mutations and form submissions in Next.js App Router.
web-frameworks
mrgoonie
Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.
zod-validation-expert
TJSNDHU
Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.