middleware

Implements composable request and server function middleware for TanStack Start applications.

Updated May 26, 2026
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill middleware-albo-club
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: middleware
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-start-core/middleware
Command: npx skills add https://github.com/Albo-Club/albo-os --skill middleware-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? TanStack Start developers need a structured way to run shared logic—authentication, logging, validation, context injection—across server functions and server routes without duplicating code, while avoiding subtle security and SSR pitfalls. ## Core Features & Use Cases - Two middleware types: Request middleware (.server() only, runs on all server requests) and server function middleware (.client() + .server(), runs per createServerFn call). - Context passing: Chain middleware with typed context via next({ context }), and transfer data between client and server phases using sendContext. - Global middleware: Register app-wide request and function middleware through createStart in src/start.ts. - Middleware factories: Build parameterized reusable patterns like authorizationMiddleware(permissions) for role-based access control. - Use Case: Attach an authMiddleware that loads the session from cookies to every createServerFn handling private data, then layer a permission-checking factory on top for fine-grained authorization. ## Quick Start Ask the AI to create a TanStack Start auth middleware that loads the session from request cookies and attaches it to a protected server function.

Frequently Asked Questions about middleware

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

FAQPage Schema
How do I create middleware in TanStack Start?

Use createMiddleware() from @tanstack/react-start for request middleware with a .server() handler, or createMiddleware({ type: 'function' }) for server function middleware with .client() and .server() phases. Attach it to functions via createServerFn().middleware([...]).

What is the difference between request middleware and server function middleware?

Request middleware runs on all server requests (SSR, routes, functions) and only supports .server(). Server function middleware runs only for createServerFn calls, supports .client() and .server() phases, and allows input validation via .validator().

How do I pass context between middleware in TanStack Start?

Return next({ context: { ... } }) from a middleware to pass typed data down the chain; dependent middleware access it via the context argument. Use sendContext to transfer values between the client and server phases of function middleware.

Why does localStorage crash in TanStack Start middleware?

During SSR, .client() callbacks execute on the server where browser APIs like localStorage and window do not exist, throwing ReferenceError. Guard access with typeof window !== 'undefined' or use cookies and headers instead.

Is validating sendContext with Zod enough for authorization?

No. Zod only validates the shape of client-sent data, not whether the user may access it. Always load the session from a server-trusted source like cookies and verify membership or permissions against the session principal before using client-sent IDs.

How do I add global middleware to all server functions?

Create src/start.ts and call createStart with a function returning requestMiddleware and functionMiddleware arrays. These middleware run for every server request and every server function call respectively.