fix(frontend): logout state not shown after JWT expires (#40)

Reviewed-on: #40

frontend/src/utils/api/client.ts

@@ -6,9 +6,43 @@ class AuthError extends Error {
     constructor() { super("Not authenticated"); this.name = "AuthError"; }
 }
 
-const isThumbnailAvailable = async (thumbnailUrl: string): Promise<boolean> => {
-    const response = await fetch(thumbnailUrl, { credentials: 'include' });
-    return response.ok;
-};
+let onUnauthorized: (() => void) | null = null;
 
-export { API_URL, AuthError, isThumbnailAvailable };
+export function registerUnauthorizedHandler(handler: () => void) {
+    onUnauthorized = handler;
+}
+
+/**
+ * Performs a request against the API, sending session cookies and funnelling
+ * expired/missing sessions through the registered unauthorized handler so the
+ * UI can drop back to a logged out state. Returns the raw response so callers
+ * that need something other than JSON (blobs, streams) can read it themselves.
+ */
+async function apiFetchRaw(url: string, options: RequestInit = {}): Promise<Response> {
+    const response = await fetch(url, {
+        ...options,
+        credentials: 'include'
+    });
+
+    if (response.status == 401 || response.status == 403) {
+        onUnauthorized?.();
+        throw new AuthError();
+    }
+
+    if (!response.ok) {
+        const text = await response.text();
+        let message = text;
+        try { message = JSON.parse(text).message ?? text; } catch { /* not JSON, use raw text */ }
+        throw new Error(message || `Request failed: ${response.status}`);
+    }
+
+    return response;
+}
+
+async function apiFetch<T>(url: string, options: RequestInit = {}): Promise<T> {
+    const response = await apiFetchRaw(url, options);
+    const text = await response.text();
+    return text ? JSON.parse(text) : (undefined as T);
+}
+
+export { API_URL, AuthError, apiFetch, apiFetchRaw };

frontend/src/utils/api/clips.ts

@@ -1,27 +1,17 @@
 import type { APIResponse, Clip } from "../types.ts";
-import { API_URL, AuthError } from "./client.ts";
+import { API_URL, apiFetch } from "./client.ts";
 
 const getClips = async (): Promise<Clip[]> => {
-    const response = await fetch(API_URL + '/api/v1/clips', { credentials: 'include' });
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/clips');
+    if (result.status === 'error') throw new Error(`Failed to fetch clips: ${result.message}`);
 
-    if (!response.ok) {
-        const errorResult: APIResponse = await response.json();
-        throw new Error(`Failed to fetch clips: ${errorResult.message}`);
-    }
-
-    const result: APIResponse = await response.json();
     return result.data;
 };
 
 const getClipById = async (id: string): Promise<Clip | null> => {
-    const response = await fetch(API_URL + `/api/v1/clips/${id}`, { credentials: 'include' });
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/clips/${id}`);
+    if (result.status === 'error') throw new Error(`Failed to fetch clip: ${result.message}`);
 
-    if (!response.ok) {
-        if (response.status === 401 || response.status === 403) throw new AuthError();
-        throw new Error(`Failed to fetch clip: ${response.status}`);
-    }
-
-    const result: APIResponse = await response.json();
     return result.data;
 };
 
@@ -31,31 +21,20 @@ const getClipById = async (id: string): Promise<Clip | null> => {
 const getClipMediaUrl = (id: string): string => API_URL + `/api/v1/clips/${id}/media`;
 
 const patchClip = async (id: number, data: { title?: string; description?: string }): Promise<Clip> => {
-    const response = await fetch(API_URL + `/api/v1/clips/${id}`, {
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/clips/${id}`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify(data),
     });
 
