diff --git a/components/Header/Header.jsx b/components/Header/Header.jsx index c56ecb7..b6d7a75 100755 --- a/components/Header/Header.jsx +++ b/components/Header/Header.jsx @@ -1,48 +1,37 @@ +import { useAuth } from "react-oidc-context"; import { useNavigate } from "react-router-dom"; -import { useKeycloak } from "@react-keycloak/web"; - export default function Header() { - const { keycloak } = useKeycloak(); + const auth = useAuth(); const navigate = useNavigate(); - const username = keycloak.tokenParsed?.preferred_username - ? keycloak.tokenParsed?.preferred_username - : localStorage.getItem("username"); - - const stored_token = localStorage.getItem("token"); - - const logoutHandle = () => { - localStorage.removeItem("username"); - localStorage.removeItem("token"); - localStorage.removeItem("refreshToken"); - }; - return (

navigate("/")}>Raman spectra search

-
-
- {keycloak.authenticated || username ? username : ""} -
- {keycloak.authenticated || stored_token ? ( - +
+ {/* + + */} + {auth.isAuthenticated ? ( +
+

{auth.user?.profile.name}

+ +
) : ( diff --git a/components/SearchComp/SearchComp.jsx b/components/SearchComp/SearchComp.jsx index 5849f1f..2524168 100755 --- a/components/SearchComp/SearchComp.jsx +++ b/components/SearchComp/SearchComp.jsx @@ -39,16 +39,6 @@ export default function SearchComp({ setDomain }) { const [file, setFile] = useState(null); - // const searchQuery = `${ - // import.meta.env.VITE_BaseURL - // }db/query?q=${qQuery}&img=thumbnail&query_type=text&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}`; - - // const fileSearchQuery = `${ - // import.meta.env.VITE_BaseURL - // }db/query?q=${qQuery}&img=thumbnail&query_type=${type}&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}&ann=${ - // imageData?.cdf - // }`; - const searchUrlPath = `db/query?q=${qQuery}&img=thumbnail&query_type=text&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}`; const fileSearchUrlPath = `db/query?q=${qQuery}&img=thumbnail&query_type=${type}&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}&ann=${imageData?.cdf}`; @@ -62,7 +52,6 @@ export default function SearchComp({ setDomain }) {
setOpen(!open)}> - {/*

Raman Spectra Search

*/}
{open && ( diff --git a/components/UploadFile/UploadFile.jsx b/components/UploadFile/UploadFile.jsx index cc8d8ab..5f99d59 100755 --- a/components/UploadFile/UploadFile.jsx +++ b/components/UploadFile/UploadFile.jsx @@ -3,8 +3,6 @@ import { useEffect, useState } from "react"; import Close from "../Icons/Close"; import Spinner from "../Icons/Spinner"; -import { useKeycloak } from "@react-keycloak/web"; - // eslint-disable-next-line react/prop-types export default function UploadFile({ setImageData, setType, file, setFile }) { const fileQuery = `${import.meta.env.VITE_BaseURL}db/download?what=knnquery`; @@ -12,18 +10,8 @@ export default function UploadFile({ setImageData, setType, file, setFile }) { const [isNotRightFile, setIsNotRightFile] = useState(false); const [isLoading, setIsLoading] = useState(false); - const { keycloak } = useKeycloak(); - useEffect(() => { async function fetchDate() { - try { - await keycloak.updateToken(30); - console.log("Upload file Comp: UPDATED"); - localStorage.setItem("token", keycloak.token); - } catch (error) { - console.error("Upload file Comp: Failed to refresh token:", error); - } - const formData = new FormData(); formData.append("files", file); diff --git a/public/serviceWorker.js b/public/serviceWorker.js index 1d0c71e..8787f87 100644 --- a/public/serviceWorker.js +++ b/public/serviceWorker.js @@ -11,7 +11,6 @@ self.addEventListener("activate", (event) => { self.addEventListener("message", (event) => { if (event.data && event.data.type === "TOKEN") { accessToken = event.data.token; - console.log(accessToken); } }); @@ -37,8 +36,6 @@ self.addEventListener("fetch", (event) => { mode: "cors", }); event.respondWith(fetch(authRequest)); - console.log("with token"); } else { - console.log("without token"); } }); diff --git a/src/App.jsx b/src/App.jsx index c4010c4..3cf50b4 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,9 @@ import "./App.css"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useLocation } from "react-router-dom"; -import { useKeycloak } from "@react-keycloak/web"; - import { lazy } from "react"; -import { useAuth } from "react-oidc-context"; - const H5web = lazy(() => import("../components/h5web/h5web")); import SearchComp from "../components/SearchComp/SearchComp"; @@ -23,54 +19,6 @@ function App() { let [domain, setDomain] = useState(null); - const { keycloak } = useKeycloak(); - const auth = useAuth(); - - console.log(auth); - - useEffect(() => { - if (keycloak.authenticated) { - localStorage.setItem("refreshToken", keycloak.refreshToken); - localStorage.setItem("token", keycloak.token); - localStorage.setItem("username", keycloak.tokenParsed.preferred_username); - } - }, [keycloak.authenticated]); - - useEffect(() => { - const handleFocus = () => { - console.log("on focus"); - keycloak - .updateToken(30) - .then((refreshed) => { - if (refreshed) { - console.log( - "App on focus: Token refreshed and updated in localStorage.", - keycloak.token - ); - localStorage.setItem("token", keycloak.token); - } else { - console.log("app: Token is still valid."); - } - }) - .catch(() => { - console.error("App on focus: Failed to refresh token."); - // keycloak.logout(); - }); - }; - - const handleBlur = () => { - console.log("blur"); - }; - - window.addEventListener("focus", handleFocus); - window.addEventListener("blur", handleBlur); - - return () => { - window.removeEventListener("focus", handleFocus); - window.removeEventListener("blur", handleBlur); - }; - }); - return ( <>
diff --git a/src/index.css b/src/index.css index 88d31a7..4806f63 100755 --- a/src/index.css +++ b/src/index.css @@ -58,6 +58,17 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } +.userInfo { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.userName { + font-size: 0.9rem; + font-weight: 600; +} + @media (prefers-color-scheme: light) { :root { color: #213547; diff --git a/src/main.jsx b/src/main.jsx index 12e45ce..72caa51 100755 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,23 +1,18 @@ import React, { useEffect, useState } from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { AuthProvider } from "react-oidc-context"; -import { ReactKeycloakProvider } from "@react-keycloak/web"; +import { useAuth } from "react-oidc-context"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; -import _kc from "../utils/keycloak.jsx"; -import { useKeycloak } from "@react-keycloak/web"; - const oidcConfig = { - authority: "https://iam.ideaconsult.net/auth", + authority: "https://iam.ideaconsult.net/auth/realms/nano", client_id: "idea-ui", - client_secret: "idea-ui", - redirect_uri: window.location.origin, - response_type: "code", // or 'token' for implicit flow - scope: "openid profile email", // Adjust according to your needs - post_logout_redirect_uri: window.location.origin, + redirect_uri: "http://localhost:5173/search/", + response_type: "code", + scope: "openid profile email", }; const router = createBrowserRouter( @@ -31,10 +26,9 @@ const router = createBrowserRouter( ); const Main = () => { - const { keycloak } = useKeycloak(); + const auth = useAuth(); - const stored_token = localStorage.getItem("token"); - const token = keycloak.token ? keycloak.token : stored_token; + const token = auth.user?.access_token; const base_url = import.meta.env.PROD ? "/search/serviceWorker.js" @@ -69,22 +63,15 @@ const Main = () => { }, [token]); return <>; }; +function onSigninCallback() { + window.location.href = "/"; +} ReactDOM.createRoot(document.getElementById("root")).render( - - - -
- - - - + + +
+ + + ); diff --git a/utils/keycloak.jsx b/utils/keycloak.jsx deleted file mode 100644 index 4c9f319..0000000 --- a/utils/keycloak.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import Keycloak from "keycloak-js"; - -const _kc = new Keycloak({ - realm: "nano", - url: "https://iam.ideaconsult.net/auth", - "ssl-required": "external", - resource: "idea-ui", - "public-client": true, - "confidential-port": 0, - clientId: "idea-ui", - tokenStore: "localStorage ", -}); - -export default _kc; diff --git a/utils/useFetch.jsx b/utils/useFetch.jsx index d98b65d..b158299 100644 --- a/utils/useFetch.jsx +++ b/utils/useFetch.jsx @@ -1,19 +1,14 @@ import { useState, useEffect } from "react"; -import { useKeycloak } from "@react-keycloak/web"; +import { useAuth } from "react-oidc-context"; import axios from "axios"; -import { useNavigate } from "react-router-dom"; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); - const [accessToken, setAccessToken] = useState(null); - const [auth, setAuth] = useState(false); - const { keycloak } = useKeycloak(); - const navigate = useNavigate(); + const auth = useAuth(); - const stored_token = localStorage.getItem("token"); - const kc_token = keycloak.token ? keycloak.token : stored_token; + const kc_token = auth?.user?.access_token; const axiosInstance = axios.create({ baseURL: `${import.meta.env.VITE_BaseURL}`, @@ -25,7 +20,6 @@ function useFetch(url) { function (config) { if (kc_token) { config.headers.Authorization = `Bearer ${kc_token}`; - console.log("axios interseption"); } return config; }, @@ -35,44 +29,22 @@ function useFetch(url) { ); useEffect(() => { - if (keycloak.authenticated) { - setAccessToken(keycloak.token); - setAuth(true); - } - if (kc_token) { - keycloak - .updateToken(30) - .then((refreshed) => { - if (refreshed) { - console.log( - "useFetch: Token refreshed and updated in localStorage." - ); - localStorage.setItem("token", keycloak.token); - } else { - console.log("useFetch: Token is still valid."); - } - }) - .catch(() => { - console.error("useFetch: Failed to refresh token."); - }); axiosInstance .get(url) .then((response) => { setData(response.data); }) .catch((error) => { - // navigate("/"); - // keycloak.login(); console.error("Error fetching data:", error); }) .finally(() => { setLoading(false); }); } - }, [kc_token, url, keycloak]); + }, [kc_token, url]); - return { data, loading, auth }; + return { data, loading }; } export default useFetch;