fixes on logout and login for cookies

src/api/endpoints/apiActions.ts

@@ -32,7 +32,7 @@ export const createGetRequest = <T = any, P = any>(endpoint: string, contentType
       signal,
       withCredentials: true
     }
-    
+
     if (contentType) {
       config.headers = {
         ...config.headers,
@@ -44,4 +44,4 @@ export const createGetRequest = <T = any, P = any>(endpoint: string, contentType
       return response;
     });
   }
-}
+}

src/components/Auth/Login.jsx

@@ -13,11 +13,11 @@ import {
 import * as yup from "yup";
 import FormField from "./UI/Formfield";
 import { useCookies } from 'react-cookie';
+import { API_CONFIG } from "../../config";
 import { requestUserSettings } from "./utils";
 import Checkbox from "@mui/material/Checkbox";
 import PasswordField from "./UI/PasswordField";
 import { ArrowBack } from "@mui/icons-material";
-import { API_CONFIG } from "../../config";
 import { Link, useNavigate } from "react-router-dom";
 import { login } from "../../api/endpoints/apiService";
 import { GlobalDataContext } from "../../contexts/DataContext";
@@ -36,11 +36,42 @@ const Login = () => {
   });
   const [errors, setErrors] = React.useState({});
   const [isLoading, setIsLoading] = React.useState(false);
-  const [existingCookies, setCookie] = useCookies(['session']);
+  const [existingCookies, setCookie, removeCookie] = useCookies(['session']);
 
   const { setUserData } = React.useContext(GlobalDataContext);
   const navigate = useNavigate();
 
+  React.useEffect(() => {
+    (async () => {
+      const userSettings = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS));
+      if (userSettings) {
+        try {
+          const userData = await requestUserSettings(userSettings?.groupname);
+          setUserData({
+            name: userData['groupname'],
+            id: userData['orcid'],
+            email: userData?.emails[0]?.email,
+            role: userData['own-role'],
+            groupname: userData['groupname'],
+            settings: userData
+          });
+          navigate("/");
+        } catch (error) {
+          console.error("Error fetching user settings:", error);
+          localStorage.removeItem(API_CONFIG.SESSION_DATA.SETTINGS);
+          localStorage.removeItem(API_CONFIG.SESSION_DATA.COOKIE);
+          removeCookie('session', { path: '/' });
+          setErrors((prev) => ({
+            ...prev,
+            auth: "Session expired. Please log in again.",
+          }));
+        }
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+
   React.useEffect(() => {
     let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
     let eventer = window[eventMethod];
@@ -59,30 +90,46 @@ const Login = () => {
             sessionCookie.value,
             {
               path: '/',
-              domain: API_CONFIG.BASE_URL.replace(/^https?:\/\//, '').replace(/:\d+$/, ''),
               secure: false,
               sameSite: false,
-              expires,
               httpOnly: false
             }
           );
         }
-        const userData = await requestUserSettings(groupname);
-        localStorage.setItem(API_CONFIG.SESSION_DATA.SETTINGS, JSON.stringify(userData));
-        localStorage.setItem(API_CONFIG.SESSION_DATA.COOKIE, JSON.stringify({
-          name: 'session',
-          value: sessionCookie.value,
-          expires: expires
-        }));
-        setUserData({
-          name: userData['groupname'],
-          id: userData['orcid'],
-          email: userData?.emails[0]?.email,
-          role: userData['own-role'],
-          groupname: userData['groupname'],
-          settings: userData
-        });
-        navigate("/")
+        // Check if the session cookie is present
+        if (!sessionCookie) {
+          setErrors((prev) => ({
+            ...prev,
+            auth: "Session cookie not found. Please try again",
+          }));
+          return;
+        }
+        // Retrieve user settings
+        try {
+          const userData = await requestUserSettings(groupname);
+          localStorage.setItem(API_CONFIG.SESSION_DATA.SETTINGS, JSON.stringify(userData));
+          localStorage.setItem(API_CONFIG.SESSION_DATA.COOKIE, JSON.stringify({
+            name: 'session',
+            value: sessionCookie.value,
+            expires: expires
+          }));
+          setUserData({
+            name: userData['groupname'],
+            id: userData['orcid'],
+            email: userData?.emails[0]?.email,
+            role: userData['own-role'],
+            groupname: userData['groupname'],
+            settings: userData
+          });
+          navigate("/")
+        } catch (error) {
+          console.error("Error fetching user settings:", error);
+          removeCookie('session', { path: '/' });
+          setErrors((prev) => ({
+            ...prev,
+            auth: "Failed to fetch user settings. Please try again",
+          }));
+        }
       } else if (code === 401) {
         setErrors((prev) => ({
           ...prev,
@@ -95,9 +142,7 @@ const Login = () => {
         }));
       }
     });
-
     setIsLoading(false)
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
 

src/components/Header/index.jsx

@@ -35,6 +35,7 @@ import EditBulkTermsDialog from "../Dashboard/EditBulkTerms/EditBulkTermsDialog"
 import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
 import { userLogout } from "../../api/endpoints/apiService";
+import { useCookies } from 'react-cookie';
 
 import { vars } from "../../theme/variables";
 const { gray200, white, gray100, gray600 } = vars;
@@ -159,6 +160,8 @@ const Header = () => {
     const [isLoggedIn, setIsLoggedIn] = React.useState(false);
     const { user, setUserData } = useContext(GlobalDataContext);
     const [openNewTermDialog, setOpenNewTermDialog] = React.useState(false);
+    // eslint-disable-next-line no-unused-vars
+    const [existingCookies, setCookie, removeCookie] = useCookies(['session']);
 
     const handleNewTermDialogClose = () => {
         setOpenNewTermDialog(false);
@@ -219,9 +222,16 @@ const Header = () => {
         setOpenList(!openList);
     };
 
-    const handleMenuClick = (e, menu) => {
+    const handleMenuClick = async (e, menu) => {
         if (menu.label === 'Log out') {
-            userLogout();
+            try {
+                await userLogout(user['groupname']);
+            } catch (error) {
+                console.error("Logout error:", error);
+            } finally {
+                setUserData(null);
+            }
+            removeCookie('session', { path: '/' });
             localStorage.removeItem('session');
             localStorage.removeItem('settings');
             setUserData({});