centralize auth loading and optimize query caching

Author: oscabriel

apps/server/src/lib/auth.ts

@@ -65,6 +65,12 @@ export const auth: Auth = betterAuth({
 			await env.SESSION_KV.delete(key);
 		},
 	},
+	session: {
+		cookieCache: {
+			enabled: env.ALCHEMY_STAGE !== "dev", // Disable in dev to avoid stale data
+			maxAge: 5 * 60, // 5 minutes
+		},
+	},
 	rateLimit: {
 		storage: "secondary-storage",
 	},

apps/web/src/lib/auth-context.tsx apps/web/src/components/auth-provider.tsxapps/web/src/lib/auth-context.tsx renamed to apps/web/src/components/auth-provider.tsx

@@ -1,4 +1,3 @@
-import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
 	BookText,
@@ -8,6 +7,7 @@ import {
 	SettingsIcon,
 	UserLock,
 } from "lucide-react";
+import { useAuth } from "@/web/components/auth-provider";
 import { Button } from "@/web/components/ui/button";
 import {
 	DropdownMenu,
@@ -17,10 +17,9 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/web/components/ui/dropdown-menu";
+import { useProfile } from "@/web/hooks/use-profile";
 import { authClient } from "@/web/lib/auth-client";
-import { useAuth } from "@/web/lib/auth-context";
 import { SITE_GITHUB } from "@/web/lib/constants";
-import { orpc } from "@/web/lib/orpc";
 
 const getFirstName = (
 	user: { name?: string | null; email?: string | null } | null | undefined,
@@ -48,13 +47,7 @@ export default function UserMenu() {
 		});
 	};
 
-	const user = useQuery({
-		...orpc.profile.getProfile.queryOptions(),
-		enabled: Boolean(auth.session?.user),
-		refetchOnWindowFocus: true,
-		refetchOnMount: true,
-		staleTime: 0,
-	});
+	const user = useProfile();
 
 	const displayFirstName = user.data
 		? (getFirstName(user.data) ?? "User")

apps/web/src/components/navigation/user-menu.tsx

@@ -0,0 +1,28 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "@/web/components/auth-provider";
+import { orpc } from "@/web/lib/orpc";
+
+/**
+ * Shared hook for accessing user profile data across the application.
+ *
+ * Caching Strategy:
+ * - 5 minute staleTime (matches server cookie cache duration)
+ * - No automatic refetching (refetchOnMount, refetchOnWindowFocus disabled)
+ * - Manual invalidation on profile mutations only
+ *
+ * This prevents duplicate network calls and reduces server load while
+ * keeping data fresh when it actually changes.
+ */
+export function useProfile() {
+	const auth = useAuth();
+	const isAuthenticated = Boolean(auth.session?.user);
+
+	return useQuery(
+		orpc.profile.getProfile.queryOptions({
+			enabled: isAuthenticated,
+			staleTime: 5 * 60 * 1000, // 5 minutes
+			refetchOnMount: false,
+			refetchOnWindowFocus: false,
+		}),
+	);
+}

apps/web/src/hooks/use-profile.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect } from "react";
 import type { RouterInputs, RouterOutputs } from "@/server/lib/router";
