Wire Supabase Auth into this Next.js 16 app with @supabase/ssr — browser/server clients, the proxy.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and…

UnlicenseAuto-check passedFrontend & Design

Install Supabase Auth

skills CLI
$ npx skills add textura-agency/next16-claude-starter --skill supabase-auth -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install textura-agency/next16-claude-starter supabase-auth --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/textura-agency/next16-claude-starter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/supabase-auth .claude/skills/supabase-auth && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
supabase-auth
GitHub stars
133
Token cost
~1.4k tokens
SKILL.md length
311 words
Files
1
Skills in repo
16
Repo updated
First seen
Licence
Unlicense

At a glance

Wire Supabase Auth into this Next.js 16 app with @supabase/ssr — browser/server clients, the proxy.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and…

  • Works in 3 steps: Never trust getSession() in server code.… → Never put code between… → Return supabaseResponse unmodified. If…
  • The user asks for login
  • SKILL.md covers The Next.js 16 wrinkle, Three clients, three files, The three rules that cause… and Authorisation still lives in…, plus 1 more section
  • Calls yarn; needs NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

What it does

Supabase Auth is an agent skill from textura-agency/next16-claude-starter. Wire Supabase Auth into this Next.js 16 app with @supabase/ssr — browser/server clients, the proxy.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and sign-in flows. Use when the user asks for login, accounts, a client portal, gated content, or "add auth". Not needed for a plain marketing site.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Landing pages. It works with Supabase and Next.js. The repository describes itself as: AI-first Next.js 16 starter for animation-heavy sites, wired with an Obsidian vault & Claude Code hooks. The licence is Unlicense.

When your agent uses it

  • The user asks for login
  • A client portal

Example prompts

  • “add auth”
  • “/supabase-auth”

Requirements

  • A credential in NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Never trust getSession() in server code. It reads the cookie without
  2. Never put code between createServerClient and getClaims() in the proxy.
  3. Return supabaseResponse unmodified. If you must build a new response,

What it can do on your machine

Read from SKILL.md and the folder at commit 6c6edf9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Supabase Auth loads about 1.4k tokens when it runs. Until then it costs about 88 tokens; SKILL.md has 311 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~88
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from textura-agency/next16-claude-starter at commit 6c6edf9, republished under its Unlicense licence (© textura-agency). 311 words, ~1,366 tokens.

Download SKILL.mdSave it as .claude/skills/supabase-auth/SKILL.md (or your agent's skills folder).
name
supabase-auth
description
Wire Supabase Auth into this Next.js 16 app with @supabase/ssr — browser/server clients, the proxy.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and sign-in flows. Use when the user asks for login, accounts, a client portal, gated content, or "add auth". Not needed for a plain marketing site.

Supabase Auth in Next.js 16

Only reach for this if the project genuinely needs user accounts. A marketing site backed by Payload does not — Payload has its own admin auth, and adding Supabase Auth on top is pure complexity.

Verified 2026-08 against @supabase/ssr 0.12.4.

The Next.js 16 wrinkle

middleware.ts no longer exists — it is proxy.ts, exporting a function named proxy, running on Node (the Edge runtime is gone and cannot be configured). Next's guidance is the "thin proxy" pattern: cheap cookie checks and redirects only. Session refresh is fine there; heavy authorisation is not.

bash
yarn add @supabase/supabase-js @supabase/ssr

Env: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY (both zod-validated in src/env.ts).

Three clients, three files

src/lib/supabase/client.ts — browser:

ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
  )
}

src/lib/supabase/server.ts — Server Components, Route Handlers, Actions:

ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet, _headers) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Called from a Server Component — safe to ignore when the proxy
            // is refreshing sessions.
          }
        },
      },
    }
  )
}

src/lib/supabase/proxy.ts — the session refresher:

ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request })

  // With Fluid compute, never hoist this client into a module-level variable.
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet, headers) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({ request })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
          Object.entries(headers).forEach(([key, value]) =>
            supabaseResponse.headers.set(key, value)
          )
        },
      },
    }
  )

  // Do not run code between createServerClient and getClaims().
  const { data } = await supabase.auth.getClaims()
  const user = data?.claims

  if (!user && !request.nextUrl.pathname.startsWith('/login')) {
    const url = request.nextUrl.clone()
    url.pathname = '/login'
    return NextResponse.redirect(url)
  }

  return supabaseResponse
}

src/proxy.ts — the entry point:

ts
import { type NextRequest } from 'next/server'
import { updateSession } from '@/lib/supabase/proxy'

export async function proxy(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
}

