Overview
With server rendering, the session lives in an encrypted cookie on the server, and the first page renders signed in.
If your app renders pages on the server, with TanStack Start, Next.js, or React Router's framework mode, Session kit keeps the session on the server. This page explains how the pieces fit, then sends you to your framework's guide.
Both tokens and the user sit in one encrypted, httpOnly cookie that page
scripts can't read, so they never see the refresh token. The server refreshes
before rendering, so pages never show a "Checking session…" state.
The pieces
- On the server,
createServerAuthfrom@monarcode/session-kit/serverseals the cookie with your secret. Each framework's adapter gives one request's session over it, and middleware that refreshes before rendering. - In the browser,
createMirrorAuthmakes a client that starts from the session the server rendered.AuthProvider, the hooks, and the TanStack Router guards work with it, and sign-ins and sign-outs reach every tab. - Your server code signs in with your backend and calls your API with
the access token, through one request's session. It's shaped like a
client, so code written for one, such as
createAuthFetchor Effect'sAuth, takes it. To call your API from the browser too, opt in withclientCredentials. Page scripts then get the access token in memory, never the refresh token.
The engine is the same createServerAuth call in every framework.
Create the server engine
on the TanStack Start page shows one. The browser's client mirrors what the
server rendered. It signs out and gets the access token through a session
route, which each adapter's sessionRoute makes. It reads the session there
too, except in TanStack Start, where a server function reads it, as the
server render needs. It signs in through your own server code, as in
Create the browser client.
Frameworks
What differs between frameworks is how server code gets a request's session, and how the session reaches the browser:
| Framework | On the server | In the browser | Setup |
|---|---|---|---|
| TanStack Start | startAuth(serverAuth), with refreshSession in request middleware | connectSession, loadSession | TanStack Start |
| Next.js 16, App Router | nextSession(serverAuth, { cookies, redirect }), with its refresh in Proxy | useMirrorAuth from @monarcode/session-kit/react | Next.js |
| React Router framework mode, with SSR | routerAuth(serverAuth), with sessionMiddleware in the root route | useMirrorAuth from @monarcode/session-kit/react | React Router with server rendering |
Locking isn't available with server rendering. For another server, such as the Next.js Pages Router, see Servers without an adapter.
Next steps
- Follow the guide for your framework in the table, from installation to calling your API.
- Server sessions: the secret, cookie jars, refreshes across server instances, sign-out, and limits.
- Hybrid setup: sign in with your backend from the browser and call your API there, with the session still on the server.