app/app/connect/page.tsx

@@ -3,7 +3,6 @@
 import { AppShell } from "../../../components/app-shell";
 import { useCallback, useEffect, useState } from "react";
 import { usePlaidLink } from "react-plaid-link";
-import { apiFetch } from "@/lib/api";
 
 type Account = {
   viewRef: string;
@@ -76,11 +75,9 @@ export default function ConnectPage() {
   const createLinkToken = useCallback(async () => {
     setStatus("Requesting Plaid link token...");
     try {
-      const payload = await apiFetch<{ linkToken?: string; link_token?: string }>(
-        "/api/plaid/link-token",
-        { method: "POST" }
-      );
-      if (payload.error) {
+      const res = await fetch("/api/plaid/link-token", { method: "POST" });
+      const payload = await res.json();
+      if (!res.ok || payload.error) {
         setStatus(payload.error?.message ?? "Unable to create link token.");
         return;
       }
@@ -97,16 +94,19 @@ export default function ConnectPage() {
   }, []);
 
   const loadAccounts = useCallback(async () => {
-    const payload = await apiFetch<{ accounts?: Account[] } | Account[]>("/api/accounts");
-    if (payload.error) return;
-    const data = payload.data as { accounts?: Account[] } | Account[] | undefined;
-    setAccounts((Array.isArray(data) ? data : data?.accounts) ?? []);
+    const res = await fetch("/api/accounts");
+    if (!res.ok) {
+      return;
+    }
+    const payload = await res.json();
+    setAccounts(payload.data?.accounts ?? payload.data ?? []);
   }, []);
 
   const loadGoogleStatus = useCallback(async () => {
-    const payload = await apiFetch<GoogleStatus>("/api/google/status");
-    if (payload.error) return;
-    setGoogleStatus(payload.data ?? null);
+    const res = await fetch("/api/google/status");
+    if (!res.ok) return;
+    const payload = await res.json();
+    setGoogleStatus(payload.data ?? payload);
   }, []);
 
   const loadTellerScript = useCallback(() => {
@@ -149,11 +149,13 @@ export default function ConnectPage() {
       if (linkMode === "update" && updateAccountRef) {
         setStatus("Finishing bank reconnection...");
         try {
-          const payload = await apiFetch("/api/plaid/repair-complete", {
+          const res = await fetch("/api/plaid/repair-complete", {
             method: "POST",
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ accountId: updateAccountRef })
           });
-          if (payload.error) {
+          const payload = await res.json();
+          if (!res.ok || payload.error) {
             setStatus(payload.error?.message ?? "Unable to finish bank reconnection.");
             return;
           }
@@ -176,11 +178,13 @@ export default function ConnectPage() {
 
       setStatus("Exchanging public token...");
       try {
-        const payload = await apiFetch("/api/plaid/exchange", {
+        const res = await fetch("/api/plaid/exchange", {
           method: "POST",
+          headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ publicToken })
         });
-        if (payload.error) {
+        const payload = await res.json();
+        if (!res.ok || payload.error) {
           setStatus(payload.error?.message ?? "Unable to exchange token.");
           return;
         }
@@ -217,10 +221,12 @@ export default function ConnectPage() {
       accountType: manualType,
       mask: manualAccount.slice(-4)
     };
-    apiFetch("/api/accounts/manual", {
+    fetch("/api/accounts/manual", {
       method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(payload)
     })
+      .then((res) => res.json())
       .then((data) => {
         if (data?.error) {
           setStatus(data.error?.message ?? "Unable to save manual account.");
@@ -241,14 +247,13 @@ export default function ConnectPage() {
   const startUpdateMode = async (accountRef: string) => {
     setStatus("Requesting Plaid update-mode link token...");
     try {
-      const payload = await apiFetch<{ linkToken?: string; link_token?: string }>(
-        "/api/plaid/update-link-token",
-        {
+      const res = await fetch("/api/plaid/update-link-token", {
         method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ accountId: accountRef })
-        }
-      );
-      if (payload.error) {
+      });
+      const payload = await res.json();
+      if (!res.ok || payload.error) {
         setStatus(payload.error?.message ?? "Unable to create update-mode link token.");
         return;
       }
@@ -278,10 +283,9 @@ export default function ConnectPage() {
       return;
     }
 
-    const configPayload = await apiFetch<{ applicationId: string; environment?: string; products: string[] }>(
-      "/api/teller/config"
-    );
-    if (configPayload.error) {
+    const configRes = await fetch("/api/teller/config");
+    const configPayload = await configRes.json();
+    if (!configRes.ok || configPayload.error) {
       setStatus(configPayload.error?.message ?? "Teller is not configured.");
       return;
     }
@@ -292,11 +296,13 @@ export default function ConnectPage() {
       products: configPayload.data.products,
       onSuccess: async (enrollment) => {
         setStatus("Importing Teller accounts...");
-        const payload = await apiFetch<{ accountCount?: number }>("/api/teller/enrollment", {
+        const res = await fetch("/api/teller/enrollment", {
           method: "POST",
+          headers: { "Content-Type": "application/json" },
           body: JSON.stringify(enrollment)
         });
-        if (payload.error) {
+        const payload = await res.json();
+        if (!res.ok || payload.error) {
           setStatus(payload.error?.message ?? "Unable to import Teller accounts.");
           return;
         }
@@ -311,8 +317,9 @@ export default function ConnectPage() {
 
   const syncTeller = async () => {
     setStatus("Syncing Teller transactions...");
-    const payload = await apiFetch<{ created?: number }>("/api/teller/sync", { method: "POST" });
-    if (payload.error) {
+    const res = await fetch("/api/teller/sync", { method: "POST" });
+    const payload = await res.json();
+    if (!res.ok || payload.error) {
       setStatus(payload.error?.message ?? "Unable to sync Teller transactions.");
       return;
     }
@@ -322,11 +329,13 @@ export default function ConnectPage() {
 
   const enableSheetsMirror = async () => {
     setStatus("Enabling Sheets-first mirror mode...");
-    const payload = await apiFetch("/api/google/data-system-mode", {
+    const res = await fetch("/api/google/data-system-mode", {
       method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ mode: "google_sheets_mirror" })
     });
-    if (payload.error) {
+    const payload = await res.json();
+    if (!res.ok || payload.error) {
       setStatus(payload.error?.message ?? "Unable to enable Sheets-first mirror mode.");
       return;
     }

lib/api.ts

@@ -34,35 +34,16 @@ export function clearAuth(): void {
   localStorage.removeItem(USER_KEY);
 }
 
-// The backend binds every authenticated request to a single-use, rotating
-// session nonce: each request must present the current nonce and immediately
-// invalidates it for the next one. That makes concurrent authenticated
-// requests fundamentally unsafe — if two calls read the same nonce cookie
-// before either response comes back to update it (e.g. a dashboard loading
-// several widgets in parallel with Promise.all), only the first one to reach
-// the server can win; every other one, including a refresh call caught in
-// the same race, gets rejected and can cascade into a forced logout.
-//
-// The only fully correct fix on this side is to never let more than one
-// nonce-consuming request be in flight at once: every apiFetch call is
-// queued and runs strictly after the previous one (refresh-and-retry
-// included) has completely finished, so the nonce cookie is always settled
-// before the next request reads it. This only serializes requests within
-// this browser tab — a second tab open to the same account still shares the
-// same nonce cookie and could race against this one; that's a separate,
-// rarer case and not what was happening here.
-let requestQueue: Promise<unknown> = Promise.resolve();
-
-function enqueue<T>(task: () => Promise<T>): Promise<T> {
-  const result = requestQueue.then(task, task);
-  requestQueue = result.then(
-    () => undefined,
-    () => undefined
-  );
-  return result;
-}
+// Shared in-flight refresh promise so concurrent 401s (e.g. several widgets
+// loading at once) all await the same refresh call instead of each firing
+// their own — refresh tokens are single-use, so racing calls would otherwise
+// invalidate each other and force a false session-expired logout.
+let refreshInFlight: Promise<boolean> | null = null;
 
 async function tryRefresh(): Promise<boolean> {
+  if (refreshInFlight) return refreshInFlight;
+
+  refreshInFlight = (async () => {
     try {
       const res = await fetch("/api/auth/refresh", {
         method: "POST",
@@ -82,11 +63,18 @@ async function tryRefresh(): Promise<boolean> {
       clearAuth();
       return false;
     }
+  })();
+
+  try {
+    return await refreshInFlight;
+  } finally {
+    refreshInFlight = null;
+  }
 }
 
-async function performFetch<T>(
+export async function apiFetch<T = unknown>(
   path: string,
-  options: RequestInit
+  options: RequestInit = {}
 ): Promise<ApiResponse<T>> {
   const headers: Record<string, string> = {
     ...(options.headers as Record<string, string>),
@@ -106,8 +94,7 @@ async function performFetch<T>(
     const refreshed = await tryRefresh();
     if (refreshed) {
       res = await fetch(path, { ...options, headers });
-    }
-    if (!refreshed || res.status === 401) {
+    } else {
       if (typeof window !== "undefined") {
         window.location.href = "/login";
       }
@@ -121,10 +108,3 @@ async function performFetch<T>(
 
   return res.json() as Promise<ApiResponse<T>>;
 }
-
-export function apiFetch<T = unknown>(
-  path: string,
-  options: RequestInit = {}
-): Promise<ApiResponse<T>> {
-  return enqueue(() => performFetch<T>(path, options));
-}