Authentication Context Updates vs Redirect (Race Condition) & Maybe useRouteContext() is Static?!
Hey all! New to Tanstack Router here, and trying to follow the Authentication guide (https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes) and Authenticated Routes Context example (https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes-context) but I'm running into a situation where, upon login/logout, my redirects (to Dashboard on login and Login on logout) beat the context update –if it is indeed actually updating– and the wrong info is rendered.
My suspicion is that this is because the router's context isn't actually updating at all when it's supposed to?! That feels like I'm doing something wrong.
In debugging this, I've been able to see that when my
My page just shows its loading state forever.
Similarly, it doesn't appear that the router ever learns that the
I've attached some pared down code in comments below for diagnosis! Thanks so much for your help.
My suspicion is that this is because the router's context isn't actually updating at all when it's supposed to?! That feels like I'm doing something wrong.
In debugging this, I've been able to see that when my
useAuth()<RouterProvider />useRouteContext()const { isLoading } = myRoute.useRouteContext({ select: ({ auth }) => ({ isLoading: auth.isLoading }) });My page just shows its loading state forever.
Similarly, it doesn't appear that the router ever learns that the
userI've attached some pared down code in comments below for diagnosis! Thanks so much for your help.
Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if they try to access them.
The route.beforeLoad Option
The route.beforeLoad Option
An example showing how to implement Authenticated Routes Context in React Router
