Add auto logout function in frontend (60 mins);

need npm i react-idle-timer

package.json

@@ -48,6 +48,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.49.2",
     "react-i18next": "^13.5.0",
+    "react-idle-timer": "^5.7.2",
     "react-intl": "^6.5.5",
     "react-number-format": "^5.3.4",
     "react-select": "^5.8.0",

src/app/(main)/layout.tsx

@@ -1,4 +1,5 @@
 import AppBar from "@/components/AppBar";
+import AutoLogoutProvider from "@/components/AutoLogoutProvider";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/config/authConfig";
 import { redirect } from "next/navigation";
@@ -21,6 +22,7 @@ export default async function MainLayout({
 
   return (
     <>
+      <AutoLogoutProvider/>
       <AppBar
         profileName={session.user.name!}
         avatarImageSrc={session.user.image || undefined}

src/components/AutoLogoutProvider/AutoLogoutProvider.tsx

@@ -0,0 +1,89 @@
+'use client'
+import React, { createContext, useState, useEffect, ReactNode } from 'react';
+import { useIdleTimer } from "react-idle-timer";
+import { signOut } from "next-auth/react";
+
+interface TimerContextProps {
+    lastRequestTime: number;
+    setLastRequestTime: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const TimerContext = createContext<TimerContextProps | undefined>(undefined);
+
+interface AutoLogoutProviderProps {
+    children?: ReactNode;
+    isUserLoggedIn: boolean;
+}
+
+const AutoLogoutProvider: React.FC<AutoLogoutProviderProps> = ({ children, isUserLoggedIn }) => {
+    const [lastRequestTime, setLastRequestTime] = useState(Date.now());
+    const [logoutInterval, setLogoutInterval] = useState(1); // minute
+    const [state, setState] = useState('Active');
+
+    const onIdle = () => {
+        setLastRequestTime(Date.now());
+        setState('Idle')
+    }
+
+    const onActive = () => {
+        setLastRequestTime(Date.now());
+        setState('Active')
+    }
+
+    const {
+        isLastActiveTab,
+    } = useIdleTimer({
+        onIdle,
+        onActive,
+        timeout: 1_000,
+        throttle: 500,
+        crossTab: true,
+        syncTimers: 200,
+    })
+
+    const lastActiveTab = isLastActiveTab() === null ? 'loading' : isLastActiveTab()
+
+    const getLogoutInterval = () => {
+        if (isUserLoggedIn && logoutInterval === 1) {
+            //TODO: get auto logout time here
+            setLogoutInterval(60);
+        }
+        else {
+            if (!isUserLoggedIn && logoutInterval > 1) {
+                setLogoutInterval(1);
+            }
+        }
+    }
+
+    useEffect(() => {
+        getLogoutInterval()
+        const interval = setInterval(async () => {
+            const currentTime = Date.now();
+            // if (isPasswordExpiry()) {
+            //     navigate('/user/changePassword');
+            // }
+            if (state !== "Active" && lastActiveTab) {
+                const timeElapsed = currentTime - lastRequestTime;
+                if (timeElapsed >= logoutInterval * 60 * 1000) {
+                    // console.log(timeElapsed / 1000);
+                    // console.log(logoutInterval* 60);
+                    // console.log(logoutInterval * 60 * 1000 - timeElapsed)
+                    signOut()
+                }
+            }
+        }, 1000); // Check every second
+
+        return () => {
+            clearInterval(interval);
+        };
+    }, [lastRequestTime, logoutInterval]);
+
+
+    return (
+        <TimerContext.Provider value={{ lastRequestTime, setLastRequestTime }}>
+            {children}
+        </TimerContext.Provider>
+    );
+};
+
+export default AutoLogoutProvider;

src/components/AutoLogoutProvider/AutoLogoutProviderWrapper.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import AutoLogoutProvider from "./AutoLogoutProvider";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/config/authConfig";
+
+const AutoLogoutProviderWrapper: React.FC = async () => {
+
+    const session = await getServerSession(authOptions)
+    const isUserLoggedIn = session?.user !== null
+
+    return <AutoLogoutProvider isUserLoggedIn={isUserLoggedIn}/>;
+};
+
+export default AutoLogoutProviderWrapper;

src/components/AutoLogoutProvider/index.ts

@@ -0,0 +1 @@
+export { default } from "./AutoLogoutProviderWrapper";