Implement client-side OAuth authentication with popup modal

✨ New Features:
- Frontend-first authentication using @huggingface/hub
- Popup auth modal with demo video and research paper
- AuthContext for managing client-side auth state
- Seamless OAuth flow without backend session complexity

🔧 Technical Implementation:
- AuthModal component with beautiful UI design
- Type-safe OAuth result conversion for HF API compatibility
- localStorage-based token persistence with expiration checks
- Environment-aware authentication (HF Spaces vs local dev)
- Integration with existing Modal system

🎨 User Experience:
- Users see full demo interface immediately
- Authentication required only when accessing protected features
- Modal shows video and research paper during auth flow
- Consistent design with existing shadcn/ui components

🚀 Benefits:
- Simplified architecture (no complex backend OAuth)
- Better UX (demo first, auth when needed)
- HF Spaces native integration
- Easier maintenance and debugging

This replaces the previous backend-heavy OAuth system with a modern,
client-side approach that's more suitable for SPA applications.

backend/app.py

@@ -177,11 +177,10 @@ async def shutdown_event():
     # scheduler_service.stop() # This line is now commented out
 
 
-# Root redirect to React app (requires authentication)
+# Root route - serve React app directly (authentication handled by frontend)
 @app.get("/")
-async def root(request: Request, auth_check = Depends(require_auth_in_hf_spaces)):
-    # This endpoint is protected by dependency injection
-    # If user reaches here, they are authenticated (or in local dev)
+async def root(request: Request):
+    """Serve the React app directly - authentication is now handled by frontend"""
     return RedirectResponse(url="/agentgraph")
 
 

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "agentgraph-react",
       "version": "1.0.0",
       "dependencies": {
+        "@huggingface/hub": "^2.6.4",
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-checkbox": "^1.3.2",
@@ -908,6 +909,30 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@huggingface/hub": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-2.6.4.tgz",
+      "integrity": "sha512-eqJjP0DAIShc8O90neoK1SFAlgikK6jpreTcOue4hXkKRa+BkC4WCLGintI8HIDk2Y+pHgQwUvsdb4Ruo4inSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/tasks": "^0.19.45"
+      },
+      "bin": {
+        "hfjs": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "cli-progress": "^3.12.0"
+      }
+    },
+    "node_modules/@huggingface/tasks": {
+      "version": "0.19.46",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.46.tgz",
+      "integrity": "sha512-c6F/r7zRQjmyo6Ji8c2TUbdeeu6WAdZxYLRd+G7Xxvfbadi6iDwk2szt/oinC5v5Ljyc2sjzesaqGB6hLWy/DA==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -3488,6 +3513,41 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "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/cli-progress/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/cli-progress/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/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@huggingface/hub": "^2.6.4",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -35,7 +36,6 @@
     "@types/d3": "^7.4.3",
     "@types/d3-cloud": "^1.2.9",
     "@types/node": "^22.15.29",
-    "TagCloud": "^2.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.1",
@@ -49,6 +49,7 @@
     "react-force-graph-2d": "^1.27.1",
     "react-markdown": "^10.1.0",
     "recharts": "^2.15.4",
+    "TagCloud": "^2.5.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "use-text-analyzer": "^2.1.6"

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import { NotificationProvider } from "./context/NotificationContext";
 import { ModalProvider, useModal } from "./context/ModalContext";
 import { NavigationProvider } from "./context/NavigationContext";
 import { KGDisplayModeProvider } from "./context/KGDisplayModeContext";
+import { AuthProvider } from "./context/AuthContext";
 import { MainLayout } from "./components/layout/MainLayout";
 import { ModalSystem } from "./components/shared/ModalSystem";
 import { Toaster } from "./components/ui/toaster";
@@ -32,11 +33,13 @@ function App() {
         <NotificationProvider>
           <NavigationProvider>
             <ModalProvider>
-              <KGDisplayModeProvider>
-                <AgentGraphProvider>
-                  <AppContent />
-                </AgentGraphProvider>
-              </KGDisplayModeProvider>
+              <AuthProvider>
+                <KGDisplayModeProvider>
+                  <AgentGraphProvider>
+                    <AppContent />
+                  </AgentGraphProvider>
+                </KGDisplayModeProvider>
+              </AuthProvider>
             </ModalProvider>
           </NavigationProvider>
         </NotificationProvider>

frontend/src/components/auth/AuthModal.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { useAuth } from "@/context/AuthContext";
+import { ExternalLink, FileText, Play } from "lucide-react";
+
+interface AuthModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function AuthModal({ open, onOpenChange }: AuthModalProps) {
+  const { login, authState } = useAuth();
+
+  const handleLogin = async () => {
+    try {
+      await login();
+      // Don't close modal here, it will close after successful auth
+    } catch (error) {
+      console.error("Login failed:", error);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-6xl p-0 overflow-hidden">
+        <div className="grid lg:grid-cols-2 gap-0 min-h-[600px]">
+          {/* Left side - Authentication */}
+          <div className="p-8 lg:p-12 flex flex-col justify-center bg-background">
+            <div className="space-y-8">
+              {/* Header */}
+              <div className="space-y-4">
+                <h1 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                  AgentGraph
+                </h1>
+                <p className="text-xl text-muted-foreground leading-relaxed">
+                  Trace-to-Graph Platform for Interactive Analysis and
+                  Robustness Testing in Agentic AI Systems
+                </p>
+              </div>
+
+              {/* Description */}
+              <p className="text-lg text-muted-foreground leading-relaxed">
+                Convert execution logs into interactive knowledge graphs with
+                actionable insights for AI system analysis and robustness
+                testing.
+              </p>
+
+              {/* Authentication Section */}
+              <div className="space-y-6">
+                <div className="space-y-4">
+                  <h2 className="text-xl font-semibold">
+                    Access Research Platform
+                  </h2>
+
+                  <Button
+                    onClick={handleLogin}
+                    disabled={authState.isLoading}
+                    size="lg"
+                    className="w-full h-12 text-lg bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 transition-all duration-300"
+                  >
+                    {authState.isLoading ? (
+                      <div className="flex items-center space-x-2">
+                        <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        <span>Connecting...</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center space-x-2">
+                        <svg
+                          className="w-5 h-5"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                        >
+                          <path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0zm5.568 8.16c-.169 1.858-.896 3.375-2.043 4.519-1.146 1.144-2.663 1.874-4.521 2.043-.151.014-.302.021-.454.021-.156 0-.31-.007-.463-.021-1.858-.169-3.375-.899-4.519-2.043C4.424 11.535 3.694 10.018 3.525 8.16c-.014-.151-.021-.302-.021-.454 0-.156.007-.31.021-.463.169-1.858.899-3.375 2.043-4.519C6.712 1.58 8.229.85 10.087.681c.151-.014.302-.021.454-.021.156 0 .31.007.463.021 1.858.169 3.375.899 4.519 2.043 1.144 1.144 1.874 2.661 2.043 4.519.014.151.021.302.021.454 0 .156-.007.31-.021.463z" />
+                        </svg>
+                        <span>Sign in with Hugging Face</span>
+                        <ExternalLink className="w-4 h-4" />
+                      </div>
+                    )}
+                  </Button>
+                </div>
+
+                {authState.error && (
+                  <Card className="border-destructive/20 bg-destructive/5">
+                    <CardContent className="p-4">
+                      <p className="text-sm text-destructive">
+                        {authState.error}
+                      </p>
+                    </CardContent>
+                  </Card>
+                )}
+
+                <Card className="bg-muted/30">
+                  <CardContent className="p-4">
+                    <p className="text-sm text-muted-foreground">
+                      Authentication required for responsible AI resource usage
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </div>
+
+          {/* Right side - Demo Content */}
+          <div className="bg-secondary/20 p-8 lg:p-12 space-y-6">
+            {/* Demo Video */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/50">
+              <CardContent className="p-0">
+                <div className="relative aspect-video rounded-lg overflow-hidden">
+                  <iframe
+                    src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p"
+                    title="AgentGraph: Interactive Analysis Platform Demo"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                    className="w-full h-full"
+                  />
+                </div>
+                <div className="p-4">
+                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                    <Play className="w-4 h-4" />
+                    <span>Interactive Demo</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Research Paper */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/50">
+              <CardContent className="p-6">
+                <div className="flex items-start space-x-4">
+                  <div className="flex-shrink-0">
+                    <FileText className="w-8 h-8 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold mb-2">
+                      Research Paper
+                    </h3>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      AgentGraph: Trace-to-Graph Platform for Interactive
+                      Analysis and Robustness Testing in Agentic AI Systems
+                    </p>
+                    <a
+                      href="/static/papers/agentgraph_paper.pdf"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
+                    >
+                      <FileText className="w-4 h-4 mr-2" />
+                      <span>Download PDF</span>
+                      <ExternalLink className="w-4 h-4 ml-1" />
+                    </a>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/shared/ModalSystem.tsx

@@ -14,6 +14,7 @@ import { TraceSegmentModal } from "@/components/shared/modals/TraceSegmentModal"
 import ExampleTraceModal from "./modals/ExampleTraceModal";
 import { ObservabilityConnectionDialog } from "@/components/features/observability/ObservabilityConnectionDialog";
 import { UploadDialog } from "@/components/features/upload/UploadDialog";
+import { AuthModal } from "@/components/auth/AuthModal";
 
 interface ModalSystemProps {
   modalState: ModalState;
@@ -62,6 +63,8 @@ export function ModalSystem({ modalState, onClose }: ModalSystemProps) {
             editConnection={data?.editConnection}
           />
         );
+      case "auth-login":
+        return <AuthModal open={isOpen} onOpenChange={onClose} />;
 
       default:
         return (
@@ -74,7 +77,9 @@ export function ModalSystem({ modalState, onClose }: ModalSystemProps) {
 
   // Some modals have their own Dialog wrapper
   const hasOwnDialog =
-    type === "upload-trace" || type === "observability-connection";
+    type === "upload-trace" ||
+    type === "observability-connection" ||
+    type === "auth-login";
 
   if (hasOwnDialog) {
     return <>{renderModalContent()}</>;

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,229 @@
+import React, {
+  createContext,
+  useContext,
+  useReducer,
+  useEffect,
+  ReactNode,
+  useMemo,
+} from "react";
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
+import type { OAuthResult as HFOAuthResult } from "@huggingface/hub";
+import {
+  AuthState,
+  AuthContextType,
+  OAuthResult,
+  UserInfo,
+} from "@/types/auth";
+import { useModal } from "./ModalContext";
+
+type AuthAction =
+  | { type: "AUTH_START" }
+  | { type: "AUTH_SUCCESS"; payload: OAuthResult }
+  | { type: "AUTH_ERROR"; payload: string }
+  | { type: "AUTH_LOGOUT" }
+  | { type: "SET_LOADING"; payload: boolean };
+
+const initialState: AuthState = {
+  isAuthenticated: false,
+  user: null,
+  accessToken: null,
+  accessTokenExpiresAt: null,
+  scope: null,
+  isLoading: true,
+  error: null,
+};
+
+function authReducer(state: AuthState, action: AuthAction): AuthState {
+  switch (action.type) {
+    case "AUTH_START":
+      return {
+        ...state,
+        isLoading: true,
+        error: null,
+      };
+    case "AUTH_SUCCESS":
+      return {
+        ...state,
+        isAuthenticated: true,
+        user: action.payload.userInfo,
+        accessToken: action.payload.accessToken,
+        accessTokenExpiresAt:
+          action.payload.accessTokenExpiresAt instanceof Date
+            ? action.payload.accessTokenExpiresAt.toISOString()
+            : action.payload.accessTokenExpiresAt,
+        scope: action.payload.scope,
+        isLoading: false,
+        error: null,
+      };
+    case "AUTH_ERROR":
+      return {
+        ...state,
+        isAuthenticated: false,
+        user: null,
+        accessToken: null,
+        accessTokenExpiresAt: null,
+        scope: null,
+        isLoading: false,
+        error: action.payload,
+      };
+    case "AUTH_LOGOUT":
+      return {
+        ...initialState,
+        isLoading: false,
+      };
+    case "SET_LOADING":
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const STORAGE_KEY = "agentgraph_oauth";
+
+// Convert HF OAuth result to our internal format
+function convertHFOAuthResult(hfResult: HFOAuthResult): OAuthResult {
+  const userInfo = hfResult.userInfo as any; // Type assertion for flexibility
+  return {
+    accessToken: hfResult.accessToken,
+    accessTokenExpiresAt: hfResult.accessTokenExpiresAt instanceof Date 
+      ? hfResult.accessTokenExpiresAt.toISOString()
+      : hfResult.accessTokenExpiresAt,
+    userInfo: {
+      id: userInfo.sub || userInfo.id || "unknown",
+      name: userInfo.name || userInfo.preferred_username || "Unknown User",
+      fullname: userInfo.preferred_username,
+      email: userInfo.email,
+      emailVerified: userInfo.email_verified,
+      avatarUrl: userInfo.picture,
+      isPro: userInfo.isPro,
+      orgs: userInfo.orgs,
+    },
+    scope: hfResult.scope,
+  };
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [authState, dispatch] = useReducer(authReducer, initialState);
+  const { openModal } = useModal();
+
+  // Check for existing auth on mount
+  useEffect(() => {
+    checkAuthStatus();
+  }, []);
+
+  const checkAuthStatus = async () => {
+    try {
+      dispatch({ type: "SET_LOADING", payload: true });
+
+      // First check localStorage for existing oauth data
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        try {
+          const oauthResult = JSON.parse(stored) as OAuthResult;
+          // Check if token is still valid
+          const expiresAt = new Date(oauthResult.accessTokenExpiresAt);
+          if (expiresAt > new Date()) {
+            dispatch({ type: "AUTH_SUCCESS", payload: oauthResult });
+            return;
+          } else {
+            // Token expired, remove from storage
+            localStorage.removeItem(STORAGE_KEY);
+          }
+        } catch (error) {
+          localStorage.removeItem(STORAGE_KEY);
+        }
+      }
+
+      // Check for OAuth redirect
+      const hfOauthResult = await oauthHandleRedirectIfPresent();
+      if (hfOauthResult) {
+        // Convert HF result to our internal format
+        const normalizedResult = convertHFOAuthResult(hfOauthResult);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(normalizedResult));
+        dispatch({ type: "AUTH_SUCCESS", payload: normalizedResult });
+      } else {
+        dispatch({ type: "SET_LOADING", payload: false });
+      }
+    } catch (error) {
+      console.error("Auth check failed:", error);
+      dispatch({
+        type: "AUTH_ERROR",
+        payload: "Failed to check authentication status",
+      });
+    }
+  };
+
+  const login = async () => {
+    try {
+      dispatch({ type: "AUTH_START" });
+
+      // Check if we're in HF Spaces environment
+      const isHFSpaces = window.huggingface && window.huggingface.variables;
+
+      if (isHFSpaces) {
+        // Use HF OAuth
+        const scopes =
+          window.huggingface?.variables?.OAUTH_SCOPES ||
+          "openid profile read-repos";
+        const loginUrl = await oauthLoginUrl({ scopes });
+        window.location.href = loginUrl + "&prompt=consent";
+      } else {
+        // For local development, show a message or redirect to HF
+        dispatch({
+          type: "AUTH_ERROR",
+          payload:
+            "Authentication is only available when deployed to Hugging Face Spaces",
+        });
+      }
+    } catch (error) {
+      console.error("Login failed:", error);
+      dispatch({
+        type: "AUTH_ERROR",
+        payload: "Failed to initiate login",
+      });
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    dispatch({ type: "AUTH_LOGOUT" });
+    // Optionally redirect to clear URL params
+    const url = new URL(window.location.href);
+    url.search = "";
+    window.history.replaceState({}, "", url.toString());
+  };
+
+  const requireAuth = () => {
+    if (!authState.isAuthenticated) {
+      openModal("auth-login", "Sign in to AgentGraph");
+    }
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      authState,
+      login,
+      logout,
+      requireAuth,
+      checkAuthStatus,
+    }),
+    [authState]
+  );
+
+  return (
+    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

frontend/src/types/auth.ts

@@ -0,0 +1,41 @@
+export interface UserInfo {
+  id: string;
+  name: string;
+  fullname?: string;
+  email?: string;
+  emailVerified?: boolean;
+  avatarUrl?: string;
+  isPro?: boolean;
+  orgs?: Array<{
+    id: string;
+    name: string;
+    fullname: string;
+    isEnterprise: boolean;
+    avatarUrl: string;
+  }>;
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: UserInfo | null;
+  accessToken: string | null;
+  accessTokenExpiresAt: string | null;
+  scope: string | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface OAuthResult {
+  accessToken: string;
+  accessTokenExpiresAt: string | Date;
+  userInfo: UserInfo;
+  scope: string;
+}
+
+export interface AuthContextType {
+  authState: AuthState;
+  login: () => Promise<void>;
+  logout: () => void;
+  requireAuth: () => void;
+  checkAuthStatus: () => Promise<void>;
+}

frontend/src/types/index.ts

@@ -138,6 +138,7 @@ export interface ModalState {
     | "trace-segment"
     | "upload-trace"
     | "observability-connection"
+    | "auth-login"
     | null;
   title: string;
   data?: any;

frontend/src/types/window.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  interface Window {
+    huggingface?: {
+      variables?: {
+        OAUTH_SCOPES?: string;
+        [key: string]: any;
+      };
+      [key: string]: any;
+    };
+  }
+}
+
+export {};