What you’re looking at
This is the standard TanStack Start template with a focused addition: we integratedoidc-spato provide a complete authentication and authorization story.
- By default, it connects to a hosted Keycloak demo. Sign in with GitHub or create an account.
- To try other providers, edit your environment in
.env.
We provide testable account credentials to test this example against Auth0, Microsoft Entra ID, and Google OAuth. - Want to test completely offline? Set
OIDC_USE_MOCK=trueto use a mock identity.
Authed Server Functions
A todo list powered by server functions. Items are per-user, not public.
oidc-spa provides server-function middleware to validate access tokens and claims on the server, giving you full‑stack authorization with minimal client code.
Authed API Request
Same todo concept, fetched from a protected REST endpoint.
Client calls use fetchWithAuth to attach the access token automatically, while server routes validate it with middleware, end‑to‑end authorization.
Admin-Only Authorization
Demonstrates claim-based authorization. Server functions and API routes both enforce therealm-admin role.
You won’t be able to access this page unless you’re an admin of our auth server. To try it locally without admin access, setOIDC_USE_MOCK=trueto mock an admin identity.
Auto‑Logout Overlay
You’ll see an overlay warning before SSO session expiry. For demo purposes, the session is short (~6 minutes of inactivity). When the countdown appears, any activity dismisses it.Learn more
SSR without the stress
In oidc-spa, the client owns auth. Your server doesn’t need to know about it. You can still use SSR broadly, this page is fully SSR'd for example.
Auth-aware pieces are delayed to the client and show theirpendingComponentuntil ready.
You don't have to setssr: falseexplicitly anywhere, the oidc-spa's Vite plugin infers from usage.
Try this setup yourself
Spin up this exact example in minutes:
npx gitpick keycloakify/oidc-spa/tree/main/examples/tanstack-start start-oidc
cd start-oidc
npm install
npm run dev