-### Write utility functions to create Supabase clients
+### Write utility functions to create Supabase clients [#tanstack-utility-functions]
TanStack Start renders matched routes on the server by default, so `beforeLoad` and `loader` run server-side on the initial request. Unlike Next.js, this means you don't need a proxy or middleware layer to keep sessions fresh. The server client reads and writes the session cookie directly on each request.
@@ -868,8 +894,6 @@ Create a `lib/supabase` folder at the root of your project, or inside the `./src
1. **Create a browser client in `lib/supabase/client.ts`.** Use it to access Supabase from components that run in the browser.
2. **Create a server client in `lib/supabase/server.ts`.** Use it to access Supabase from loaders, server functions, and other code that runs only on the server.
-<$Partial path="auth_methods.mdx" />
-
Copy the lib utility functions below into each file:
@@ -921,7 +945,7 @@ Skipping the check inside the server function exposes private data to unauthenti
Any other server function that returns or mutates private data needs this same check. Don't rely on a route being nested under `_protected` alone.
-## Congratulations
+### Congratulations [#tanstack-congratulations]
To recap, you've:
@@ -934,6 +958,10 @@ You can now use any Supabase feature from your client or server code.
+## Choosing an auth method
+
+<$Partial path="auth_methods.mdx" />
+
## Caching considerations
If your app uses ISR (Incremental Static Regeneration) or is deployed behind a CDN, caching of HTTP responses can cause users to receive another user's session. When a session is refreshed, the new token is written to the response via `Set-Cookie`. If that response is cached and served to a different user, that user will be signed in as the wrong person.