fix(ui): auth on diagnostics widget

Author: maksimkurb

frontend/src/api/authenticated-sse.ts

@@ -1,20 +1,17 @@
+import { authenticatedFetch } from "@/api/client"
+
 export type SseMessage = { event: string; data: string }
 
 export async function consumeAuthenticatedSse(
   url: string,
   signal: AbortSignal,
   onMessage: (message: SseMessage) => void
 ) {
-  const token = sessionStorage.getItem("keen-pbr-auth-token")
-  const response = await fetch(url, {
+  const response = await authenticatedFetch(url, {
     signal,
-    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
   })
-  if (response.status === 401) {
-    sessionStorage.removeItem("keen-pbr-auth-token")
-    window.dispatchEvent(new Event("keen-pbr-auth-required"))
-  }
-  if (!response.ok || !response.body) throw new Error(`SSE request failed (${response.status})`)
+  if (!response.ok || !response.body)
+    throw new Error(`SSE request failed (${response.status})`)
 
   const reader = response.body.getReader()
   const decoder = new TextDecoder()

frontend/src/api/client.ts

@@ -37,21 +37,30 @@ const normalizeError = (status: number, payload: unknown): ApiError => {
   }
 }
 
-export const apiFetch = async <T>(
+export const authenticatedFetch = async (
   url: string,
-  options: RequestInit
-): Promise<T> => {
+  options: RequestInit = {}
+): Promise<Response> => {
   const token = sessionStorage.getItem("keen-pbr-auth-token")
   const headers = new Headers(options.headers)
   if (token) headers.set("Authorization", `Bearer ${token}`)
+
   const response = await fetch(url, { ...options, headers })
+  if (response.status === 401) {
+    sessionStorage.removeItem("keen-pbr-auth-token")
+    window.dispatchEvent(new Event("keen-pbr-auth-required"))
+  }
+  return response
+}
+
+export const apiFetch = async <T>(
+  url: string,
+  options: RequestInit
+): Promise<T> => {
+  const response = await authenticatedFetch(url, options)
   const payload = await parseResponsePayload(response)
 
   if (!response.ok) {
-    if (response.status === 401) {
-      sessionStorage.removeItem("keen-pbr-auth-token")
-      window.dispatchEvent(new Event("keen-pbr-auth-required"))
-    }
     throw normalizeError(response.status, payload)
   }
 

frontend/src/auth/auth-context.tsx

@@ -2,6 +2,7 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react"
 
 import { getDevicePageTitle } from "@/auth/device-name"
+import { authenticatedFetch } from "@/api/client"
 
 type AuthState = {
   enabled: boolean
@@ -59,9 +60,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       setState((current) => ({ ...current, enabled: true, authenticated: true, loading: false }))
     },
     logout: async () => {
-      const token = sessionStorage.getItem(tokenKey)
       try {
-        await fetch("/api/auth/logout", { method: "POST", headers: token ? { Authorization: `Bearer ${token}` } : undefined })
+        await authenticatedFetch("/api/auth/logout", { method: "POST" })
       } finally {
         sessionStorage.removeItem(tokenKey)
         setState((current) => ({ ...current, enabled: true, authenticated: false, loading: false }))

frontend/src/components/overview/diagnostics-download-dialog.tsx

@@ -18,6 +18,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { Label } from "@/components/ui/label"
+import { authenticatedFetch } from "@/api/client"
 
 export function DiagnosticsDownloadDialog({
   open,
@@ -153,7 +154,9 @@ function redactConfigLists(config: ConfigObject): ConfigObject {
 async function downloadDiagnosticsFile(payload: Record<string, unknown>) {
   let commandFailureLog: string | undefined
   try {
-    const response = await fetch("/api/diagnostics/command-failure")
+    const response = await authenticatedFetch(
+      "/api/diagnostics/command-failure"
+    )
     if (response.status === 200) {
       commandFailureLog = await response.text()
     }

frontend/tests/authenticated-fetch.test.ts

@@ -0,0 +1,51 @@
+import { afterEach, describe, expect, test } from "bun:test"
+
+import { authenticatedFetch } from "../src/api/client"
+
+const originalFetch = globalThis.fetch
+const originalSessionStorage = globalThis.sessionStorage
+
+afterEach(() => {
+  Object.defineProperty(globalThis, "fetch", {
+    configurable: true,
+    value: originalFetch,
+  })
+  Object.defineProperty(globalThis, "sessionStorage", {
+    configurable: true,
+    value: originalSessionStorage,
+  })
+})
+
+describe("authenticatedFetch", () => {
+  test("adds the active UI Bearer token while preserving caller headers", async () => {
+    const values = new Map([["keen-pbr-auth-token", "test-token"]])
+    Object.defineProperty(globalThis, "sessionStorage", {
+      configurable: true,
+      value: {
+        getItem: (key: string) => values.get(key) ?? null,
+        setItem: (key: string, value: string) => values.set(key, value),
+        removeItem: (key: string) => values.delete(key),
+      },
+    })
+
+    let receivedHeaders: Headers | undefined
+    Object.defineProperty(globalThis, "fetch", {
+      configurable: true,
+      value: (_url: string, options?: RequestInit) => {
+        receivedHeaders = new Headers(options?.headers)
+        return Promise.resolve(new Response(null, { status: 204 }))
+      },
+    })
+
+    const response = await authenticatedFetch(
+      "/api/diagnostics/command-failure",
+      {
+        headers: { Accept: "text/plain" },
+      }
+    )
+
+    expect(response.status).toBe(204)
+    expect(receivedHeaders?.get("Authorization")).toBe("Bearer test-token")
+    expect(receivedHeaders?.get("Accept")).toBe("text/plain")
+  })
+})

tests/test_api_auth.cpp

@@ -42,13 +42,22 @@ TEST_CASE("API accepts Basic auth and keeps only the newest Bearer session") {
     config.authentication->password_hash = auth::generate_password_hash("secret");
     ApiServer server(config);
     server.get("/api/protected", [] { return std::string("{\"ok\":true}"); });
+    server.get_stream("/api/protected-stream",
+                      [](const httplib::Request&, httplib::Response& response) {
+                          response.set_content("protected stream", "text/plain");
+                      });
     server.start();
     httplib::Client client("127.0.0.1", 18193);
 
     CHECK(client.Get("/api/protected")->status == 401);
+    CHECK(client.Get("/api/protected-stream")->status == 401);
     const auto basic = client.Get("/api/protected", httplib::Headers{{"Authorization", "Basic YWRtaW46c2VjcmV0"}});
     REQUIRE(basic != nullptr);
     CHECK(basic->status == 200);
+    const auto basic_stream = client.Get(
+        "/api/protected-stream", httplib::Headers{{"Authorization", "Basic YWRtaW46c2VjcmV0"}});
+    REQUIRE(basic_stream != nullptr);
+    CHECK(basic_stream->status == 200);
 
     const auto login1 = client.Post("/api/auth/login", "{\"password\":\"secret\"}", "application/json");
     REQUIRE(login1 != nullptr);