Files
Ali Waseem ac714e81ba docs(tanstack): add a proper SSR quick start with cookie-based auth (#48105)
## Summary

TanStack Start's quickstart only ever wired up an anonymous
`supabase-js` client — no cookies, no `@supabase/ssr`, no auth. This
ports the real `@supabase/ssr` client/server split and password-based
auth flow (already shipped in `apps/ui-library`) into the quickstart and
adds a matching tab to the SSR guide.

## Where this changed

- `apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx` —
quickstart now installs the cookie-based auth flow via the Supabase UI
Library registry and queries data through the SSR-aware server client.
- `apps/docs/content/guides/auth/server-side/creating-a-client.mdx` —
new TanStack Start tab (client/server setup + protecting routes).
- `examples/auth/tanstack/` (new) — source files backing the
`$CodeSample` snippets above, ported from `apps/ui-library`'s registry.

## Test plan

- [x] Scaffolded a real TanStack Start app and ran the quickstart
commands end-to-end
- [x] Confirmed SSR loader + protected-route redirect work as documented
- [x] `pnpm lint:mdx` and `pnpm build:guides-markdown` pass

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added TanStack Start SSR setup examples for Supabase, including
browser and server client helpers with cookie-based session support.
* Included a protected route example that checks authentication on the
server and redirects unauthenticated users to the login page.
  * Added a server-side claims fetch helper for authorization checks.
* **Documentation**
* Expanded the “creating a client” guide with TanStack Start-specific
route protection and environment variable examples.
* Updated the TanStack Start quickstart to use the official CLI and
refined server-side authorization guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-22 12:00:05 -06:00

32 lines
849 B
TypeScript

import { createServerClient } from '@supabase/ssr'
import { getCookies, setCookie, setResponseHeader } from '@tanstack/react-start/server'
export function createClient() {
return createServerClient(
process.env.VITE_SUPABASE_URL!,
process.env.VITE_SUPABASE_PUBLISHABLE_KEY!,
{
cookies: {
getAll() {
return Object.entries(getCookies()).map(
([name, value]) =>
({
name,
value,
}) as { name: string; value: string }
)
},
setAll(cookies, headers) {
cookies.forEach(({ name, value, options }) => {
setCookie(name, value, options)
})
Object.entries(headers).forEach(([name, value]) => {
setResponseHeader(name, value)
})
},
},
}
)
}