Tanstack Start with Clerk and Convex

// router.tsx
{* ... file content ... *}
const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: "intent",
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
      context: { queryClient },
      Wrap: ({ children }) => (
        <ClerkProvider
          publishableKey={(import.meta as any).env.VITE_CLERK_PUBLISHABLE_KEY!}
        >
          <ConvexProviderWithClerk
            client={convexQueryClient.convexClient}
            useAuth={useAuth}
          >
            {children}
          </ConvexProviderWithClerk>
        </ClerkProvider>
      ),
      scrollRestoration: true,
    }),
    queryClient,
  );
{* ... file content ... *}

__root.tsx

const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
  const { userId } = await getAuth(getWebRequest()!);

  return {
    userId,
  };
});

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  beforeLoad: async (ctx) => {
    const { userId } = await fetchClerkAuth();

    return {
      userId,
    };
  },
  component: RootComponent,
});

_authed.tsx

export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    if (!context.userId) {
      throw new Error("Not authenticated");
    }
  },
  errorComponent: SOME_ERROR_COMPONENT,
});

_authed/dashboard/transactions/incomes

export const Route = createFileRoute('/_authed/dashboard/transactions/incomes')(
  {
    loader: ({ context: { queryClient } }) =>
      queryClient.ensureQueryData({
        ...convexQuery(
          api.transactions.getIncomeTransactionsWithCategories,
          {},
        ),
      }),
    component: RouteComponent,
  },
)