Add keycloak request to frontend

package.json

@@ -20,6 +20,7 @@
     "@mui/lab": "6.0.0-beta.22",
     "@mui/material": "<7.0.0",
     "@mui/x-date-pickers": "^7.17.0",
+    "keycloak-js": "^26.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.7.1"

src/utils/api.ts

@@ -1,3 +1,38 @@
+import Keycloak from "keycloak-js";
+
+const initOptions = {
+  url: "https://authn.diamond.ac.uk",
+  realm: "master",
+  clientId: "visr-app",
+};
+
+const keycloak = new Keycloak(initOptions);
+
+keycloak.onTokenExpired = () => {
+  keycloak
+    .updateToken(10)
+    .then(refreshed => {
+      if (refreshed) {
+        console.log("Token refreshed");
+      } else {
+        console.log("Token still valid");
+      }
+    })
+    .catch(err => {
+      console.error("Token refresh failed", err);
+    });
+};
+
+const kcInit = keycloak
+  .init({ onLoad: "login-required" })
+  .then(authenticated => {
+    if (authenticated) {
+      console.log("Authenticated");
+    } else {
+      console.error("Not authenticated");
+    }
+  });
+
 export interface Plan {
   name: string;
   description: string | undefined;
@@ -19,18 +54,27 @@ export interface TaskRequest {
 }
 
 export async function getPlans(): Promise<PlansResponse> {
-  const url = "/api/plans";
+  if (!keycloak.authenticated) {
+    await kcInit;
+  }
 
-  const headers = new Headers();
-  headers.append("Content-Type", "application/json");
-  headers.append("X-Requested-By", "XMLHttpRequest");
+  if (!keycloak.token) {
+    throw new Error("No Keycloak token available");
+  }
+  const url = "/api/plans";
+  console.log("getting plans");
 
   const response = await fetch(url, {
     method: "GET",
-    headers: headers,
+    headers: {
+      Authorization: `Bearer ${keycloak.token}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
   });
 
-  return await response.json();
+  const result = await response.json();
+  return result;
 }
 
 export async function createAndStartTask(
@@ -53,6 +97,13 @@ export async function createTask(request: TaskRequest): Promise<TaskResponse> {
     body: JSON.stringify(request),
   });
 
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Error ${response.status}: ${response.statusText}\n${errorText}`,
+    );
+  }
+
   return await response.json();
 }