Run any Skill in Manus with one click

nextjs-supabase-auth

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

Run Skill in Manus

Stars408

Forks5

UpdatedApril 9, 2026 at 22:36

Source

Asymmetric-al

Asymmetric-al/core

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

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-06-08408

bendc-frontend-guidelines

Asymmetric-al/core

HTML, CSS, and JavaScript craft guidelines from bendc/frontend-guidelines — semantics, a11y basics, selector discipline, motion-friendly CSS, and readable JS. Use for markup review, static HTML/CSS, email HTML, or general front-end hygiene; pair with repo frontend rules and TypeScript lint policy.

2026-05-26408

deploy-to-vercel

Asymmetric-al/core

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

2026-05-26408

diagnose

Asymmetric-al/core

Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.

2026-05-26408

domain-model

Asymmetric-al/core

Alias for ubiquitous-language (DDD glossary / domain terminology). See ubiquitous-language for full workflow.

2026-05-26408

emil-design-engineering

Asymmetric-al/core

Design engineering principles and patterns for building polished, accessible web interfaces. Use this skill when building UI components, reviewing frontend code, implementing forms, handling touch interactions, optimizing performance, or creating marketing pages. Triggers on: design engineering, UI polish, input fields, form validation, button states, touch devices, mobile UX, accessibility, a11y, keyboard navigation, aria labels, font rendering, typography, layout shift, z-index, animations, transitions, easing, hover effects, tap targets, iOS Safari, prefers-reduced-motion, marketing pages, landing pages, dark mode, theme switching, scrollbars, gradients, shadows, virtualization, preloading.

2026-05-26408

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