Is auth check on beforeLoad a good idea?

[michaltaberski]

By following documentation we can learn the user auth check should happen on beforeLoad function.

Something like this:

export const Route = createRootRouteWithContext<RootContext>()({
  component: RootComponent,
  beforeLoad: async () => {
    try {
      const { data } = await axiosClient.get("/me")
      return { user: data.user, session: data.session }
    } catch {
      return { user: undefined, session: undefined }
    }
  },
})

However seems like this approach is checking the auth state a way too many times.
If I use <Link /> (where preload has default value true) I am ending up with following effect:

https://share.cleanshot.com/3tkTWQfM

Whats your approach to avoid that effect?

[taphill]

This is a question that I also have. Preload seemed to trigger way more additional requests than I was expecting. I turned preload off for the time being, but would love some clarity around this as well.

[tigawanna]

Tanstack query to the rescue , call the get session useQuery outside the router provider and pass in the value through the router context then check the plain value in the before load instead of awaiting there

[taphill]

Yea, that's definitely an option! For my use case, I'm slightly concerned about caching the current user/session since users have permissions associated with them which could be changed or revoked at any time. I could set react query to refetch at an agressive interval, but at that point it seems easier to just fetch the current user on each request.

I'm also still confused why the "root level" beforeLoad is called so many times when preload is enabled. I'm seeing the exact same behavior as @michaltaberski

I'm assume there's a reason. I'm just not sure what that reason is, or if there is something I can change to fix it.

[bcowell-riis]

The docs are severely lacking in this area.

[MPiland]

Don't the docs show an example of using an auth hook and passing that as context? Then, in the beforeLoad, you use the context rather than making the call in the beforeLoad.