Back to Skills

Nextjs Supabase Auth

Skills development 368 Scanned by NVIDIA SkillSpector

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

Install Command
npx claude-code-templates@latest --skill development/nextjs-supabase-auth
View on GitHub
claude-code — nextjs-supabase-auth

Scanned by NVIDIA SkillSpector

Automated static analysis (no LLM) · v2.12.0 · 2026-10-24

0 observations
scanner score 0/100

SkillSpector looks for patterns such as shell commands, credential access, network calls or unpinned dependencies. An observation is something worth reading in the files before you install, not a confirmed vulnerability. Components that run code locally, like hooks, MCP servers and security tooling, naturally show more of them.

No observations.

Learn more about NVIDIA SkillSpector.

Content

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

Works well with: nextjs-app-router, supabase-backend

Stack Builder

0 components

Your stack is empty

Browse components and click the + button to add them to your stack for easy installation.