fix: preserve cached data during refresh failures

src/features/auth/model/auth.tsx

@@ -1,5 +1,12 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
 import { apiClient, configureAuthClient } from "@/shared/api";
 import type { paths } from "@/shared/api/generated/schema";
 
@@ -41,40 +48,52 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 	const [ready, setReady] = useState(false);
 
 	const refreshPromise = useRef<Promise<boolean> | null>(null);
+	const applyAuthentication = useCallback((authentication: Authentication) => {
+		setUser(authentication.user);
+		setAccessToken(authentication.accessToken);
+		accessTokenRef.current = authentication.accessToken;
+	}, []);
+	const clearSession = useCallback(() => {
+		setUser(null);
+		setAccessToken(null);
+		accessTokenRef.current = null;
+		queryClient.clear();
+	}, [queryClient]);
 
-	async function refresh(): Promise<boolean> {
+	const refresh = useCallback(async (): Promise<boolean> => {
 		if (refreshPromise.current) return refreshPromise.current;
 		refreshPromise.current = (async () => {
 			const run = async () => {
-				const { data } = await apiClient.POST("/api/v1/auth/refresh");
-				if (!data) return false;
-				const authentication = data as Authentication;
-				setUser(authentication.user);
-				setAccessToken(authentication.accessToken);
-				accessTokenRef.current = authentication.accessToken;
-				return true;
+				try {
+					const { data } = await apiClient.POST("/api/v1/auth/refresh");
+					if (!data) {
+						clearSession();
+						return false;
+					}
+					applyAuthentication(data as Authentication);
+					return true;
+				} catch {
+					clearSession();
+					return false;
+				}
 			};
-			return "locks" in navigator
-				? navigator.locks.request("wealth-ledger-refresh", run)
-				: run();
+			try {
+				return "locks" in navigator
+					? navigator.locks.request("wealth-ledger-refresh", run)
+					: run();
+			} catch {
+				clearSession();
+				return false;
+			}
 		})().finally(() => {
 			refreshPromise.current = null;
 		});
 		return refreshPromise.current;
-	}
+	}, [applyAuthentication, clearSession]);
 
 	useEffect(() => {
-		void apiClient
-			.POST("/api/v1/auth/refresh")
-			.then(({ data }) => {
-				if (!data) return;
-				const authentication = data as Authentication;
-				setUser(authentication.user);
-				setAccessToken(authentication.accessToken);
-				accessTokenRef.current = authentication.accessToken;
-			})
-			.finally(() => setReady(true));
-	}, []);
+		void refresh().finally(() => setReady(true));
+	}, [refresh]);
 
 	async function authenticate(
 		path: "/api/v1/auth/login" | "/api/v1/auth/register",
@@ -82,19 +101,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 		password: string,
 	) {
 		const authentication = await request(path, email, password);
-		setUser(authentication.user);
-		setAccessToken(authentication.accessToken);
-		accessTokenRef.current = authentication.accessToken;
+		applyAuthentication(authentication);
 	}
 
 	async function logout() {
 		try {
 			await apiClient.POST("/api/v1/auth/logout");
 		} finally {
-			setUser(null);
-			setAccessToken(null);
-			accessTokenRef.current = null;
-			queryClient.clear();
+			clearSession();
 		}
 	}
 
@@ -102,12 +116,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 		configureAuthClient({
 			accessToken: () => accessTokenRef.current,
 			refresh,
-			clear: () => {
-				setUser(null);
-				setAccessToken(null);
-				accessTokenRef.current = null;
-				queryClient.clear();
-			},
+			clear: clearSession,
 		});
 		return () => configureAuthClient(null);
 	});