[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

[gr1mpatr0n]

@Mikephii You can just use

export const Route = createFileRoute('/(authenticated)')({
    component: Outlet,
    beforeLoad: async ({ context }) => {
        const user = await context.queryClient.ensureQueryData({
            ...authQueryOptions(),
            revalidateIfStale: true,
        });

        if (!user) {
            throw redirect({ to: '/auth/signin' });
        }

        return { user };
    }
})

for authenticated routes where the queryFn in the query options just calls a serverFn that resolves auth (e.g. auth.api.getSession) and propagates cookies using setResponseHeader from @tanstack/react-start/server.
Query will handle the caching so you are not doing re-auth on every navigation. This also puts user in the context so you can Route.useRouteContext to easily get the user without using a hook.

[Jazzmanpw]

This one is quite a blocker for me, too. We have Launch Darkly integration injected into the context, and it has to be at the very beginning. It's so strange that such a seemingly small feature like passing context entirely blocks the whole migration 😅 anyway, waiting for updates

on the other hand, I'm looking at routerWithQueryClient implementation, and it feels like just passing context is not enough if we want streaming and all the fun stuff. probably we'd better ask for a documentation on writing such routerWith... wrappers

[schiller-manuel]

can you share more details how this looks like with launch darkly?

[Jazzmanpw]

I basically have this now:

import {
  asyncWithLDProvider,
  useLDClient,
} from "launchdarkly-react-client-sdk";
import ReactDOM from "react-dom/client";
import { clientSideId } from "./env-vars.ts";
import { routeTree } from "./routeTree.gen.ts";

const LDProvider = await asyncWithLDProvider({ clienSideId });

ReactDom.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LDProvider>
      <App />
    </LDProvider>
  </StrictMode>,
);

/* \/ this lives in another file due to fast refresh, but it doesn't make any difference here */

const router = createRouter({ routeTree, context: { ldFlags: {} } });

function App() {
  const ldClient = useLDClient();

  return <RouterProvider router={router} context={{ ldClient }} />;
}

This is the recommended way to initialize LaunchDarkly on the client. And I can initialize a ldClient instance separately and pass it down into the provider, but it's not very convenient (waiting for initialization is the main thing, I guess).

And I use ldFlags in loaders to control if a route is visible, so I need it in TSR context.

I found WrapProvider that can be passed to the third argument of routerWithQueryClient, but it doesn't seem to have an option to add context.

[Jazzmanpw]

UPD: I was able to do this, but now I get the window is not defined error because client-side SDK uses window

export async function createCreateRouterAsync() {
  const ldClient = initialize(clientSideID, {anonymous: true, kind: 'user'});
  const LDProvider = await asyncWithLDProvider({
    clientSideID,
    ldClient,
    flags,
    reactOptions: {useCamelCaseFlagKeys: false},
  });


  return () => {
    const queryClient = new QueryClient();

    return routerWithQueryClient(
      createTanStackRouter({
        routeTree,
        context: {queryClient, ldClient},
      }),
      queryClient,
      {
        WrapProvider({children}) {
          return <LDProvider>{children}</LDProvider>;
        },
      },
    );
  };
}

// and then

/* src/server.ts */
export default createStartHandler({
  createRouter: await createCreateRouterAsync(),
})(defaultStreamHandler);

/* src/client.tsx */
const createRouter = await createCreateRouterAsync();
const router = createRouter();

hydrateRoot(
  document,
  <StrictMode>
    <StartClient router={router} />
  </StrictMode>,
);

I don't have any experience with SSR, so I'm not sure how to go around it. LD has server SDK, and I suppose it's preferred to use it instead. but since TSS doesn't have server components yet, I'm not sure how I could initialize server SDK only on server while still having client SDK working on client