Docs

TanStack Start SDK

Request middleware, route guards, and React widgets for TanStack Start applications.

The TanStack Start SDK is a global request middleware that proxies and verifies sessions on the server, plus typed React wrappers for the login and logout widgets on its /react entry.

Generated setup

The CLI writes src/start.ts, the server entry TanStack Start loads on its own, and writes the backend URL, the project secret, and the project id to .env.local.

Install

pnpm add @zitadel/sdk-tanstack-start@latest

Setup

The CLI adds the server entry, the routes, environment files, and the SDK package.

src/start.ts
src/routes/index.tsx
src/routes/login.tsx
src/routes/register.tsx
src/routes/profile.tsx
.env.local
.env.example
package.json

Every setup also writes zitadel.json and the .zitadel/ folder, adds its entries to .gitignore, and adds managed sections to AGENTS.md and README.md.

Runtime model

The middleware proxies same-origin /__nextgen/* requests to the backend, attaching the project secret only to the session handoff.
It verifies the session token and passes the result on as nextgenAuth in the request context, which server functions receive; read it with getAuth(context).
It redirects unauthenticated document requests for protectedRoutes to loginPath, with the requested path and query string in ?next=, where the login widget returns after sign-in. Routes guard client-side navigation in beforeLoad.

Verify

  • Start the app with npm run dev. Setup already wrote the URL, the secret, and the project id to .env.local.
  • Visit /login and register a user.
  • Confirm /profile shows signed-in state.
  • Log out and confirm /profile redirects to /login, both on a direct visit and from the landing page's link.

See also

Was this helpful?

On this page

InstallSetupRuntime modelVerifySee also