Expires user login session after 5 minutes

src/middleware/AuthRoute.jsx

@@ -1,9 +1,30 @@
-import { Navigate, Outlet } from "react-router-dom";
+import React, {useEffect} from "react";
+import { Navigate, Outlet, useNavigate } 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();
+
+  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES
+  const expireSession = () => {
+    localStorage.removeItem("email");
+    localStorage.removeItem('session_token');
+    localStorage.removeItem('profile');
+    // navigate("/login", { replace: true });
+  };
+
+  useEffect(()=>{
+    setTimeout(()=>{
+      expireSession()
+      toast.success("Opps, session has expired", {
+        icon: `🙂`,
+      });
+    }, 300000) //expires user login session after 5 minutes
+  },[])
+
   if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
     return <Navigate to={redirectPath} replace />;
   }

src/store/userInfo.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  userInfo: JSON.parse(localStorage.getItem("profile"))
+  userInfo: localStorage.getItem('profile') && JSON.parse(localStorage.getItem("profile"))
 };
 
 export const userSlice = createSlice({

src/views/HomePages.jsx

@@ -1,26 +1,11 @@
 import React, {useEffect} from "react";
 import Home from "../components/Home";
-import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 // import { toast } from "react-toastify";
 
 export default function HomePages() {
 
   const { drawer } = useSelector((state) => state.drawer);
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const logOut = () => {
-    localStorage.removeItem("email");
-    localStorage.removeItem('session_token');
-
-    navigate("/login", { replace: true });
-  };
-
-  useEffect(()=>{
-    setTimeout(()=>{
-      logOut()
-    }, 300000) //expires user login session after 5 minutes
-  },[])
   return (
     <>
       <Home />