skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-supabase-auth

Implements Supabase Auth integration with Next.js App Router using cookie-based sessions.

Updated Jul 29, 2026
Search Tags:#authentication#oauth#middleware#supabase#next.js#session management#app router
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill nextjs-supabase-auth-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-supabase-auth
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/nextjs-supabase-auth
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill nextjs-supabase-auth-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @supabase/ssr.

What problem does it solve? Integrating authentication into a Next.js App Router application is error-prone because of the server/client boundary, token refresh in middleware, and cookie-based session handling. This Skill provides expert guidance to wire Supabase Auth correctly across Server Components, Client Components, Server Actions, and middleware. ## Core Features & Use Cases - Supabase Client Setup: Create properly configured Supabase clients for server and client contexts using @supabase/ssr. - Auth Middleware: Protect routes and refresh sessions in Next.js middleware. - Auth Callback Route: Handle OAuth callbacks and exchange authorization codes for sessions. - Anti-Pattern Avoidance: Prevent common mistakes like calling getSession in Server Components or storing tokens manually. - Use Case: You are building a Next.js App Router app that needs login, protected dashboard routes, and OAuth sign-in. Use this Skill to set up the middleware, callback route, and server-side clients correctly on the first attempt. ## Quick Start Set up Supabase Auth in my Next.js App Router project with middleware-protected routes and an OAuth callback handler.

Frequently Asked Questions about nextjs-supabase-auth

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Supabase Auth with Next.js App Router?▼

Use @supabase/ssr to create separate Supabase clients for Server Components, Client Components, and Server Actions. Configure middleware to refresh sessions and add an auth callback route to exchange OAuth codes for sessions.

How to protect routes with Supabase auth middleware in Next.js?▼

Create a middleware file that initializes a Supabase server client, refreshes the session cookie, and redirects unauthenticated users away from protected paths. This keeps tokens server-side and sessions current on every request.

Does Supabase Auth work with Next.js Server Components?▼

Yes, but you should not call getSession in Server Components since it reads unverified cookie data. Use getUser instead, which validates the token against the Supabase Auth server before trusting the session.

Why is my Supabase session lost on page refresh in Next.js?▼

Sessions are lost when middleware does not refresh the auth token or cookies are not passed correctly between server and client contexts. Ensure your middleware updates the session cookie and that clients are created with @supabase/ssr.

Should I store Supabase auth tokens manually in localStorage?▼

No, manually storing tokens is an anti-pattern that exposes credentials to client-side attacks. The cookie-based session flow managed by @supabase/ssr handles token storage and refresh securely for you.

Related Skills

Explore More Software Engineering Skills→
nghiahsgsnghiahsgs
32

auth-magic-link

Implement Supabase passwordless email magic-link authentication for taw-kit projects.

Community
Advanced
Jicate-SolutionsJicate-Solutions

myjkkn-auth-setup

Automate MyJKKN SSO OAuth 2.0 setup in Next.js with Supabase.

Official
Intermediate
PolarDythPolarDyth

supabase-client

Initialize Supabase clients for server, client, and admin contexts in Next.js.

Community
Intermediate
gil00pitagil00pita

nextauth

Implement NextAuth/Auth.js v5 authentication with OAuth providers and protected routes in Next.js apps.

Community
Advanced