src/App.jsx

@@ -1,4 +1,4 @@
-// import Toaster from "./components/Helpers/Toaster";
+import Toaster from "./components/Helpers/Toaster";
 import Routers from "./Routers";
 import Default from "./components/Partials/Default";
 
@@ -7,7 +7,7 @@ function App() {
       <Default>
           <>
               <Routers />
-              {/* <Toaster /> */}
+              <Toaster />
           </>
       </Default>
   );

src/middleware/AuthRoute.jsx

@@ -1,26 +1,49 @@
 import React, {useEffect} from "react";
-import { Navigate, Outlet, useNavigate } from "react-router-dom";
-// import { toast } from "react-toastify";
+import { Navigate, Outlet, useNavigate, useLocation } from "react-router-dom";
+import { toast } from "react-toastify";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const isLogin = localStorage.getItem("email");
   const profile = localStorage.getItem("profile")
 
   const navigate = useNavigate();
+  const { pathname } = useLocation();
 
-  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES
+
+  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES AND REDIRECT USER TO LOGIN PAGE
   const expireSession = () => {
     localStorage.removeItem("email");
     localStorage.removeItem('session_token');
     localStorage.removeItem('profile');
-    // navigate("/login", { replace: true });
+    localStorage.removeItem('member_id');
+    localStorage.removeItem('member_uuid');
+    localStorage.removeItem('status');
+    navigate("/login", { replace: true }); // redirects user to login page after session expires
   };
 
+   //FUNCTION TO REMIND USER OF EXPIRY TIME
+  const expireSessionReminder = () => {
+    toast.success("session is about to expire", {
+      icon: `🙂`,
+    });
+  }
+
+
   useEffect(()=>{
-    setTimeout(()=>{
+    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 4 mins 240000
+      expireSessionReminder()
+    }, 240000) 
+
+    let timeForSessionExpiry = setTimeout(()=>{ //reminds user of session expiry after 4 mins 300000
       expireSession()
-    }, 300000) //expires user login session after 5 minutes
-  },[])
+    }, 300000) 
+
+    return ()=>{ // clears timeout side effect
+      clearTimeout(sessionExpReminder)
+      clearInterval(timeForSessionExpiry)
+    }
+  },[pathname])
+
 
   if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
     return <Navigate to={redirectPath} replace />;