sets local storage values on successful login and clears those values when user logs out

src/components/AuthPages/Login/index.jsx

@@ -45,7 +45,10 @@ export default function Login() {
       // if (email === "support@mermsemr.com") {
       if (loginResult.data.status > 0 && loginResult.data.session_token !='') { // just for a start
         localStorage.setItem("email", `${email}`);
+        localStorage.setItem("member_id", `${JSON.stringify(loginResult.data.member_id)}`);
+        localStorage.setItem("member_uuid", `${JSON.stringify(loginResult.data.member_uuid)}`);
         localStorage.setItem("session_token", `${loginResult.data.session_token}`);
+        localStorage.setItem("status", `${JSON.stringify(loginResult.data.status)}`);
         localStorage.setItem("profile", `${JSON.stringify(loginResult.data.profile)}`);
         setLoginLoading(true);
          // userApi.getUserReminders(); //testing

src/components/Partials/Layout.jsx

@@ -21,7 +21,11 @@ export default function Layout({ children }) {
   const navigate = useNavigate();
   const logOut = () => {
     localStorage.removeItem("email");
+    localStorage.removeItem('profile');
+    localStorage.removeItem('member_id');
+    localStorage.removeItem('member_uuid');
     localStorage.removeItem('session_token');
+    localStorage.removeItem('status');
     toast.success("Come Back Soon", {
       icon: `🙂`,
     });

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 />