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