plugins/tanstack-start-expert/skills/start-auth/SKILL.md
Use when: adding authentication/authorization to a TanStack Start app — protecting routes with beforeLoad + redirect, authorizing server functions, sessions/cookies (useSession, getRequest), CSRF, or wiring Auth.js. Do NOT use for: generic route guards unrelated to auth (react-tanstack-router) or non-Start Node auth.
npx skillsauth add fusengine/agents start-authInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
beforeLoad + redirect() protects the UI, NOT your data.
Server functions and server routes are API endpoints reachable independently of whichever route renders the calling component. A beforeLoad guard keeps a user off a screen, but the underlying createServerFn handler can still be called directly (crafted request, replayed RPC). Authorization MUST be enforced inside the server-function handler or its middleware — that is the security boundary. beforeLoad is route UX only.
Route beforeLoad guard → UX: keep users out of screens they can't use
Server-fn middleware → SECURITY: the real data/API boundary — enforce auth HERE
→ data-boundary.md is mandatory reading before writing any auth code.
Before ANY implementation, spawn in parallel:
src/routes/_authed*, src/server/, existing session code/websites/tanstack_start_framework_reactuseSession, createMiddleware, getRequest signaturesAfter implementation, run fuse-ai-pilot:sniper, then consider fuse-security:auth-audit.
| Concern | Primitive |
|---------|-----------|
| Route UX | beforeLoad + redirect({ to: '/login' }) in an _authed layout route |
| Data authorization | authMiddleware on every private createServerFn (the real boundary) |
| Sessions | useSession<T>() (sealed cookie) OR manual __Host- cookie via getRequest/setResponseHeader |
| CSRF | createCsrfMiddleware() (auto for server fns) + Origin check for sibling subdomains |
authMiddleware; never rely on beforeLoad.SameSite=Lax protects them.process.env.SECRET inside the handler, NEVER at module scope (leaks to bundle; undefined on edge).The official authentication guide lists Clerk, WorkOS, Better Auth, and Auth.js as supported options, plus fully DIY. This skill ships the DIY server-primitive templates (portable, no vendor lock-in), which the official guide documents in depth. For a managed library (Auth.js, Better Auth, Clerk, WorkOS), install it and follow ITS current docs / the better-auth skill — do NOT assume a Start adapter API without verifying it, and note there is no first-party start-authjs example in the TanStack repo (the real DIY examples are start-basic-auth and start-supabase-basic).
| Topic | Reference | Load when |
|-------|-----------|-----------|
| Data boundary | data-boundary.md | ALWAYS first — where auth is actually enforced |
| Route protection | route-protection.md | Building the _authed layout + RBAC redirects |
| Sessions & cookies | sessions-cookies.md | Issuing/reading sessions, cookie flags |
| Hardening | hardening.md | CSRF, rate limiting, OAuth state/PKCE, timing |
| Template | When to Use |
|----------|-------------|
| authed-middleware.md | _authed layout + authMiddleware + protected server fn |
| session-and-csrf.md | Cookie session helpers + global CSRF/origin middleware + login |
| oauth-pkce.md | OAuth authorization-code flow with state + PKCE |
authMiddleware so every handler gets a typed session__Host- prefixed, HttpOnly, Secure, SameSite=Lax cookiesOrigin on non-GET requests against your app originbeforeLoad as the security boundaryprocess.env at module top leveltesting
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
development
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
development
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
development
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.