-    if (!response.ok) throw new Error(`Failed to update clip: ${response.status}`);
-
-    const result: APIResponse = await response.json();
     if (result.status === 'error') throw new Error(`Failed to update clip: ${result.message}`);
 
     return result.data;
 };
 
 const deleteClip = async (id: number): Promise<void> => {
-    const response = await fetch(API_URL + `/api/v1/clips/${id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-    });
-
-    if (!response.ok) throw new Error(`Failed to delete clip: ${response.status}`);
-
-    const result: APIResponse = await response.json();
-    if (result.status === 'error') throw new Error(`Failed to delete clip: ${result.message}`);
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/clips/${id}`, { method: 'DELETE' });
+    if (result?.status === 'error') throw new Error(`Failed to delete clip: ${result.message}`);
 };
 
 export { getClips, getClipById, getClipMediaUrl, patchClip, deleteClip };

frontend/src/utils/api/jobs.ts

@@ -1,15 +1,16 @@
 import type { APIResponse, JobResponse } from "../types.ts";
-import { API_URL } from "./client.ts";
+import { API_URL, apiFetch, apiFetchRaw } from "./client.ts";
 
 const getJob = async (uuid: string): Promise<JobResponse> => {
-    const response = await fetch(API_URL + `/api/v1/jobs/${uuid}`, { credentials: 'include' });
-
-    if (!response.ok) throw new Error(`Failed to fetch job: ${response.status}`);
-
-    const result: APIResponse = await response.json();
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/jobs/${uuid}`);
     if (result.status === 'error') throw new Error(`Failed to fetch job: ${result.message}`);
 
     return result.data;
 };
 
-export { getJob };
+const downloadJob = async (uuid: string): Promise<Blob> => {
+    const response = await apiFetchRaw(API_URL + `/api/v1/jobs/${uuid}/download`);
+    return response.blob();
+};
+
+export { getJob, downloadJob };

frontend/src/utils/api/markers.ts

@@ -1,40 +1,28 @@
 import type { APIResponse, Marker } from "../types.ts";
-import { API_URL } from "./client.ts";
+import { API_URL, apiFetch } from "./client.ts";
 
 const getMarkers = async (): Promise<Marker[]> => {
-    const response = await fetch(API_URL + '/api/v1/markers', { credentials: 'include' });
-    if (!response.ok) throw new Error(`Failed to fetch markers: ${response.status}`);
-
-    const result: APIResponse = await response.json();
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/markers');
     if (result.status === 'error') throw new Error(`Failed to fetch markers: ${result.message}`);
 
     return result.data;
 };
 
 const createMarker = async (message: string): Promise<Marker> => {
-    const response = await fetch(API_URL + '/api/v1/markers', {
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/markers', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify({ message }),
     });
 
-    const result: APIResponse = await response.json();
-    if (!response.ok || result.status === 'error') throw new Error(`Failed to add marker: ${result.message}`);
+    if (result.status === 'error') throw new Error(`Failed to add marker: ${result.message}`);
 
     return result.data;
 };
 
 const deleteMarker = async (id: number): Promise<void> => {
-    const response = await fetch(API_URL + `/api/v1/markers/${id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-    });
-
-    if (!response.ok) throw new Error(`Failed to delete marker: ${response.status}`);
-
-    const result: APIResponse = await response.json();
-    if (result.status === 'error') throw new Error(`Failed to delete marker: ${result.message}`);
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/markers/${id}`, { method: 'DELETE' });
+    if (result?.status === 'error') throw new Error(`Failed to delete marker: ${result.message}`);
 };
 
 export { getMarkers, createMarker, deleteMarker };

frontend/src/utils/api/media.ts

@@ -1,5 +1,5 @@
 import type { APIResponse, VideoMetadata } from "../types.ts";
-import { API_URL } from "./client.ts";
+import { API_URL, apiFetch } from "./client.ts";
 
 const compress = async (file: File, options: VideoMetadata): Promise<string> => {
     const formData = new FormData();
@@ -13,58 +13,48 @@ const compress = async (file: File, options: VideoMetadata): Promise<string> =>
     if (options.height) formData.append('height', options.height.toString());
     if (options.fileSize) formData.append('fileSize', options.fileSize.toString());
 
-    const response = await fetch(API_URL + '/api/v1/media/compress', {
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/media/compress', {
         method: 'POST',
         body: formData,
-        credentials: 'include',
     });
 
-    if (!response.ok) throw new Error(`Compression failed: ${response.status}`);
-
-    const result: APIResponse = await response.json();
     if (result.status === 'error') throw new Error(`Compression failed: ${result.message}`);
 
     return result.data.uuid;
 };
 
 const saveSection = async (startTime: string, endTime: string, title?: string, description?: string): Promise<string> => {
-    const response = await fetch(API_URL + '/api/v1/media/save', {
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/media/save', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify({ startTime, endTime, title, description }),
     });
 
-    const result: APIResponse = await response.json();
-    if (!response.ok || result.status === 'error') throw new Error(`Failed to save section: ${result.message}`);
+    if (result.status === 'error') throw new Error(`Failed to save section: ${result.message}`);
 
     return result.data.uuid;
 };
 
 const saveSectionByMarkers = async (startMarkerId: number, endMarkerId: number, title?: string, description?: string): Promise<string> => {
-    const response = await fetch(API_URL + '/api/v1/media/save/markers', {
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/media/save/markers', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify({ startMarkerId, endMarkerId, title, description }),
     });
 
-    const result: APIResponse = await response.json();
-    if (!response.ok || result.status === 'error') throw new Error(`Failed to save section: ${result.message}`);
+    if (result.status === 'error') throw new Error(`Failed to save section: ${result.message}`);
 
     return result.data.uuid;
 };
 
 const clipSection = async (duration: number, title?: string, description?: string): Promise<string> => {
-    const response = await fetch(API_URL + '/api/v1/media/clip', {
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/media/clip', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify({ duration, title, description }),
     });
 
-    const result: APIResponse = await response.json();
-    if (!response.ok || result.status === 'error') throw new Error(`Failed to clip section: ${result.message}`);
+    if (result.status === 'error') throw new Error(`Failed to clip section: ${result.message}`);
 
     return result.data.uuid;
 };

frontend/src/utils/api/stream.ts

@@ -1,28 +1,24 @@
 import type { APIResponse, StreamHistoryItem, StreamStatus } from "../types.ts";
-import { API_URL } from "./client.ts";
+import { API_URL, apiFetch } from "./client.ts";
 
 const getStreamStatus = async (): Promise<boolean> => {
-    const response = await fetch(API_URL + '/api/v1/stream/current', { credentials: 'include' });
-    if (!response.ok) return false;
-    const result: APIResponse = await response.json();
-    return result.status === 'success' && result.data?.isStreaming === true;
+    try {
+        const result = await apiFetch<APIResponse>(API_URL + '/api/v1/stream/current');
+        return result.status === 'success' && result.data?.isStreaming === true;
+    } catch {
+        return false;
+    }
 };
 
 const getCurrentStream = async (): Promise<StreamStatus> => {
-    const response = await fetch(API_URL + '/api/v1/stream/current', { credentials: 'include' });
-    if (!response.ok) throw new Error(`Failed to fetch stream status: ${response.status}`);
-
-    const result: APIResponse = await response.json();
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/stream/current');
     if (result.status === 'error') throw new Error(`Failed to fetch stream status: ${result.message}`);
 
     return result.data;
 };
 
 const getStreamHistory = async (userId: number): Promise<StreamHistoryItem[]> => {
-    const response = await fetch(API_URL + `/api/v1/stream/history/${userId}`, { credentials: 'include' });
-    if (!response.ok) throw new Error(`Failed to fetch stream history: ${response.status}`);
-
-    const result: APIResponse = await response.json();
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/stream/history/${userId}`);
     if (result.status === 'error') throw new Error(`Failed to fetch stream history: ${result.message}`);
 
     return result.data;