-import { useAuth } from "@/web/lib/auth-context";
+import { useAuth } from "@/web/components/auth-provider";
 import { orpc } from "@/web/lib/orpc";
 import {
 	getStoredChatWidth,
@@ -23,8 +23,14 @@ const DEFAULT_USER_SETTINGS: UserSettings = {
 
 /**
  * Shared hook for accessing user settings across the application.
- * This hook consolidates all user settings queries into a single query,
- * preventing excessive refetches and potential infinite loops.
+ *
+ * Caching Strategy:
+ * - 5 minute staleTime (matches server cookie cache duration)
+ * - No automatic refetching (refetchOnMount disabled)
+ * - Optimistic updates on mutations for instant UI feedback
+ *
+ * This consolidates all user settings queries into a single query,
+ * preventing excessive refetches and reducing server load.
  */
 export function useUserSettings() {
 	const auth = useAuth();
@@ -33,8 +39,9 @@ export function useUserSettings() {
 	const query = useQuery(
 		orpc.settings.get.queryOptions({
 			enabled: isAuthenticated,
-			staleTime: 30_000,
+			staleTime: 5 * 60 * 1000, // 5 minutes
 			refetchOnMount: false,
+			refetchOnWindowFocus: false,
 			retry: false,
 			placeholderData: () => {
 				const storedChatWidth = getStoredChatWidth();

apps/web/src/hooks/use-user-settings.ts

@@ -1,55 +1,38 @@
 import { redirect } from "@tanstack/react-router";
-import type { AuthContextValue } from "@/web/lib/auth-context";
+import type { AuthContextValue } from "@/web/components/auth-provider";
 
 interface RedirectIfAuthenticatedOptions {
 	auth: AuthContextValue;
 	to: string;
-	replace?: boolean;
 }
 
 export function redirectIfAuthenticated({
 	auth,
 	to,
-	replace,
 }: RedirectIfAuthenticatedOptions) {
-	if (auth.isPending) {
-		return;
-	}
-
 	if (auth.isAuthenticated) {
 		throw redirect({
 			to,
-			replace: replace ?? true,
+			replace: true,
 		});
 	}
 }
 
 interface RequireAuthenticatedOptions {
 	auth: AuthContextValue;
 	location: { href?: string | null; pathname?: string | null };
-	signInPath?: string;
-	redirectOverride?: string;
-	replace?: boolean;
 }
 
 export function requireAuthenticated({
 	auth,
 	location,
-	signInPath,
-	redirectOverride,
-	replace,
 }: RequireAuthenticatedOptions) {
-	if (auth.isPending) {
-		return;
-	}
-
 	if (!auth.isAuthenticated) {
-		const redirectTarget =
-			redirectOverride ?? location.href ?? location.pathname ?? "/";
+		const redirectTarget = location.href ?? location.pathname ?? "/";
 
 		throw redirect({
-			to: signInPath ?? "/auth/sign-in",
-			replace: replace ?? true,
+			to: "/auth/sign-in",
+			replace: true,
 			search: {
 				redirect: redirectTarget,
 			},

apps/web/src/lib/route-guards.ts

@@ -2,7 +2,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { useMemo } from "react";
 import ReactDOM from "react-dom/client";
-import { AuthProvider, useAuth } from "@/web/lib/auth-context";
+import { AuthProvider, useAuth } from "@/web/components/auth-provider";
 import { orpc, queryClient } from "./lib/orpc";
 import { routeTree } from "./routeTree.gen";
 

apps/web/src/main.tsx

@@ -6,13 +6,13 @@ import {
 	useRouterState,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import type { AuthContextValue } from "@/web/components/auth-provider";
 import { BackgroundLayout } from "@/web/components/background";
 import { ErrorBoundary } from "@/web/components/error-boundary";
 import Header from "@/web/components/navigation/header";
 import { NotFound } from "@/web/components/not-found";
 import { ThemeProvider } from "@/web/components/theme-provider";
 import { Toaster } from "@/web/components/ui/sonner";
-import type { AuthContextValue } from "@/web/lib/auth-context";
 import type { orpc } from "@/web/lib/orpc";
 import "@/web/index.css";
 import { useEffect } from "react";
@@ -30,7 +30,7 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 });
 
 function RootComponent() {
-	// force scroll to top on route change
+	// force scroll to top on route change -- router default behavior doesn't seem to be working?
 	const router = useRouterState();
 
 	useEffect(() => {

apps/web/src/routes/__root.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { ExternalLink } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import { useAuth } from "@/web/components/auth-provider";
 import { Button } from "@/web/components/ui/button";
 import { Input } from "@/web/components/ui/input";
 import {
@@ -12,7 +13,6 @@ import {
 } from "@/web/components/ui/input-otp";
 import { useAppForm } from "@/web/components/ui/tanstack-form";
 import { authClient } from "@/web/lib/auth-client";
-import { useAuth } from "@/web/lib/auth-context";
 import { SIGN_IN_FORM, SOCIAL_PROVIDERS } from "@/web/lib/constants";
 import { signInEmailSchema, signInOtpSchema } from "@/web/lib/validators";
 import { GitHubIcon, GoogleIcon } from "./social-sign-in-icons";

apps/web/src/routes/auth/-components/sign-in-form.tsx

@@ -59,7 +59,7 @@ export function ChatSettingsDialog({
 	// Models query
 	const modelsQuery = useQuery(
 		orpc.models.list.queryOptions({
-			staleTime: 60_000,
+			staleTime: 5 * 60 * 1000, // 5 minutes
 		}),
 	);