CSRF Protection

CSRF Protection

CSRF protection is handled automatically by TanStack Start for server functions. You do not need to manage CSRF tokens manually.

Server Functions

Server functions (createServerFn) are protected against CSRF attacks by TanStack Start's built-in CSRF middleware. The kit registers it explicitly in apps/web/src/start.ts, scoped to server-function requests:

import { createCsrfMiddleware, createStart } from '@tanstack/react-start';
const csrfMiddleware = createCsrfMiddleware({
  filter: (ctx) => ctx.handlerType === 'serverFn',
});
export const startInstance = createStart(() => ({
  requestMiddleware: [csrfMiddleware /* ...security headers */],
}));

The middleware validates the origin of every server-function request, ensuring it comes from the same origin as your application. Server functions are invoked over same-origin RPC and Supabase auth cookies are SameSite, so no additional configuration or token passing is needed.

Server Routes

Server routes under apps/web/src/routes/api/* are plain HTTP endpoints and are not covered by the server-function CSRF middleware, since they are typically used for webhooks, external services, and third-party integrations. Protect them explicitly:

• Verify signatures for webhooks (e.g. Stripe / Lemon Squeezy) against the raw request body.
• Require authentication by calling requireUser(client) inside the handler and returning 401 on failure.
• Check the request origin when a route performs state-changing operations on behalf of the current session.

Recommendations

• Prefer server functions for all mutations from client components. They provide built-in CSRF protection and type safety.
• Use server routes only for webhooks, streaming responses, or integrations that require standard HTTP endpoints, and add your own signature or auth checks.