🔑 Add dual authentication system: API key + OAuth

✨ Features Added:
- Dual authentication options on login page
- Users can choose between own API key or HF OAuth
- API key stored locally in browser
- Automatic API key header injection in all requests
- Authentication management in Settings modal

🔧 Technical Implementation:
- Updated login page with two authentication options
- Modified fetchApi to include X-OpenAI-API-Key header
- Enhanced backend auth dependencies to support API key mode
- Added comprehensive auth section in SettingsModal
- API key validation and local storage management

🎯 User Benefits:
- No forced authentication for users with own API keys
- Flexible authentication based on user preference
- Clear indication of current auth method
- Easy API key management and removal

💡 Security Features:
- API keys stored only locally
- Masked API key display in settings
- Confirmation dialogs for key removal
- Proper validation of API key format

backend/dependencies.py

@@ -111,6 +111,18 @@ def get_current_user_optional(request: Request) -> Optional[Dict[str, Any]]:
         logger.debug("🏠 Auth disabled - no user required")
         return None
     
+    # Check for API key mode first
+    api_key_header = request.headers.get("X-OpenAI-API-Key")
+    if api_key_header and api_key_header.startswith("sk-"):
+        logger.info("🔑 User authenticated with API key mode")
+        return {
+            "id": "api_key_user",
+            "username": "api_key_user",
+            "name": "API Key User",
+            "auth_method": "api_key",
+            "api_key": api_key_header
+        }
+    
     # Try to get user from session
     try:
         user = request.session.get("user")
@@ -167,6 +179,18 @@ def get_current_user_required(request: Request) -> Dict[str, Any]:
             "auth_method": "local_dev"
         }
     
+    # Check for API key mode first
+    api_key_header = request.headers.get("X-OpenAI-API-Key")
+    if api_key_header and api_key_header.startswith("sk-"):
+        logger.info("🔑 User authenticated with API key mode")
+        return {
+            "id": "api_key_user",
+            "username": "api_key_user",
+            "name": "API Key User",
+            "auth_method": "api_key",
+            "api_key": api_key_header
+        }
+    
     user = get_current_user_optional(request)
     if not user:
         logger.warning(f"🚫 Authentication required for {request.url.path}")
@@ -185,11 +209,19 @@ def get_current_user_required(request: Request) -> Dict[str, Any]:
 def require_auth_in_hf_spaces(request: Request) -> None:
     """
     Dependency that enforces authentication only in HF Spaces.
+    Supports both API key mode and OAuth login mode.
     Raises 401 if in HF Spaces and user is not authenticated.
     """
     from utils.environment import should_enable_auth
     
     if should_enable_auth():
+        # Check for API key mode first
+        api_key_header = request.headers.get("X-OpenAI-API-Key")
+        if api_key_header and api_key_header.startswith("sk-"):
+            # User is using API key mode, allow access
+            logger.info("🔑 API key authentication successful")
+            return
+        
         user = get_current_user_optional(request)
         if not user:
             logger.warning(f"🚫 HF Spaces requires authentication for {request.url.path}")

backend/templates/login.html

@@ -160,32 +160,90 @@
               actionable insights for AI system analysis and robustness testing.
             </p>
 
-            <!-- CTA Section -->
-            <div class="space-y-4">
-              <a
-                href="/auth/login"
-                class="btn-primary inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 group"
-              >
-                Access Research Platform
-                <svg
-                  class="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
+            <!-- Access Options -->
+            <div class="space-y-6">
+              <!-- Option 1: Use Our Service -->
+              <div class="space-y-4">
+                <h3 class="text-lg font-semibold text-foreground">
+                  Option 1: Use Our Service
+                </h3>
+                <a
+                  href="/auth/login"
+                  class="btn-primary inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 group w-full"
                 >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 7l5 5m0 0l-5 5m5-5H6"
