T
TanStack•3mo ago
sensitive-blue

Router context not defined by provider during loader/beforeLoad?

I'm setting up my router and wrapping my providers with Wrap: 
export const createRouter = () => {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
    context: { auth: undefined! },
    defaultPendingComponent: () => <Loader />,
    defaultNotFoundComponent: () => <div>Not Found</div>,
    Wrap: ({ children }) => (
      <QueryClientProvider client={queryClient}>
        <AuthProvider>{children}</AuthProvider>
      </QueryClientProvider>
    ),
  })
  return router
}
export const createRouter = () => {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
    context: { auth: undefined! },
    defaultPendingComponent: () => <Loader />,
    defaultNotFoundComponent: () => <div>Not Found</div>,
    Wrap: ({ children }) => (
      <QueryClientProvider client={queryClient}>
        <AuthProvider>{children}</AuthProvider>
      </QueryClientProvider>
    ),
  })
  return router
}
When I print the context in the first layout, auth is still undefined: 
export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    console.log("/_authed context:", context)
  },
  component: LayoutComponent,
})
export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    console.log("/_authed context:", context)
  },
  component: LayoutComponent,
})
I am just setting and returning the provider with isAuthenticated: true for testing but it seems the provider never loads before loader. How come? According to the authentication examples, this should be working?
5 Replies
other-emerald
other-emerald•3mo ago
Hi Do you inject value from the hook into your router into Router Context ?
sensitive-blue
sensitive-blueOP•3mo ago
I am doing it when AuthProvider is getting declared/initialized. This might not be enough? What are common patterns to get better auth working as part of the context with server functions? Since authClient isn't retrieving cookies when server functions trigger, we won't get the session. What's the best practice here? I want to ensure that the experience is fast without authed pages flickering. I'm almost thinking if I should rather use start's middleware to retrieve and handle session while doing api/rpc calls directly using tanstack query.
other-emerald
other-emerald•3mo ago
I think if you’re planning to bring TanStack Query into the picture, you don’t really need the router context anymore. You could also use the server function in beforeLoad on __root and then return the data to update the router context afterward. Also, I still don’t quite understand why you even need the React context in the first place.
sensitive-blue
sensitive-blueOP•3mo ago
I was thinking convenience (also new to tsr) but perhaps it’s just unnecessar? That said, the goal is to have consistent auth, accessible in authed layout, with as little loading as possible to the end user.
other-emerald
other-emerald•3mo ago
If it were up to me, I’d just leave everything to the TanStack Query, and in beforeLoad, I’d ensure the data for the user.

Did you find this page helpful?