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

isAuthenticated: true

for testing but it seems the provider never loads before loader. How come? According to the authentication examples, this should be working?

TanStack•6mo ago•

5 replies

radical-lime

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

isAuthenticated: true

for testing but it seems the provider never loads before loader. How come? According to the authentication examples, this should be working?

Router context not defined by provider during loader/beforeLoad?

Similar Threads

Router context not defined by provider during loader/beforeLoad?

Similar Threads

Similar Threads

Similar Threads