implemented session timeout, activity reset and nextauth jwt token sync

Kuzma02 · Kuzma02 · commit 21aeab42f541 · 2025-09-14T08:49:38.000+02:00
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -94,7 +94,19 @@ export const authOptions: NextAuthOptions = {
       if (user) {
         token.role = user.role;
         token.id = user.id;
+        token.iat = Math.floor(Date.now() / 1000); // Issued at time
       }
+      
+      // Check if token is expired (15 minutes)
+      const now = Math.floor(Date.now() / 1000);
+      const tokenAge = now - (token.iat as number);
+      const maxAge = 15 * 60; // 15 minutes
+      
+      if (tokenAge > maxAge) {
+        // Token expired, return empty object to force re-authentication
+        return {};
+      }
+      
       return token;
     },
     async session({ session, token }) {
@@ -111,10 +123,11 @@ export const authOptions: NextAuthOptions = {
   },
   session: {
     strategy: "jwt",
-    maxAge: 30 * 24 * 60 * 60, // 30 days
+    maxAge: 15 * 60, // 15 minutes in seconds
+    updateAge: 5 * 60, // Update session every 5 minutes
   },
   jwt: {
-    maxAge: 30 * 24 * 60 * 60, // 30 days
+    maxAge: 15 * 60, // 15 minutes in seconds
   },
   secret: process.env.NEXTAUTH_SECRET,
   debug: process.env.NODE_ENV === "development",
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,14 +1,13 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { Footer, Header } from "@/components";
-import SessionProvider from "@/utils/SessionProvider";
-import Providers from "@/Providers";
 import { getServerSession } from "next-auth";
 import 'svgmap/dist/svgMap.min.css';
-
-
-
+import SessionProvider from "@/utils/SessionProvider";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import Providers from "@/Providers";
+import SessionTimeoutWrapper from "@/components/SessionTimeoutWrapper";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -22,19 +21,19 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-
   const session = await getServerSession();
   return (
     <html lang="en" data-theme="light">
       <body className={inter.className}>
-      <SessionProvider session={session}>
-        <Header />
-        <Providers>
-        {children}
-        </Providers>
-        <Footer />
-      </SessionProvider>
-        </body>
+        <SessionProvider session={session}>
+          <SessionTimeoutWrapper />
+          <Header />
+          <Providers>
+            {children}
+          </Providers>
+          <Footer />
+        </SessionProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -2,23 +2,30 @@
 import { CustomButton, SectionTitle } from "@/components";
 import { isValidEmailAddressFormat } from "@/lib/utils";
 import { signIn, useSession } from "next-auth/react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { FcGoogle } from "react-icons/fc";
 
 const LoginPage = () => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [error, setError] = useState("");
-  // const session = useSession();
   const { data: session, status: sessionStatus } = useSession();
 
   useEffect(() => {
+    // Check if session expired
+    const expired = searchParams.get('expired');
+    if (expired === 'true') {
+      setError("Your session has expired. Please log in again.");
+      toast.error("Your session has expired. Please log in again.");
+    }
+    
     // if user has already logged in redirect to home page
     if (sessionStatus === "authenticated") {
       router.replace("/");
     }
-  }, [sessionStatus, router]);
+  }, [sessionStatus, router, searchParams]);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
diff --git a/components/SessionTimeoutTest.tsx b/components/SessionTimeoutTest.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useState, useEffect } from "react";
+
+export default function SessionTimeoutTest() {
+  const { data: session, status } = useSession();
+  const [timeLeft, setTimeLeft] = useState(0);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    if (status === "authenticated" && session) {
+      setIsActive(true);
+      setTimeLeft(30); // 30 seconds to match the hook
+      
+      const timer = setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev <= 1) {
+            clearInterval(timer);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      return () => clearInterval(timer);
+    } else {
+      setIsActive(false);
+      setTimeLeft(0);
+    }
+  }, [session, status]);
+
+  if (status === "loading") return <div>Loading...</div>;
+  if (status === "unauthenticated") return <div>Not logged in</div>;
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded z-50">
+      <div className="text-sm font-bold">Session Timeout Test (30s)</div>
+      <div className="text-xs">
+        {isActive ? `Time left: ${formatTime(timeLeft)}` : 'Session inactive'}
+      </div>
+      <div className="text-xs">
+        Status: {status}
+      </div>
+    </div>
+  );
+}
diff --git a/components/SessionTimeoutWrapper.tsx b/components/SessionTimeoutWrapper.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { useSessionTimeout } from "@/hooks/useSessionTimeout";
+
+export default function SessionTimeoutWrapper() {
+  useSessionTimeout();
+  return null;
+}
diff --git a/hooks/useSessionTimeout.ts b/hooks/useSessionTimeout.ts
@@ -0,0 +1,57 @@
+"use client";
+
+import { useSession, signOut } from "next-auth/react";
+import { useEffect, useRef } from "react";
+
+// Production timeout: 15 minutes
+const SESSION_TIMEOUT = 15 * 60 * 1000; // 15 minutes in milliseconds
+
+export function useSessionTimeout() {
+  const { data: session, status } = useSession();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window === 'undefined') return;
+    
+    if (status === "authenticated" && session) {
+      const startTimeout = () => {
+        // Clear existing timeout
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        
+        // Set new timeout
+        timeoutRef.current = setTimeout(() => {
+          signOut({ 
+            callbackUrl: "/login?expired=true",
+            redirect: true 
+          });
+        }, SESSION_TIMEOUT);
+      };
+
+      // Start the initial timeout
+      startTimeout();
+
+      // Reset timeout on user activity
+      const resetTimeout = () => {
+        startTimeout();
+      };
+
+      // Listen for user activity
+      const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'];
+      events.forEach(event => {
+        document.addEventListener(event, resetTimeout, true);
+      });
+
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        events.forEach(event => {
+          document.removeEventListener(event, resetTimeout, true);
+        });
+      };
+    }
+  }, [session, status]);
+}
diff --git a/hooks/useSessionTimeoutTest.ts b/hooks/useSessionTimeoutTest.ts
@@ -0,0 +1,61 @@
+"use client";
+
+import { useSession, signOut } from "next-auth/react";
+import { useEffect, useRef } from "react";
+
+// Use 30 seconds for testing
+const SESSION_TIMEOUT = 30 * 1000; // 30 seconds for testing
+
+export function useSessionTimeoutTest() {
+  const { data: session, status } = useSession();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window === 'undefined') return;
+    
+    if (status === "authenticated" && session) {
+      console.log('🕐 Session timeout test started - 30 seconds');
+      
+      const startTimeout = () => {
+        // Clear existing timeout
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        
+        // Set new timeout
+        timeoutRef.current = setTimeout(() => {
+          console.log('🚪 Session expired - signing out');
+          signOut({ 
+            callbackUrl: "/login?expired=true",
+            redirect: true 
+          });
+        }, SESSION_TIMEOUT);
+      };
+
+      // Start the initial timeout
+      startTimeout();
+
+      // Reset timeout on user activity
+      const resetTimeout = () => {
+        console.log('🔄 User activity detected - resetting timeout');
+        startTimeout();
+      };
+
+      // Listen for user activity
+      const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'];
+      events.forEach(event => {
+        document.addEventListener(event, resetTimeout, true);
+      });
+
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        events.forEach(event => {
+          document.removeEventListener(event, resetTimeout, true);
+        });
+      };
+    }
+  }, [session, status]);
+}
diff --git a/middleware.ts b/middleware.ts
@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 
 export default withAuth(
   function middleware(req) {
-    // Additional server-side check for admin routes
+    // Check for admin routes
     if (req.nextUrl.pathname.startsWith("/admin")) {
       if (req.nextauth.token?.role !== "admin") {
         return NextResponse.redirect(new URL("/", req.url));
@@ -13,7 +13,7 @@ export default withAuth(
   {
     callbacks: {
       authorized: ({ token, req }) => {
-        // Allow access to admin routes only if user is authenticated and has admin role
+        // Admin routes require admin token
         if (req.nextUrl.pathname.startsWith("/admin")) {
           return !!token && token.role === "admin";
         }
