supabase-nextjs

Implement Next.js authentication and database queries with Supabase and Drizzle ORM.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Maykesantos98/Fiap-Totvs --skill supabase-nextjs-maykesantos98
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: supabase-nextjs
Source: https://github.com/Maykesantos98/Fiap-Totvs/tree/main/.claude/skills/supabase-nextjs
Command: npx skills add https://github.com/Maykesantos98/Fiap-Totvs --skill supabase-nextjs-maykesantos98

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of wiring authentication, database access, and app routing in a Next.js project without mixing insecure client-side patterns or losing type safety.

Core Features & Use Cases

  • Supabase Auth (server-side): Handles sign-in, OAuth callback exchange, session-aware access, and protected routes via middleware and server clients.
  • Drizzle ORM for Postgres: Provides type-safe, deterministic database querying and schema definitions, including relationships to auth-derived profiles.
  • End-to-end app scaffolding: Covers common production needs like revalidation after mutations, storage uploads, realtime updates, and secure sign-out flows.

Use case example: You want a multi-page dashboard where only authenticated users can access content, user data is stored in Postgres with safe typed queries, avatars upload to Supabase Storage, and UI updates in real time when database records change.

Quick Start

Tell the AI: "Set up a Next.js App Router project using Supabase Auth and Drizzle ORM, including middleware-protected routes, server/client Supabase clients, and example auth pages with sign-in and callback handling."

Frequently Asked Questions about supabase-nextjs

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

FAQPage Schema
How do I set up Supabase auth with Next.js App Router and protected routes?

To set up Supabase auth with Next.js App Router, use middleware and server-side cookie-aware clients to manage sessions and protect routes. This approach ensures secure sign-in, OAuth callback exchange, and access control without exposing client-side vulnerabilities.

What is the best way to query Postgres in Next.js server components using Drizzle ORM?

The best way to query Postgres in Next.js server components is using Drizzle ORM for type-safe, deterministic database querying. This method defines schemas and handles relationships to auth-derived profiles while maintaining strict type safety across your application.

Can I use Supabase storage uploads and realtime updates with Next.js server actions?

Yes, you can use Supabase storage uploads and realtime updates with Next.js server actions. This integration handles avatar uploads to Supabase Storage and triggers UI updates in real time when database records change, covering common production needs.

Why does my Next.js Supabase session break when using server components?

Next.js Supabase sessions often break in server components when using insecure client-side patterns instead of server-side cookie-aware clients. Implementing proper middleware and server clients for session correctness resolves these authentication and revalidation issues.

Do I need middleware for Supabase OAuth callbacks in Next.js?

You need middleware for Supabase OAuth callbacks in Next.js to properly intercept and handle the authentication exchange. This ensures secure session-aware access and correctly redirects authenticated users to protected routes.

How to handle secure sign-out flows and data revalidation in a Next.js Supabase app?

To handle secure sign-out flows and data revalidation in a Next.js Supabase app, use server actions to clear session cookies and trigger route revalidation after mutations. This ensures protected content is immediately inaccessible and UI updates correctly.