[Tanstack Start] Inject data into router context from createRouter

[lakeesiv]

Hello I am trying to move from tanstack router to tanstack start but I very quickly came across a roadblock on how to inject authentication (which was recived with a hook) into the routers context

e.g this is how I would have done it in tanstack router
https://github.com/nekochan0122/tanstack-authentication/blob/main/csr-basic-auth/src/app.tsx#L19

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProviderWithContext />
    </QueryClientProvider>
  )
}

function RouterProviderWithContext() {
  const auth = useAuth()

  return <RouterProvider router={router} context={({ auth })} />
}

With tanstack start I want some way to also wrap the client in some provider that calls a react hook

I attempted something like this

const App = () => {
  const auth = useAuth();
  const router = createRouter(auth);

  return <StartClient router={router} />;
};

hydrateRoot(document, <App />);

But then I realized that would cause issues with the SSR side as thats abstracted away in some

export default createStartHandler({
  createRouter,
  getRouterManifest,
})(defaultStreamHandler);

I think i might be missing a bit point here, I cant seem to fully wrap around how this framework works, any advice would be helpful

[synerp]

This video might be of help. https://youtu.be/6c8kuvBolQg?si=G5nsGz9zPBGs_Gvu
It shows you can add context to the router using beforeLoad in your __root.tsx
Then you can access it in your page in its beforeLoad
I use this to access Apollo client cache in the pages. I don't think you can use hooks.

[Mikephii]

that is very unfortunate as this forces you to re-auth on every single page navigation even when you are clientside and already have your cookies

[kevmok]

Yeah, it's not ideal, wish there was a cleaner way to do it