What is this skill for?

It guides an AI agent through integrating Supabase Auth with a Next.js App Router app, including login, auth middleware, and protected routes.

When should I use it?

Use it when the task involves Supabase Auth in Next.js, such as adding login, setting up auth middleware, or protecting a route.

Does it work outside the App Router?

The skill is described for the Next.js App Router. It does not state support for other Next.js routing setups.

What do I need before starting?

A Next.js App Router project, a Supabase project, and the Supabase URL and anon key available as environment variables.

Next.js + Supabase Auth

SkillDatabases & data

This is a nextjs claude skill that helps an AI agent add Supabase Auth to a Next.js App Router project. It covers login flows, auth middleware, and protected routes so the agent can wire authentication into the app without guessing at the setup.

Use Next.js + Supabase Auth in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Next.js + Supabase Auth and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Next.js + Supabase Auth skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have a Next.js project that uses the App Router.

Next.js + Supabase AuthStart free

What your AI can do with it

Set up Supabase Auth in a Next.js App Router project
Create login and sign-up flows using Supabase Auth
Add auth middleware to handle sessions in Next.js
Mark routes as protected and check the user before rendering
Connect Supabase Auth calls to Next.js server and client components

Getting started

Have a Next.js project that uses the App Router.
Have a Supabase project and its URL and anon key ready.
Add the Supabase environment variables to the project configuration.
Install the Supabase client library the skill expects.
Ask the agent to apply the skill when adding login, middleware, or protected routes.

What this skill tells your AI

The instructions your AI receives, as published by davila7/claude-code-templates in cli-tool/components/skills/development/nextjs-supabase-auth/SKILL.md and read by ahel’s review.

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

Signals

GitHub stars: 32k
Forks: 4k
Last commit: Oct 2026

ahel review

S4info
community integration, published by davila7, not supabase

Automated review, not a security audit. Ruleset v1+k2.

Questions

What is this skill for?: It guides an AI agent through integrating Supabase Auth with a Next.js App Router app, including login, auth middleware, and protected routes.
When should I use it?: Use it when the task involves Supabase Auth in Next.js, such as adding login, setting up auth middleware, or protecting a route.
Does it work outside the App Router?: The skill is described for the Next.js App Router. It does not state support for other Next.js routing setups.
What do I need before starting?: A Next.js App Router project, a Supabase project, and the Supabase URL and anon key available as environment variables.

Advanced

Item type: skill
Key: nextjs-supabase-auth-davila7
Source: github.com/davila7/claude-code-templates

github.com/davila7/claude-code-templates