Supabase Auth

Implement Supabase SSR authentication with OAuth callbacks and RLS policies in Next.js.

1|Updated May 2, 2026
One-click install
npx skills add https://github.com/Levironexe/architect --skill supabase-auth-levironexe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Supabase Auth
Source: https://github.com/Levironexe/architect/tree/main/skills/patterns/supabase-auth
Command: npx skills add https://github.com/Levironexe/architect --skill supabase-auth-levironexe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Supabase authentication can still lead to broken sign-in flows or insecure data access when OAuth callbacks, session refresh, and Row Level Security (RLS) policies are missing or miswired.

Core Features & Use Cases

  • Supabase SSR session management: Uses @supabase/ssr to create server and browser clients that correctly read/write session cookies in Next.js.
  • OAuth callback that makes sign-in work: Enforces the mandatory app/auth/callback/route.ts to exchange the one-time OAuth code for a session.
  • Reliable session longevity: Adds middleware that refreshes the session on every request to prevent silent logouts mid-usage.
  • RLS-first security: Ensures authenticated access is safe by requiring RLS and policies that scope rows to auth.uid().
  • Use case: An app with multiple users needs GitHub/Google sign-in, persistent sessions during active browsing, and guaranteed per-user data isolation in database queries.

Quick Start

Install the Architect pattern skills for your Next.js project by running architect init . in your codebase, then follow the generated guidance to create app/auth/callback/route.ts, add middleware session refresh, and implement RLS policies tied to auth.uid().

Frequently Asked Questions about Supabase Auth

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

FAQPage Schema
How do I implement Supabase SSR authentication in Next.js without silent logouts?

Use @supabase/ssr to create separate server and browser clients that correctly read and write session cookies in Next.js. This separation ensures authenticated user identity consistently survives short-lived tokens across server-side renders and active browsing sessions.

Why does my Supabase OAuth social login flow break in Next.js?

Your Supabase OAuth social login flow breaks when the mandatory app/auth/callback/route.ts is missing or miswired. You must use exchangeCodeForSession in this route to properly exchange the one-time OAuth code for a valid user session.

Do I need RLS policies with auth.uid() for Supabase SSR session management?

Yes, you need RLS policies scoped with auth.uid() for Supabase SSR session management to guarantee per-user data isolation. RLS ensures authenticated access is safe by scoping database rows to the specific authenticated user identity on every request.

What's the best way to secure GitHub and Google sign-in data access in Next.js?

The best way to secure GitHub and Google sign-in data access is enforcing RLS-backed authorization with auth.uid() scoping alongside @supabase/ssr server/client separation. This guarantees per-user data isolation in database queries for apps with multiple authenticated users.

Can I use @supabase/ssr server and browser clients for OAuth code exchange?

Yes, you can use @supabase/ssr to create server and browser clients that correctly read and write session cookies for OAuth code exchange. The server client handles the mandatory exchangeCodeForSession call in app/auth/callback/route.ts to establish the session.