Merge pull request #26 from vidyaaKhandekar/authkeyclock

Task #233633: Implement Authentication Through Keycloak by Redirecting User to Keycloak Login Page with Google Authentication

package.json

@@ -39,6 +39,7 @@
     "i18next": "^23.11.5",
     "jquery": "^3.7.1",
     "ka-table": "^11.0.2",
+    "keycloak-js": "^26.1.0",
     "next": "^14.2.4",
     "next-i18next": "^15.3.0",
     "papaparse": "^5.4.1",

src/components/layouts/header/Profile.tsx

@@ -15,6 +15,7 @@ import MailIcon from "@mui/icons-material/Mail";
 import PhoneIcon from "@mui/icons-material/Phone";
 import { Box, Button, Divider, Menu, Typography } from "@mui/material";
 import { useRouter } from "next/router";
+
 const Profile = () => {
   const [anchorEl4, setAnchorEl4] = React.useState<null | HTMLElement>(null);
   const [profileClick, setProfileClick] = React.useState<boolean>(false);
@@ -45,11 +46,10 @@ const Profile = () => {
     setAnchorEl4(null);
   };
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
     if (typeof window !== "undefined" && window.localStorage) {
-      localStorage.removeItem("token");
+      router.replace("/logout");
     }
-    router.push("/logout");
   };
 
   const mapFields = (formFields: any, response: any) => {

src/pages/_app.tsx

@@ -1,5 +1,4 @@
 // import "@/styles/globals.css";
-
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { appWithTranslation } from "next-i18next";
@@ -13,23 +12,50 @@ import FullLayout from "@/components/layouts/FullLayout";
 import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
 import customTheme from "../styles/customTheme";
 import "./../styles/style.css";
-
-
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
-
+import keycloak from "../utils/keycloak";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "react-circular-progressbar/dist/styles.css";
 
 function App({ Component, pageProps }: AppProps) {
+  // Analytics initialization
   useEffect(() => {
     telemetryFactory.init();
   }, []);
+
   useEffect(() => {
     if (!window.GA_INITIALIZED) {
       initGA(`G-6NVMB20J4Z`);
       window.GA_INITIALIZED = true;
     }
-  });
+  }, []);
+
+  // Keycloak initialization
+  useEffect(() => {
+    const initializeKeycloak = async () => {
+      try {
+        if (keycloak != null && !keycloak.authenticated) {
+          const authenticated = await keycloak.init({
+            onLoad: "login-required",
+            redirectUri: window.location.origin + "/tenant",
+          });
+
+          if (authenticated) {
+            if (keycloak.token) {
+              localStorage.setItem("token", keycloak.token);
+            }
+            if (keycloak.refreshToken) {
+              localStorage.setItem("refreshToken", keycloak.refreshToken);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Failed to initialize Keycloak:", error);
+      }
+    };
+
+    initializeKeycloak();
+  }, []);
 
   const renderComponent = () => {
     if (pageProps.noLayout) {
@@ -43,25 +69,22 @@ function App({ Component, pageProps }: AppProps) {
     }
   };
 
-  const [client] = useState(new QueryClient(
-    {
+  const [client] = useState(
+    new QueryClient({
       defaultOptions: {
         queries: {
-          gcTime: 1000 * 60 * 60 * 24, // 24 hours
-          staleTime: 1000 * 60 * 60 * 24, // 24 hours
+          gcTime: 1000 * 60 * 60 * 24,
+          staleTime: 1000 * 60 * 60 * 24,
         },
       },
-    }
-  ));
+    })
+  );
 
   return (
     <QueryClientProvider client={client}>
-
-    <AuthProvider>
+      <AuthProvider>
         <CssVarsProvider theme={customTheme}>
-
           {renderComponent()}
-
           <ToastContainer
             position="bottom-left"
             autoClose={3000}
@@ -70,7 +93,6 @@ function App({ Component, pageProps }: AppProps) {
         </CssVarsProvider>
       </AuthProvider>
       <ReactQueryDevtools initialIsOpen={false} />
-
     </QueryClientProvider>
   );
 }