Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Next.js + Supabase Auth · asymmetric-al | DecimalAI

asymmetric-al/nextjs-supabase-auth

NewSkillScoreMaintained

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

codingby asymmetric-al

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/asymmetric-al-nextjs-supabase-auth/SKILL.md

decimalai skills pull asymmetric-al-nextjs-supabase-auth --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/asymmetric-al-nextjs-supabase-auth/SKILL.md https://app.decimal.ai/s/asymmetric-al-nextjs-supabase-auth/SKILL.md

Raw file: /s/asymmetric-al-nextjs-supabase-auth/SKILL.md ↗ · machine-readable summary at /s/asymmetric-al-nextjs-supabase-auth.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 12h ago

Yes — +52% lift-11% tokens0% turns100% of whole cases pass with skill (23/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✗→✓	▲ Improved	1%	0%
case-03	✗→✓	▲ Improved	-13%	0%
case-04	✗→✓	▲ Improved	-30%	0%
case-11	✗→✓	▲ Improved	-4%	0%
case-07	✗→✓	▲ Improved	-11%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

asymmetric-al / core

.agents/skills/nextjs-supabase-auth/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

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

Want to see if asymmetric-al/nextjs-supabase-auth would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/20/2026, 12:09 UTC · 23 cases

Lift

+52%

100% vs 48%

Agent turns

0%

1.0 vs 1.0

Tokens

-11%

1,919.17 vs 2,150.91

fail → pass · 12pass → pass · 11

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-02 We are noticing that user session state gets out of sync between server renders and client components in our Next.js app. Please write a middleware implementation that refreshes user auth sessions automatically and restricts access to our `/dashboard` routes.	fail→pass	16,662	12,575	-25%	1	1	0%	2,990	3,032	+1%	0	0	—
case-01 I am building a Next.js App Router application and need to implement a Server Action for user email/password login using Supabase Auth. Could you provide the backend action file that validates the user credentials and handles success or error responses?	pass→pass	14,732	11,178	-24%	1	1	0%	3,081	2,697	-12%	0	0	—
case-03 I need to set up the authentication callback route handler in our Next.js App Router application to handle email verification links and OAuth redirects from Supabase. Can you write the code for this handler to exchange the token code for a active session and redirect the user?	fail→pass	12,973	8,612	-34%	1	1	0%	2,450	2,138	-13%	0	0	—
case-04 I am creating an interactive client component for user profile management in Next.js App Router. Which import path should be used to instantiate the client-side Supabase instance?	fail→pass	7,589	2,550	-66%	1	1	0%	1,316	916	-30%	0	0	—
case-05 In a Next.js App Router Server Component, I need to fetch the authenticated user's ID before displaying sensitive user details. Should I call getSession() or getUser() on the server client?	pass→pass	9,835	5,522	-44%	1	1	0%	1,681	1,551	-8%	0	0	—
case-06 Explain why getSession() should not be trusted for auth validation in Next.js App Router Server Components, and what alternative method should be called.	pass→pass	12,556	7,290	-42%	1	1	0%	2,104	1,821	-13%	0	0	—
case-11 Write a Server Action function in Next.js App Router that logs out the user and clears authentication cookies.	fail→pass	9,558	6,359	-33%	1	1	0%	1,722	1,646	-4%	0	0	—
case-07 I want to save the user's access token into window.localStorage after logging in from a React component, then read it manually on route changes. How should I write this persistence logic?	fail→pass	12,303	8,490	-31%	1	1	0%	2,408	2,144	-11%	0	0	—
case-08 I need to perform admin updates inside a React client component ('use client'). Should I pass process.env.SUPABASE_SERVICE_ROLE_KEY to createBrowserClient?	pass→pass	10,932	8,025	-27%	1	1	0%	1,901	1,940	+2%	0	0	—
case-09 Can I import createBrowserClient or import from '@/lib/supabase/client' inside a Next.js Server Action to update user credentials?	pass→pass	10,864	6,360	-41%	1	1	0%	1,879	1,633	-13%	0	0	—
case-10 Where in a Next.js App Router directory structure should route guard checks and session refreshes be enforced for protected pages like `/settings`?	pass→pass	14,464	8,216	-43%	1	1	0%	2,491	1,892	-24%	0	0	—
case-12 Provide a React client component ('use client') that renders a logout button and signs the user out when clicked.	fail→pass	8,659	5,256	-39%	1	1	0%	1,677	1,501	-10%	0	0	—
case-13 Write a Next.js Server Action that registers a new account using email and password credentials.	fail→pass	13,770	9,196	-33%	1	1	0%	2,726	2,150	-21%	0	0	—
case-14 Write a Next.js GET route handler (`app/api/profile/route.ts`) that verifies the user identity before returning account data.	fail→pass	10,929	7,126	-35%	1	1	0%	2,213	1,792	-19%	0	0	—
case-15 Write a Server Action in Next.js App Router to send a password reset email to a user.	fail→pass	14,209	8,353	-41%	1	1	0%	2,958	2,039	-31%	0	0	—
case-16 In Next.js App Router, I want to extract the auth cookie manually using cookies() and set 'Authorization: Bearer' headers on every API fetch call. Is this necessary?	fail→pass	13,468	8,101	-40%	1	1	0%	2,411	1,974	-18%	0	0	—
case-17 In a client-side React component marked with 'use client', can I import and invoke createClient from '@/lib/supabase/server'?	pass→pass	7,336	4,559	-38%	1	1	0%	1,440	1,290	-10%	0	0	—
case-18 In a Next.js route handler, should I bypass Row Level Security by using the service role client when fetching user-owned data?	pass→pass	10,503	6,030	-43%	1	1	0%	1,946	1,584	-19%	0	0	—
case-19 Write a Next.js Server Action to update a user's email address. What identity verification call must be performed before executing the update?	fail→pass	13,965	7,347	-47%	1	1	0%	3,138	1,928	-39%	0	0	—
case-20 My SQL query running in Supabase on table `orders` filtering by `user_id` and sorting by `created_at` is slow. How should I create an index in Postgres for this query?	pass→pass	7,895	4,868	-38%	1	1	0%	1,363	1,386	+2%	0	0	—
case-21 How do I create a public avatar storage bucket in Supabase and configure file size limit policies using SQL or Dashboard?	pass→pass	10,539	9,866	-6%	1	1	0%	2,161	2,562	+19%	0	0	—
case-22 Provide Tailwind CSS classes and JSX layout structure for a centered login card with email and password input fields.	pass→pass	10,200	12,300	+21%	1	1	0%	2,425	3,480	+44%	0	0	—
case-23 When organizing Supabase interactions across Next.js App Router, what step should be performed before writing data fetching or mutation logic?	fail→pass	5,752	2,937	-49%	1	1	0%	990	1,045	+6%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +52 percentage points is the difference between those two pass rates over the 23 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 47.8%
Pass rate with the skill: 100%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/20/2026, 12:09 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Prompt

We are noticing that user session state gets out of sync between server renders and client components in our Next.js app. Please write a middleware implementation that refreshes user auth sessions automatically and restricts access to our `/dashboard` routes.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested today

Other measured skills in the registry, with their headline benchmark lift.