Merge pull request #33 from chaitanyakole/revert-32-login_page_changes

Revert "Changes keycloak, login page and logout"

src/pages/_app.tsx

@@ -11,11 +11,11 @@ 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 keycloak, { initKeycloak } from "../utils/keycloak";
+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";
-import { getUserId } from "@/services/LoginService";
+import { getUserId, registerUser } from "@/services/LoginService";
 import { getUserDetailsInfo } from "@/services/UserList";
 import { useRouter } from "next/router";
 
@@ -38,32 +38,47 @@ function App({ Component, pageProps }: AppProps) {
 
   // Keycloak initialization
   useEffect(() => {
-    if (typeof window === "undefined" || !keycloak) return;
-
     const initializeKeycloak = async () => {
       try {
-        if (router.pathname === "/super-admin-login") {
-          localStorage.setItem("superAdminLoggedIn", "true");
-          return;
-        }
-
+        if (router.pathname === "/super-admin-login")
+          return localStorage.setItem("superAdminLoggedIn", "true");
         const superAdminLoggedIn =
           localStorage.getItem("superAdminLoggedIn") === "true";
         if (superAdminLoggedIn) {
           setIsAuthenticated(false);
           return;
         }
 
-        const authenticated = await initKeycloak();
+        if (!keycloak || keycloak.authenticated) return;
+
+        const redirectUri = `${window.location.protocol}//${window.location.hostname}/tenant`;
+        console.log({ redirectUri });
 
-        setIsAuthenticated(authenticated);
+        const authenticated = await keycloak.init({
+          onLoad: "login-required",
+          redirectUri,
+        });
+
+        if (!authenticated) return;
+        setIsAuthenticated(true);
+
+        if (keycloak.token) {
+          console.log("Get keycloak token");
+
+          localStorage.setItem("token", keycloak.token);
+          await registerUser();
+        }
+        if (keycloak.refreshToken) {
+          console.log("Get keycloak token");
+          localStorage.setItem("refreshToken", keycloak.refreshToken);
+        }
       } catch (error) {
         console.error("Failed to initialize Keycloak:", error);
       }
     };
 
     initializeKeycloak();
-  }, [router.pathname]);
+  }, [router.pathname, keycloak]);
 
   useEffect(() => {
     if (!isAuthenticated || hasFetchedUserDetails.current) return;

src/pages/login.tsx

@@ -1,52 +1,28 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import keycloak, { initKeycloak } from "../utils/keycloak";
-import Loader from "../components/Loader";
 import { Box } from "@mui/material";
+import React, { useEffect } from "react";
+import Loader from "../components/Loader";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
-import { registerUser } from "@/services/LoginService";
 
 const LoginPage = () => {
   const { t } = useTranslation();
   const router = useRouter();
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const loginWithKeycloak = async () => {
-      try {
-        const token = localStorage.getItem("token");
-        if (token) {
-          router.push("/tenant");
-          return;
-        }
-
-        const authenticated = await initKeycloak();
-        if (authenticated) {
-          await registerUser();
-          router.push("/tenant");
-        } else {
-          console.error("User is not authenticated");
-        }
-      } catch (error) {
-        console.error("Error logging in with Keycloak:", error);
-      } finally {
-        setLoading(false);
+    if (typeof window !== "undefined" && window.localStorage) {
+      const token = localStorage.getItem("token");
+      if (token) {
+        router.push("/tenant");
       }
-    };
-
-    loginWithKeycloak();
+    }
   }, []);
 
-  if (loading) {
-    return (
-      <Box sx={{ backgroundColor: "white", height: "100vh" }}>
-        <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
-      </Box>
-    );
-  }
-
-  return null;
+  return (
+    <Box sx={{ backgroundColor: "white", height: "100vh" }}>
+      <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
+    </Box>
+  );
 };
 
 export async function getStaticProps({ locale }: any) {

src/pages/logout.tsx

@@ -1,48 +1,49 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
+
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Loader from "@/components/Loader";
 import { useTranslation } from "react-i18next";
 import { logout } from "@/utils/keycloak";
-
 function Logout() {
   const router = useRouter();
   const { t } = useTranslation();
-
   useEffect(() => {
     const userLogout = async () => {
       try {
         await logout();
-        if (typeof window !== "undefined" && window.localStorage) {
-          const keysToKeep = [
-            "preferredLanguage",
-            "mui-mode",
-            "mui-color-scheme-dark",
-            "mui-color-scheme-light",
-            "hasSeenTutorial",
-          ];
-
-          const valuesToKeep: { [key: string]: any } = {};
-          keysToKeep.forEach((key) => {
-            valuesToKeep[key] = localStorage.getItem(key);
-          });
-
-          localStorage.clear();
-
-          keysToKeep.forEach((key) => {
-            if (valuesToKeep[key] !== null) {
-              localStorage.setItem(key, valuesToKeep[key]);
-            }
-          });
-        }
-        router.push("/login");
       } catch (error) {
-        console.error("Error during logout:", error);
+        console.log(error);
       }
     };
-
     userLogout();
-  }, [router]);
+    if (typeof window !== "undefined" && window.localStorage) {
+      // Specify the keys you want to keep
+      const keysToKeep = [
+        "preferredLanguage",
+        "mui-mode",
+        "mui-color-scheme-dark",
+        "mui-color-scheme-light",
+        "hasSeenTutorial",
+      ];
+      // Retrieve the values of the keys to keep
+      const valuesToKeep: { [key: string]: any } = {};
+      keysToKeep.forEach((key: string) => {
+        valuesToKeep[key] = localStorage.getItem(key);
+      });
+
+      // Clear all local storage
+      localStorage.clear();
+
+      // Re-add the keys to keep with their values
+      keysToKeep.forEach((key: string) => {
+        if (valuesToKeep[key] !== null) {
+          // Check if the key exists and has a value
+          localStorage.setItem(key, valuesToKeep[key]);
+        }
+      });
+    }
+  }, []);
 
   return <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />;
 }

