Harden auth reconnect recovery (#413)

Author: 0xSolarPunk

web/src/lib/api/auth.ts

@@ -3,6 +3,8 @@
 
 import { apiGet, apiPost, parseApiResponse } from './client.js';
 
+const AUTH_REQUEST_TIMEOUT_MS = 5_000;
+
 export interface AuthStatusResponse {
 	needsSetup: boolean;
 	isAuthenticated: boolean;
@@ -32,7 +34,9 @@ export interface UserResponse {
 
 /** Checks whether the server requires authentication. Unauthenticated. */
 export async function getAuthStatus(): Promise<AuthStatusResponse> {
-	const response = await fetch('/api/v1/auth/status');
+	const response = await fetch('/api/v1/auth/status', {
+		signal: AbortSignal.timeout(AUTH_REQUEST_TIMEOUT_MS),
+	});
 	return parseApiResponse<AuthStatusResponse>(response);
 }
 
@@ -58,7 +62,7 @@ export async function register(username: string, password: string): Promise<Regi
 
 /** Fetches the current authenticated user. */
 export async function getUser(): Promise<UserResponse> {
-	return apiGet<UserResponse>('/api/v1/auth/user');
+	return apiGet<UserResponse>('/api/v1/auth/user', { timeoutMs: AUTH_REQUEST_TIMEOUT_MS });
 }
 
 /** Logs out the current session. */

web/src/lib/stores/__tests__/auth.test.ts

@@ -66,6 +66,27 @@ describe('AuthStore', () => {
 	});
 
 	describe('checkAuthStatus', () => {
+		it('coalesces concurrent recovery checks', async () => {
+			let resolveStatus!: (status: {
+				needsSetup: boolean;
+				isAuthenticated: boolean;
+				authDisabled: boolean;
+			}) => void;
+			vi.mocked(getAuthStatus).mockImplementation(
+				() =>
+					new Promise((resolve) => {
+						resolveStatus = resolve;
+					}),
+			);
+			const auth = new AuthStore();
+			const first = auth.checkAuthStatus();
+			const second = auth.checkAuthStatus();
+			expect(getAuthStatus).toHaveBeenCalledTimes(1);
+			resolveStatus({ needsSetup: false, isAuthenticated: false, authDisabled: false });
+			await Promise.all([first, second]);
+			expect(getAuthStatus).toHaveBeenCalledTimes(1);
+		});
+
 		it('sets needsSetup when server reports setup needed', async () => {
 			vi.mocked(getAuthStatus).mockResolvedValue({
 				needsSetup: true,
@@ -210,9 +231,11 @@ describe('AuthStore', () => {
 			});
 			const auth = new AuthStore();
 			auth.needsSetup = true;
+			auth.isUnavailable = true;
 			const result = await auth.register('newuser', 'pass');
 			expect(result.success).toBe(true);
 			expect(auth.needsSetup).toBe(false);
+			expect(auth.isUnavailable).toBe(false);
 			expect(auth.token).toBe('reg-token');
 			expect(setAuthToken).toHaveBeenCalledWith('reg-token');
 		});

web/src/lib/stores/auth.svelte.ts

@@ -57,6 +57,7 @@ export interface AuthResult {
 }
 
 export class AuthStore {
+	private statusCheck: Promise<void> | null = null;
 	token = $state<string | null>(null);
 	user = $state<AuthUser | null>(null);
 	isLoading = $state(true);
@@ -72,6 +73,17 @@ export class AuthStore {
 
 	/** Queries the server for auth status and validates any stored token. */
 	async checkAuthStatus(): Promise<void> {
+		if (this.statusCheck) return this.statusCheck;
+		const check = this.performAuthStatusCheck();
+		this.statusCheck = check;
+		try {
+			await check;
+		} finally {
+			if (this.statusCheck === check) this.statusCheck = null;
+		}
+	}
+
+	private async performAuthStatusCheck(): Promise<void> {
 		try {
 			this.isLoading = true;
 			this.isUnavailable = false;
@@ -158,6 +170,7 @@ export class AuthStore {
 			this.token = data.token;
 			this.user = data.user;
 			this.needsSetup = false;
+			this.isUnavailable = false;
 			setAuthToken(data.token);
 			return { success: true };
 		} catch (err: unknown) {

web/src/routes/+layout.svelte

@@ -300,12 +300,27 @@
 	});
 
 	onMount(() => {
-		auth.checkAuthStatus();
+		void auth.checkAuthStatus();
 		const handleOnline = () => {
-			if (auth.isUnavailable) void auth.checkAuthStatus();
+			void auth.checkAuthStatus();
 		};
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === 'visible' && auth.isUnavailable) {
+				void auth.checkAuthStatus();
+			}
+		};
+		const retryInterval = window.setInterval(() => {
+			if (document.visibilityState === 'visible' && auth.isUnavailable) {
+				void auth.checkAuthStatus();
+			}
+		}, 15_000);
 		window.addEventListener('online', handleOnline);
-		return () => window.removeEventListener('online', handleOnline);
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+		return () => {
+			window.clearInterval(retryInterval);
+			window.removeEventListener('online', handleOnline);
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
 	});
 
 	function handlePageHide() {