The three rules that cause every mystery bug

  1. Never trust getSession() in server code. It reads the cookie without revalidating. Use getClaims() (verifies the JWT signature against the project's published keys) or getUser() (round-trips to Supabase).
  2. Never put code between createServerClient and getClaims() in the proxy. It desynchronises cookie refresh and logs users out at random.
  3. Return supabaseResponse unmodified. If you must build a new response, pass { request } and copy every cookie across, or the refreshed session is dropped.

Authorisation still lives in the database

The proxy redirect is UX, not security — it only checks a cookie. Real access control is RLS (see the supabase-db skill). Assume every client-side query is attacker-controlled and let Postgres decide.

Fits with this starter

  • The auth form is a client leaf; the page and view stay Server Components.
  • Motion on the form obeys hard rule #1 — springs, not CSS keyframes.
  • Sign-in/out actions live in Route Handlers or Server Actions, never as direct third-party calls from the browser (obsidian/backend/api-architecture.md).
  • Adding proxy.ts means every matched route runs Node before serving — keep the matcher tight so static marketing pages are not dragged through it.

© textura-agency, Unlicense. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/supabase-auth of textura-agency/next16-claude-starter.

Open the folder on GitHubat commit 6c6edf9

Compare with similar skills

Supabase Auth next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Supabase Auth compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Supabase Auth this skilltextura-agency/next16-claude-starter133—~1.4kAutomated safety check: PassUnlicense
Billing SDKhashgraph-online/awesome-codex-plugins1.3k—~3.5kAutomated safety check: NotesApache-2.0
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Gridgeistohmiler/gridgeist115—~2.6kAutomated safety check: PassMIT

Similar skills

  • Billing SDK

    hashgraph-online/awesome-codex-plugins

    BillingSDK, the open-source React and shadcn component library for Dodo Payments billing UI.

    1.3k GitHub stars~3.5k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes
  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes
  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed
  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed
  • Gridgeist

    ohmiler/gridgeist

    A skill your agent uses when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from…

    115 GitHub stars~2.6k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Landing Page Guide

    bear2u/my-skills

    Comprehensive guide for creating effective landing pages using Next.js or React.

    932 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

More from textura-agency/next16-claude-starter

All 16 skills in this repo
  • Mobile Device QA

    textura-agency/next16-claude-starter

    Make a site behave on real phones — the defects no Lighthouse run or headless scroll test sees, learned from site owners reviewing production sites on an iPhone.

    135 GitHub stars~5k tokensUpdated yesterday
    Auto-check: notes
  • Optimize Load

    textura-agency/next16-claude-starter

    Get a page into Lighthouse's green zone on desktop and mobile, for people AND for the robot form crawlers get — build it, audit all four categories (Performance, Accessibility, Best Practices, SEO)…

    135 GitHub stars~4.6k tokensUpdated yesterday
    Auto-check: notes
  • Optimize Performance

    textura-agency/next16-claude-starter

    Make a page in this starter actually smooth — build it, scroll it in real Chrome on PC and on an emulated phone, fix what the measurement blames, re-measure to prove it.

    135 GitHub stars~3.7k tokensUpdated yesterday
    Auto-check: notes
  • Payload Admin

    textura-agency/next16-claude-starter

    Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard…

    135 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed
  • Payload Cms

    textura-agency/next16-claude-starter

    Put a Payload CMS admin on a site built from this starter — every visible string and content photo editable, derived from the site's own content objects with the code's copy as the fallback, a…

    135 GitHub stars~3.7k tokensUpdated yesterday
    Auto-check: notes
  • Aeo Visibility

    textura-agency/next16-claude-starter

    Answer Engine Optimisation — make the site citable by ChatGPT, Claude, Perplexity, Gemini and AI Overviews.

    135 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check: notes

Works with

Questions about Supabase Auth

What does Supabase Auth do?

Wire Supabase Auth into this Next.js 16 app with @supabase/ssr — browser/server clients, the proxy.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and…. Supabase Auth is an agent skill from textura-agency/next16-claude-starter.ts session refresh (Next 16 renamed middleware), getClaims vs getSession, protected routes and sign-in flows.

When should I use Supabase Auth?

Supabase Auth fits situations like: the user asks for login; A client portal.

How do I install Supabase Auth in Claude Code?

Run `npx skills add textura-agency/next16-claude-starter --skill supabase-auth -a claude-code`. Or copy the skill folder (.claude/skills/supabase-auth in textura-agency/next16-claude-starter) into .claude/skills/supabase-auth in your project. Claude Code loads it when a task matches its description.

How do I install Supabase Auth in Codex?

Run `npx skills add textura-agency/next16-claude-starter --skill supabase-auth -a codex`. Or copy the skill folder (.claude/skills/supabase-auth in textura-agency/next16-claude-starter) into .agents/skills/supabase-auth in your project. Codex loads it when a task matches its description.

Can I use Supabase Auth in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add textura-agency/next16-claude-starter --skill supabase-auth -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/supabase-auth, .gemini/skills/supabase-auth, .github/skills/supabase-auth and .opencode/skills/supabase-auth in your project.

What does Supabase Auth need to run?

Going by SKILL.md and its folder, Supabase Auth needs the command-line tools its instructions call (yarn) and credentials named NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY. Our summary lists: A credential in NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY.

Does Supabase Auth access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Supabase Auth safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Supabase Auth use?

Supabase Auth is published under the Unlicense licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Supabase Auth use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Supabase Auth?

Skills that share tags, products or a category with Supabase Auth: Billing SDK (hashgraph-online/awesome-codex-plugins, 1.3k stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Supabase Auth?

textura-agency (a GitHub organization) maintains it in textura-agency/next16-claude-starter, which has 133 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 7, 2026.

Source: textura-agency/next16-claude-starter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.