skills.rest
eyenalxai
eyenalxaiCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-start-best-practices

Implements TanStack Start patterns for server functions, middleware, SSR, authentication, and deployment.

Updated Sep 5, 2023
Search Tags:#authentication#full-stack#react#server functions#tanstack start#middleware#ssr
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill tanstack-start-best-practices-eyenalxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-start-best-practices
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/tanstack-start-best-practices
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill tanstack-start-best-practices-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building full-stack React applications with TanStack Start involves many cross-cutting decisions—server function design, middleware composition, SSR configuration, authentication, and deployment—that are easy to get wrong, leading to security vulnerabilities, hydration mismatches, and leaked secrets. ## Core Features & Use Cases - Server Function Patterns: Rules for createServerFn usage, input validation with Zod, HTTP method selection, and error handling across the client/server boundary. - Security & Authentication: Guidelines for secure session cookies, CSRF protection, auth middleware, route protection with beforeLoad, and keeping secrets server-side only. - SSR & Deployment: Streaming SSR, hydration safety, prerendering, environment variable management, and adapter configuration for Cloudflare, Netlify, Nitro, and Bun. - Use Case: When adding a login flow to a TanStack Start app, apply the auth rules to configure httpOnly session cookies, protect routes with a pathless _authenticated layout, and verify auth in every server function via middleware. ## Quick Start Apply the TanStack Start best practices to review my server functions and authentication flow for security and correctness.

Frequently Asked Questions about tanstack-start-best-practices

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

FAQPage Schema
How do I create server functions in TanStack Start?▼

Use createServerFn from @tanstack/react-start with an .inputValidator() for schema validation and a .handler() for server-side logic. Handlers run only on the server, and the bundler replaces them with RPC stubs in client bundles.

How do I protect routes with authentication in TanStack Start?▼

Use beforeLoad on a pathless layout route like _authenticated.tsx to check the session and throw redirect() to /login when unauthenticated. All child routes inherit this protection, and context returned from beforeLoad flows to loaders and components.

What is the difference between server functions and server routes in TanStack Start?▼

Server functions provide type-safe RPC for internal use with automatic JSON responses, while server routes via createFileRoute server.handlers expose standard REST endpoints. Use server routes for webhooks, public APIs, and cases needing raw request access.

Does TanStack Start support deployment to Cloudflare and Netlify?▼

Yes, deployment is configured in vite.config.ts using platform Vite plugins. Cloudflare uses @cloudflare/vite-plugin, Netlify uses @netlify/vite-plugin-tanstack-start, and other platforms like Vercel, Node.js, and Bun use the Nitro adapter.

Why are my environment variables undefined on the client in TanStack Start?▼

Only VITE_-prefixed variables are exposed to the client via import.meta.env; all others are server-only and accessed via process.env inside server functions. Never prefix secrets with VITE_, as they would be bundled into client JavaScript.

How do I prevent CSRF attacks in TanStack Start server functions?▼

Configure session cookies with sameSite: 'lax' or 'strict', httpOnly: true, and secure in production. Always use POST for mutations, and for OAuth flows store a random state parameter in the session and verify it on callback.

Related Skills

Explore More Software Engineering Skills→
mehdibhamehdibha
1.4k

start-core

Configure TanStack Start projects with Vite plugin, router factory, and root route shell.

Community
Intermediate
filippolmtfilippolmt
1

sandbox-migrate-to-next

Migrate Cloudflare Sandbox apps from stable @cloudflare/sandbox to the SDK 1.0 preview.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

react-testing-workflows

Configure Vitest, Playwright, Storybook, and MSW testing workflows for React TypeScript applications.

Official
Advanced
MakePrismsMakePrisms
55

react-router-framework-mode

Configure React Router framework-mode routes with loaders, actions, and error boundaries.

Official
Intermediate