add keyclock to relayEnvironment

DiamondLightSource · Sep 13, 2024 · 0ef6462 · 0ef6462
1 parent 30e8abc
commit 0ef6462
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 70 deletions.
diff --git a/.github/workflows/frontend.yaml b/.github/workflows/frontend.yaml
@@ -24,6 +24,10 @@ jobs:
       - name: Install dependencies
         run: yarn --frozen-lockfile
 
+      - name: Compile Relay
+        run: yarn relay
+        working-directory: frontend/relay-workflows-lib
+
       - name: Lint TypeScript code
         run: yarn lint
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -17,7 +17,9 @@
     "@mui/material": "^5.16.7",
     "@xyflow/react": "^12.1.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "keycloak-js": "^25.0.5",
+    "react-relay": "^18.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",

diff --git a/frontend/relay-workflows-lib/lib/RelayEnvironment.ts b/frontend/relay-workflows-lib/lib/RelayEnvironment.ts
@@ -6,25 +6,49 @@ import {
   Store,
   FetchFunction,
 } from "relay-runtime";
+import keycloak from "./keycloak";
 
-const HTTP_ENDPOINT = "http://localhost:36253";
-
-const fetchFn: FetchFunction = async (
-  request: { text: any },
-  variables: any
-) => {
-  return fetch(HTTP_ENDPOINT, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      query: request.text,
-      variables,
-    }),
-  }).then((response) => {
-    return response.json();
-  });
+const HTTP_ENDPOINT = "https://graph.diamond.ac.uk";
+
+const fetchFn: FetchFunction = async (request, variables) => {
+  try {
+    const authenticated = await keycloak.init({
+      onLoad: "login-required",
+    });
+
+    if (!authenticated) {
+      throw new Error("Keycloak authentication failed");
+    }
+
+    if (keycloak.isTokenExpired()) {
+      await keycloak.updateToken(30);
+    }
+
+    const token = keycloak.token;
+
+    if (!token) {
+      throw new Error("Failed to retrieve token");
+    }
+
+    const response = await fetch(HTTP_ENDPOINT, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query: request.text,
+        variables,
+      }),
+    });
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error in Keycloak authentication:", error);
+    alert("Authentication failed. Please log in again.");
+    keycloak.login();
+    throw error;
+  }
 };
 
 function createRelayEnvironment() {

diff --git a/frontend/relay-workflows-lib/lib/keycloak.ts b/frontend/relay-workflows-lib/lib/keycloak.ts
@@ -0,0 +1,9 @@
+import Keycloak from "keycloak-js";
+
+const keycloak = new Keycloak({
+  url: "https://authn.diamond.ac.uk/",
+  realm: "master",
+  clientId: "workflows-cluster",
+});
+
+export default keycloak;
diff --git a/frontend/relay-workflows-lib/lib/queries/WorkflowQuery.ts b/frontend/relay-workflows-lib/lib/queries/WorkflowQuery.ts
diff --git a/frontend/relay-workflows-lib/package.json b/frontend/relay-workflows-lib/package.json
@@ -10,16 +10,20 @@
     "relay": "relay-compiler"
   },
   "dependencies": {
-    "react-relay": "^17.0.0"
+    "workflows-lib": "*"
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "keycloak-js": "^25.0.5",
+    "react-relay": "^18.0.0"
   },
   "devDependencies": {
     "@types/react-relay": "^16.0.6",
     "@types/relay-runtime": "^17.0.4",
+    "babel-plugin-relay": "^17.0.0",
     "relay-compiler": "^17.0.0",
-    "relay-runtime": "^17.0.0"
+    "relay-runtime": "^17.0.0",
+    "vite-plugin-relay": "^2.1.0"
   }
 }
diff --git a/frontend/relay-workflows-lib/vite.config.ts b/frontend/relay-workflows-lib/vite.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
+import relay from "vite-plugin-relay";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [relay, react()],
   build: {
     lib: {
       entry: resolve(__dirname, "lib/main.ts"),