feat: session timeout optimization - 24h absolute + 30min idle + 401 auto-logout

- Backend: change SESSION_TTL from 30 days to 24 hours (env overrideable via WEBSOFT9_SESSION_TTL_HOURS)
- Backend: sync cookie max_age to SESSION_TTL_HOURS
- Frontend: add useIdleTimeout hook (30min inactivity auto-logout)
- Frontend: add global 401 interception with auto-redirect to /auth/login
- Frontend: integrate idle timeout into app-shell

Author: zhaojing1987

.github/ISSUE_TEMPLATE/release-testing-checklist.md

@@ -16,7 +16,7 @@
     ProductAuthUpdateUserRequest,
     ProductAuthUsersResponse,
 )
-from src.services.product_auth import PRODUCT_AUTH_COOKIE_NAME, ProductAuthService
+from src.services.product_auth import PRODUCT_AUTH_COOKIE_NAME, SESSION_TTL_HOURS, ProductAuthService
 
 router = APIRouter()
 
@@ -28,7 +28,7 @@ def _set_session_cookie(request: Request, response: Response, session_token: str
         httponly=True,
         samesite="lax",
         path="/",
-        max_age=60 * 60 * 24 * 30,
+        max_age=60 * 60 * SESSION_TTL_HOURS,
         secure=(request.headers.get("x-forwarded-proto") or request.url.scheme) == "https",
     )
 

apphub/src/api/v1/routers/auth.py

@@ -38,7 +38,7 @@ def _resolve_product_auth_cookie_name() -> str:
 
 
 PRODUCT_AUTH_COOKIE_NAME = _resolve_product_auth_cookie_name()
-SESSION_TTL_DAYS = 30
+SESSION_TTL_HOURS = int(os.getenv("WEBSOFT9_SESSION_TTL_HOURS", "24"))
 PASSWORD_HASH_ITERATIONS = 310_000
 DOCKER_BOOTSTRAP_ACTOR = "docker-bootstrap"
 PENDING_MIGRATED_FAVORITES_KEY = "migrated_favorite_apps_pending"
@@ -832,7 +832,7 @@ def _create_session(self, operator_id: str) -> str:
                 "token_hash": self._hash_session_token(session_token),
                 "created_at": self._iso(now),
                 "last_seen_at": self._iso(now),
-                "expires_at": self._iso(now + timedelta(days=SESSION_TTL_DAYS)),
+                "expires_at": self._iso(now + timedelta(hours=SESSION_TTL_HOURS)),
                 "invalidated_at": None,
             }
         )

apphub/src/services/product_auth.py

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next'
 import { useAppColorMode } from '../providers/color-mode'
 import { useProductAuth } from '../../features/product-auth/product-auth-provider'
 import { normalizeSupportedLocale } from '../../shared/i18n/i18n'
+import { useIdleTimeout } from '../../shared/hooks/useIdleTimeout'
 import { PersistentIntegrationWorkspaces } from '../../features/integrations/integration-workspace-page'
 import { useIntegrationSessionPrewarm } from '../../features/integrations/integration-session-bootstrap'
 import { getRememberedMyAppsDetailRoute, rememberMyAppsDetailRoute } from '../../features/my-apps/my-app-detail-overlay-intent'
@@ -524,6 +525,21 @@ export function AppShell() {
         void persistCurrentUserLocale(nextNormalizedLocale)
     }
 
