feat: Add persistent session authentication with configurable duration

- Implement persistent session authentication with httpOnly cookies
- Add configurable session duration (1-365 days) in settings
- Add session expiration display in settings modal
- Add logout button next to theme toggle
- Enhance token verification to return expiration time
- Add retry logic for failed auth checks
- Add comprehensive authentication documentation to help modal
- Improve session restoration on page load

Author: michelroegl-brunner

src/app/_components/AuthProvider.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react';
 
 interface AuthContextType {
   isAuthenticated: boolean;
   username: string | null;
   isLoading: boolean;
+  expirationTime: number | null;
   login: (username: string, password: string) => Promise<boolean>;
   logout: () => void;
   checkAuth: () => Promise<void>;
@@ -21,8 +22,9 @@ export function AuthProvider({ children }: AuthProviderProps) {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [username, setUsername] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [expirationTime, setExpirationTime] = useState<number | null>(null);
 
-  const checkAuth = async () => {
+  const checkAuthInternal = async (retryCount = 0) => {
     try {
       // First check if setup is completed
       const setupResponse = await fetch('/api/settings/auth-credentials');
@@ -33,30 +35,60 @@ export function AuthProvider({ children }: AuthProviderProps) {
         if (!setupData.setupCompleted || !setupData.enabled) {
           setIsAuthenticated(false);
           setUsername(null);
+          setExpirationTime(null);
           setIsLoading(false);
           return;
         }
       }
 
       // Only verify authentication if setup is completed and auth is enabled
-      const response = await fetch('/api/auth/verify');
+      const response = await fetch('/api/auth/verify', {
+        credentials: 'include', // Ensure cookies are sent
+      });
       if (response.ok) {
-        const data = await response.json() as { username: string };
+        const data = await response.json() as { 
+          username: string; 
+          expirationTime?: number | null;
+          timeUntilExpiration?: number | null;
+        };
         setIsAuthenticated(true);
         setUsername(data.username);
+        setExpirationTime(data.expirationTime ?? null);
       } else {
         setIsAuthenticated(false);
         setUsername(null);
+        setExpirationTime(null);
+        
+        // Retry logic for failed auth checks (max 2 retries)
+        if (retryCount < 2) {
+          setTimeout(() => {
+            void checkAuthInternal(retryCount + 1);
+          }, 500);
+          return;
+        }
       }
     } catch (error) {
       console.error('Error checking auth:', error);
       setIsAuthenticated(false);
       setUsername(null);
+      setExpirationTime(null);
+      
+      // Retry logic for network errors (max 2 retries)
+      if (retryCount < 2) {
+        setTimeout(() => {
+          void checkAuthInternal(retryCount + 1);
+        }, 500);
+        return;
+      }
     } finally {
       setIsLoading(false);
     }
   };
 
+  const checkAuth = useCallback(() => {
+    return checkAuthInternal(0);
+  }, []);
+
   const login = async (username: string, password: string): Promise<boolean> => {
     try {
       const response = await fetch('/api/auth/login', {
@@ -65,12 +97,16 @@ export function AuthProvider({ children }: AuthProviderProps) {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ username, password }),
+        credentials: 'include', // Ensure cookies are received
       });
 
       if (response.ok) {
         const data = await response.json() as { username: string };
         setIsAuthenticated(true);
         setUsername(data.username);
+        
+        // Check auth again to get expiration time
+        await checkAuth();
         return true;
       } else {
         const errorData = await response.json();
@@ -88,18 +124,20 @@ export function AuthProvider({ children }: AuthProviderProps) {
     document.cookie = 'auth-token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
     setIsAuthenticated(false);
     setUsername(null);
+    setExpirationTime(null);
   };
 
   useEffect(() => {
     void checkAuth();
-  }, []);
+  }, [checkAuth]);
 
   return (
     <AuthContext.Provider
       value={{
         isAuthenticated,
         username,
         isLoading,
+        expirationTime,
         login,
         logout,
         checkAuth,

src/app/_components/GeneralSettingsModal.tsx

@@ -8,6 +8,7 @@ import { ContextualHelpIcon } from './ContextualHelpIcon';
 import { useTheme } from './ThemeProvider';
 import { useRegisterModal } from './modal/ModalStackProvider';
 import { api } from '~/trpc/react';
+import { useAuth } from './AuthProvider';
 
 interface GeneralSettingsModalProps {
   isOpen: boolean;
@@ -17,7 +18,9 @@ interface GeneralSettingsModalProps {
 export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalProps) {
   useRegisterModal(isOpen, { id: 'general-settings-modal', allowEscape: true, onClose });
   const { theme, setTheme } = useTheme();
+  const { isAuthenticated, expirationTime, checkAuth } = useAuth();
   const [activeTab, setActiveTab] = useState<'general' | 'github' | 'auth' | 'auto-sync'>('general');
+  const [sessionExpirationDisplay, setSessionExpirationDisplay] = useState<string>('');
   const [githubToken, setGithubToken] = useState('');
   const [saveFilter, setSaveFilter] = useState(false);
   const [savedFilters, setSavedFilters] = useState<any>(null);
@@ -34,6 +37,7 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
   const [authHasCredentials, setAuthHasCredentials] = useState(false);
   const [authSetupCompleted, setAuthSetupCompleted] = useState(false);
   const [authLoading, setAuthLoading] = useState(false);
+  const [sessionDurationDays, setSessionDurationDays] = useState(7);
 
   // Auto-sync state
   const [autoSyncEnabled, setAutoSyncEnabled] = useState(false);
@@ -214,11 +218,12 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
     try {
       const response = await fetch('/api/settings/auth-credentials');
       if (response.ok) {
-        const data = await response.json() as { username: string; enabled: boolean; hasCredentials: boolean; setupCompleted: boolean };
+        const data = await response.json() as { username: string; enabled: boolean; hasCredentials: boolean; setupCompleted: boolean; sessionDurationDays?: number };
         setAuthUsername(data.username ?? '');
         setAuthEnabled(data.enabled ?? false);
         setAuthHasCredentials(data.hasCredentials ?? false);
         setAuthSetupCompleted(data.setupCompleted ?? false);
+        setSessionDurationDays(data.sessionDurationDays ?? 7);
       }
     } catch (error) {
       console.error('Error loading auth credentials:', error);
@@ -227,6 +232,64 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
     }
   };
 
+  // Format expiration time display
+  const formatExpirationTime = (expTime: number | null): string => {
+    if (!expTime) return 'No active session';
+    
+    const now = Date.now();
+    const timeUntilExpiration = expTime - now;
+    
+    if (timeUntilExpiration <= 0) {
+      return 'Session expired';
+    }
+    
+    const days = Math.floor(timeUntilExpiration / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((timeUntilExpiration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((timeUntilExpiration % (1000 * 60 * 60)) / (1000 * 60));
+    
+    const parts: string[] = [];
+    if (days > 0) {
+      parts.push(`${days} ${days === 1 ? 'day' : 'days'}`);
+    }
+    if (hours > 0) {
+      parts.push(`${hours} ${hours === 1 ? 'hour' : 'hours'}`);
+    }
+    if (minutes > 0 && days === 0) {
+      parts.push(`${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`);
+    }
+    
+    if (parts.length === 0) {
+      return 'Less than a minute';
+    }
+    
+    return parts.join(', ');
+  };
+
+  // Update expiration display periodically
+  useEffect(() => {
+    const updateExpirationDisplay = () => {
+      if (expirationTime) {
+        setSessionExpirationDisplay(formatExpirationTime(expirationTime));
+      } else {
+        setSessionExpirationDisplay('');
+      }
+    };
+
+    updateExpirationDisplay();
+    
+    // Update every minute
+    const interval = setInterval(updateExpirationDisplay, 60000);
+    
+    return () => clearInterval(interval);
+  }, [expirationTime]);
+
+  // Refresh auth when tab changes to auth tab
+  useEffect(() => {
+    if (activeTab === 'auth' && isOpen) {
+      void checkAuth();
+    }
+  }, [activeTab, isOpen, checkAuth]);
+
   const saveAuthCredentials = async () => {
     if (authPassword !== authConfirmPassword) {
       setMessage({ type: 'error', text: 'Passwords do not match' });
@@ -265,6 +328,41 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
     }
   };
 
+  const saveSessionDuration = async (days: number) => {
+    if (days < 1 || days > 365) {
+      setMessage({ type: 'error', text: 'Session duration must be between 1 and 365 days' });
+      return;
+    }
+
+    setAuthLoading(true);
+    setMessage(null);
+    
+    try {
+      const response = await fetch('/api/settings/auth-credentials', {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ sessionDurationDays: days }),
+      });
+
+      if (response.ok) {
+        setMessage({ type: 'success', text: `Session duration updated to ${days} days` });
+        setSessionDurationDays(days);
+        setTimeout(() => setMessage(null), 3000);
+      } else {
+        const errorData = await response.json();
+        setMessage({ type: 'error', text: errorData.error ?? 'Failed to update session duration' });
+        setTimeout(() => setMessage(null), 3000);
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to update session duration' });
+      setTimeout(() => setMessage(null), 3000);
+    } finally {
+      setAuthLoading(false);
+    }
+  };
+
   const toggleAuthEnabled = async (enabled: boolean) => {
     setAuthLoading(true);
     setMessage(null);
@@ -662,7 +760,10 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
           {activeTab === 'auth' && (
             <div className="space-y-4 sm:space-y-6">
               <div>
-                <h3 className="text-base sm:text-lg font-medium text-foreground mb-3 sm:mb-4">Authentication Settings</h3>
+                <div className="flex items-center gap-2 mb-3 sm:mb-4">
+                  <h3 className="text-base sm:text-lg font-medium text-foreground">Authentication Settings</h3>
+                  <ContextualHelpIcon section="auth-settings" tooltip="Help with Authentication Settings" />
+                </div>
                 <p className="text-sm sm:text-base text-muted-foreground mb-4">
                   Configure authentication to secure access to your application.
                 </p>
@@ -699,6 +800,68 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
                     </div>
                   </div>
 
+                  {isAuthenticated && expirationTime && (
+                    <div className="p-4 border border-border rounded-lg">
+                      <h4 className="font-medium text-foreground mb-2">Session Information</h4>
+                      <div className="space-y-2">
+                        <div>
+                          <p className="text-sm text-muted-foreground">Session expires in:</p>
+                          <p className="text-sm font-medium text-foreground">{sessionExpirationDisplay}</p>
+                        </div>
+                        <div>
+                          <p className="text-sm text-muted-foreground">Expiration date:</p>
+                          <p className="text-sm font-medium text-foreground">
+                            {new Date(expirationTime).toLocaleString()}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="p-4 border border-border rounded-lg">
+                    <h4 className="font-medium text-foreground mb-2">Session Duration</h4>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Configure how long user sessions should last before requiring re-authentication.
+                    </p>
+                    
+                    <div className="space-y-3">
+                      <div>
+                        <label htmlFor="session-duration" className="block text-sm font-medium text-foreground mb-1">
+                          Session Duration (days)
+                        </label>
+                        <div className="flex items-center gap-3">
+                          <Input
+                            id="session-duration"
+                            type="number"
+                            min="1"
+                            max="365"
+                            placeholder="Enter days"
+                            value={sessionDurationDays}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                              const value = parseInt(e.target.value, 10);
+                              if (!isNaN(value)) {
+                                setSessionDurationDays(value);
+                              }
+                            }}
+                            disabled={authLoading || !authSetupCompleted}
+                            className="w-32"
+                          />
+                          <span className="text-sm text-muted-foreground">days (1-365)</span>
+                          <Button
+                            onClick={() => saveSessionDuration(sessionDurationDays)}
+                            disabled={authLoading || !authSetupCompleted}
+                            size="sm"
+                          >
+                            Save
+                          </Button>
+                        </div>
+                        <p className="text-xs text-muted-foreground mt-2">
+                          Note: This setting applies to new logins. Current sessions will not be affected.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
                   <div className="p-4 border border-border rounded-lg">
                     <h4 className="font-medium text-foreground mb-2">Update Credentials</h4>
                     <p className="text-sm text-muted-foreground mb-4">