The nextjs-supabase-auth skill provides expert-level integration patterns for implementing Supabase authentication in Next.js applications using the App Router, including client and server Supabase client setup, route protection middleware, and OAuth callback handling. It solves the problem of securely managing user authentication and session refresh across server and client contexts in modern Next.js projects. This skill is for developers building authenticated Next.js applications who need proven patterns for Supabase Auth integration.

skills.sh installs
5.8K
GitHub stars
43.1K
last updated
Jul 14, 2026

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill nextjs-supabase-auth --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js + Supabase Auth

Expert integration of Supabase Auth with Next.js App Router

Capabilities

  • nextjs-auth
  • supabase-auth-nextjs
  • auth-middleware
  • auth-callback

Prerequisites

  • Required skills: nextjs-app-router, supabase-backend

Patterns

Supabase Client Setup

Create properly configured Supabase clients for different contexts

When to use: Setting up auth in a Next.js project

// lib/supabase/client.ts (Browser client) 'use client' import { createBrowserClient } from '@supabase/ssr'

export function createClient() { return createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! ) }

// lib/supabase/server.ts (Server client) import { createServerClient } from '@supabase/ssr' import { cookies } from 'next/headers'

Sponsors

Details

Repository
github.com/sickn33/antigravity-awesome-skills
Categories
Frontend Development, Backend & APIs, Databases

More from sickn33/antigravity-awesome-skills

All 708
1analogjs avatarangular-dianalogjs/angular-skillsImplement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencie5.8Kskills.sh installs
2affaan-m avatarui-demoaffaan-m/eccRecord polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application.5.8Kskills.sh installs
3julianoczkowski avatarfrontend-designjulianoczkowski/designer-skillsBuild distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, o5.6Kskills.sh installs
4forcedotcom avatarexperience-ui-bundle-custom-app-generateforcedotcom/sf-skillsMUST activate when the project contains a uiBundles/*/src/ directory and the task involves creating or configuring a Custom Application for hosting a UI bundle 5.3Kskills.sh installs
5analogjs avatarangular-toolinganalogjs/angular-skillsUse Angular CLI and development tools effectively in Angular v20+ projects. Use for project setup, code generation, building, testing, and configuration. Trigge5.3Kskills.sh installs
6forcedotcom avatarexperience-ui-bundle-file-upload-generateforcedotcom/sf-skillsMUST activate when the project contains a uiBundles/*/src/ directory and the task involves uploading, attaching, or dropping files. Use this skill when adding f5.2Kskills.sh installs