Simplify login page and remove API key option

✨ Changes:
- Removed dual authentication options (HF OAuth vs API key)
- Simplified to single 'Access Research Platform' button
- Removed API key input form and JavaScript handling
- Cleaner, more focused user experience
- Back to original simple design without complexity

The login page now has a single clear path for users.

backend/dependencies.py

@@ -111,18 +111,6 @@ 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")
@@ -179,18 +167,6 @@ 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}")
@@ -209,19 +185,11 @@ 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,90 +160,32 @@
               actionable insights for AI system analysis and robustness testing.
             </p>
 
-            <!-- 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"
+            <!-- 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"
                 >
-                  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>
+                  <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>
               </div>
             </div>
           </div>
@@ -266,51 +208,5 @@
         </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,8 +11,6 @@ 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,
@@ -27,11 +25,6 @@ import {
   Zap,
   Clock,
   DollarSign,
-  Key,
-  Shield,
-  Eye,
-  EyeOff,
-  Trash2,
 } from "lucide-react";
 import { useKGDisplayMode } from "@/context/KGDisplayModeContext";
 import { useModelPreferences } from "@/hooks/useModelPreferences";
@@ -54,23 +47,6 @@ 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);
@@ -138,11 +114,6 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
       name: "Models",
       icon: Brain,
     },
-    {
-      id: "authentication",
-      name: "Authentication",
-      icon: Shield,
-    },
     {
       id: "general",
       name: "General",
@@ -378,197 +349,6 @@ 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>
@@ -651,8 +431,6 @@ 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,26 +24,11 @@ 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 baseHeaders: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  // Add API key header if user is in API key mode
-  if (apiKey && authMode === "api_key") {
-    baseHeaders["X-OpenAI-API-Key"] = apiKey;
-  }
-
-  const headers = {
-    ...baseHeaders,
-    ...options?.headers,
-  };
-
   const response = await fetch(`${API_BASE}${endpoint}`, {
-    headers,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
     ...options,
   });