From a9b62fe515da2c0d6a1bb457b91a6c4a8b622fce Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Thu, 25 Jun 2026 01:13:46 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20Re-authenticate=20instead=20?=
 =?UTF-8?q?of=20going=20blank=20when=20the=20session=20is=20lost?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

App.vue renders the whole app behind shouldShowApp (authEnabled, isAuthenticated,
isAnonymousRoute). When the access token expired and silent renewal failed,
isAuthenticated flipped to false and the app rendered nothing, requiring a manual
browser refresh to recover.

Watch for the session being lost while running and re-trigger authentication: with
a live identity-provider session this is a silent redirect round-trip; otherwise the
user lands on the provider's login page. Skipped on anonymous routes and while a
sign-in is already in progress.
---
 src/Frontend/src/App.spec.ts | 72 ++++++++++++++++++++++++++++++++++++
 src/Frontend/src/App.vue     | 16 +++++++-
 2 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/Frontend/src/App.spec.ts

diff --git a/src/Frontend/src/App.spec.ts b/src/Frontend/src/App.spec.ts
new file mode 100644
index 0000000000..d4478460f1
--- /dev/null
+++ b/src/Frontend/src/App.spec.ts
@@ -0,0 +1,72 @@
+import { render } from "@testing-library/vue";
+import { describe, test, expect, vi, beforeEach } from "vitest";
+import { createTestingPinia } from "@pinia/testing";
+import { setActivePinia } from "pinia";
+import { nextTick, ref } from "vue";
+
+const authenticate = vi.fn().mockResolvedValue(false);
+vi.mock("@/composables/useAuth", () => ({ useAuth: () => ({ authenticate }) }));
+vi.mock("bootstrap", () => ({}));
+
+// Avoid pulling in a real router; App only needs useRoute (for meta) and RouterView.
+const routeMeta = ref<Record<string, unknown>>({});
+vi.mock("vue-router", () => ({
+  useRoute: () => ({
+    get meta() {
+      return routeMeta.value;
+    },
+  }),
+  RouterView: { name: "RouterView", template: "<div />" },
+}));
+
+import App from "@/App.vue";
+import { useAuthStore } from "@/stores/AuthStore";
+
+function setup(meta: Record<string, unknown> = {}) {
+  routeMeta.value = meta;
+  const pinia = createTestingPinia({ stubActions: false });
+  setActivePinia(pinia);
+  const store = useAuthStore();
+  store.authEnabled = true;
+  store.isAuthenticated = true;
+  store.isAuthenticating = false;
+  store.authConfig = { authority: "https://idp" } as never;
+  render(App, {
+    global: {
+      plugins: [pinia],
+      stubs: { PageHeader: true, PageFooter: true, LicenseNotifications: true, BackendChecksNotifications: true },
+    },
+  });
+  return store;
+}
+
+describe("App re-authenticates when the session is lost", () => {
+  beforeEach(() => authenticate.mockClear());
+
+  test("re-triggers authentication when the token is lost mid-session", async () => {
+    const store = setup();
+    expect(authenticate).not.toHaveBeenCalled();
+
+    store.isAuthenticated = false; // token expired / cleared while running
+    await nextTick();
+
+    expect(authenticate).toHaveBeenCalledTimes(1);
+  });
+
+  test("does not re-authenticate while already authenticating", async () => {
+    const store = setup();
+    store.isAuthenticating = true;
+    store.isAuthenticated = false;
+    await nextTick();
+
+    expect(authenticate).not.toHaveBeenCalled();
+  });
+
+  test("does not re-authenticate on an anonymous route (e.g. logged-out)", async () => {
+    const store = setup({ allowAnonymous: true });
+    store.isAuthenticated = false;
+    await nextTick();
+
+    expect(authenticate).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/Frontend/src/App.vue b/src/Frontend/src/App.vue
index de55293cb5..6ee08275bb 100644
--- a/src/Frontend/src/App.vue
+++ b/src/Frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
@@ -8,16 +8,28 @@ import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/AuthStore";
+import { useAuth } from "@/composables/useAuth";
 
 const authStore = useAuthStore();
 const route = useRoute();
-const { isAuthenticated, authEnabled } = storeToRefs(authStore);
+const { isAuthenticated, authEnabled, isAuthenticating, authConfig } = storeToRefs(authStore);
+const { authenticate } = useAuth();
 
 // Check if the current route allows anonymous access (e.g., logged-out page)
 const isAnonymousRoute = computed(() => route.meta?.allowAnonymous === true);
 const shouldShowApp = computed(() => !authEnabled.value || isAuthenticated.value || isAnonymousRoute.value);
 // Show full app layout (header, footer, notifications) only when authenticated or auth is disabled
 const shouldShowFullLayout = computed(() => !authEnabled.value || isAuthenticated.value);
+
+// If the session is lost while the app is running (e.g. the access token expired and silent
+// renewal failed), re-trigger authentication instead of rendering a blank page. With a live
+// identity-provider session this is a silent redirect round-trip; otherwise the user lands on
+// the provider's login page. Without this the app renders nothing until a manual refresh.
+watch([authEnabled, isAuthenticated, isAnonymousRoute], ([enabled, authenticated, anonymous]) => {
+  if (enabled && !authenticated && !anonymous && !isAuthenticating.value && authConfig.value) {
+    authenticate(authConfig.value);
+  }
+});
 </script>
 
 <template>

From ee3d788253c2228b2172756e0d1476a818435346 Mon Sep 17 00:00:00 2001
From: Dennis van der Stelt <dvdstelt@gmail.com>
Date: Fri, 26 Jun 2026 16:28:42 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Recover=20lost=20sessi?=
 =?UTF-8?q?ons=20from=20OIDC=20events=20in=20useAuth,=20not=20an=20App.vue?=
 =?UTF-8?q?=20watch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses review feedback on #3042: the re-authentication logic doesn't belong in
App.vue, and watching the isAuthenticated proxy state is indirect. Move recovery into
the auth domain: useAuth now reacts to the addAccessTokenExpired and addSilentRenewError
OIDC events directly and re-authenticates via signinRedirect, guarded against re-entrancy
and the logged-out route. This also distinguishes session loss from an intentional logout
(addUserUnloaded), which must not re-trigger authentication, and recovers proactively on a
silent-renewal error instead of waiting for the token to fully expire.

App.vue is now display-only. Its spec covers the layout gating; useAuth.spec covers the
event-driven recovery.
---
 src/Frontend/src/App.spec.ts                 | 69 +++++++-------
 src/Frontend/src/App.vue                     | 18 +---
 src/Frontend/src/composables/useAuth.spec.ts | 97 ++++++++++++++++++++
 src/Frontend/src/composables/useAuth.ts      | 25 +++++
 4 files changed, 158 insertions(+), 51 deletions(-)
 create mode 100644 src/Frontend/src/composables/useAuth.spec.ts

diff --git a/src/Frontend/src/App.spec.ts b/src/Frontend/src/App.spec.ts
index d4478460f1..8af28709f6 100644
--- a/src/Frontend/src/App.spec.ts
+++ b/src/Frontend/src/App.spec.ts
@@ -1,11 +1,9 @@
 import { render } from "@testing-library/vue";
-import { describe, test, expect, vi, beforeEach } from "vitest";
+import { describe, test, expect, vi } from "vitest";
 import { createTestingPinia } from "@pinia/testing";
 import { setActivePinia } from "pinia";
-import { nextTick, ref } from "vue";
+import { ref } from "vue";
 
-const authenticate = vi.fn().mockResolvedValue(false);
-vi.mock("@/composables/useAuth", () => ({ useAuth: () => ({ authenticate }) }));
 vi.mock("bootstrap", () => ({}));
 
 // Avoid pulling in a real router; App only needs useRoute (for meta) and RouterView.
@@ -16,57 +14,54 @@ vi.mock("vue-router", () => ({
       return routeMeta.value;
     },
   }),
-  RouterView: { name: "RouterView", template: "<div />" },
+  RouterView: { name: "RouterView", template: "<div data-testid='router-view' />" },
 }));
 
 import App from "@/App.vue";
 import { useAuthStore } from "@/stores/AuthStore";
 
-function setup(meta: Record<string, unknown> = {}) {
-  routeMeta.value = meta;
+function setup(opts: { authEnabled: boolean; isAuthenticated: boolean; meta?: Record<string, unknown> }) {
+  routeMeta.value = opts.meta ?? {};
   const pinia = createTestingPinia({ stubActions: false });
   setActivePinia(pinia);
   const store = useAuthStore();
-  store.authEnabled = true;
-  store.isAuthenticated = true;
-  store.isAuthenticating = false;
-  store.authConfig = { authority: "https://idp" } as never;
-  render(App, {
+  store.authEnabled = opts.authEnabled;
+  store.isAuthenticated = opts.isAuthenticated;
+  return render(App, {
     global: {
       plugins: [pinia],
-      stubs: { PageHeader: true, PageFooter: true, LicenseNotifications: true, BackendChecksNotifications: true },
+      stubs: {
+        PageHeader: { template: "<div data-testid='page-header' />" },
+        PageFooter: true,
+        LicenseNotifications: true,
+        BackendChecksNotifications: true,
+      },
     },
   });
-  return store;
 }
 
-describe("App re-authenticates when the session is lost", () => {
-  beforeEach(() => authenticate.mockClear());
-
-  test("re-triggers authentication when the token is lost mid-session", async () => {
-    const store = setup();
-    expect(authenticate).not.toHaveBeenCalled();
-
-    store.isAuthenticated = false; // token expired / cleared while running
-    await nextTick();
-
-    expect(authenticate).toHaveBeenCalledTimes(1);
+// App.vue is now display-only: recovery from a lost session lives in useAuth (see useAuth.spec.ts).
+describe("App layout gating", () => {
+  test("shows the full layout when authenticated", () => {
+    const { queryByTestId } = setup({ authEnabled: true, isAuthenticated: true });
+    expect(queryByTestId("page-header")).not.toBeNull();
+    expect(queryByTestId("router-view")).not.toBeNull();
   });
 
-  test("does not re-authenticate while already authenticating", async () => {
-    const store = setup();
-    store.isAuthenticating = true;
-    store.isAuthenticated = false;
-    await nextTick();
-
-    expect(authenticate).not.toHaveBeenCalled();
+  test("shows the full layout when authentication is disabled", () => {
+    const { queryByTestId } = setup({ authEnabled: false, isAuthenticated: false });
+    expect(queryByTestId("page-header")).not.toBeNull();
   });
 
-  test("does not re-authenticate on an anonymous route (e.g. logged-out)", async () => {
-    const store = setup({ allowAnonymous: true });
-    store.isAuthenticated = false;
-    await nextTick();
+  test("renders nothing when auth is enabled and the user is not authenticated", () => {
+    const { queryByTestId } = setup({ authEnabled: true, isAuthenticated: false });
+    expect(queryByTestId("page-header")).toBeNull();
+    expect(queryByTestId("router-view")).toBeNull();
+  });
 
-    expect(authenticate).not.toHaveBeenCalled();
+  test("on an anonymous route, shows the page without the full layout", () => {
+    const { queryByTestId } = setup({ authEnabled: true, isAuthenticated: false, meta: { allowAnonymous: true } });
+    expect(queryByTestId("router-view")).not.toBeNull();
+    expect(queryByTestId("page-header")).toBeNull();
   });
 });
diff --git a/src/Frontend/src/App.vue b/src/Frontend/src/App.vue
index 6ee08275bb..0dbda9b8ef 100644
--- a/src/Frontend/src/App.vue
+++ b/src/Frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
@@ -8,28 +8,18 @@ import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/AuthStore";
-import { useAuth } from "@/composables/useAuth";
 
 const authStore = useAuthStore();
 const route = useRoute();
-const { isAuthenticated, authEnabled, isAuthenticating, authConfig } = storeToRefs(authStore);
-const { authenticate } = useAuth();
+const { isAuthenticated, authEnabled } = storeToRefs(authStore);
 
 // Check if the current route allows anonymous access (e.g., logged-out page)
 const isAnonymousRoute = computed(() => route.meta?.allowAnonymous === true);
 const shouldShowApp = computed(() => !authEnabled.value || isAuthenticated.value || isAnonymousRoute.value);
 // Show full app layout (header, footer, notifications) only when authenticated or auth is disabled
 const shouldShowFullLayout = computed(() => !authEnabled.value || isAuthenticated.value);
-
-// If the session is lost while the app is running (e.g. the access token expired and silent
-// renewal failed), re-trigger authentication instead of rendering a blank page. With a live
-// identity-provider session this is a silent redirect round-trip; otherwise the user lands on
-// the provider's login page. Without this the app renders nothing until a manual refresh.
-watch([authEnabled, isAuthenticated, isAnonymousRoute], ([enabled, authenticated, anonymous]) => {
-  if (enabled && !authenticated && !anonymous && !isAuthenticating.value && authConfig.value) {
-    authenticate(authConfig.value);
-  }
-});
+// Recovery from a lost session (expired token / failed silent renewal) is handled in the auth
+// domain by useAuth's OIDC event handlers, not here.
 </script>
 
 <template>
diff --git a/src/Frontend/src/composables/useAuth.spec.ts b/src/Frontend/src/composables/useAuth.spec.ts
new file mode 100644
index 0000000000..44c34ccc8e
--- /dev/null
+++ b/src/Frontend/src/composables/useAuth.spec.ts
@@ -0,0 +1,97 @@
+import { describe, test, expect, vi, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import routeLinks from "@/router/routeLinks";
+
+// Capture the OIDC event callbacks useAuth registers, plus a spy on signinRedirect, so the tests
+// can fire "token expired" / "silent renew error" and assert that recovery re-authenticates.
+const signinRedirect = vi.fn().mockResolvedValue(undefined);
+const captured: { expired?: () => void; renewError?: (error: unknown) => void } = {};
+
+vi.mock("oidc-client-ts", () => ({
+  UserManager: class {
+    getUser = vi.fn().mockResolvedValue(null);
+    signinRedirect = signinRedirect;
+    signinCallback = vi.fn().mockResolvedValue(null);
+    signinSilent = vi.fn().mockResolvedValue(null);
+    signoutRedirect = vi.fn().mockResolvedValue(undefined);
+    removeUser = vi.fn().mockResolvedValue(undefined);
+    events = {
+      addUserLoaded: vi.fn(),
+      addUserUnloaded: vi.fn(),
+      addAccessTokenExpiring: vi.fn(),
+      addAccessTokenExpired: vi.fn((cb: () => void) => {
+        captured.expired = cb;
+      }),
+      addSilentRenewError: vi.fn((cb: (error: unknown) => void) => {
+        captured.renewError = cb;
+      }),
+    };
+  },
+  WebStorageStateStore: class {},
+}));
+
+const config = { authority: "https://idp" } as never;
+
+// Fresh module state per test (useAuth keeps a module-singleton UserManager), then run the initial
+// authenticate so the handlers are registered. getUser returns null, so this initial call performs
+// one signinRedirect and leaves isAuthenticating true (as in the real redirect-away flow).
+async function initAuth() {
+  const { useAuth } = await import("@/composables/useAuth");
+  const { useAuthStore } = await import("@/stores/AuthStore");
+  const auth = useAuth();
+  await auth.authenticate(config);
+  return useAuthStore();
+}
+
+beforeEach(() => {
+  vi.resetModules();
+  signinRedirect.mockClear();
+  captured.expired = undefined;
+  captured.renewError = undefined;
+  setActivePinia(createPinia());
+  window.location.hash = "";
+});
+
+describe("useAuth recovers a lost session from OIDC events", () => {
+  test("re-authenticates and clears the stale token when the access token expires", async () => {
+    const store = await initAuth();
+    store.setAuthenticating(false); // initial redirect 'returned'
+    signinRedirect.mockClear();
+
+    captured.expired!();
+
+    expect(signinRedirect).toHaveBeenCalledTimes(1);
+    expect(store.token).toBeNull();
+  });
+
+  test("re-authenticates when silent renewal errors", async () => {
+    const store = await initAuth();
+    store.setAuthenticating(false);
+    signinRedirect.mockClear();
+
+    captured.renewError!(new Error("silent renew failed"));
+
+    expect(signinRedirect).toHaveBeenCalledTimes(1);
+  });
+
+  test("does not re-authenticate while an auth flow is already running", async () => {
+    const store = await initAuth();
+    expect(store.isAuthenticating).toBe(true); // left true by the initial redirect
+    signinRedirect.mockClear();
+
+    captured.expired!();
+
+    expect(signinRedirect).not.toHaveBeenCalled();
+  });
+
+  test("does not re-authenticate on the logged-out route", async () => {
+    const store = await initAuth();
+    store.setAuthenticating(false);
+    window.location.hash = `#${routeLinks.loggedOut}`;
+    signinRedirect.mockClear();
+
+    captured.expired!();
+
+    expect(signinRedirect).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/Frontend/src/composables/useAuth.ts b/src/Frontend/src/composables/useAuth.ts
index 4318a5cf0b..47ce7a6e24 100644
--- a/src/Frontend/src/composables/useAuth.ts
+++ b/src/Frontend/src/composables/useAuth.ts
@@ -1,6 +1,7 @@
 import { useAuthStore } from "@/stores/AuthStore";
 import type { AuthConfig } from "@/types/auth";
 import { UserManager, type User } from "oidc-client-ts";
+import routeLinks from "@/router/routeLinks";
 import logger from "@/logger";
 
 let userManager: UserManager | null = null;
@@ -12,6 +13,24 @@ let userManager: UserManager | null = null;
 export function useAuth() {
   const authStore = useAuthStore();
 
+  // The session was lost mid-run (access token expired or silent renewal failed). Re-authenticate
+  // instead of leaving the app blank. With a live identity-provider session this is a silent
+  // redirect round-trip; otherwise the user lands on the provider's login page. Skip it when an
+  // auth flow is already running, or when a logout left us on the anonymous logged-out route.
+  function reauthenticate() {
+    if (authStore.isAuthenticating) {
+      return;
+    }
+    if (window.location.hash === `#${routeLinks.loggedOut}`) {
+      return;
+    }
+    authStore.setAuthenticating(true);
+    userManager?.signinRedirect().catch((error) => {
+      authStore.setAuthenticating(false);
+      logger.error("Re-authentication after session loss failed:", error);
+    });
+  }
+
   function initializeUserManager(config: AuthConfig): UserManager {
     if (!userManager) {
       userManager = new UserManager(config);
@@ -33,12 +52,18 @@ export function useAuth() {
         }
       });
 
+      // Token fully expired, or silent renewal errored: clear the stale token and re-authenticate
+      // rather than rendering a blank app. Reacting to the OIDC events directly keeps recovery in
+      // the auth domain and distinguishes session loss from an intentional logout, which arrives
+      // as addUserUnloaded and must not re-trigger authentication.
       userManager.events.addAccessTokenExpired(() => {
         authStore.clearToken();
+        reauthenticate();
       });
 
       userManager.events.addSilentRenewError((error) => {
         logger.error("Silent renew error:", error);
+        reauthenticate();
       });
     }