notifies that session is abou to expire and routes to login when session expires

This commit was merged in pull request #41.
This commit is contained in:
victorAnumudu
2023-02-06 21:51:10 +01:00
parent 86d379ac38
commit a28b362034
2 changed files with 32 additions and 9 deletions
+2 -2
View File
@@ -1,4 +1,4 @@
// import Toaster from "./components/Helpers/Toaster"; import Toaster from "./components/Helpers/Toaster";
import Routers from "./Routers"; import Routers from "./Routers";
import Default from "./components/Partials/Default"; import Default from "./components/Partials/Default";
@@ -7,7 +7,7 @@ function App() {
<Default> <Default>
<> <>
<Routers /> <Routers />
{/* <Toaster /> */} <Toaster />
</> </>
</Default> </Default>
); );
+30 -7
View File
@@ -1,26 +1,49 @@
import React, {useEffect} from "react"; import React, {useEffect} from "react";
import { Navigate, Outlet, useNavigate } from "react-router-dom"; import { Navigate, Outlet, useNavigate, useLocation } from "react-router-dom";
// import { toast } from "react-toastify"; import { toast } from "react-toastify";
const AuthRoute = ({ redirectPath = "/login", children }) => { const AuthRoute = ({ redirectPath = "/login", children }) => {
const isLogin = localStorage.getItem("email"); const isLogin = localStorage.getItem("email");
const profile = localStorage.getItem("profile") const profile = localStorage.getItem("profile")
const navigate = useNavigate(); 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 = () => { const expireSession = () => {
localStorage.removeItem("email"); localStorage.removeItem("email");
localStorage.removeItem('session_token'); localStorage.removeItem('session_token');
localStorage.removeItem('profile'); 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(()=>{ 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() 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)) { if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
return <Navigate to={redirectPath} replace />; return <Navigate to={redirectPath} replace />;