frontend/src/utils/api/users.ts

@@ -1,6 +1,9 @@
 import type { APIResponse, User } from "../types.ts";
-import { API_URL } from "./client.ts";
+import { API_URL, apiFetch } from "./client.ts";
 
+// login and getUser deliberately use fetch directly: they run when there may be
+// no session at all, and getUser is what the unauthorized handler calls to
+// refresh — routing them through apiFetch would loop on a 401.
 const login = async (googleToken: string): Promise<string> => {
     const response = await fetch(API_URL + '/api/v1/users/login', {
         method: 'POST',
@@ -18,15 +21,8 @@ const login = async (googleToken: string): Promise<string> => {
 };
 
 const logout = async (): Promise<void> => {
-    const response = await fetch(API_URL + '/api/v1/users/logout', {
-        method: 'POST',
-        credentials: 'include',
-    });
-
-    if (!response.ok) throw new Error(`Logout failed: ${response.status}`);
-
-    const result: APIResponse = await response.json();
-    if (result.status === 'error') throw new Error(`Logout failed: ${result.message}`);
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/users/logout', { method: 'POST' });
+    if (result?.status === 'error') throw new Error(`Logout failed: ${result.message}`);
 };
 
 const getUser = async (): Promise<User | null> => {

frontend/src/utils/api/vods.ts

@@ -1,27 +1,17 @@
 import type { APIResponse, Vod } from "../types.ts";
-import { API_URL, AuthError } from "./client.ts";
+import { API_URL, apiFetch } from "./client.ts";
 
 const getVods = async (): Promise<Vod[]> => {
-    const response = await fetch(API_URL + '/api/v1/vods', { credentials: 'include' });
+    const result = await apiFetch<APIResponse>(API_URL + '/api/v1/vods');
+    if (result.status === 'error') throw new Error(`Failed to fetch vods: ${result.message}`);
 
-    if (!response.ok) {
-        const errorResult: APIResponse = await response.json();
-        throw new Error(`Failed to fetch vods: ${errorResult.message}`);
-    }
-
-    const result: APIResponse = await response.json();
     return result.data;
 };
 
 const getVodById = async (id: string): Promise<Vod | null> => {
-    const response = await fetch(API_URL + `/api/v1/vods/${id}`, { credentials: 'include' });
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/vods/${id}`);
+    if (result.status === 'error') throw new Error(`Failed to fetch vod: ${result.message}`);
 
-    if (!response.ok) {
-        if (response.status === 401 || response.status === 403) throw new AuthError();
-        throw new Error(`Failed to fetch vod: ${response.status}`);
-    }
-
-    const result: APIResponse = await response.json();
     return result.data;
 };
 
@@ -31,31 +21,20 @@ const getVodById = async (id: string): Promise<Vod | null> => {
 const getVodMediaUrl = (id: string): string => API_URL + `/api/v1/vods/${id}/media`;
 
 const patchVod = async (id: number, data: { title?: string; description?: string }): Promise<Vod> => {
-    const response = await fetch(API_URL + `/api/v1/vods/${id}`, {
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/vods/${id}`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify(data),
     });
 
-    if (!response.ok) throw new Error(`Failed to update vod: ${response.status}`);
-
-    const result: APIResponse = await response.json();
     if (result.status === 'error') throw new Error(`Failed to update vod: ${result.message}`);
 
     return result.data;
 };
 
 const deleteVod = async (id: number): Promise<void> => {
-    const response = await fetch(API_URL + `/api/v1/vods/${id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-    });
-
-    if (!response.ok) throw new Error(`Failed to delete vod: ${response.status}`);
-
-    const result: APIResponse = await response.json();
-    if (result.status === 'error') throw new Error(`Failed to delete vod: ${result.message}`);
+    const result = await apiFetch<APIResponse>(API_URL + `/api/v1/vods/${id}`, { method: 'DELETE' });
+    if (result?.status === 'error') throw new Error(`Failed to delete vod: ${result.message}`);
 };
 
 export { getVods, getVodById, getVodMediaUrl, patchVod, deleteVod };