nextjs-supabase-auth

Integrate Supabase Auth with Next.js App Router for middleware-protected routes.

1|Updated Mar 23, 2026
One-click install
npx skills add https://github.com/sbalagan22/bloomr --skill nextjs-supabase-auth-sbalagan22
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-supabase-auth
Source: https://github.com/sbalagan22/bloomr/tree/main/.claude/skills/nextjs-supabase-auth
Command: npx skills add https://github.com/sbalagan22/bloomr --skill nextjs-supabase-auth-sbalagan22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines secure authentication in Next.js apps by integrating Supabase Auth with App Router, enabling server/client boundary handling, middleware protection, and safe token management.

Core Features & Use Cases

  • Supabase client setup for different contexts
  • Middleware-protected routes with session refresh
  • OAuth callback handling and server actions for auth operations
  • Safe exposure of tokens and server-driven authentication flow

Quick Start

Configure Supabase Auth with Next.js App Router to secure routes via middleware and enable server actions for login, logout, and session refresh.

Frequently Asked Questions about nextjs-supabase-auth

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

FAQPage Schema
How do I integrate Supabase Auth with Next.js App Router middleware?

Protect routes in Next.js App Router by configuring middleware to intercept requests and refresh Supabase Auth sessions. This approach uses @supabase/ssr to manage tokens securely across server and client boundaries, preventing unauthorized access to protected routes.

What is the best way to handle OAuth callbacks in Next.js App Router with Supabase?

Handling OAuth callbacks in Next.js App Router requires processing authentication code exchanges via server actions. This method securely manages token exposure and completes the OAuth flow by updating the session state within the server environment.

How does server and client boundary handling work for Supabase Auth tokens?

Server and client boundary handling for Supabase Auth tokens works by using @supabase/ssr to manage session cookies. This ensures tokens are safely exposed and refreshed on the server side before passing necessary data to client components.

Can I use server actions for Supabase login and logout in Next.js?

You can use Next.js server actions to perform Supabase Auth operations like login and logout. Server actions execute securely on the server, managing authentication state updates and session tokens without exposing sensitive credentials to the client.

How do I refresh user sessions in Next.js middleware with Supabase?

Refresh user sessions in Next.js middleware by intercepting requests to protected routes and validating the current Supabase Auth token. If the token is expired, the middleware uses @supabase/ssr to refresh the session and update authentication cookies.

Do I need @supabase/ssr to manage authentication in Next.js App Router?

You need @supabase/ssr to manage authentication in Next.js App Router because it handles the server-side token management and cookie synchronization required for middleware-based route protection and secure server actions.