Changed auth architecture for clerk

[MiltonAkash]

Current architecture using beforeLoad fetched auth on every route change making lag on navigation resulting bad UX

[EugenEistrach]

Hi, this PR does have some issues.
For example the main purpose of the _authed.tsx layout is to protect all child routes from being accessed when not authenticated. This change would break that behaviour.

Im not sure but I dont think navigations should cause big performance issues as clerk should store auth info in session which should be fast. Atleast that was the case with the nextjs implementation. So maybe your performance issues do have other root cause.

For reference here are the clerk tanstack start docs: https://clerk.com/docs/references/tanstack-start/get-auth

[MiltonAkash]

@EugenEistrach The state of the auth can be obtained through clerk given useAuth which makes call only once per session and on authstate change. But the approach of calling a server fn in the _root loader makes it call on every route change. This makes navigation sick. Clerk Prod instance with app deployed on vercel makes 400ms to resolve this and page feels unresponsive during this time.

I'm trying tanstack-start on production(even though it is not recommended) and this sluggish feel is a problem.

I'm don't have much understanding with tanstack router. So correct me if I'm wrong

[datner]

I think Milton is 💯
By using a server function like that, every time you navigate, you make an HTTP request to the server to get the auth details. On the server it does so from the session which is fast. But that trip still exists.
Milton's solution is to check the status on the client, which will be fast in all scenarios.

I have encountered this exact design bug in multiple flows by now. The beforeLoad and loader being isomorphic to BE/FE actually removes most of their utility for non-fetching logic, which is why serverFn is used in them, but they introduce a new host of issues instead

[jonathanbecerra]

I agree with @MiltonAkash and @datner, commenting for update. I am using start as well alongside clerk and yes, the current setup showcased has its purpose and I assume is to convey how we can fetch, throw and catch it on the error component all happening within the Route definition. However, every route change under the auth layout calls this serverfn whilst the SignedIn component should be able to take care of this on the Route component.

[Pagebakers]

How about setting staleTime on the root route, that should prevent unnecessary fetching on routes, together with watching authstate change on the client should be OK?