How to avoid hydration errors with conditional rendering based on auth state?

[narrow hearth]

Hello!

I am getting a hydration error because my auth state does not line up on the server and the client. I have posted my component. Basically my auth function really only gets the session on the client leading to this rendering to be out of sync between server/client

how would i fix something like this?

line 35 is where i conditionally render the dashboard/sign up buttons and line 8 is where i'm getting the auth state from

i guess a deeper question is also how would i go about isomorphically getting the session on the server and the client so that the SSRd page does load in correctly? is that the right approach?

[narrow hearth]

How to avoid hydration errors with conditional rendering based on auth state?

[drifting tapir]

A very common patter is setting the user inside the router context on the server (by returning it from __root.tsx beforeLoad) and use useRouteContext hook to read the value in the navbar, it works in the server and in the client

https://tanstack.com/router/latest/docs/framework/react/guide/router-context

[narrow hearth]

how would i access users cookies on the server ? that’s my problem is im trying to set the user in the root beforeLoad however the server doesn’t have the cookie

[remote stratus]

server can read cookies via getCookie

[narrow hearth]

is my approach even correct? how would i just use the return value of a hook in router context? (ive read the docs on RouterProvider but couldn't get it to work with Start)

[thin sinew]

I'm assuming this calls the backend (whatever my backend is) to get user on every single page, right?