24.2k

This skill enables seamless integration of Supabase Authentication with Next.js App Router, focusing on secure handling of auth tokens, route protection, and session management. It supports various patterns like middleware, OAuth callback handling, and server actions to facilitate robust authentication workflows. Designed for developers building secure, server-rendered Next.js applications, it emphasizes best practices and safeguards to prevent common anti-patterns.

npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill nextjs-supabase-auth

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

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

GitHub Owner

Owner: sickn33

SKILL.md


name: nextjs-supabase-auth description: "Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route." risk: unknown source: "vibeship-spawner-skills (Apache 2.0)" date_added: "2026-02-27"

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

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

More skills