Upload folder using huggingface_hub

App.tsx

@@ -1,6 +1,5 @@
 
 import React, { useState, useEffect } from 'react';
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
 import Navbar from './components/Navbar';
 import Hero from './components/Hero';
 import TrustedBy from './components/TrustedBy';
@@ -19,52 +18,36 @@ import ChatPage from './components/ChatPage';
 function App() {
   const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'conversation' | 'chat'>('simulation');
   const [user, setUser] = useState<any>(null);
-  const [config, setConfig] = useState<{ clientId?: string; scopes?: string }>({});
   const [simulationResult, setSimulationResult] = useState<any>(null);
 
   useEffect(() => {
-    const fetchConfig = async () => {
+    const fetchUser = async () => {
       try {
-        const response = await fetch('/api/config');
-        const data = await response.json();
-        setConfig(data);
-      } catch (error) {
-        console.error("Failed to fetch config:", error);
-      }
-    };
-    fetchConfig();
-
-    const handleAuth = async () => {
-      try {
-        const oauthResult = await oauthHandleRedirectIfPresent();
-        if (oauthResult) {
-          setUser(oauthResult.userInfo);
-          console.log("Logged in as:", oauthResult.userInfo);
+        const response = await fetch('/api/user');
+        if (response.ok) {
+          const data = await response.json();
+          setUser(data);
         }
       } catch (error) {
-        console.error("Auth error:", error);
+        console.error("Failed to fetch user:", error);
       }
     };
-    handleAuth();
+    fetchUser();
+    
+    // Listen for storage changes in case of popup login
+    const handleStorage = () => fetchUser();
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
   }, []);
 
-  const loginWithHF = async () => {
-    try {
-      const url = await oauthLoginUrl({
-        clientId: config.clientId,
-        scopes: config.scopes,
-        redirectUrl: window.location.origin + "/"
-      });
-      // Use window.top for redirecting out of the Space iframe
-      if (window.top) {
-        window.top.location.href = url;
-      } else {
-        window.location.href = url;
-      }
-    } catch (error) {
-      console.error("Login error:", error);
-      alert("Failed to initiate login. See console for details.");
-    }
+  const loginWithHF = () => {
+    // Open in a new tab to pop out of iframe
+    window.open('/login', '_blank');
+  };
+
+  const handleLogout = async () => {
+    await fetch('/api/logout');
+    setUser(null);
   };
 
   const startSimulation = () => {
@@ -96,6 +79,7 @@ function App() {
         onOpenChat={openChat}
         user={user}
         onLogin={loginWithHF}
+        onLogout={handleLogout}
         simulationResult={simulationResult}
         setSimulationResult={setSimulationResult}
       />

components/SimulationPage.tsx

@@ -9,6 +9,7 @@ interface SimulationPageProps {
   onOpenChat: () => void;
   user?: any;
   onLogin?: () => void;
+  onLogout?: () => void;
   simulationResult: any;
   setSimulationResult: (res: any) => void;
 }
@@ -44,7 +45,7 @@ const VIEW_FILTERS: Record<string, Array<{ label: string; color: string }>> = {
 };
 
 const SimulationPage: React.FC<SimulationPageProps> = ({ 
-  onBack, onOpenConversation, onOpenChat, user, onLogin, simulationResult, setSimulationResult 
+  onBack, onOpenConversation, onOpenChat, user, onLogin, onLogout, simulationResult, setSimulationResult 
 }) => {
   const [society, setSociety] = useState('');
   const [societies, setSocieties] = useState<string[]>([]);
@@ -240,7 +241,7 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
            <MenuItem icon={<Plus size={16}/>} label="Start Free Trial" highlight />
            <MenuItem icon={<MessageSquare size={16}/>} label="Leave Feedback" />
            <MenuItem icon={<BookOpen size={16}/>} label="Product Guide" />
-           <MenuItem icon={<LogOut size={16}/>} label="Log Out" />
+           {user && <MenuItem icon={<LogOut size={16}/>} label="Log Out" onClick={onLogout} />}
            
            <div className="pt-4 text-[10px] text-gray-600">Version 2.1</div>
         </div>
@@ -361,10 +362,14 @@ interface MenuItemProps {
   icon: React.ReactNode;
   label: string;
   highlight?: boolean;
+  onClick?: () => void;
 }
 
-const MenuItem: React.FC<MenuItemProps> = ({ icon, label, highlight = false }) => (
-  <button className={`w-full flex items-center gap-3 px-2 py-2.5 rounded-md text-sm transition-colors ${highlight ? 'text-teal-400 hover:bg-teal-950/30' : 'text-gray-400 hover:bg-gray-800 hover:text-white'}`}>
+const MenuItem: React.FC<MenuItemProps> = ({ icon, label, highlight = false, onClick }) => (
+  <button 
+    onClick={onClick}
+    className={`w-full flex items-center gap-3 px-2 py-2.5 rounded-md text-sm transition-colors ${highlight ? 'text-teal-400 hover:bg-teal-950/30' : 'text-gray-400 hover:bg-gray-800 hover:text-white'}`}
+  >
     {icon}
     <span>{label}</span>
   </button>

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@gradio/client": "^2.0.4",
         "@huggingface/hub": "^2.10.1",
+        "cookie-parser": "^1.4.7",
         "express": "^5.2.1",
         "lucide-react": "^0.555.0",
         "playwright": "^1.58.2",
@@ -2289,6 +2290,25 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cookie-parser": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
+      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-parser/node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
     "node_modules/cookie-signature": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@gradio/client": "^2.0.4",
     "@huggingface/hub": "^2.10.1",
+    "cookie-parser": "^1.4.7",
     "express": "^5.2.1",
     "lucide-react": "^0.555.0",
     "playwright": "^1.58.2",

server.cjs

@@ -1,11 +1,23 @@
 const express = require('express');
 const path = require('path');
+const cookieParser = require('cookie-parser');
 const app = express();
 const port = 7860;
 
 app.use(express.json());
+app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'dist')));
 
+const OAUTH_CLIENT_ID = process.env.OAUTH_CLIENT_ID;
+const OAUTH_CLIENT_SECRET = process.env.OAUTH_CLIENT_SECRET;
+const OAUTH_SCOPES = process.env.OAUTH_SCOPES || "openid profile";
+const OPENID_PROVIDER_URL = process.env.OPENID_PROVIDER_URL || "https://huggingface.co";
+const SPACE_HOST = process.env.SPACE_HOST;
+
+const REDIRECT_URI = SPACE_HOST 
+  ? `https://${SPACE_HOST}/oauth/callback` 
+  : `http://localhost:${port}/oauth/callback`;
+
 app.post('/api/craft', async (req, res) => {
   const { content, variation } = req.body;
   const apiKey = process.env.BLABLADOR_API_KEY;
@@ -49,11 +61,87 @@ app.post('/api/craft', async (req, res) => {
 
 app.get('/api/config', (req, res) => {
   res.json({
-    clientId: process.env.OAUTH_CLIENT_ID,
-    scopes: process.env.OAUTH_SCOPES || "openid profile",
+    clientId: OAUTH_CLIENT_ID,
+    scopes: OAUTH_SCOPES,
   });
 });
 
+app.get('/login', (req, res) => {
+  if (!OAUTH_CLIENT_ID) {
+    return res.status(500).json({ error: "OAuth is not configured (missing OAUTH_CLIENT_ID)" });
+  }
+
+  const authUrl = `${OPENID_PROVIDER_URL}/oauth/authorize` +
+    `?client_id=${OAUTH_CLIENT_ID}` +
+    `?redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+    `?scope=${encodeURIComponent(OAUTH_SCOPES)}` +
+    `?response_type=code` +
+    `?state=secure_random_state_string`;
+
+  res.redirect(authUrl);
+});
+
+app.get('/oauth/callback', async (req, res) => {
+  const { code } = req.query;
+  const tokenUrl = `${OPENID_PROVIDER_URL}/oauth/token`;
+
+  const authStr = Buffer.from(`${OAUTH_CLIENT_ID}:${OAUTH_CLIENT_SECRET}`).toString('base64');
+
+  try {
+    const tokenResp = await fetch(tokenUrl, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Basic ${authStr}`,
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: new URLSearchParams({
+        grant_type: 'authorization_code',
+        code: code,
+        redirect_uri: REDIRECT_URI,
+        client_id: OAUTH_CLIENT_ID,
+      })
+    });
+
+    if (!tokenResp.ok) {
+      const errorText = await tokenResp.text();
+      console.error("Token exchange failed:", errorText);
+      return res.status(400).json({ error: "Failed to retrieve access token" });
+    }
+
+    const tokenData = await tokenResp.json();
+    const accessToken = tokenData.access_token;
+
+    const userResp = await fetch("https://huggingface.co/api/whoami-v2", {
+      headers: { "Authorization": `Bearer ${accessToken}` }
+    });
+    const userInfo = await userResp.json();
+
+    // Set cookie and redirect back to app
+    res.cookie('hf_user', JSON.stringify(userInfo), { path: '/', httpOnly: false });
+    res.redirect('/');
+  } catch (error) {
+    console.error("OAuth callback error:", error);
+    res.status(500).json({ error: "Authentication failed" });
+  }
+});
+
+app.get('/api/user', (req, res) => {
+  if (req.cookies.hf_user) {
+    try {
+      res.json(JSON.parse(req.cookies.hf_user));
+    } catch (e) {
+      res.status(400).json({ error: "Invalid user cookie" });
+    }
+  } else {
+    res.status(401).json({ error: "Not authenticated" });
+  }
+});
+
+app.get('/api/logout', (req, res) => {
+  res.clearCookie('hf_user');
+  res.redirect('/');
+});
+
 app.get('/health', (req, res) => {
   res.status(200).send('OK');
 });