chech if token is valid

h2020charisma · Oct 10, 2024 · 0f751e0 · 0f751e0
1 parent 506e6fa
commit 0f751e0
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 138 deletions.
diff --git a/components/Header/Header.jsx b/components/Header/Header.jsx
@@ -1,16 +1,11 @@
 import { useNavigate } from "react-router-dom";
 
 import { useKeycloak } from "@react-keycloak/web";
-import { useEffect } from "react";
 
 export default function Header() {
   const { keycloak } = useKeycloak();
   const navigate = useNavigate();
 
-  keycloak.onTokenExpired = () => {
-    console.log("Token expired, attempting to refresh...");
-  };
-
   const username = keycloak.tokenParsed?.preferred_username
     ? keycloak.tokenParsed?.preferred_username
     : localStorage.getItem("username");
@@ -22,15 +17,6 @@ export default function Header() {
     localStorage.removeItem("token");
     localStorage.removeItem("refreshToken");
   };
-  setInterval(async () => {
-    try {
-      await keycloak.updateToken(5);
-      localStorage.setItem("token", keycloak.token);
-      console.log("Refreshed!");
-    } catch (error) {
-      console.log("Falied to refresh token..", error);
-    }
-  }, [30000]);
 
   return (
     <div className="logo">

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
@@ -2,21 +2,15 @@ let accessToken = "";
 
 self.addEventListener("install", (event) => {
   self.skipWaiting();
-  console.log("Service Worker is installed");
 });
 
 self.addEventListener("activate", (event) => {
   event.waitUntil(self.clients.claim());
-  console.log("ServiceWorker.js activated");
 });
 
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "TOKEN") {
     accessToken = event.data.token;
-    console.log(
-      "Message Event: token received by Service Worker:",
-      accessToken
-    );
   }
 });
 
@@ -44,7 +38,6 @@ self.addEventListener("fetch", (event) => {
     event.respondWith(fetch(authRequest));
     console.log("with token");
   } else {
-    // event.respondWith(fetch(request));
     console.log("without token");
   }
 });
diff --git a/public/worker.js b/public/worker.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -22,17 +22,7 @@ function App() {
   let [domain, setDomain] = useState(null);
 
   const { keycloak } = useKeycloak();
-  const stored_token = localStorage.getItem("token");
-  // const token = keycloak.token ? keycloak.token : stored_token;
 
-  // if (navigator.serviceWorker.controller) {
-  //   console.log("post message", navigator.serviceWorker);
-
-  //   navigator.serviceWorker.controller.postMessage({
-  //     type: "SET_TOKEN",
-  //     token: token,
-  //   });
-  // }
   useEffect(() => {
     if (keycloak.authenticated) {
       localStorage.setItem("refreshToken", keycloak.refreshToken);
@@ -41,6 +31,29 @@ function App() {
     }
   }, [keycloak.authenticated]);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      keycloak
+        .updateToken(30)
+        .then((refreshed) => {
+          if (refreshed) {
+            console.log("app: Token refreshed and updated in localStorage.");
+            localStorage.setItem("token", keycloak.token);
+          } else {
+            console.log("app: Token is still valid.");
+          }
+        })
+        .catch(() => {
+          localStorage.removeItem("token");
+          localStorage.removeItem("username");
+
+          console.error("app: Failed to refresh token.");
+        });
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
       <Header />

diff --git a/src/main.jsx b/src/main.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ReactKeycloakProvider } from "@react-keycloak/web";
 import ReactDOM from "react-dom/client";
@@ -27,16 +27,13 @@ const Main = () => {
   const base_url = import.meta.env.PROD
     ? "/search/serviceWorker.js"
     : "/serviceWorker.js";
-  const scope_url = import.meta.env.PROD ? "/search/" : "/search/";
 
   const registerServiceWorker = async () => {
     if ("serviceWorker" in navigator) {
       try {
         const registration = await navigator.serviceWorker.register(base_url, {
-          scope: scope_url,
+          scope: "/search/",
         });
-        console.log("scope", registration.scope);
-        console.log("controlled", navigator.serviceWorker.controller);
 
         await registration.active.postMessage({
           type: "TOKEN",
@@ -49,42 +46,6 @@ const Main = () => {
   };
 
   registerServiceWorker();
-
-  // if ("serviceWorker" in navigator) {
-  //   window.addEventListener("load", () => {
-  //     navigator.serviceWorker
-  //       .register(base_url)
-  //       .then((registration) => {
-  //         console.log(
-  //           "Service Worker registered with scope: ",
-  //           registration.scope
-  //         );
-  //         if (token && registration.active) {
-  //           console.log("registration.active");
-
-  //           registration.active.postMessage({
-  //             type: "SET_TOKEN",
-  //             token: token,
-  //           });
-  //         }
-  //       })
-  //       .catch((error) => {
-  //         console.log("ServiceWorker registration failed: ", error);
-  //       });
-  //   });
-  // }
-
-  // if (navigator.serviceWorker.controller) {
-  //   console.log("post message", navigator);
-
-  //   navigator.serviceWorker.controller.postMessage({
-  //     type: "SET_TOKEN",
-  //     token: token,
-  //   });
-  // } else {
-  //   console.log("no message", navigator.serviceWorker);
-  // }
-
   return <></>;
 };