skills.rest
mehdibha
mehdibhaCOMMUNITY
Explore all skills by this author →
Website𝕏@mehdibhaGitHub

start-core/middleware

Implements request and server function middleware for TanStack Start applications.

1.4k|34|Updated Mar 7, 2024
Search Tags:#typescript#authentication#server functions#tanstack start#middleware#ssr#context passing
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill start-core-middleware-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: start-core/middleware
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-start-middleware
Command: npx skills add https://github.com/mehdibha/dotUI --skill start-core-middleware-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides developers through creating composable middleware in TanStack Start, covering context passing, client-server data transfer, and global middleware registration without common type-ordering or SSR pitfalls. ## Core Features & Use Cases - Request Middleware: Runs on all server requests (SSR, routes, functions) using createMiddleware with .server() only. - Server Function Middleware: Supports .client() and .server() phases, input validation, and sendContext for client-server context transfer. - Global Middleware: Configures app-wide middleware via createStart in src/start.ts, plus middleware factories for reusable authorization patterns. - Use Case: Build an auth middleware chain that validates sessions, passes typed context to server functions, and enforces role-based permissions across API routes. ## Quick Start Ask the AI to create a TanStack Start auth middleware that validates the session and passes it as context to a server function.

Frequently Asked Questions about start-core/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. Request middleware uses only .server() and runs on all requests; server function middleware uses createMiddleware({ type: 'function' }) with .client() and .server() phases.

How do I pass context between TanStack Start middleware?▼

Return next({ context: {...} }) from a middleware to pass typed data down the chain. Dependent middleware declared via .middleware([dep]) can then read that context in their own handlers.

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

Request middleware runs on all server requests including SSR and routes, with only a .server() method. Server function middleware runs only for createServerFn calls and supports .client(), .server(), and .inputValidator().

Why does my TanStack Start middleware throw a type error?▼

TypeScript enforces method order: middleware() then inputValidator() then client() then server(). Calling .server() before .client() or skipping the order causes compile-time type errors.

Why does localStorage crash in TanStack Start client middleware?▼

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

Is client sendContext data safe to use directly on the server?▼

No. Context sent via sendContext from the client is not validated by default and can contain arbitrary user data. Always validate it server-side, for example with a zod schema, before using it in queries or logic.

Related Skills

Explore More Software Engineering Skills→
compozycompozy
2.5k

tanstack-start-best-practices

Apply TanStack Start best practices to build robust full-stack React apps.

Official
Advanced
lespacemanlespaceman
4

start-core/middleware

Create and attach request and function middleware for TanStack Start server functions.

Community
Advanced
jagreehaljagreehal
3

validation-boundary

Validate and parse external inputs with Zod schemas at system boundaries.

Community
Intermediate
liuyu520liuyu520

tool-middleware-pipeline-reuse

Reuse centralized middleware to standardize cross-cutting concerns across tool executions.

Community
Intermediate