What authentication features does this skill cover?

This skill covers Supabase authentication integration in Next.js App Router, including login/logout flows, protected routes, OAuth provider integration (Google, GitHub, etc.), session management, and session refresh via middleware.

Which Next.js versions and authentication providers does this skill support?

This skill is specifically designed for Next.js App Router applications with Supabase authentication. It does not support Pages Router projects or other authentication providers.

What inputs do I need to provide to use this skill?

You need to provide your Next.js App Router project structure, Supabase project credentials (URL and anon key), and your authentication requirements such as protected routes, OAuth providers, and login/logout flows.

What common authentication issues does this skill help validate?

The skill includes validation checks for issues like using getSession() instead of getUser() for auth verification, missing OAuth callback routes, and incorrectly using browser clients in server contexts.

Skill

Integrate Supabase Auth with Next.js App Router

Name: Next.js + Supabase Auth
Availability: OnlineOnly
Author: Antigravity

Expert integration patterns for Supabase Auth in Next.js App Router: client setup, middleware, and OAuth callbacks.

Get skill

Works with next.jssupabase

Antigravity

Own this? Claim it

Spark score

out of 100

Updated 5 days ago

Version 15.8.0

Add to Favorites

Why it matters

Secure your Next.js application by seamlessly integrating Supabase Authentication. This asset provides expert implementation for user authentication, route protection, and session management within the Next.js App Router.

Outcomes

What it gets done

Implement Supabase client setup for browser and server contexts.

Configure middleware for route protection and session refresh.

Handle OAuth callback routes for seamless third-party logins.

Manage authentication operations within Server Actions.

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-nextjs-supabase-auth | bash

Overview

Next.js + Supabase Auth

Expert Supabase Auth integration patterns for Next.js App Router: browser and server clients, session-refreshing middleware, an OAuth callback route, and Server Actions for sign-in and sign-out, plus a checklist of common auth mistakes. Use it when adding or auditing Supabase authentication in a Next.js App Router project; it assumes nextjs-app-router and supabase-backend are already in place.

What it does

Provides expert integration patterns for Supabase Auth in a Next.js App Router project: separate browser and server Supabase clients (createBrowserClient/createServerClient from @supabase/ssr), auth middleware that refreshes sessions and redirects unauthenticated users away from protected /dashboard routes, an OAuth callback route that exchanges an auth code for a session, Server Actions for sign-in and sign-out with revalidatePath and redirect, and a pattern for reading the authenticated user inside a Server Component.

When to use - and when NOT to

Use it when adding or reviewing Supabase authentication in a Next.js App Router project - client setup, middleware-based route protection, OAuth login, or server-side auth reads. It assumes nextjs-app-router and supabase-backend are already in place as prerequisite skills, and is not a substitute for either.

Inputs and outputs

Input: a Next.js App Router project needing Supabase Auth wired in, or an existing auth implementation to audit. Output: browser/server Supabase client files, a middleware.ts for route protection, an app/auth/callback/route.ts OAuth handler, Server Action functions for sign-in and sign-out, and a validation report against eight checks - flagging getSession() used for a security check (it doesn't verify the JWT; getUser() is required), a missing OAuth callback route, a browser client used in a server context, a hardcoded localhost redirect, an auth call missing error handling, and an auth action missing revalidatePath that could leave stale cached auth state. The middleware pattern itself matches requests against every route except static assets (_next/static, _next/image, favicon.ico) via its matcher config, and the OAuth callback route reads a next query parameter so a user lands back on the page they were trying to reach, falling back to the site root if none was set.

Integrations

Built on @supabase/ssr (createBrowserClient/createServerClient) and Next.js App Router primitives - middleware, Server Actions, Server Components, next/navigation, next/cache. Delegates to sibling skills for the database layer (supabase-backend), routing patterns (nextjs-app-router), deployment (vercel-deployment), and UI (frontend), and combines with stripe-integration for subscription-gated SaaS auth flows.

Who it's for

Next.js developers wiring up or auditing Supabase-based authentication who want the correct client/middleware/callback split and a checklist of common auth mistakes to avoid.

A named "Protected SaaS" workflow shows the skill combined with stripe-integration and supabase-backend: authenticate the user, sync them as a Stripe customer, then gate features by subscription status stored in Supabase. A broader "Full Auth Stack" workflow sequences it after database setup and before route protection and deployment configuration, reflecting the skill's own stated prerequisite ordering.

FAQ

Common questions

Discussion