nextjs-supabase-auth

Integrate Supabase authentication into Next.js App Router with middleware.

2|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template --skill nextjs-supabase-auth-youmingyeh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-supabase-auth
Source: https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template/tree/main/.agents/skills/nextjs-supabase-auth
Command: npx skills add https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template --skill nextjs-supabase-auth-youmingyeh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a robust pattern for integrating Supabase authentication into a Next.js App Router app, including secure middleware, session handling, and OAuth callbacks.

Core Features & Use Cases

  • Supabase client setup for server and client contexts
  • Auth middleware to protect routes and refresh sessions
  • OAuth callback handling and session exchange
  • Server Actions for login, signup, and token refresh
  • Secure token management and minimal client exposure

Quick Start

Integrate Supabase Auth into a Next.js App Router project by configuring the client, adding protected routes via middleware, and implementing server actions for login and logout.

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 authentication in a Next.js App Router project?

Supabase authentication in Next.js App Router requires configuring Supabase clients for server and client contexts, adding middleware to protect routes, and implementing server actions for login and logout.

How does middleware handle auth sessions and route protection with Supabase?

Auth middleware protects routes and automatically refreshes Supabase user sessions in Next.js, intercepting requests to validate tokens and ensure secure access across server and client boundaries.

Can I use server actions for login and OAuth callbacks in Next.js App Router?

Yes, server actions handle login, signup, and token refresh in Next.js App Router, processing OAuth callbacks and session exchange securely on the server to minimize client exposure of auth tokens.

Do I need to manually manage auth tokens and cookies for Supabase in Next.js?

Manual token management is minimized by secure server-side handling in Next.js, which automatically manages auth tokens and cookies via middleware and server actions to reduce client-side exposure.

What is the best way to handle OAuth callbacks and session exchange in Next.js?

The best way to handle OAuth callbacks in Next.js is to process the session exchange on the server, ensuring secure token handling and proper session validation before redirecting within the App Router.