Preserve auth during network reconnects (#413)

Author: 0xSolarPunk

web/messages/en.json

@@ -30,6 +30,8 @@
 	"auth_errors_auth_disabled": "Authentication is disabled by server configuration.",
 	"auth_errors_invalid_credentials": "Invalid credentials. Please try again.",
 	"auth_errors_network": "Network error. Please check your connection.",
+	"auth_reconnecting_title": "Reconnecting to Garcon",
+	"auth_reconnecting_description": "Your session is still saved. Garcon will retry when your network returns.",
 	"auth_errors_server": "Server error. Please try again later.",
 	"chat_empty_no_chat_selected": "No chat selected",
 	"chat_empty_press_new_chat": "Press New Chat to start.",

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

@@ -27,6 +27,7 @@ vi.mock('$lib/api/client.js', () => ({
 	clearAuthToken: vi.fn(),
 	ApiError: class extends Error {
 		status: number;
+		retryable = false;
 		constructor(status: number, message: string) {
 			super(message);
 			this.status = status;
@@ -41,10 +42,11 @@ import {
 	getUser,
 	logout as apiLogout,
 } from '$lib/api/auth.js';
-import { setAuthToken, clearAuthToken } from '$lib/api/client.js';
+import { setAuthToken, clearAuthToken, ApiError } from '$lib/api/client.js';
 
 describe('AuthStore', () => {
 	beforeEach(() => {
+		vi.useRealTimers();
 		for (const k of Object.keys(store)) delete store[k];
 		vi.clearAllMocks();
 	});
@@ -91,18 +93,62 @@ describe('AuthStore', () => {
 			expect(auth.user).toEqual({ id: '1', username: 'admin' });
 		});
 
-		it('clears invalid token when getUser fails', async () => {
-			store[LOCAL_STORAGE_KEYS.authToken] = 'expired-token';
+		it.each([401, 403])(
+			'clears an invalid token after an authoritative %i rejection',
+			async (status) => {
+				store[LOCAL_STORAGE_KEYS.authToken] = 'expired-token';
+				vi.mocked(getAuthStatus).mockResolvedValue({
+					needsSetup: false,
+					isAuthenticated: false,
+					authDisabled: false,
+				});
+				vi.mocked(getUser).mockRejectedValue(new ApiError(status, 'Rejected'));
+				const auth = new AuthStore();
+				await auth.checkAuthStatus();
+				expect(auth.token).toBeNull();
+				expect(clearAuthToken).toHaveBeenCalled();
+			},
+		);
+
+		it('keeps the token and retries when auth status is temporarily unreachable', async () => {
+			vi.useFakeTimers();
+			store[LOCAL_STORAGE_KEYS.authToken] = 'saved-token';
+			vi.mocked(getAuthStatus).mockRejectedValue(new TypeError('Failed to fetch'));
+			const auth = new AuthStore();
+
+			const check = auth.checkAuthStatus();
+			await vi.runAllTimersAsync();
+			await check;
+
+			expect(getAuthStatus).toHaveBeenCalledTimes(5);
+			expect(auth.token).toBe('saved-token');
+			expect(auth.isUnavailable).toBe(true);
+			expect(auth.error).toBe('Network error. Please check your connection.');
+			expect(clearAuthToken).not.toHaveBeenCalled();
+		});
+
+		it('recovers from transient user validation without clearing the token', async () => {
+			vi.useFakeTimers();
+			store[LOCAL_STORAGE_KEYS.authToken] = 'saved-token';
 			vi.mocked(getAuthStatus).mockResolvedValue({
 				needsSetup: false,
-				isAuthenticated: false,
+				isAuthenticated: true,
 				authDisabled: false,
 			});
-			vi.mocked(getUser).mockRejectedValue(new Error('401'));
+			vi.mocked(getUser)
+				.mockRejectedValueOnce(new TypeError('Failed to fetch'))
+				.mockResolvedValueOnce({ user: { id: '1', username: 'admin' } });
 			const auth = new AuthStore();
-			await auth.checkAuthStatus();
-			expect(auth.token).toBeNull();
-			expect(clearAuthToken).toHaveBeenCalled();
+
+			const check = auth.checkAuthStatus();
+			await vi.runAllTimersAsync();
+			await check;
+
+			expect(getUser).toHaveBeenCalledTimes(2);
+			expect(auth.token).toBe('saved-token');
+			expect(auth.user).toEqual({ id: '1', username: 'admin' });
+			expect(auth.isUnavailable).toBe(false);
+			expect(clearAuthToken).not.toHaveBeenCalled();
 		});
 
 		it('enters app mode without token when auth is disabled by server config', async () => {
@@ -143,6 +189,16 @@ describe('AuthStore', () => {
 			expect(result.success).toBe(false);
 			expect(auth.error).toBeTruthy();
 		});
+
+		it('maps transport failures to a useful network error', async () => {
+			vi.mocked(apiLogin).mockRejectedValue(new TypeError('Failed to fetch'));
+			const auth = new AuthStore();
+			const result = await auth.login('admin', 'pass');
+			expect(result).toEqual({
+				success: false,
+				error: 'Network error. Please check your connection.',
+			});
+		});
 	});
 
 	describe('register', () => {

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

@@ -12,6 +12,32 @@ import {
 import { getAuthToken, setAuthToken, clearAuthToken, ApiError } from '$lib/api/client.js';
 import * as m from '$lib/paraglide/messages.js';
 
+const AUTH_RETRY_DELAYS_MS = [250, 500, 1_000, 2_000] as const;
+
+function isAuthoritativeAuthRejection(err: unknown): boolean {
+	return err instanceof ApiError && (err.status === 401 || err.status === 403);
+}
+
+function isRetryableAuthError(err: unknown): boolean {
+	if (!(err instanceof ApiError)) return true;
+	const apiError = err as ApiError;
+	return apiError.retryable || apiError.status === 429 || apiError.status >= 500;
+}
+
+async function retryAuthRequest<T>(request: () => Promise<T>): Promise<T> {
+	let lastError: unknown;
+	for (let attempt = 0; attempt <= AUTH_RETRY_DELAYS_MS.length; attempt += 1) {
+		try {
+			return await request();
+		} catch (err) {
+			lastError = err;
+			if (!isRetryableAuthError(err) || attempt === AUTH_RETRY_DELAYS_MS.length) throw err;
+			await new Promise((resolve) => setTimeout(resolve, AUTH_RETRY_DELAYS_MS[attempt]));
+		}
+	}
+	throw lastError;
+}
+
 /** Maps API errors to user-facing messages based on HTTP status. */
 function describeAuthError(err: unknown): string {
 	if (err instanceof ApiError) {
@@ -21,7 +47,7 @@ function describeAuthError(err: unknown): string {
 		if (err.status >= 500) return m.auth_errors_server();
 		return err.message;
 	}
-	if (err instanceof Error) return err.message;
+	if (err instanceof Error) return m.auth_errors_network();
 	return m.auth_errors_network();
 }
 
@@ -36,6 +62,7 @@ export class AuthStore {
 	isLoading = $state(true);
 	needsSetup = $state(false);
 	authDisabled = $state(false);
+	isUnavailable = $state(false);
 	error = $state<string | null>(null);
 	isAuthenticated = $derived(this.authDisabled || (!!this.token && !!this.user));
 
@@ -47,9 +74,10 @@ export class AuthStore {
 	async checkAuthStatus(): Promise<void> {
 		try {
 			this.isLoading = true;
+			this.isUnavailable = false;
 			this.error = null;
 
-			const status = await getAuthStatus();
+			const status = await retryAuthRequest(getAuthStatus);
 			this.authDisabled = Boolean(status.authDisabled);
 
 			if (this.authDisabled) {
@@ -72,10 +100,11 @@ export class AuthStore {
 
 			if (this.token) {
 				try {
-					const data = await getUser();
+					const data = await retryAuthRequest(getUser);
 					this.user = data.user;
-				} catch {
-					// Token is invalid or expired
+				} catch (err) {
+					if (!isAuthoritativeAuthRejection(err)) throw err;
+					// The server authoritatively rejected the token.
 					clearAuthToken();
 					this.token = null;
 					this.user = null;
@@ -85,6 +114,7 @@ export class AuthStore {
 			}
 		} catch (err) {
 			console.error('[AuthStore] Auth status check failed:', err);
+			this.isUnavailable = true;
 			this.error = describeAuthError(err);
 		} finally {
 			this.isLoading = false;
@@ -104,6 +134,7 @@ export class AuthStore {
 			const data = await apiLogin(username, password);
 			this.token = data.token;
 			this.user = data.user;
+			this.isUnavailable = false;
 			setAuthToken(data.token);
 			return { success: true };
 		} catch (err: unknown) {

web/src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import MessageSquare from '@lucide/svelte/icons/message-square';
+	import { Button } from '$lib/components/ui/button/index.js';
 
 	import { createAuthStore } from '$lib/stores/auth.svelte.js';
 	import { createLocalSettingsStore } from '$lib/stores/local-settings.svelte.js';
@@ -300,6 +301,11 @@
 
 	onMount(() => {
 		auth.checkAuthStatus();
+		const handleOnline = () => {
+			if (auth.isUnavailable) void auth.checkAuthStatus();
+		};
+		window.addEventListener('online', handleOnline);
+		return () => window.removeEventListener('online', handleOnline);
 	});
 
 	function handlePageHide() {
@@ -373,6 +379,7 @@
 	$effect(() => {
 		if (auth.isLoading) return;
 		if (auth.authDisabled) return;
+		if (auth.isUnavailable) return;
 
 		if (page.url.pathname === '/setup' && !auth.needsSetup && !auth.isAuthenticated) {
 			goto('/login');
@@ -392,6 +399,7 @@
 	// Shared view routes are excluded -- they are public by design.
 	$effect(() => {
 		if (auth.isLoading) return;
+		if (auth.isUnavailable) return;
 		if (!isPublicRoute) return;
 		if (page.url.pathname.startsWith('/shared/')) return;
 		if (auth.authDisabled || (auth.isAuthenticated && !auth.needsSetup)) {
@@ -418,7 +426,7 @@
 	});
 </script>
 
-{#if auth.isLoading && !isPublicRoute}
+{#if auth.isLoading && (!isPublicRoute || auth.token)}
 	<div class="min-h-dvh bg-background flex items-center justify-center p-4">
 		<div class="text-center">
 			<div class="flex justify-center mb-4">
@@ -441,6 +449,21 @@
 			<p class="text-muted-foreground mt-2">{m.status_loading()}</p>
 		</div>
 	</div>
+{:else if auth.isUnavailable && (!isPublicRoute || auth.token)}
+	<div class="min-h-dvh bg-background flex items-center justify-center p-4">
+		<div class="max-w-md text-center">
+			<div class="flex justify-center mb-4">
+				<div class="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+					<MessageSquare class="w-8 h-8 text-primary-foreground" />
+				</div>
+			</div>
+			<h1 class="text-2xl font-bold text-foreground mb-2">{m.auth_reconnecting_title()}</h1>
+			<p class="text-muted-foreground mb-4">{m.auth_reconnecting_description()}</p>
+			<Button onclick={() => auth.checkAuthStatus()} disabled={auth.isLoading}>
+				{m.common_retry()}
+			</Button>
+		</div>
+	</div>
 {:else if isPublicRoute}
 	{@render children()}
 {:else if auth.isAuthenticated}