Using ReactKeycloakProvider for dealing with Access and Refresh Token

components/Chart/Chart.jsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 
+
 export default function Chart({ imageSelected, setDomain, isNexusFile }) {
   // const fetcher = (url) => fetch(url).then((res) => res.json());
 

components/Header/Header.jsx

@@ -8,38 +8,31 @@ export default function Header() {
   const { keycloak } = useKeycloak()
   const navigate = useNavigate();
 
+
   if (keycloak.authenticated) {
     const userName = keycloak.tokenParsed.preferred_username;
     localStorage.setItem("username", userName)
-
   }
-
-const [username, setUsername] = useState(() => localStorage.getItem("username"))
+  
+  const [username, setUsername] = useState(() => localStorage.getItem("username"))
 
   useEffect(() => {
     if (keycloak.authenticated) {
       const userName = keycloak.tokenParsed.preferred_username;
       setUsername(userName)
       localStorage.setItem("token", keycloak.token)
-    }
-  }, [keycloak.authenticated])
-
-  const logoutHandle = () => {
-    localStorage.setItem("token", "")
-    localStorage.setItem("username", "")
-  }
+    }})
 
-  const stored_token = localStorage.getItem("token")
 
   return (
     <div className="logo">
       <h1 onClick={() => navigate("/")}>Raman spectra search</h1>
       <div className="usersInfo">
         <div className="username">{username}</div>
-        {stored_token ?
+        {keycloak.token ?
           <button className="shareBtn" onClick={() => {
             keycloak.logout()
-            logoutHandle()
+            // logoutHandle()
           }}>
             Log out
           </button> :

components/SearchComp/SearchComp.jsx

@@ -16,17 +16,17 @@ import Sidebar from "../Sidebar/Sidebar";
 
 const stored_token = localStorage.getItem("token")
 
-const fetcher = (url) => fetch(url, {
-  headers: {
-    Authorization: `Bearer ${stored_token}`
-  }
-}).then((res) => res.json());
-
 export default function SearchComp({ setDomain }) {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const domainParams = queryParams.get("domain");
 
+  const fetcher = (url) => fetch(url, {
+    headers: {
+      Authorization: `Bearer ${stored_token}`
+    }
+  }).then((res) => res.json());
+
   let [open, setOpen] = useState(true);
   let [imageSelected, setImageSelected] = useState(
     domainParams ? domainParams : ""

src/hooks/useAuth.jsx

@@ -1,32 +1,49 @@
-import { useEffect, useState, useRef } from "react"
-import Keycloak from "keycloak-js"
-
-const client = new Keycloak({
-
-    "realm": "nano",
-    "url": "https://iam.ideaconsult.net/auth",
-    "ssl-required": "external",
-    "resource": "idea-ui",
-    "public-client": true,
-    "confidential-port": 0,
-    "clientId": 'nano'
-
-})
-
-// const useAuth = () => {
-//     const isRun = useRef(false)
-//     const [isLogin, setIsLoging] = useState(false)
-
-//     useEffect(() => {
-//         if (isRun.current) return
-
-//         isRun.current = true;
-//         client.init({ onLoad: "login-required" }).then((res) => setIsLoging(res))
-//     }, [])
-//     return isLogin
-
-// }
-
-const doLogin = () => client.init({ onLoad: "login-required" }).then((res) => setIsLoging(res));
-
-export default doLogin;
+// // index.js or App.js
+// import React, { useEffect, useState } from 'react';
+// import ReactDOM from 'react-dom';
+// import App from './App';
+// import keycloak from './keycloak';
+
+// const Root = () => {
+//   const [authenticated, setAuthenticated] = useState(false);
+
+//   useEffect(() => {
+//     const initKeycloak = async () => {
+//       try {
+//         const auth = await keycloak.init({
+//           onLoad: 'login-required',
+//           checkLoginIframe: false, // Disable iframe-based token refresh
+//         });
+//         setAuthenticated(auth);
+
+//         if (auth) {
+//           // Save initial token to local storage
+//           localStorage.setItem('token', keycloak.token);
+
+//           // Set up token auto-refresh
+//           setInterval(async () => {
+//             try {
+//               const refreshed = await keycloak.updateToken(70); // Refresh token if valid for less than 70 seconds
+//               if (refreshed) {
+//                 console.log('Token refreshed');
+//                 localStorage.setItem('token', keycloak.token); // Save new token
+//               } else {
+//                 console.log('Token is still valid');
+//               }
+//             } catch (error) {
+//               console.error('Failed to refresh token', error);
+//             }
+//           }, 5 * 60 * 1000); // Check every 5 minutes
+//         }
+//       } catch (error) {
+//         console.error('Keycloak initialization failed', error);
+//       }
+//     };
+
+//     initKeycloak();
+//   }, []);
+
+//   return authenticated ? <App /> : <div>Loading...</div>;
+// };
+
+// ReactDOM.render(<Root />, document.getElementById('root'));

src/main.jsx

@@ -17,10 +17,20 @@ const router = createBrowserRouter(
   { basename: "/search" }
 );
 
+
+
 ReactDOM.createRoot(document.getElementById("root")).render(
 
-    <ReactKeycloakProvider authClient={keycloak}>
-      <RouterProvider router={router} />
-    </ReactKeycloakProvider>
-
+  <ReactKeycloakProvider authClient={keycloak}
+    initOptions={{
+      onLoad: 'check-sso',
+      checkLoginIframe: false,
+      // Optionally add automatic silent refresh
+      silentCheckSsoRedirectUri:
+        window.location.origin + '/silent-check-sso.html',
+    }}
+  >
+    <RouterProvider router={router} />
+  </ReactKeycloakProvider>
+
 );

utils/keycloak.jsx

@@ -7,7 +7,8 @@ const keycloak = new Keycloak({
     "resource": "idea-ui",
     "public-client": true,
     "confidential-port": 0,
-    "clientId": 'idea-ui'
+    "clientId": 'idea-ui',
+    "tokenStore": "localStorage "
 })
 
 export default keycloak