nextjs-supabase-auth

Integrate Supabase Auth into Next.js App Router with session and token refresh.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/gerald-ica/dev-tool-configs --skill nextjs-supabase-auth-gerald-ica
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-supabase-auth
Source: https://github.com/gerald-ica/dev-tool-configs/tree/main/gemini/skills/nextjs-supabase-auth
Command: npx skills add https://github.com/gerald-ica/dev-tool-configs --skill nextjs-supabase-auth-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next, supabase, @supabase/auth-helpers-nextjs, and includes scripts (resource) components.

What problem does it solve?

This Skill solves the complexity of integrating Supabase Auth with the Next.js App Router, making it easy to add authentication functionality to your Next.js applications.

Core Features & Use Cases

  • Supabase Auth Integration: Seamlessly integrates Supabase Auth into Next.js using the App Router.
  • Secure Token Handling: Securely manages and refreshes authentication tokens.
  • Protected Routes: Automatically protects routes using middleware and server actions.
  • Use Case: A user-friendly, code example demonstrating how to add protected routes and middleware for authentication in a Next.js app using Supabase.

Quick Start

Add this skill to your Next.js project to protect routes and handle authentication with Supabase.

Frequently Asked Questions about nextjs-supabase-auth

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

FAQPage Schema
How do I add Supabase authentication to a Next.js App Router project?

Supabase authentication integrates into the Next.js App Router by managing sessions and token refresh directly within middleware and server components. This Skill provides the setup to securely handle user login state across server and client environments.

What is the best way to manage Supabase auth sessions in Next.js middleware?

Managing Supabase auth sessions in Next.js middleware involves securely refreshing authentication tokens and protecting routes before they render. This approach ensures that user sessions remain active and validated on the server side automatically.

Can I automatically protect Next.js routes using Supabase Auth?

Yes, you can automatically protect Next.js routes by implementing Supabase Auth checks within your middleware and server actions. This prevents unauthorized access to secured pages without requiring manual validation on every page.

Do I need a Supabase backend to handle Next.js authentication?

Yes, a configured Supabase backend is required to handle Next.js authentication. The integration relies on a Supabase project to manage user credentials, validate sessions, and issue authentication tokens for your application.

How does token refresh work with Supabase in Next.js server components?

Token refresh with Supabase in Next.js server components works by intercepting requests in middleware to securely refresh expired tokens. This ensures that server-rendered pages always have access to valid authentication credentials.