From 1e6af005a9914e28f4bb0afafaeb88f4d8e2a270 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Thu, 15 Oct 2026 21:10:22 +0100
Subject: [PATCH] implement on frontend

---
 frontend/src/auth/AuthContext.ts              |  4 +-
 frontend/src/auth/AuthProvider.tsx            | 97 ++++++++++++++++---
 frontend/src/utils/api/client.ts              | 65 +++++++++++--
 frontend/src/utils/api/users.ts               | 28 ++++--
 .../configuration/SecurityConfig.java         | 11 ++-
 .../vodsystem/controllers/UserController.java | 17 ++--
 .../controllers/dto/SessionResponse.java      | 11 +++
 .../com/ddf/vodsystem/security/JwtFilter.java |  2 +-
 8 files changed, 194 insertions(+), 41 deletions(-)
 create mode 100644 src/main/java/com/ddf/vodsystem/controllers/dto/SessionResponse.java

diff --git a/frontend/src/auth/AuthContext.ts b/frontend/src/auth/AuthContext.ts
index 9684f2e..1fa7b5d 100644
--- a/frontend/src/auth/AuthContext.ts
+++ b/frontend/src/auth/AuthContext.ts
@@ -8,9 +8,9 @@ type AuthContextValue = {
     loading: boolean;
     /** Exchange a Google credential for a session, then load the user. */
     login: (googleCredential: string) => Promise<void>;
-    /** End the session and clear the user. */
+    /** End the session and clear the user. The local session is cleared even if the server call fails. */
     logout: () => Promise<void>;
-    /** Re-fetch the current user (e.g. after a profile change). */
+    /** Re-fetch the current user (e.g. after a profile change). Token refresh is handled automatically. */
     refresh: () => Promise<void>;
 };
 
diff --git a/frontend/src/auth/AuthProvider.tsx b/frontend/src/auth/AuthProvider.tsx
index b1ee12e..97c5701 100644
--- a/frontend/src/auth/AuthProvider.tsx
+++ b/frontend/src/auth/AuthProvider.tsx
@@ -1,19 +1,66 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import type { User } from "../utils/types.ts";
 import { login as apiLogin, logout as apiLogout, getUser } from "../utils/api/users.ts";
 import { AuthContext } from "./AuthContext.ts";