-                  ></path>
-                </svg>
-              </a>
-
-              <div class="glass-card p-4 rounded-lg">
-                <p class="text-sm text-muted-foreground">
-                  Authentication required for responsible AI resource usage
-                </p>
+                  Login with Hugging Face
+                  <svg
+                    class="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M13 7l5 5m0 0l-5 5m5-5H6"
+                    ></path>
+                  </svg>
+                </a>
+                <div class="glass-card p-4 rounded-lg">
+                  <p class="text-sm text-muted-foreground">
+                    Use our OpenAI API credits with authentication for
+                    responsible usage tracking
+                  </p>
+                </div>
+              </div>
+
+              <!-- Divider -->
+              <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                  <div class="w-full border-t border-border"></div>
+                </div>
+                <div class="relative flex justify-center text-xs uppercase">
+                  <span class="bg-background px-2 text-muted-foreground"
+                    >Or</span
+                  >
+                </div>
+              </div>
+
+              <!-- Option 2: Use Your Own API Key -->
+              <div class="space-y-4">
+                <h3 class="text-lg font-semibold text-foreground">
+                  Option 2: Use Your Own OpenAI API Key
+                </h3>
+                <div class="space-y-3">
+                  <input
+                    type="password"
+                    id="apiKey"
+                    placeholder="sk-..."
+                    class="w-full px-4 py-3 border border-input rounded-lg bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                  />
+                  <button
+                    id="useApiKeyBtn"
+                    class="w-full inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 group bg-secondary text-secondary-foreground hover:bg-secondary/80"
+                  >
+                    Continue with Your API Key
+                    <svg
+                      class="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M13 7l5 5m0 0l-5 5m5-5H6"
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+                <div class="glass-card p-4 rounded-lg">
+                  <p class="text-sm text-muted-foreground">
+                    Your API key will be stored locally and used directly with
+                    OpenAI. No authentication required.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
@@ -208,5 +266,51 @@
         </div>
       </div>
     </div>
+
+    <script>
+      // Handle API key submission
+      document
+        .getElementById("useApiKeyBtn")
+        .addEventListener("click", function () {
+          const apiKey = document.getElementById("apiKey").value.trim();
+
+          if (!apiKey) {
+            alert("Please enter your OpenAI API key");
+            return;
+          }
+
+          if (!apiKey.startsWith("sk-")) {
+            alert("Please enter a valid OpenAI API key (starts with sk-)");
+            return;
+          }
+
+          // Store API key in localStorage
+          localStorage.setItem("openai_api_key", apiKey);
+          localStorage.setItem("auth_mode", "api_key");
+
+          // Redirect to main application
+          window.location.href = "/";
+        });
+
+      // Allow Enter key to submit API key
+      document
+        .getElementById("apiKey")
+        .addEventListener("keypress", function (e) {
+          if (e.key === "Enter") {
+            document.getElementById("useApiKeyBtn").click();
+          }
+        });
+
+      // Check if user already has an API key stored
+      window.addEventListener("load", function () {
+        const storedApiKey = localStorage.getItem("openai_api_key");
+        const authMode = localStorage.getItem("auth_mode");
+
+        if (storedApiKey && authMode === "api_key") {
+          // User already has API key, redirect to main app
+          window.location.href = "/";
+        }
+      });
+    </script>
   </body>
 </html>

frontend/src/components/shared/SettingsModal.tsx

@@ -11,6 +11,8 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Settings,
   Palette,
@@ -25,6 +27,11 @@ import {
   Zap,
   Clock,
   DollarSign,
+  Key,
+  Shield,
+  Eye,
+  EyeOff,
+  Trash2,
 } from "lucide-react";
 import { useKGDisplayMode } from "@/context/KGDisplayModeContext";
 import { useModelPreferences } from "@/hooks/useModelPreferences";
@@ -47,6 +54,23 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     updateModelPreference,
     isLoading,
   } = useModelPreferences();
+  
+  // Authentication state
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [apiKey, setApiKey] = useState("");
+  const [authMode, setAuthMode] = useState<string | null>(null);
+  
+  // Load auth state on mount
+  React.useEffect(() => {
+    const storedApiKey = localStorage.getItem('openai_api_key');
+    const storedAuthMode = localStorage.getItem('auth_mode');
+    if (storedApiKey) {
+      setApiKey(storedApiKey);
+    }
+    if (storedAuthMode) {
+      setAuthMode(storedAuthMode);
+    }
+  }, []);
 
   const handleThemeChange = (theme: Theme) => {
     setCurrentTheme(theme);
@@ -114,6 +138,11 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
       name: "Models",
       icon: Brain,
     },
+    {
+      id: "authentication",
+      name: "Authentication",
+      icon: Shield,
+    },
     {
       id: "general",
       name: "General",
@@ -349,6 +378,197 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     </div>
   );
 
