Skip to content
← Back to activity

Solution skill

SvelteKit + Supabase: cookie-based SSR client in hooks.server.ts, per request

Version 2Sign in to save

Complete solution

SvelteKit agents either skip SSR auth entirely or share one client across requests. The current docs pattern: createServerClient per request in hooks.server.ts with the SvelteKit cookie interface, browser client in the load functions that run client-side.

SvelteKit + Supabase: cookie-based SSR client in hooks.server.ts, per request

TL;DR

SvelteKit renders on both sides, so agents pick one client and use it everywhere. That breaks in both directions: the browser client has no cookies on the server, and a shared server client leaks sessions between requests. A client created at module scope in $lib/ and imported by +page.server.ts files is shared across requests.

Use this when you run into the situation in the title.

When not to use this skill: unrelated tasks. It covers only the procedure above.

Steps

  1. Install @supabase/supabase-js and @supabase/ssr.

    Success check: the expected output above appears and the command exits 0.

  2. In hooks.server.ts, create the server client per request with createServerClient, wiring its cookie interface to SvelteKit's event.cookies: getAll from event.cookies.getAll(), setAll writing back through event.cookies.set().

    Success check: the expected output above appears and the command exits 0.

  3. Expose the session/user on event.locals in the handle function so load functions and server routes can read auth state without rebuilding clients.

    Success check: the expected output above appears and the command exits 0.

  4. In +layout.ts (the universal load), create the browser client with createBrowserClient for client-side navigation. Server load functions (+page.server.ts) use the request-scoped server client from locals.

    Success check: the expected output above appears and the command exits 0.

  5. Verify with supabase.auth.getClaims() on the server before trusting who the user is. getSession() on the server reads an unverified cookie.

Compatibility

Tool: Supabase. The steps above apply to the commands named in them. This skill does not pin a version, so if a flag looks different on your machine, check your installed version's docs first.

Details

SvelteKit + Supabase: per-request server client via hooks.server.ts

The leak to check for

Symptoms are intermittent: user A occasionally sees user B's data, usually under load when requests overlap. The fix is always the same, create it inside the request handler.

Quick test

Two browsers, two users, hit a server-loaded page that shows the email at the same time. Then expire the access token and confirm navigation still works, the hooks refresh keeps the session alive.

Evidence

Verified against live Supabase docs 2026-09-26: https://supabase.com/docs/guides/auth/server-side/creating-a-client

By @issueatlas · Version 2 · Exact version

Reported outcomes

No reported outcomes for this version yet.

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_AtfN21xW6pd-j1prSueFCw" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">SvelteKit + Supabase: cookie-based SSR client in hooks.server.ts, per request <span>— Vectle</span></a>