Undefined initial useRouteContext

[HughEdwards1]

Which project does this relate to?

Router

Describe the bug

Firstly I'm not entirely sure if this is more a start or a router bug.
I'm using start but I think this lies on the router side.

Basically I have an _authenticted.tsx file route that I want to use to redirect to login if necessary, else render some routes and populate children.

I'm using beforeLoad to do a backend query to get my user object (or fail and redirect). And then populate the context with it.

eg.

export const Route = createFileRoute('/_authenticated')({
	component: AuthenticatedComponent,
	beforeLoad: async ctx => {
		const user = await ctx.context.dataProvider.authService.getUser();
		if (user === undefined) {
			throw redirect({
				to: '/login'
			})
		}

		ctx.context.user = user;
	}
})

But in the AuthenticatedComponent, if I have
const user = Route.useRouteContext(); this is undefined.
When I mouse over some elements it rerenders and seems to tell me the correct data.

I've tried using loader and useLoaderData but same much the same issue.

More than this, when I click a , the context object is back to its initial state from the createTanStackRouter call.

I don't necessarily need need to integrate with React's context as the docs mention here https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks
Though I think I'm possibly confused at the where the line between Start's server function context, Router's context, and React context.

Would the design pattern for me to accomplish this be something like (similar to https://github.com/TanStack/router/blob/main/examples/react/authenticated-routes/src/auth.tsx):

• Create an authprovider which calls out to a server function on useEffect
• Provide this context in a react hook (useAuth)
• Use this hook in the beforeLoad function of the authenticated route

I don't understand really why or how this is different / better than what I was initially trying to do.
Bit confused about the order of operations if I were to use react hooks for this (esp with server functions), and and why docs suggest I could use useAuth which would be populated on initial render vs Route.useRouteContext which is not populated on initial render in the component.

Cheers

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-tzaxtk5x?terminal=dev

Steps to Reproduce the Bug or Issue

• Update some context value in beforeLoad.
• Console log the context in initial render and see not the updated value, but the initial value given to createRouter
• Click and to see the context value reset

Expected behavior

I expected to be able to use the updated context value, and I expected the context not to provide the initial value after following a

Also just not understanding why or how bringing react hooks into it improves this flow

Screenshots or Videos

No response

Platform

• Start Version: [^1.129.2]
• OS: macos
• Browser: *
• Browser Version: [e.g. 91.1]
• Bundler: vite

Additional context

No response

[hughedwards2]

I'm also attempting to write a wrapper to pass in context using react hooks like in: https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks

However I can't really see docs on what actually is/does, if it's like an outlet.
Tried my best to follow that example with start's rootdocument but managing to get into some infinite rendering loops and other confusion

[hughedwards2]

I can't edit my comment -

But the infinite loops seem to have been caused by me pulling out router from the createRouter function to use it in <RouterProvider>.

I also tried extracting it using the optional Client.tsx file but it seems that doesn't work either.
Is passing react context to router context possible with tanstack start? With the initial error and inability to pass context I'm getting a little stuck on this problem

[hughedwards2]

And now I'm attempting to:

• fetch user in root beforeLoad
• useRouteContext in authenticated component/ login to perform redirects

All works okay, but as soon as I try to implement logout, there's no way of flushing the data from that root beforeload. router.invalidateCache doesn't seem to do change anything. And modifying the context in another component beforeload doesn't seem to work either.

[is-it-ayush]

I've attempted and reached to the similar conclusion i.e. Infinite Loops when using <RouterProvider />. The authentication context doesn't update at all (somehow the code never reaches there due to an infinite loop occurring beforehand freezing the app and crashing the server). I've shortened the issue to <AuthProvider /> & <RouterProvider /> being added to the component tree. I'm not really sure why they cause the problem because the documentation isn't enough telling how to use <RouterProvider /> with Tanstack Start.

// src/routes/__root.tsx
function RootComponent() {
  return (
      {/* <AuthProvider> /*}
        <RootDocument>
          <Outlet />
        </RootDocument>
      {/* </AuthProvider> /*}
  )
}

function RootDocument({ children }: { children?: React.ReactNode }) {
  const auth = useAuth()
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        { /* If AuthProvider is absent then children */ }
        { /* If AuthProvider is present then <RouterProvider router={getRouter()} context={{auth}} /> */}
        <Devtools />
        <Scripts />
      </body>
    </html>
  )
}

Sadly! I think this is a bug.

[willhoney7]

I think this is fixed by #6407