Run any Skill in Manus with one click

nextjs-supabase-auth

Stars376

Forks7

UpdatedApril 9, 2026 at 22:36

Integrate Supabase Auth with Next.js App Router using middleware, callback handling, protected routes, and server/client client boundaries.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Asymmetric-al

Asymmetric-al/core

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	nextjs-supabase-auth
description	Integrate Supabase Auth with Next.js App Router using middleware, callback handling, protected routes, and server/client client boundaries.
metadata	{"owner":"skills-steward","last_updated":"2026-02-18T00:00:00.000Z","status":"active","upstream":{"repo":"supabase/agent-skills","related_guides":["https://supabase.com/docs/guides/auth/server-side/nextjs","https://supabase.com/docs/guides/auth"]}}
license	MIT

Next.js + Supabase Auth

Use this skill for authentication work in Next.js App Router with Supabase Auth.

When to Apply

Use this skill when:

Implementing login/signup/logout and session flows
Protecting routes with middleware
Handling auth callback exchanges
Wiring auth checks in Server Components, Server Actions, and route handlers
Debugging cookie/session desync between server and client

Do not use this skill when:

The task is primarily query/index/schema optimization (use supabase-postgres-best-practices)
The task spans broader Supabase surface area beyond Next.js auth wiring (use docs/ai/skills/supabase/SKILL.md)
The task is UI-only and does not change auth behavior

Core Rules

Use @supabase/ssr patterns for App Router integration.
Use @/lib/supabase/server for server-side code and @/lib/supabase/client for client-side code.
Use middleware to refresh and enforce session state on protected routes.
Do not manually store or forward auth tokens in client code.
Use Server Actions (or secure route handlers) for privileged auth operations.
Maintain RLS assumptions; do not bypass policy boundaries.

Workflow

Identify execution boundary first (server component, client component, middleware, action, or route handler).
Ensure the correct Supabase client is used for that boundary.
Verify middleware coverage for protected routes.
Verify callback handling exchanges auth code/session correctly.
Validate auth checks before sensitive reads/writes.
Verify end-to-end login/logout/session refresh behavior.

Checklist

Server code imports @/lib/supabase/server
Client code imports @/lib/supabase/client
Protected paths are covered by auth middleware
Callback route/session exchange is correctly handled
No service role keys in client-side code
No manual token persistence logic added

Common Anti-Patterns

Using browser clients in server actions
Using server clients in client components
Calling getSession blindly in server render paths without user validation
Storing JWTs manually in localStorage/cookies

More from this repository

same repository

repo-entry

Asymmetric-al/core

Pointer to the canonical agent instruction and skill system for this monorepo

2026-07-01376

anim

Asymmetric-al/core

Tasteful, subtle web UI animation following Emil Kowalski / animations.dev principles. Use when adding or reviewing interface motion — hover and press feedback, entrances and exits, modals, toasts, menus, loading and skeleton states, staggered reveals, page or view transitions — so motion stays refined and purposeful, not decorative. Covers CSS, Web Animations, and React timing/easing. Pair with the motion skill for motion/react API specifics.

2026-06-29376

improve

Asymmetric-al/core

Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or where to take the project next (roadmap, product direction), or generate handoff plans for another agent to implement.

2026-06-29376

inngest-durable-functions

Asymmetric-al/core

Use when building functions that must survive process crashes, retry automatically on failure, run on a schedule, react to events, or maintain state across infrastructure failures — e.g., webhook handlers that drop events, flaky cron jobs, background jobs that fail mid-execution, or workflows that need to resume where they left off. Covers Inngest function configuration, triggers (events, cron, invoke), step execution and memoization, idempotency, cancellation, error handling, retries, logging, and observability.

2026-06-28376

nextjs

Asymmetric-al/core

Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prevents 25 documented errors. Use when: building Next.js 16 projects, or troubleshooting async params (Promise types), "use cache" directives, parallel route 404s, Turbopack issues, i18n caching, navigation throttling.

2026-06-28376

shadcn-ui

Asymmetric-al/core

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

2026-06-28376

Next.js + Supabase Auth

Use this skill for authentication work in Next.js App Router with Supabase Auth.

When to Apply

Use this skill when:

Implementing login/signup/logout and session flows

Protecting routes with middleware

Handling auth callback exchanges

Wiring auth checks in Server Components, Server Actions, and route handlers

Debugging cookie/session desync between server and client

Do not use this skill when:

The task is primarily query/index/schema optimization (use supabase-postgres-best-practices)

The task spans broader Supabase surface area beyond Next.js auth wiring (use docs/ai/skills/supabase/SKILL.md)

The task is UI-only and does not change auth behavior

Core Rules

Use @supabase/ssr patterns for App Router integration.

Use @/lib/supabase/server for server-side code and @/lib/supabase/client for client-side code.

Use middleware to refresh and enforce session state on protected routes.

Do not manually store or forward auth tokens in client code.

Use Server Actions (or secure route handlers) for privileged auth operations.

Maintain RLS assumptions; do not bypass policy boundaries.

Workflow

Identify execution boundary first (server component, client component, middleware, action, or route handler).

Ensure the correct Supabase client is used for that boundary.

Verify middleware coverage for protected routes.

Verify callback handling exchanges auth code/session correctly.

Validate auth checks before sensitive reads/writes.

Verify end-to-end login/logout/session refresh behavior.

Checklist

Server code imports @/lib/supabase/server

Client code imports @/lib/supabase/client

Protected paths are covered by auth middleware

Callback route/session exchange is correctly handled

No service role keys in client-side code

No manual token persistence logic added

Common Anti-Patterns

Using browser clients in server actions

Using server clients in client components

Calling getSession blindly in server render paths without user validation

Storing JWTs manually in localStorage/cookies