+  // Authentication functions
+  const handleApiKeyUpdate = () => {
+    if (!apiKey.trim()) {
+      alert('Please enter an API key');
+      return;
+    }
+    
+    if (!apiKey.startsWith('sk-')) {
+      alert('Please enter a valid OpenAI API key (starts with sk-)');
+      return;
+    }
+    
+    localStorage.setItem('openai_api_key', apiKey);
+    localStorage.setItem('auth_mode', 'api_key');
+    setAuthMode('api_key');
+    
+    // Reload the page to update authentication state
+    window.location.reload();
+  };
+  
+  const handleRemoveApiKey = () => {
+    if (confirm('Are you sure you want to remove your API key? You will need to authenticate again.')) {
+      localStorage.removeItem('openai_api_key');
+      localStorage.removeItem('auth_mode');
+      setApiKey('');
+      setAuthMode(null);
+      
+      // Redirect to login page
+      window.location.href = '/auth/login-page';
+    }
+  };
+  
+  const renderAuthenticationSection = () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Authentication Method</h3>
+        
+        {authMode === 'api_key' ? (
+          // Current API Key Section
+          <Card className="border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-950/50">
+            <CardContent className="p-4">
+              <div className="flex items-start justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900">
+                    <Key className="h-4 w-4 text-green-600 dark:text-green-400" />
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-green-900 dark:text-green-100">
+                      Using Your OpenAI API Key
+                    </h4>
+                    <p className="text-sm text-green-700 dark:text-green-300">
+                      API Key: {apiKey.substring(0, 7)}...{apiKey.substring(apiKey.length - 4)}
+                    </p>
+                    <p className="text-xs text-green-600 dark:text-green-400 mt-1">
+                      Your API key is stored locally and sent directly to OpenAI
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleRemoveApiKey}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Remove
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ) : authMode === 'huggingface_oauth' ? (
+          // HF OAuth Section
+          <Card className="border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900">
+                  <Shield className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                </div>
+                <div>
+                  <h4 className="font-medium text-blue-900 dark:text-blue-100">
+                    Authenticated with Hugging Face
+                  </h4>
+                  <p className="text-sm text-blue-700 dark:text-blue-300">
+                    Using our provided OpenAI API credits
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          // No Authentication Section
+          <Card className="border-yellow-200 bg-yellow-50/50 dark:border-yellow-800 dark:bg-yellow-950/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="p-2 rounded-lg bg-yellow-100 dark:bg-yellow-900">
+                  <Key className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                </div>
+                <div>
+                  <h4 className="font-medium text-yellow-900 dark:text-yellow-100">
+                    Add Your OpenAI API Key
+                  </h4>
+                  <p className="text-sm text-yellow-700 dark:text-yellow-300">
+                    Use your own API key to access AgentGraph features
+                  </p>
+                </div>
+              </div>
+              
+              <div className="space-y-3">
+                <div>
+                  <Label htmlFor="api-key">OpenAI API Key</Label>
+                  <div className="flex gap-2 mt-1">
+                    <div className="relative flex-1">
+                      <Input
+                        id="api-key"
+                        type={showApiKey ? "text" : "password"}
+                        placeholder="sk-..."
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
+                        className="pr-10"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
+                        onClick={() => setShowApiKey(!showApiKey)}
+                      >
+                        {showApiKey ? (
+                          <EyeOff className="h-4 w-4" />
+                        ) : (
+                          <Eye className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
+                    <Button onClick={handleApiKeyUpdate} disabled={!apiKey.trim()}>
+                      Save
+                    </Button>
+                  </div>
+                </div>
+                
+                <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
+                  <p>• Your API key will be stored locally in your browser</p>
+                  <p>• It will be sent directly to OpenAI for API calls</p>
+                  <p>• No authentication with our service required</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+      
+      <Separator />
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Authentication Options</h3>
+        <div className="grid grid-cols-1 gap-3">
+          <Card className="cursor-pointer transition-all hover:shadow-md hover:bg-muted/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-muted">
+                  <Key className="h-4 w-4" />
+                </div>
+                <div>
+                  <h4 className="font-medium">Use Your Own API Key</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Provide your OpenAI API key for direct access
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          
+          <Card className="cursor-pointer transition-all hover:shadow-md hover:bg-muted/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-muted">
+                  <Shield className="h-4 w-4" />
+                </div>
+                <div>
+                  <h4 className="font-medium">Login with Hugging Face</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Use our provided API credits with authentication
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+
   const renderGeneralSection = () => (
     <div className="space-y-6">
       <div>
@@ -431,6 +651,8 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
         return renderAppearanceSection();
       case "models":
         return renderModelsSection();
+      case "authentication":
+        return renderAuthenticationSection();
       case "general":
         return renderGeneralSection();
       default:

frontend/src/lib/api.ts

@@ -24,11 +24,22 @@ async function fetchApi<T>(
   options?: RequestInit,
   retryCount = 0
 ): Promise<T> {
+  // Get API key from localStorage if available
+  const apiKey = localStorage.getItem('openai_api_key');
+  const authMode = localStorage.getItem('auth_mode');
+  
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...options?.headers,
+  };
+  
+  // Add API key header if user is in API key mode
+  if (apiKey && authMode === 'api_key') {
+    headers["X-OpenAI-API-Key"] = apiKey;
+  }
+  
   const response = await fetch(`${API_BASE}${endpoint}`, {
-    headers: {
-      "Content-Type": "application/json",
-      ...options?.headers,
-    },
+    headers,
     ...options,
   });