T
TanStack•2y ago
constant-blue

File-based authenticad route is rendered because isAuthenticated is not fetched yet in the context

Sorry for the noobie question, but in this example: 
export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
  component: DashboardComponent,
})
export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
  component: DashboardComponent,
})
Let's say I am doing a fetchAuthenticated call in the auth context and after receiving a response, the goal is to handle the beforeLoad() segment of the route. In the given scenario, if I navigate directly to /dashboard, it renders before waiting for the completion of fetchAuthenticated. I am not sure how to handle this 😦
2 Replies
wise-white
wise-white•2y ago
Two questions: 1. What's the auth library you are using? 2. Having you tried adding a pendingComponent on the route? or a defaultPendingComponent on the router?
constant-blue
constant-blueOP•2y ago
Ah yeah, I knew I was missing something fundamental. It's working now with the pendingComponent

Did you find this page helpful?