supabase-auth-ssr-setup

Configure Supabase authentication for Next.js App Router with SSR middleware and route guards.

6|Updated Nov 11, 2025

Search Tags:#middleware #supabase #server actions #ssr #auth

Ready to run

npx skills add https://github.com/hopeoverture/worldbuilding-app-skills --skill supabase-auth-ssr-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: supabase-auth-ssr-setup
Source: https://github.com/hopeoverture/worldbuilding-app-skills/tree/main/skills/development/supabase-auth-ssr-setup
Command: npx skills add https://github.com/hopeoverture/worldbuilding-app-skills --skill supabase-auth-ssr-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Provides a comprehensive pattern for implementing server-side authentication with Supabase in Next.js apps, including SSR middleware, auth utilities, and server actions.

Core Features & Use Cases

SSR client/server utilities for auth
Middleware-powered route protection
Server Actions for login/logout flows
Utility functions for current session and user
Secure cookie handling and redirect flows

Quick Start

Integrate Supabase SSR authentication into your app and protect routes with middleware.

Frequently Asked Questions about supabase-auth-ssr-setup

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

FAQPage Schema

How do I set up Supabase authentication with Next.js server-side rendering?▼

Configure Supabase SSR authentication in Next.js App Router by implementing secure cookie-based sessions, creating browser and server clients, setting environment variables, and protecting routes with middleware. This enables auth flows across server components, server actions, and the Next.js middleware layer.

Can I use Supabase for middleware-based route protection in Next.js?▼

Yes. Supabase SSR setup includes middleware-powered route guards that intercept requests, validate sessions from secure cookies, and redirect unauthenticated users. This protects routes at the middleware level before they reach your application.

How do I handle login and logout with Supabase server actions in Next.js?▼

Implement server actions that manage Supabase login and logout flows using secure session cookies and redirect logic. The pattern covers OAuth callbacks, token refresh, and session management across browser and server boundaries.

What's the best way to manage user sessions and tokens with Supabase in Next.js SSR?▼

Use Supabase SSR utilities to create requireAuth and getSession helpers that retrieve current user data from secure cookies stored during authentication. These utilities work consistently across server components, server actions, and API routes.

Do I need separate Supabase clients for browser and server in Next.js?▼

Yes. Supabase SSR setup requires distinct browser and server clients. The browser client handles user interactions and OAuth flows in the browser, while the server client manages protected operations on the server with elevated privileges.

How do I configure OAuth callbacks and token refresh with Supabase in Next.js?▼

Set up OAuth callback routes that exchange provider tokens for Supabase sessions and store them in secure cookies. Implement token refresh logic to maintain valid sessions across requests without requiring user re-authentication.