feat: Implement comprehensive authentication system (#99)

* feat: implement JWT-based authentication system

- Add bcrypt password hashing and JWT token generation
- Create blocking auth modals for login and setup
- Add authentication management to General Settings
- Implement API routes for login, verify, setup, and credential management
- Add AuthProvider and AuthGuard components
- Support first-time setup and persistent authentication
- Store credentials securely in .env file

* feat: add option to skip enabling auth during setup

- Add toggle in SetupModal to choose whether to enable authentication immediately
- Users can set up credentials but keep authentication disabled initially
- Authentication can be enabled/disabled later through General Settings
- Maintains flexibility for users who want to configure auth gradually

* fix: allow proceeding without password when auth is disabled

- Make password fields optional when authentication is disabled in setup
- Update button validation to only require password when auth is enabled
- Modify API to handle optional password parameter
- Update hasCredentials logic to work with username-only setup
- Users can now complete setup with just username when auth is disabled
- Password can be added later when enabling authentication

* feat: don't store credentials when authentication is disabled

- When auth is disabled, no username or password is stored
- Setup modal only requires credentials when authentication is enabled
- Disabling authentication clears all stored credentials
- Users can skip authentication entirely without storing any data
- Clean separation between enabled/disabled authentication states

* feat: add setup completed flag to prevent modal on every load

- Add AUTH_SETUP_COMPLETED flag to track when user has completed setup
- Setup modal only appears when setupCompleted is false
- Both enabled and disabled auth setups mark setup as completed
- Clean .env file when authentication is disabled (no empty credential lines)
- Prevents setup modal from appearing on every page load after user decision

* fix: add missing Authentication tab button in settings modal

- Authentication tab button was missing from the tabs navigation
- Users couldn't access authentication settings
- Added Authentication tab button with proper styling and click handler
- Authentication settings are now accessible through the settings modal

* fix: properly load and display authentication settings

- Add setupCompleted state variable to track setup status
- Update loadAuthCredentials to include setupCompleted field
- Fix authentication status display logic to show correct state
- Show proper status when auth is disabled but setup is completed
- Enable toggle only when setup is completed (not just when credentials exist)
- Settings now correctly reflect the actual authentication state

* fix: handle empty FILTERS environment variable

- Add check for empty or invalid FILTERS JSON before parsing
- Prevents 'Unexpected end of JSON input' error when FILTERS is empty
- Return null filters instead of throwing parse error
- Clean up empty FILTERS line from .env file
- Fixes console error when loading settings modal

* fix: load authentication credentials when settings modal opens

- Add loadAuthCredentials() call to useEffect when modal opens
- Authentication settings were not loading because the function wasn't being called
- Now properly loads auth configuration when settings modal is opened
- Settings will display the correct authentication status and state

* fix: prevent multiple JWT secret generation with caching

- Add JWT secret caching to prevent race conditions
- Multiple API calls were generating duplicate JWT secrets
- Now caches secret after first generation/read
- Clean up duplicate JWT_SECRET lines from .env file
- Prevents .env file from being cluttered with multiple secrets

* feat: auto-login user after setup with authentication enabled

- When user sets up authentication with credentials, automatically log them in
- Prevents need to manually log in after setup completion
- Setup modal now calls login API after successful setup when auth is enabled
- AuthGuard no longer reloads page after setup, just refreshes config
- Seamless user experience from setup to authenticated state

* fix: resolve console errors and improve auth flow

- Fix 401 Unauthorized error by checking setup status before auth verification
- AuthProvider now checks if setup is completed before attempting to verify auth
- Prevents unnecessary auth verification calls when no credentials exist
- Add webpack polling configuration to fix WebSocket HMR issues
- Improves development experience when accessing from different IPs
- Eliminates console errors during initial setup flow

* fix: resolve build errors and linting issues

- Fix TypeScript ESLint error: use optional chain expression in auth.ts
- Fix React Hook warning: add missing 'isRunning' dependency to useEffect in Terminal.tsx
- Build now compiles successfully without any errors or warnings
- All linting rules are now satisfied

Author: michelroegl-brunner

.env.example

@@ -21,3 +21,8 @@ WEBSOCKET_PORT="3001"
 GITHUB_TOKEN=
 SAVE_FILTER=false
 FILTERS=
+AUTH_USERNAME=
+AUTH_PASSWORD_HASH= 
+AUTH_ENABLED=false
+AUTH_SETUP_COMPLETED=false
+JWT_SECRET=

next.config.js

@@ -42,6 +42,16 @@ const config = {
     'http://172.31.*',
     'http://192.168.*',
   ],
+
+  webpack: (config, { dev, isServer }) => {
+    if (dev && !isServer) {
+      config.watchOptions = {
+        poll: 1000,
+        aggregateTimeout: 300,
+      };
+    }
+    return config;
+  },
 };
 
 export default config;

package-lock.json

@@ -33,9 +33,11 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
+    "bcryptjs": "^3.0.2",
     "better-sqlite3": "^12.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.545.0",
     "next": "^15.5.3",
     "node-pty": "^1.0.0",
@@ -56,7 +58,9 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/bcryptjs": "^2.4.6",
     "@types/better-sqlite3": "^7.6.8",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.7.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package.json

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import { useAuth } from './AuthProvider';
+import { AuthModal } from './AuthModal';
+import { SetupModal } from './SetupModal';
+
+interface AuthGuardProps {
+  children: ReactNode;
+}
+
+interface AuthConfig {
+  username: string | null;
+  enabled: boolean;
+  hasCredentials: boolean;
+  setupCompleted: boolean;
+}
+
+export function AuthGuard({ children }: AuthGuardProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const [authConfig, setAuthConfig] = useState<AuthConfig | null>(null);
+  const [configLoading, setConfigLoading] = useState(true);
+  const [setupCompleted, setSetupCompleted] = useState(false);
+
+  const handleSetupComplete = async () => {
+    setSetupCompleted(true);
+    // Refresh auth config without reloading the page
+    await fetchAuthConfig();
+  };
+
+  const fetchAuthConfig = async () => {
+    try {
+      const response = await fetch('/api/settings/auth-credentials');
+      if (response.ok) {
+        const config = await response.json() as AuthConfig;
+        setAuthConfig(config);
+      }
+    } catch (error) {
+      console.error('Error fetching auth config:', error);
+    } finally {
+      setConfigLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void fetchAuthConfig();
+  }, []);
+
+  // Show loading while checking auth status
+  if (isLoading || configLoading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-4"></div>
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show setup modal if setup has not been completed yet
+  if (authConfig && !authConfig.setupCompleted && !setupCompleted) {
+    return <SetupModal isOpen={true} onComplete={handleSetupComplete} />;
+  }
+
+  // Show auth modal if auth is enabled but user is not authenticated
+  if (authConfig && authConfig.enabled && !isAuthenticated) {
+    return <AuthModal isOpen={true} />;
+  }
+
+  // Render children if authenticated or auth is disabled
+  return <>{children}</>;
+}