Best way to protect authenticated routes and share user session without prop drilling?
Hi - I would consider myself a relatively junior react dev (so please be kind 
).
I'm just getting started with the Tanstack Ecosystem and I've spent the last week exploring Start. I'm trying hard to get out of 'tutorial hell' and instead just start building. I have an app I'm working on at the moment and here is my setup:
- Tanstack Start with React
- Better Auth + Neon
So far I've split my routes into:
_public – accessible to anyone
_authenticated – should only be accessible to logged-in users
In _authenticated I’ve created a route.tsx file where I plan to use beforeLoad to check the session with Better Auth and redirect to /login if no session exists.
My main question - I have a /dashboard route that renders a layout containing a sidebar. In that sidebar I just want to display the logged-in users name from the session. However, the component that needs the user name is deeply nested and I want to avoid prop drilling. My initial plan was to use beforeLoad on the _authenticated layout to check for a session and redirect to /login if no session exists. If a session does exist I want to know the best practice way to store the user info so it’s accessible throughout the dashboard (e.g. the sidebar) without prop drilling.
1) Should I be storing it in TanStack Router context, React context, or something else?
2) How do I cleanly access that user data from a deeply nested component after checking auth in beforeLoad?
Sorry if a stupid question - think I'm just worried I will take the 'wrong' approach.
).I'm just getting started with the Tanstack Ecosystem and I've spent the last week exploring Start. I'm trying hard to get out of 'tutorial hell' and instead just start building. I have an app I'm working on at the moment and here is my setup:
- Tanstack Start with React
- Better Auth + Neon
So far I've split my routes into:
_public – accessible to anyone
_authenticated – should only be accessible to logged-in users
In _authenticated I’ve created a route.tsx file where I plan to use beforeLoad to check the session with Better Auth and redirect to /login if no session exists.
My main question - I have a /dashboard route that renders a layout containing a sidebar. In that sidebar I just want to display the logged-in users name from the session. However, the component that needs the user name is deeply nested and I want to avoid prop drilling. My initial plan was to use beforeLoad on the _authenticated layout to check for a session and redirect to /login if no session exists. If a session does exist I want to know the best practice way to store the user info so it’s accessible throughout the dashboard (e.g. the sidebar) without prop drilling.
1) Should I be storing it in TanStack Router context, React context, or something else?
2) How do I cleanly access that user data from a deeply nested component after checking auth in beforeLoad?
Sorry if a stupid question - think I'm just worried I will take the 'wrong' approach.
