Simplify OAuth: server-side cookies + iframe detection

- Removed @huggingface/hub (unnecessary complexity)
- Server-side OAuth via /auth/login (cookies work on direct access)
- In iframe: show "Open ML Agent" button linking to direct Space URL
- In dev mode: bypass auth entirely (no OAUTH_CLIENT_ID)
- 3 states on welcome screen: iframe→link, direct→sign in, authed→start

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
-        "@huggingface/hub": "^2.8.1",
         "@mui/icons-material": "^6.1.0",
         "@mui/material": "^6.1.0",
         "react": "^18.3.1",
@@ -1020,30 +1019,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@huggingface/hub": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-2.8.1.tgz",
-      "integrity": "sha512-VAsXdMiIHPteXQJhrwaBEiePTWiJ0zBSymHdnX4J+AijjNN0h3RzGfkKemXcu75gu/TmRLFY9l8+2Tkdmpis0w==",
-      "license": "MIT",
-      "dependencies": {
-        "@huggingface/tasks": "^0.19.82"
-      },
-      "bin": {
-        "hfjs": "dist/cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "cli-progress": "^3.12.0"
-      }
-    },
-    "node_modules/@huggingface/tasks": {
-      "version": "0.19.84",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.84.tgz",
-      "integrity": "sha512-nn8DtUW7EZb4QcV+AdNbggPDbvaN32+FldkJakDVml0Aa18fSWjxePdxaRejfTlJYX9oGanOjQKj++NDVRYFXw==",
-      "license": "MIT"
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2242,16 +2217,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2460,19 +2425,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/cli-progress": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
-      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "string-width": "^4.2.3"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2638,13 +2590,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/error-ex": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
@@ -3325,16 +3270,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -5041,21 +4976,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -5070,19 +4990,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",

frontend/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@huggingface/hub": "^2.8.1",
     "@mui/icons-material": "^6.1.0",
     "@mui/material": "^6.1.0",
     "react": "^18.3.1",

frontend/src/components/WelcomeScreen/WelcomeScreen.tsx

@@ -5,12 +5,13 @@ import {
   Button,
   CircularProgress,
   Alert,
+  Link,
 } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
 import { apiFetch } from '@/utils/api';
-import { getStoredToken, triggerLogin } from '@/hooks/useAuth';
-import { logger } from '@/utils/logger';
+import { isInIframe, triggerLogin } from '@/hooks/useAuth';
 
 /** HF brand orange */
 const HF_ORANGE = '#FF9D00';
@@ -21,15 +22,20 @@ export default function WelcomeScreen() {
   const [isCreating, setIsCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const inIframe = isInIframe();
+  const isAuthenticated = user?.authenticated;
+  const isDevUser = user?.username === 'dev';
+
   const handleStart = useCallback(async () => {
     if (isCreating) return;
 
-    // In production (OAuth enabled): check for stored token, trigger login if missing
-    // In dev mode (user already set by useAuth): skip login, go straight to session
-    const isDevUser = user?.username === 'dev';
-    if (!isDevUser && !getStoredToken()) {
-      logger.log('No token — triggering OAuth login');
-      await triggerLogin();
+    // Not authenticated and not dev → need to login
+    if (!isAuthenticated && !isDevUser) {
+      // In iframe: can't redirect (cookies blocked) — user needs to open in new tab
+      // This shouldn't happen because we show a different button in iframe
+      // But just in case:
+      if (inIframe) return;
+      triggerLogin();
       return;
     }
 
@@ -44,8 +50,7 @@ export default function WelcomeScreen() {
         return;
       }
       if (response.status === 401) {
-        // Token expired — trigger re-login
-        await triggerLogin();
+        triggerLogin();
         return;
       }
       if (!response.ok) {
@@ -57,11 +62,18 @@ export default function WelcomeScreen() {
       setPlan([]);
       setPanelContent(null);
     } catch {
-      // triggerLogin may redirect — don't show error
+      // Redirect may throw — ignore
     } finally {
       setIsCreating(false);
     }
-  }, [isCreating, createSession, setPlan, setPanelContent, user]);
+  }, [isCreating, createSession, setPlan, setPanelContent, isAuthenticated, isDevUser, inIframe]);
+
+  // Build the direct Space URL for the "open in new tab" link
+  const spaceHost = typeof window !== 'undefined'
+    ? window.location.hostname.includes('.hf.space')
+      ? window.location.origin
+      : `https://smolagents-ml-agent.hf.space`
+    : '';
 
   return (
     <Box
@@ -76,17 +88,12 @@ export default function WelcomeScreen() {
         py: 8,
       }}
     >
-      {/* HF Logo — large, centered */}
+      {/* HF Logo */}
       <Box
         component="img"
         src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
         alt="Hugging Face"
-        sx={{
-          width: 96,
-          height: 96,
-          mb: 3,
-          display: 'block',
-        }}
+        sx={{ width: 96, height: 96, mb: 3, display: 'block' }}
       />
 
       {/* Title */}
@@ -114,10 +121,7 @@ export default function WelcomeScreen() {
           fontSize: '0.95rem',
           textAlign: 'center',
           px: 2,
-          '& strong': {
-            color: 'var(--text)',
-            fontWeight: 600,
-          },
+          '& strong': { color: 'var(--text)', fontWeight: 600 },
         }}
       >
         A general-purpose AI agent for <strong>machine learning engineering</strong>.
@@ -126,38 +130,93 @@ export default function WelcomeScreen() {
         and explores <strong>datasets</strong> — all through natural conversation.
       </Typography>
 
-      {/* Start Button */}
-      <Button
-        variant="contained"
-        size="large"
-        onClick={handleStart}
-        disabled={isCreating}
-        startIcon={
-          isCreating ? <CircularProgress size={20} color="inherit" /> : null
-        }
-        sx={{
-          px: 5,
-          py: 1.5,
-          fontSize: '1rem',
-          fontWeight: 700,
-          textTransform: 'none',
-          borderRadius: '12px',
-          bgcolor: HF_ORANGE,
-          color: '#000',
-          boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
-          transition: 'all 0.2s ease',
-          '&:hover': {
-            bgcolor: '#FFB340',
-            boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
-          },
-          '&.Mui-disabled': {
-            bgcolor: 'rgba(255, 157, 0, 0.35)',
-            color: 'rgba(0,0,0,0.45)',
-          },
-        }}
-      >
-        {isCreating ? 'Initializing...' : 'Start Session'}
-      </Button>
+      {/* Action button — depends on context */}
+      {inIframe && !isAuthenticated && !isDevUser ? (
+        // In iframe + not logged in → link to open Space directly
+        <Button
+          variant="contained"
+          size="large"
+          component="a"
+          href={spaceHost}
+          target="_blank"
+          rel="noopener noreferrer"
+          endIcon={<OpenInNewIcon />}
+          sx={{
+            px: 5,
+            py: 1.5,
+            fontSize: '1rem',
+            fontWeight: 700,
+            textTransform: 'none',
+            borderRadius: '12px',
+            bgcolor: HF_ORANGE,
+            color: '#000',
+            boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
+            textDecoration: 'none',
+            '&:hover': {
+              bgcolor: '#FFB340',
+              boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
+            },
+          }}
+        >
+          Open ML Agent
+        </Button>
+      ) : !isAuthenticated && !isDevUser ? (
+        // Direct access + not logged in → sign in button
+        <Button
+          variant="contained"
+          size="large"
+          onClick={() => triggerLogin()}
+          sx={{
+            px: 5,
+            py: 1.5,
+            fontSize: '1rem',
+            fontWeight: 700,
+            textTransform: 'none',
+            borderRadius: '12px',
+            bgcolor: HF_ORANGE,
+            color: '#000',
+            boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
+            '&:hover': {
+              bgcolor: '#FFB340',
+              boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
+            },
+          }}
+        >
+          Sign in with Hugging Face
+        </Button>
+      ) : (
+        // Authenticated or dev → start session
+        <Button
+          variant="contained"
+          size="large"
+          onClick={handleStart}
+          disabled={isCreating}
+          startIcon={
+            isCreating ? <CircularProgress size={20} color="inherit" /> : null
+          }
+          sx={{
+            px: 5,
+            py: 1.5,
+            fontSize: '1rem',
+            fontWeight: 700,
+            textTransform: 'none',
+            borderRadius: '12px',
+            bgcolor: HF_ORANGE,
+            color: '#000',
+            boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
+            '&:hover': {
+              bgcolor: '#FFB340',
+              boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
+            },
+            '&.Mui-disabled': {
+              bgcolor: 'rgba(255, 157, 0, 0.35)',
+              color: 'rgba(0,0,0,0.45)',
+            },
+          }}
+        >
+          {isCreating ? 'Initializing...' : 'Start Session'}
+        </Button>
+      )}
 
       {/* Error */}
       {error && (
@@ -180,12 +239,7 @@ export default function WelcomeScreen() {
       {/* Footnote */}
       <Typography
         variant="caption"
-        sx={{
-          mt: 5,
-          color: 'var(--muted-text)',
-          opacity: 0.5,
-          fontSize: '0.7rem',
-        }}
+        sx={{ mt: 5, color: 'var(--muted-text)', opacity: 0.5, fontSize: '0.7rem' }}
       >
         Conversations are stored locally in your browser.
       </Typography>

frontend/src/hooks/useAuth.ts

@@ -1,71 +1,34 @@
 /**
- * Client-side OAuth using @huggingface/hub.
+ * Authentication hook — simple server-side OAuth.
  *
- * Works inside HF Spaces iframes (no third-party cookies needed).
- * Token is stored in localStorage and sent via Authorization header.
+ * - Hors iframe: /auth/login redirect (cookies work fine)
+ * - Dans iframe: show "Open in full page" link
+ *
+ * Token is stored via HttpOnly cookie by the backend.
+ * In dev mode (no OAUTH_CLIENT_ID), auth is bypassed.
  */
 
 import { useEffect } from 'react';
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
 import { useAgentStore } from '@/store/agentStore';
 import { logger } from '@/utils/logger';
 
-const TOKEN_KEY = 'hf_oauth_token';
-
-/** Get the stored HF access token (or null). */
-export function getStoredToken(): string | null {
-  try {
-    return localStorage.getItem(TOKEN_KEY);
-  } catch {
-    return null;
-  }
-}
-
-/** Clear the stored token (logout). */
-export function clearStoredToken(): void {
+/** Check if we're running inside an iframe. */
+export function isInIframe(): boolean {
   try {
-    localStorage.removeItem(TOKEN_KEY);
+    return window.top !== window.self;
   } catch {
-    // Ignore
+    return true; // SecurityError = cross-origin iframe
   }
 }
 
-/** Redirect to HF OAuth login.
- *  Strategy:
- *  1. Try @huggingface/hub client-side OAuth (works in HF iframe with window.huggingface)
- *  2. Fall back to server-side /auth/login (works on direct access, handles cookies)
- *  3. In iframe context, open in new tab to avoid cookie issues */
-export async function triggerLogin(): Promise<void> {
-  let url: string;
-
-  try {
-    // Client-side OAuth — needs window.huggingface (HF iframe only)
-    url = await oauthLoginUrl({
-      scopes: 'openid profile read-repos write-repos manage-repos inference-api jobs',
-    });
-  } catch {
-    // Fallback: server-side OAuth (works on direct access)
-    url = '/auth/login';
-  }
-
-  // In an iframe, open in a new tab (cookies blocked otherwise)
-  let inIframe = false;
-  try {
-    inIframe = window.top !== window.self;
-  } catch {
-    inIframe = true; // SecurityError = cross-origin iframe
-  }
-
-  if (inIframe) {
-    window.open(url, '_blank');
-  } else {
-    window.location.href = url;
-  }
+/** Redirect to the server-side OAuth login. */
+export function triggerLogin(): void {
+  window.location.href = '/auth/login';
 }
 
 /**
- * Hook: on mount, check for OAuth redirect result or existing token.
- * Sets the user in the agent store when authenticated.
+ * Hook: on mount, check if user is authenticated.
+ * Sets user in the agent store.
  */
 export function useAuth() {
   const setUser = useAgentStore((s) => s.setUser);
@@ -73,41 +36,12 @@ export function useAuth() {
   useEffect(() => {
     let cancelled = false;
 
-    async function init() {
-      // 1. Check if we're returning from an OAuth redirect
-      const oauthResult = await oauthHandleRedirectIfPresent();
-
-      if (oauthResult) {
-        // Store the access token
-        localStorage.setItem(TOKEN_KEY, oauthResult.accessToken);
-        logger.log('OAuth login successful:', oauthResult.userInfo?.name);
-
-        if (!cancelled) {
-          setUser({
-            authenticated: true,
-            username: oauthResult.userInfo?.name || oauthResult.userInfo?.preferred_username || 'user',
-            name: oauthResult.userInfo?.name,
-            picture: oauthResult.userInfo?.picture,
-          });
-        }
-        return;
-      }
-
-      // 2. Check for existing token in localStorage
-      const token = getStoredToken();
-      if (!token) {
-        // Not logged in — welcome screen will handle login trigger
-        if (!cancelled) setUser(null);
-        return;
-      }
-
-      // 3. Validate the stored token
+    async function checkAuth() {
       try {
-        const res = await fetch('/auth/me', {
-          headers: { Authorization: `Bearer ${token}` },
-        });
-        if (res.ok) {
-          const data = await res.json();
+        // Check if user is already authenticated (cookie-based)
+        const response = await fetch('/auth/me', { credentials: 'include' });
+        if (response.ok) {
+          const data = await response.json();
           if (!cancelled && data.authenticated) {
             setUser({
               authenticated: true,
@@ -115,19 +49,29 @@ export function useAuth() {
               name: data.name,
               picture: data.picture,
             });
+            logger.log('Authenticated as', data.username);
             return;
           }
         }
-        // Token invalid — clear it
-        clearStoredToken();
+
+        // Not authenticated — check if auth is enabled
+        const statusRes = await fetch('/auth/status', { credentials: 'include' });
+        const statusData = await statusRes.json();
+        if (!statusData.auth_enabled) {
+          // Dev mode — no OAuth configured
+          if (!cancelled) setUser({ authenticated: true, username: 'dev' });
+          return;
+        }
+
+        // Auth enabled but not logged in — welcome screen will handle it
         if (!cancelled) setUser(null);
       } catch {
-        // Backend unreachable in dev — set dev user
+        // Backend unreachable — assume dev mode
         if (!cancelled) setUser({ authenticated: true, username: 'dev' });
       }
     }
 
-    init();
+    checkAuth();
     return () => { cancelled = true; };
   }, [setUser]);
 }

frontend/src/utils/api.ts

@@ -1,14 +1,13 @@
 /**
  * Centralized API utilities.
  *
- * Reads the HF OAuth token from localStorage and injects it as
- * an Authorization: Bearer header on every request.
- * WebSocket URLs include the token as a query parameter.
+ * In production: HttpOnly cookie (hf_access_token) is sent automatically.
+ * In development: auth is bypassed on the backend.
  */
 
-import { getStoredToken, triggerLogin } from '@/hooks/useAuth';
+import { triggerLogin } from '@/hooks/useAuth';
 
-/** Wrapper around fetch that includes auth and common headers. */
+/** Wrapper around fetch with credentials and common headers. */
 export async function apiFetch(
   path: string,
   options: RequestInit = {}
@@ -18,45 +17,31 @@ export async function apiFetch(
     ...(options.headers as Record<string, string>),
   };
 
-  // Inject Bearer token if available
-  const token = getStoredToken();
-  if (token) {
-    headers['Authorization'] = `Bearer ${token}`;
-  }
-
   const response = await fetch(path, {
     ...options,
     headers,
-    credentials: 'include', // Still send cookies for backward compat
+    credentials: 'include', // Send cookies with every request
   });
 
-  // Handle 401 — trigger login if auth is required
+  // Handle 401 — redirect to login
   if (response.status === 401) {
     try {
-      const authStatus = await fetch('/auth/status');
+      const authStatus = await fetch('/auth/status', { credentials: 'include' });
       const data = await authStatus.json();
       if (data.auth_enabled) {
-        await triggerLogin();
+        triggerLogin();
         throw new Error('Authentication required — redirecting to login.');
       }
     } catch (e) {
       if (e instanceof Error && e.message.includes('redirecting')) throw e;
-      // auth/status failed — ignore
     }
   }
 
   return response;
 }
 
-/** Build the WebSocket URL for a session, including auth token. */
+/** Build the WebSocket URL for a session. */
 export function getWebSocketUrl(sessionId: string): string {
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  const base = `${protocol}//${window.location.host}/api/ws/${sessionId}`;
-
-  // Pass token as query param (WebSocket can't set custom headers from browser)
-  const token = getStoredToken();
-  if (token) {
-    return `${base}?token=${encodeURIComponent(token)}`;
-  }
-  return base;
+  return `${protocol}//${window.location.host}/api/ws/${sessionId}`;
 }