[FEATURE] Cairo Auth Integration

src/components/files/FilePreview.jsx

@@ -7,8 +7,8 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Dialog from "@mui/material/Dialog";
 import Toolbar from "@mui/material/Toolbar";
-
 import TextEditor from "./TextEditor.jsx";
+import { cairoAuthHeader } from "@mcl/util/auth.js";
 
 const textFileTypes = ["properties", "txt", "yaml", "yml", "json", "env"];
 const imageFileTypes = ["png", "jpeg", "jpg"];
@@ -52,6 +52,7 @@ export default function FilePreview(props) {
     await fetch("/api/files/upload", {
       method: "POST",
       body: formData,
+      headers: cairoAuthHeader(),
     });
     dialogToggle();
   }

src/components/files/MineclusterFiles.jsx

@@ -18,6 +18,7 @@ import {
   getServerItem,
 } from "@mcl/queries";
 import { previewServerItem } from "../../util/queries";
+import { cairoAuthHeader } from "@mcl/util/auth.js";
 
 import { supportedFileTypes } from "./FilePreview.jsx";
 
@@ -109,6 +110,7 @@ export default function MineclusterFiles(props) {
     await fetch("/api/files/upload", {
       method: "POST",
       body: formData,
+      headers: cairoAuthHeader(),
     });
   }
 

src/nav/Viewport.jsx

@@ -1,8 +1,5 @@
-import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import MCLPortal from "./MCLPortal.jsx";
-import Button from "@mui/material/Button";
-import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 // Import Navbar
 /*import Navbar from "./Navbar.jsx";*/
 import { useCairoAuth } from "@mcl/util/auth.js";

src/util/auth.js

@@ -31,26 +31,10 @@ export function useCairoAuth() {
   return auth;
 }
 
-export function useAuth() {
-  const { state: settings } = useContext(SettingsContext);
-  const [auth, setAuth] = useState(!!!settings.cairoAuth);
-
-  if (!settings.cairoAuth) return auth;
-  fetch("/api/auth/verify", {
-    headers: { Authorization: `Bearer ${settings.cairoAuth}` },
-  })
-    .then(() => setAuth(true))
-    .catch(() => setAuth(false));
-
-  return auth;
+export function getAuthTokenFromStorage() {
+  return JSON.parse(localStorage.getItem("settings")).cairoAuth;
 }
 
-export function useUpdateAuth() {
-  const { updateSettings } = useContext(SettingsContext);
-  const [searchParams] = useSearchParams();
-  const webToken = searchParams.get("cairoAuthToken");
-  if (webToken) {
-    updateSettings({ cairoAuth: webToken });
-    searchParams.delete("cairoAuthToken");
-  }
+export function cairoAuthHeader() {
+  return { Authorization: `Bearer ${getAuthTokenFromStorage()}` };
 }

src/util/queries.js

@@ -1,12 +1,17 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { cairoAuthHeader } from "@mcl/util/auth.js";
+
 const fetchApi = (subPath) => async () =>
-  fetch(`/api${subPath}`).then((res) => res.json());
+  fetch(`/api${subPath}`, { headers: cairoAuthHeader() }).then((res) =>
+    res.json(),
+  );
 
 const fetchApiCore = async (subPath, json, method = "POST", jsonify = false) =>
   fetch(`/api${subPath}`, {
     method,
     headers: {
       "Content-Type": "application/json",
+      ...cairoAuthHeader(),
     },
     body: JSON.stringify(json),
   }).then((res) => (jsonify ? res.json() : res));
@@ -16,6 +21,7 @@ const fetchApiPost = (subPath, json) => async () =>
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      ...cairoAuthHeader(),
     },
     body: JSON.stringify(json),
   }).then((res) => res.json());
@@ -117,6 +123,7 @@ const postJsonApi = (subPath, body, invalidate, method = "POST") => {
       method,
       headers: {
         "Content-Type": "application/json",
+        ...cairoAuthHeader(),
       },
       body: JSON.stringify(body),
     });