src/utils/keycloak.ts

@@ -1,46 +1,26 @@
 import Keycloak from "keycloak-js";
 
-let keycloakInstance: Keycloak | null = null;
 
-if (typeof window !== "undefined") {
-  keycloakInstance = new Keycloak({
-    url: process.env.NEXT_PUBLIC_KEYCLOAK_URL || "",
-    realm: process.env.NEXT_PUBLIC_KEYCLOAK_REALM || "",
-    clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || "",
-  });
-}
-
-export const initKeycloak = async (): Promise<boolean> => {
-  if (!keycloakInstance) return false;
-
-  try {
-    const authenticated = await keycloakInstance.init({
-      onLoad: "login-required",
-      silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`,
-    });
-
-    if (authenticated) {
-      localStorage.setItem("token", keycloakInstance.token || "");
-      localStorage.setItem("refreshToken", keycloakInstance.refreshToken || "");
+const keycloakInstance =
+  typeof window !== "undefined"
+    ? new Keycloak({
+        url: process.env.NEXT_PUBLIC_KEYCLOAK_URL || "",
+        realm: process.env.NEXT_PUBLIC_KEYCLOAK_REALM || "",
+        clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || "",
+      })
+    : null;
+export const logout = async () => {
+  try {    
+    if (keycloakInstance) {
+      await keycloakInstance.logout({
+        redirectUri: window.location.origin + "/login",
+      });
+      localStorage.clear();
     }
 
-    return authenticated;
-  } catch (error) {
-    console.error("Keycloak initialization failed:", error);
-    return false;
-  }
-};
-
-export const logout = async () => {
-  if (!keycloakInstance) return;
-  try {
-    await keycloakInstance.logout({
-      redirectUri: window.location.origin + "/login",
-    });
-    localStorage.clear();
   } catch (error) {
     console.error("Logout failed:", error);
   }
 };
 
-export default keycloakInstance;
+export default keycloakInstance;