+    // Idle timeout: auto-logout after 30 minutes of inactivity
+    const isAuthenticated = status?.enabled && status?.authenticated
+    useIdleTimeout(
+        () => {
+            if (!isAuthenticated || isSubmitting) {
+                return
+            }
+
+            void logout().then(() => {
+                navigate('/auth/login', { replace: true })
+            })
+        },
+        { enabled: isAuthenticated },
+    )
+
     return (
         <Box className={`app-shell-root app-shell-root--${colorMode} ${isNavCollapsed ? 'app-shell-root--collapsed' : ''} ${mobileNavOpen ? 'app-shell-root--mobile-nav-open' : ''}`}>
             <Box className="app-shell-frame">

console/src/app/shell/app-shell.tsx

@@ -3,6 +3,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { i18n, normalizeSupportedLocale } from '../../shared/i18n/i18n'
 
 const PRODUCT_AUTH_STATUS_STORAGE_KEY = 'websoft9:product-auth-status'
+const PRODUCT_AUTH_UNAUTHORIZED_EVENT = 'websoft9:product-auth-unauthorized'
 
 type ProductAuthUser = {
     id: string
@@ -102,6 +103,10 @@ async function requestJson<T>(input: string, init?: RequestInit): Promise<T> {
         ...init,
     })
 
+    if (response.status === 401) {
+        window.dispatchEvent(new CustomEvent(PRODUCT_AUTH_UNAUTHORIZED_EVENT))
+    }
+
     const payload = (await response.json().catch(() => null)) as { details?: string; message?: string } | T | null
     if (!response.ok) {
         const errorMessage =
@@ -175,6 +180,34 @@ export function ProductAuthProvider({ children }: { children: ReactNode }) {
         void i18n.changeLanguage(normalizedLocale)
     }, [status?.current_user?.locale])
 
+    // Global 401 interception: auto-logout and redirect to login
+    useEffect(() => {
+        function handleUnauthorized() {
+            // Avoid redirect loops — don't redirect if already on an auth page
+            if (isAuthRoute(window.location.pathname)) {
+                return
+            }
+
+            // Clear local auth state
+            setStatus(null)
+            if (typeof window !== 'undefined') {
+                try {
+                    window.sessionStorage.removeItem(PRODUCT_AUTH_STATUS_STORAGE_KEY)
+                } catch {
+                    // ignore
+                }
+            }
+
+            // Redirect to login
+            window.location.href = '/auth/login'
+        }
+
+        window.addEventListener(PRODUCT_AUTH_UNAUTHORIZED_EVENT, handleUnauthorized)
+        return () => {
+            window.removeEventListener(PRODUCT_AUTH_UNAUTHORIZED_EVENT, handleUnauthorized)
+        }
+    }, [])
+
     const initialize = useCallback(async (payload: { username: string; password: string; email: string; locale: string }) => {
         setIsSubmitting(true)
         try {

console/src/features/product-auth/product-auth-provider.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react'
+
+const DEFAULT_IDLE_TIMEOUT_MS = 30 * 60 * 1000 // 30 minutes
+
+/**
+ * Calls `onIdle` after the user has been idle (no mouse, keyboard, touch, or scroll events)
+ * for the specified duration. The timer resets on any user interaction.
+ */
+export function useIdleTimeout(
+    onIdle: () => void,
+    { timeoutMs = DEFAULT_IDLE_TIMEOUT_MS, enabled = true }: { timeoutMs?: number; enabled?: boolean } = {},
+) {
+    const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const onIdleRef = useRef(onIdle)
+
+    // Keep the callback ref up to date without restarting the timer
+    onIdleRef.current = onIdle
+
+    useEffect(() => {
+        if (!enabled) {
+            return
+        }
+
+        function resetTimer() {
+            if (idleTimerRef.current) {
+                clearTimeout(idleTimerRef.current)
+            }
+
+            idleTimerRef.current = setTimeout(() => {
+                onIdleRef.current()
+            }, timeoutMs)
+        }
+
+        const events: Array<keyof WindowEventMap> = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll']
+
+        for (const event of events) {
+            window.addEventListener(event, resetTimer, { passive: true })
+        }
+
+        // Start the initial timer
+        resetTimer()
+
+        return () => {
+            if (idleTimerRef.current) {
+                clearTimeout(idleTimerRef.current)
+            }
+
+            for (const event of events) {
+                window.removeEventListener(event, resetTimer)
+            }
+        }
+    }, [timeoutMs, enabled])
+}