-import {registerUnauthorizedHandler} from "../utils/api/client.ts";
+import {
+    refreshSession,
+    registerSessionRefreshedHandler,
+    registerUnauthorizedHandler,
+} from "../utils/api/client.ts";
+
+/** Refresh this long before the access token expires, so in-flight requests never see it lapse. */
+const REFRESH_MARGIN_MS = 60_000;
+/** How soon to try again when a scheduled refresh fails because the network is down. */
+const RETRY_DELAY_MS = 30_000;
 
 /**
  * Owns the single source of truth for the authenticated user. Everything that
  * needs to know who is logged in — the layout, the top bar, protected pages —
  * reads it through the `useAuth` hook rather than fetching the user itself.
+ *
+ * It also keeps the session alive: the access token is refreshed shortly
+ * before it expires, rather than waiting for a request to fail. That matters
+ * for <video> elements, which load media straight from the API and can't
+ * retry on a 401 the way apiFetch does.
  */
 const AuthProvider = ({ children }: { children: ReactNode }) => {
     const [user, setUser] = useState<User | null>(null);
     const [loading, setLoading] = useState(true);
 
+    const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    /** When the next refresh is due (epoch ms), or null when there's no session to keep alive. */
+    const refreshDueRef = useRef<number | null>(null);
+
+    const cancelScheduledRefresh = useCallback(() => {
+        if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+        refreshTimerRef.current = null;
+        refreshDueRef.current = null;
+    }, []);
+
+    const endSession = useCallback(() => {
+        cancelScheduledRefresh();
+        setUser(null);
+    }, [cancelScheduledRefresh]);
+
+    const scheduleRefreshIn = useCallback((delayMs: number) => {
+        if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+        refreshDueRef.current = Date.now() + delayMs;
+        refreshTimerRef.current = setTimeout(() => {
+            refreshSession()
+                .then((refreshed) => { if (!refreshed) endSession(); })
+                .catch(() => scheduleRefreshIn(RETRY_DELAY_MS));
+        }, delayMs);
+    }, [endSession]);
+
+    // Every successful refresh — scheduled, or triggered by apiFetch on a 401 —
+    // reports the new access token lifetime here, so the timer always tracks
+    // the live cookie.
+    const scheduleRefreshBeforeExpiry = useCallback((accessTokenExpiresIn: number) => {
+        const lifetimeMs = accessTokenExpiresIn * 1000;
+        scheduleRefreshIn(Math.max(lifetimeMs - REFRESH_MARGIN_MS, lifetimeMs / 2));
+    }, [scheduleRefreshIn]);
+
     const refresh = useCallback(async () => {
         try {
             setUser(await getUser());
@@ -24,22 +71,50 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
     }, []);
 
     useEffect(() => {
-        refresh().finally(() => setLoading(false));
+        registerUnauthorizedHandler(endSession);
+        registerSessionRefreshedHandler(scheduleRefreshBeforeExpiry);
+    }, [endSession, scheduleRefreshBeforeExpiry]);
+
+    // Restore the session on page load. Refreshing first means a returning
+    // user whose access token expired while they were away is logged straight
+    // back in, and gives us the expiry to schedule the next refresh against.
+    useEffect(() => {
+        refreshSession()
+            .catch((error) => console.error("Failed to refresh session:", error))
+            .then(refresh)
+            .finally(() => setLoading(false));
     }, [refresh]);
 
+    // Timers are throttled in background tabs and paused while the machine
+    // sleeps, so catch up as soon as the user comes back.
+    useEffect(() => {
+        const refreshIfDue = () => {
+            if (document.visibilityState !== "visible") return;
+            const due = refreshDueRef.current;
+            if (due !== null && Date.now() >= due) scheduleRefreshIn(0);
+        };
+
+        document.addEventListener("visibilitychange", refreshIfDue);
+        window.addEventListener("online", refreshIfDue);
+        return () => {
+            document.removeEventListener("visibilitychange", refreshIfDue);
+            window.removeEventListener("online", refreshIfDue);
+        };
+    }, [scheduleRefreshIn]);
+
+    useEffect(() => cancelScheduledRefresh, [cancelScheduledRefresh]);
+
     const login = useCallback(async (googleCredential: string) => {
-        await apiLogin(googleCredential);
+        scheduleRefreshBeforeExpiry(await apiLogin(googleCredential));
         await refresh();
-    }, [refresh]);
+    }, [refresh, scheduleRefreshBeforeExpiry]);
 
     const logout = useCallback(async () => {
+        // Drop the local session even if the server call fails, so the user
+        // is never left looking logged in after clicking log out.
+        endSession();
         await apiLogout();
-        await refresh();
-    }, [refresh]);
-
-    useEffect(() => {
-        registerUnauthorizedHandler(() => setUser(null));
-    }, []);
+    }, [endSession]);
 
     return (
         <AuthContext.Provider value={{ user, loading, login, logout, refresh }}>
diff --git a/frontend/src/utils/api/client.ts b/frontend/src/utils/api/client.ts
index 51d8337..7aac27c 100644
--- a/frontend/src/utils/api/client.ts
+++ b/frontend/src/utils/api/client.ts
@@ -1,4 +1,5 @@
 import {config} from "../../config.ts";
+import type { APIResponse } from "../types.ts";
 
 const API_URL = config.apiUrl;
 
@@ -7,28 +8,72 @@ class AuthError extends Error {
 }
 
 let onUnauthorized: (() => void) | null = null;
+let onSessionRefreshed: ((accessTokenExpiresIn: number) => void) | null = null;
+let refreshInFlight: Promise<boolean> | null = null;
 
 export function registerUnauthorizedHandler(handler: () => void) {
     onUnauthorized = handler;
 }
 
+/** Called with the new access token lifetime (in seconds) whenever the session is refreshed. */
+export function registerSessionRefreshedHandler(handler: (accessTokenExpiresIn: number) => void) {
+    onSessionRefreshed = 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.
+ * Exchanges the refresh token cookie for new access and refresh token cookies.
+ * Concurrent callers share a single request, so a burst of 401s only rotates
+ * the refresh token once.
+ *
+ * @returns true if the session was refreshed, false if it has ended (no valid
+ * refresh token). Throws on network errors so a dropped connection isn't
+ * mistaken for being logged out.
  */
-async function apiFetchRaw(url: string, options: RequestInit = {}): Promise<Response> {
-    const response = await fetch(url, {
-        ...options,
-        credentials: 'include'
+function refreshSession(): Promise<boolean> {
+    refreshInFlight ??= requestRefresh().finally(() => { refreshInFlight = null; });
+    return refreshInFlight;
+}
+
+async function requestRefresh(): Promise<boolean> {
+    const response = await fetch(API_URL + '/api/v1/users/refresh', {
+        method: 'POST',
+        credentials: 'include',
     });
 
-    if (response.status == 401 || response.status == 403) {
+    if (!response.ok) return false;
+
+    const result: APIResponse = await response.json();
+    onSessionRefreshed?.(result.data.accessTokenExpiresIn);
+    return true;
+}
+
+/**
+ * Performs a request against the API, sending session cookies. An expired
+ * access token is refreshed and the request retried once, so callers only see
+ * an AuthError when the session has really ended — at which point the
+ * registered unauthorized handler drops the UI 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 send = () => fetch(url, { ...options, credentials: 'include' });
+
+    let response = await send();
+
+    if (response.status == 401 && await refreshSession()) {
+        response = await send();
+    }
+
+    if (response.status == 401) {
         onUnauthorized?.();
         throw new AuthError();
     }
 
+    // Logged in, but not allowed to access this resource: don't end the session.
+    if (response.status == 403) {
+        throw new AuthError();
+    }
+
     if (!response.ok) {
         const text = await response.text();
         let message = text;
@@ -45,4 +90,4 @@ async function apiFetch<T>(url: string, options: RequestInit = {}): Promise<T> {
     return text ? JSON.parse(text) : (undefined as T);
 }
 
-export { API_URL, AuthError, apiFetch, apiFetchRaw };
+export { API_URL, AuthError, apiFetch, apiFetchRaw, refreshSession };
diff --git a/frontend/src/utils/api/users.ts b/frontend/src/utils/api/users.ts
index 506a454..61031a9 100644
--- a/frontend/src/utils/api/users.ts
+++ b/frontend/src/utils/api/users.ts
@@ -1,10 +1,17 @@
 import type { APIResponse, User } from "../types.ts";
-import { API_URL, apiFetch } from "./client.ts";
+import { API_URL } 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> => {
+// These deliberately use fetch directly rather than apiFetch: they run when
+// there may be no session at all, and apiFetch's refresh-and-retry on 401
+// would either loop or log the user out from under the auth provider.
+
+/**
+ * Exchanges a Google credential for a session. The tokens are set as HttpOnly
+ * cookies; only the access token lifetime is returned.
+ *
+ * @returns seconds until the access token expires
+ */
+const login = async (googleToken: string): Promise<number> => {
     const response = await fetch(API_URL + '/api/v1/users/login', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -17,12 +24,17 @@ const login = async (googleToken: string): Promise<string> => {
     const result: APIResponse = await response.json();
     if (result.status === 'error') throw new Error(`Login failed: ${result.message}`);
 
-    return result.data.token;
+    return result.data.accessTokenExpiresIn;
 };
 
+/** Revokes the session and clears the auth cookies. */
 const logout = async (): Promise<void> => {
-    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 response = await fetch(API_URL + '/api/v1/users/logout', {
+        method: 'POST',
+        credentials: 'include',
+    });
+
+    if (!response.ok) throw new Error(`Logout failed: ${response.status}`);
 };
 
 const getUser = async (): Promise<User | null> => {
diff --git a/src/main/java/com/ddf/vodsystem/configuration/SecurityConfig.java b/src/main/java/com/ddf/vodsystem/configuration/SecurityConfig.java
index 6747bca..6abb7be 100644
--- a/src/main/java/com/ddf/vodsystem/configuration/SecurityConfig.java
+++ b/src/main/java/com/ddf/vodsystem/configuration/SecurityConfig.java
@@ -1,10 +1,12 @@
 package com.ddf.vodsystem.configuration;
 
 import org.springframework.http.HttpMethod;
+import org.springframework.http.HttpStatus;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.Customizer;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.authentication.HttpStatusEntryPoint;
 import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
@@ -24,7 +26,7 @@ public class SecurityConfig {
 
     /**
      * Builds the security filter chain: stateless sessions, CSRF disabled, the {@link JwtFilter}
-     * installed, and per-endpoint authorization rules.
+     * installed, {@code 401} for unauthenticated requests, and per-endpoint authorization rules.
      *
      * @param http the HTTP security builder to configure
      * @return the built {@link SecurityFilterChain}
@@ -41,11 +43,14 @@ public class SecurityConfig {
                         .requestMatchers("/api/v1/media/compress").permitAll() // compression available without authenticated
                         .requestMatchers("/api/v1/jobs/**").permitAll() // same with jobs
                         .requestMatchers("/api/v1/media/**").authenticated()
-                        .requestMatchers("/api/v1/users/me", "/api/v1/users/logout").authenticated()
-                        .requestMatchers("/api/v1/users/login").permitAll()
+                        .requestMatchers("/api/v1/users/me").authenticated()
+                        // authenticated by the refresh token cookie, not the (possibly expired) access token
+                        .requestMatchers("/api/v1/users/login", "/api/v1/users/refresh", "/api/v1/users/logout").permitAll()
                         .requestMatchers("/api/v1/stream/start", "/api/v1/stream/stop", "/api/v1/stream/heartbeat").permitAll()
                         .anyRequest().authenticated()
                 )
+                // 401 rather than the default 403, so clients know to refresh their session
+                .exceptionHandling(e -> e.authenticationEntryPoint(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED)))
                 .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                 );
 
diff --git a/src/main/java/com/ddf/vodsystem/controllers/UserController.java b/src/main/java/com/ddf/vodsystem/controllers/UserController.java
index eb1cb59..f0bae9a 100644
--- a/src/main/java/com/ddf/vodsystem/controllers/UserController.java
+++ b/src/main/java/com/ddf/vodsystem/controllers/UserController.java
@@ -1,6 +1,7 @@
 package com.ddf.vodsystem.controllers;
 
 import com.ddf.vodsystem.dto.APIResponse;
+import com.ddf.vodsystem.controllers.dto.SessionResponse;
 import com.ddf.vodsystem.controllers.dto.Token;
 import com.ddf.vodsystem.dto.TokenPackage;
 import com.ddf.vodsystem.dto.properties.AuthProperties;
@@ -64,18 +65,18 @@ public class UserController {
      * @param token    the payload carrying the Google ID token to verify
      * @param request  the incoming request, used to decide the cookies' {@code Secure} flag
      * @param response the response the cookies are written to
-     * @return {@code 200 OK} with no data
+     * @return {@code 200 OK} wrapping the access token lifetime as a {@link SessionResponse}
      * @throws NotAuthenticated if the Google ID token is rejected
      */
     @PostMapping("/login")
-    public ResponseEntity<APIResponse<Void>> login(@RequestBody Token token,
+    public ResponseEntity<APIResponse<SessionResponse>> login(@RequestBody Token token,
                                                            HttpServletRequest request,
                                                            HttpServletResponse response) {
         TokenPackage tokenPackage = userService.login(token.token());
         addCookies(request, response, tokenPackage.accessToken(), tokenPackage.refreshToken());
 
         return ResponseEntity.ok(
-                new APIResponse<>(SUCCESS, "Logged in successfully", null)
+                new APIResponse<>(SUCCESS, "Logged in successfully", sessionResponse())
         );
     }
 
@@ -85,11 +86,11 @@ public class UserController {
      * @param refreshToken the refresh token from the {@code refreshToken} cookie, if present
      * @param request      the incoming request, used to decide the cookies' {@code Secure} flag
      * @param response     the response the new cookies are written to
-     * @return {@code 200 OK} with no data
+     * @return {@code 200 OK} wrapping the new access token lifetime as a {@link SessionResponse}
      * @throws NotAuthenticated if the refresh token is missing or rejected
      */
     @PostMapping("/refresh")
-    public ResponseEntity<APIResponse<Void>> refresh(
+    public ResponseEntity<APIResponse<SessionResponse>> refresh(
             @CookieValue(name = "refreshToken", required = false) String refreshToken,
             HttpServletRequest request,
             HttpServletResponse response) {
@@ -97,7 +98,7 @@ public class UserController {
         addCookies(request, response, tokenPackage.accessToken(), tokenPackage.refreshToken());
 
         return ResponseEntity.ok(
-                new APIResponse<>(SUCCESS, "Refreshed tokens successfully", null)
+                new APIResponse<>(SUCCESS, "Refreshed tokens successfully", sessionResponse())
         );
     }
 
@@ -123,6 +124,10 @@ public class UserController {
         );
     }
 
+    private SessionResponse sessionResponse() {
+        return new SessionResponse(jwtExpiration.getSeconds());
+    }
+
     private void addCookies(
             HttpServletRequest request,
             HttpServletResponse response,
diff --git a/src/main/java/com/ddf/vodsystem/controllers/dto/SessionResponse.java b/src/main/java/com/ddf/vodsystem/controllers/dto/SessionResponse.java
new file mode 100644
index 0000000..79f8a3a
--- /dev/null
+++ b/src/main/java/com/ddf/vodsystem/controllers/dto/SessionResponse.java
@@ -0,0 +1,11 @@
+package com.ddf.vodsystem.controllers.dto;
+
+/**
+ * Session metadata returned after login or refresh. The tokens themselves are only ever sent as
+ * HttpOnly cookies; this tells the client when to refresh them.
+ *
+ * @param accessTokenExpiresIn seconds until the access token cookie expires
+ */
+public record SessionResponse(
+        long accessTokenExpiresIn
+) {}
diff --git a/src/main/java/com/ddf/vodsystem/security/JwtFilter.java b/src/main/java/com/ddf/vodsystem/security/JwtFilter.java
index e72ad72..b0552c6 100644
--- a/src/main/java/com/ddf/vodsystem/security/JwtFilter.java
+++ b/src/main/java/com/ddf/vodsystem/security/JwtFilter.java
@@ -53,7 +53,7 @@ public class JwtFilter extends OncePerRequestFilter {
             Cookie[] cookies = request.getCookies();
             if (cookies != null) {
                 jwt = Arrays.stream(cookies)
-                        .filter(cookie -> "token".equals(cookie.getName()))
+                        .filter(cookie -> "accessToken".equals(cookie.getName()))
                         .map(Cookie::getValue)
                         .findFirst()
                         .orElse(null);