Fix OAuth cookies, HF image handling, and add debugging

app/api/auth/callback/route.ts

@@ -1,26 +1,152 @@
 import { NextRequest, NextResponse } from "next/server";
 import { cookies } from "next/headers";
 
+// Determine the correct URL based on environment
+function getSpaceUrl(req: NextRequest): string {
+  // Check for HF Space environment
+  const spaceHost = process.env.SPACE_HOST;
+  if (spaceHost) {
+    return `https://${spaceHost}`;
+  }
+
+  // For local development, use the request origin
+  const host = req.headers.get('host') || 'localhost:3000';
+  const protocol = req.headers.get('x-forwarded-proto') || (host.includes('localhost') ? 'http' : 'https');
+  return `${protocol}://${host}`;
+}
+
 export async function GET(req: NextRequest) {
   const url = new URL(req.url);
   const code = url.searchParams.get('code');
-  
+  const SPACE_URL = getSpaceUrl(req);
+  const REDIRECT_URI = `${SPACE_URL}/api/auth/callback`;
+
+  console.log('Auth callback - SPACE_URL:', SPACE_URL, 'has code:', !!code);
+
   if (code) {
-    // This is an OAuth redirect, redirect to main page for client-side handling
-    return NextResponse.redirect(new URL('/', req.url));
+    // Exchange authorization code for access token
+    try {
+      const clientId = process.env.OAUTH_CLIENT_ID;
+      const clientSecret = process.env.OAUTH_CLIENT_SECRET;
+
+      console.log('OAuth credentials:', {
+        clientId: clientId ? 'present' : 'MISSING',
+        clientSecret: clientSecret ? 'present' : 'MISSING'
+      });
+
+      if (!clientId || !clientSecret) {
+        console.error('OAuth credentials not configured');
+        return NextResponse.redirect(`${SPACE_URL}/?error=oauth_not_configured`);
+      }
+
+      // Exchange code for token
+      console.log('Exchanging code for token with redirect_uri:', REDIRECT_URI);
+      const tokenResponse = await fetch('https://huggingface.co/oauth/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+          grant_type: 'authorization_code',
+          client_id: clientId,
+          client_secret: clientSecret,
+          code: code,
+          redirect_uri: REDIRECT_URI,
+        }),
+      });
+
+      if (!tokenResponse.ok) {
+        const errorText = await tokenResponse.text();
+        console.error('Token exchange failed:', errorText);
+        return NextResponse.redirect(`${SPACE_URL}/?error=token_exchange_failed`);
+      }
+
+      const tokenData = await tokenResponse.json();
+      const accessToken = tokenData.access_token;
+      console.log('Token exchange successful, got access token');
+
+      // Get user info
+      const userResponse = await fetch('https://huggingface.co/api/whoami-v2', {
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+        },
+      });
+
+      let userInfo = null;
+      if (userResponse.ok) {
+        userInfo = await userResponse.json();
+        console.log('Got user info:', { name: userInfo?.name, username: userInfo?.name });
+      } else {
+        console.error('Failed to get user info:', await userResponse.text());
+      }
+
+      // Create redirect response and set cookies ON THE RESPONSE
+      // This is critical - cookies().set() doesn't work with redirects!
+      const response = NextResponse.redirect(`${SPACE_URL}/`);
+
+      // Set token cookie (HTTP-only for security)
+      response.cookies.set('hf_token', accessToken, {
+        httpOnly: true,
+        secure: true,
+        sameSite: 'none',
+        maxAge: 60 * 60 * 24 * 30, // 30 days
+        path: '/',
+      });
+
+      // Set user info cookie (readable by client for UI)
+      if (userInfo) {
+        response.cookies.set('hf_user', JSON.stringify({
+          name: userInfo.name || userInfo.fullname,
+          username: userInfo.name,
+          avatarUrl: userInfo.avatarUrl,
+        }), {
+          httpOnly: false,
+          secure: true,
+          sameSite: 'none',
+          maxAge: 60 * 60 * 24 * 30,
+          path: '/',
+        });
+      }
+
+      console.log('OAuth successful, cookies set (SameSite=None), redirecting to:', SPACE_URL);
+      return response;
+
+    } catch (error) {
+      console.error('OAuth callback error:', error);
+      return NextResponse.redirect(`${SPACE_URL}/?error=oauth_failed`);
+    }
   } else {
     // This is a status check request
     try {
       const cookieStore = await cookies();
       const hfToken = cookieStore.get('hf_token');
-      
-      return NextResponse.json({ 
+      const hfUser = cookieStore.get('hf_user');
+
+      // Debug cookies availability
+      const allCookieNames = cookieStore.getAll().map(c => c.name);
+      console.log('Auth check - All cookies:', allCookieNames);
+
+      let user = null;
+      if (hfUser?.value) {
+        try {
+          user = JSON.parse(hfUser.value);
+        } catch { }
+      }
+
+      console.log('Auth status check:', {
+        isLoggedIn: !!hfToken?.value,
+        hasUser: !!user,
+        tokenLength: hfToken?.value?.length
+      });
+
+      return NextResponse.json({
         isLoggedIn: !!hfToken?.value,
-        hasToken: !!hfToken?.value 
+        hasToken: !!hfToken?.value,
+        user,
       });
     } catch (error) {
       console.error('Error checking HF token:', error);
-      return NextResponse.json({ isLoggedIn: false, hasToken: false });
+      return NextResponse.json({ isLoggedIn: false, hasToken: false, user: null });
     }
   }
 }
@@ -28,15 +154,14 @@ export async function GET(req: NextRequest) {
 export async function POST(req: NextRequest) {
   try {
     const { hf_token } = await req.json();
-    
+
     if (!hf_token || typeof hf_token !== "string") {
       return NextResponse.json(
         { error: "Invalid or missing HF token" },
         { status: 400 }
       );
     }
-    
-    // Store the token in a secure HTTP-only cookie
+
     const cookieStore = await cookies();
     cookieStore.set({
       name: 'hf_token',
@@ -44,9 +169,9 @@ export async function POST(req: NextRequest) {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
       sameSite: 'lax',
-      maxAge: 60 * 60 * 24 * 30 // 30 days
+      maxAge: 60 * 60 * 24 * 30
     });
-    
+
     return NextResponse.json({ success: true });
   } catch (error) {
     console.error('Error storing HF token:', error);
@@ -61,7 +186,8 @@ export async function DELETE() {
   try {
     const cookieStore = await cookies();
     cookieStore.delete('hf_token');
-    
+    cookieStore.delete('hf_user');
+
     return NextResponse.json({ success: true });
   } catch (error) {
     console.error('Error deleting HF token:', error);

app/api/hf-process/route.ts

@@ -183,10 +183,33 @@ export async function POST(req: NextRequest) {
                 );
             }
 
-            const parsed = parseDataUrl(body.image);
+            // Handle different image formats
+            let parsed: { mimeType: string; data: string } | null = null;
+
+            // Try parsing as Data URL first
+            parsed = parseDataUrl(body.image);
+
+            // If not a data URL, check if it's an HTTP URL and fetch it
+            if (!parsed && (body.image.startsWith('http://') || body.image.startsWith('https://'))) {
+                try {
+                    console.log('[HF-API] Fetching image from URL:', body.image.substring(0, 100));
+                    const imageResponse = await fetch(body.image);
+                    if (!imageResponse.ok) {
+                        throw new Error(`Failed to fetch image: ${imageResponse.status}`);
+                    }
+                    const imageBuffer = await imageResponse.arrayBuffer();
+                    const contentType = imageResponse.headers.get('content-type') || 'image/png';
+                    const base64 = Buffer.from(imageBuffer).toString('base64');
+                    parsed = { mimeType: contentType, data: base64 };
+                } catch (fetchErr) {
+                    console.error('[HF-API] Failed to fetch image URL:', fetchErr);
+                }
+            }
+
             if (!parsed) {
+                console.error('[HF-API] Invalid image format. Image starts with:', body.image?.substring(0, 50));
                 return NextResponse.json(
-                    { error: "Invalid image format. Please use a valid image." },
+                    { error: "Invalid image format. Expected a data URL (data:image/...) or HTTP URL. Please re-upload or reconnect your image." },
                     { status: 400 }
                 );
             }

app/api/oauth-config/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server';
+import crypto from 'crypto';
+
+/**
+ * API endpoint to get OAuth configuration at runtime
+ */
+export async function GET(req: NextRequest) {
+    const clientId = process.env.OAUTH_CLIENT_ID;
+    const scopes = 'email inference-api';
+
+    // Determine redirect URL based on environment
+    const spaceHost = process.env.SPACE_HOST;
+    let redirectUrl: string;
+
+    if (spaceHost) {
+        // Production: use HF Space URL
+        redirectUrl = `https://${spaceHost}/api/auth/callback`;
+    } else {
+        // Local dev: use request host
+        const host = req.headers.get('host') || 'localhost:3000';
+        const protocol = host.includes('localhost') ? 'http' : 'https';
+        redirectUrl = `${protocol}://${host}/api/auth/callback`;
+    }
+
+    // Generate OAuth state for CSRF protection
+    const state = crypto.randomBytes(16).toString('hex');
+
+    // Build the complete OAuth login URL
+    let loginUrl: string | null = null;
+    if (clientId) {
+        const params = new URLSearchParams({
+            client_id: clientId,
+            redirect_uri: redirectUrl,
+            scope: scopes,
+            response_type: 'code',
+            state: state,
+        });
+        loginUrl = `https://huggingface.co/oauth/authorize?${params.toString()}`;
+    }
+
+    console.log('OAuth Config:', {
+        OAUTH_CLIENT_ID: clientId ? 'present' : 'missing',
+        redirectUrl,
+        SPACE_HOST: spaceHost || 'not set (local dev)',
+    });
+
+    return NextResponse.json({
+        clientId: clientId || null,
+        isConfigured: !!clientId,
+        redirectUrl,
+        loginUrl,
+        state,
+    });
+}

app/page.tsx

@@ -946,8 +946,7 @@ function MergeNodeView({
                   <p>To fix this:</p>
                   <ol className="list-decimal list-inside space-y-1">
                     <li>Get key from: <a href="https://aistudio.google.com/app/apikey" target="_blank" className="text-blue-400 hover:underline">Google AI Studio</a></li>
-                    <li>Edit .env.local file in project root</li>
-                    <li>Replace placeholder with your key</li>
+                    <li>Replace APi key placeholder with your key</li>
                     <li>Restart server (Ctrl+C, npm run dev)</li>
                   </ol>
                 </div>
@@ -988,26 +987,17 @@ export default function EditorPage() {
     (async () => {
       setIsCheckingAuth(true);
       try {
-        // Handle OAuth redirect if present
-        const oauth = await oauthHandleRedirectIfPresent();
-        if (oauth) {
-          // Store the token server-side
-          await fetch('/api/auth/callback', {
-            method: 'POST',
-            body: JSON.stringify({ hf_token: oauth.accessToken }),
-            headers: { 'Content-Type': 'application/json' }
-          });
-          setIsHfProLoggedIn(true);
-        } else {
-          // Check if already logged in
-          const response = await fetch('/api/auth/callback', { method: 'GET' });
-          if (response.ok) {
-            const data = await response.json();
-            setIsHfProLoggedIn(data.isLoggedIn);
+        // Check if already logged in (callback handles token exchange)
+        const response = await fetch('/api/auth/callback', { method: 'GET' });
+        if (response.ok) {
+          const data = await response.json();
+          setIsHfProLoggedIn(data.isLoggedIn);
+          if (data.user) {
+            setHfUser(data.user);
           }
         }
       } catch (error) {
-        console.error('OAuth error:', error);
+        console.error('Auth check error:', error);
       } finally {
         setIsCheckingAuth(false);
       }
@@ -1021,22 +1011,36 @@ export default function EditorPage() {
       try {
         await fetch('/api/auth/callback', { method: 'DELETE' });
         setIsHfProLoggedIn(false);
+        setHfUser(null);
       } catch (error) {
         console.error('Logout error:', error);
       }
     } else {
       // Login with HF OAuth
-      const clientId = process.env.NEXT_PUBLIC_OAUTH_CLIENT_ID;
-      if (!clientId) {
-        console.error('OAuth client ID not configured');
-        alert('OAuth client ID not configured. Please check environment variables.');
-        return;
-      }
+      // Fetch OAuth login URL from server-side API (ensures correct redirect URL)
+      try {
+        const response = await fetch('/api/oauth-config');
+        const { isConfigured, loginUrl, redirectUrl } = await response.json();
 
-      window.location.href = await oauthLoginUrl({
-        clientId,
-        redirectUrl: `${window.location.origin}/api/auth/callback`
-      });
+        console.log('OAuth Config from API:', {
+          isConfigured,
+          loginUrl: loginUrl ? 'present' : 'missing',
+          redirectUrl
+        });
+
+        if (!isConfigured || !loginUrl) {
+          console.error('OAuth not configured on server. Check Space settings.');
+          alert('OAuth is not configured for this Space. Please ensure:\n1. hf_oauth: true is set in README.md\n2. Space has been rebuilt\n3. Check Space logs for OAuth configuration');
+          return;
+        }
+
+        // Use the server-generated login URL directly
+        // This ensures the redirect_uri uses the correct public Space URL
+        window.location.href = loginUrl;
+      } catch (error) {
+        console.error('Failed to get OAuth config:', error);
+        alert('Failed to initialize OAuth login. Please try again.');
+      }
     }
   };
 
@@ -1050,7 +1054,7 @@ export default function EditorPage() {
 
   // Processing Mode: 'nanobananapro' uses Gemini API, 'huggingface' uses HF models
   type ProcessingMode = 'nanobananapro' | 'huggingface';
-  const [processingMode, setProcessingMode] = useState<ProcessingMode>('nanobananapro');
+  const [processingMode, setProcessingMode] = useState<ProcessingMode>('huggingface');
 
   // Available HF models
   const HF_MODELS = {
@@ -1080,6 +1084,7 @@ export default function EditorPage() {
   // HF PRO AUTHENTICATION
   const [isHfProLoggedIn, setIsHfProLoggedIn] = useState(false);
   const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+  const [hfUser, setHfUser] = useState<{ name?: string; username?: string; avatarUrl?: string } | null>(null);
 
 
   const characters = nodes.filter((n) => n.type === "CHARACTER") as CharacterNode[];
@@ -1536,6 +1541,22 @@ export default function EditorPage() {
 
       // Log request details for debugging
 
+      // Ensure inputImage is a Data URL (convert Blob URL if needed)
+      // This fixes "invalid image url" errors when passing blob: URLs to server
+      if (inputImage && inputImage.startsWith('blob:')) {
+        try {
+          const blobRes = await fetch(inputImage);
+          const blob = await blobRes.blob();
+          inputImage = await new Promise<string>((resolve) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result as string);
+            reader.readAsDataURL(blob);
+          });
+        } catch (e) {
+          console.error("Failed to convert blob URL:", e);
+        }
+      }
+
       // Conditionally use HuggingFace or Gemini API based on processing mode
       let res: Response;
 
@@ -1545,6 +1566,14 @@ export default function EditorPage() {
           throw new Error("Please login with HuggingFace to use HF models. Click 'Login with HuggingFace' in the header.");
         }
 
+        // Debug: Log what we're sending
+        console.log('[HF Debug] Sending to /api/hf-process:', {
+          hasImage: !!inputImage,
+          imageType: inputImage ? (inputImage.startsWith('data:') ? 'dataURL' : inputImage.startsWith('blob:') ? 'blobURL' : inputImage.startsWith('http') ? 'httpURL' : 'unknown') : 'null',
+          imagePreview: inputImage?.substring(0, 80),
+          model: selectedHfModel,
+        });
+
         res = await fetch("/api/hf-process", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -2159,16 +2188,37 @@ export default function EditorPage() {
           ) : (
             <>
               <div className="h-6 w-px bg-border" />
-              {/* HF Login Button */}
-              <Button
-                variant={isHfProLoggedIn ? "outline" : "default"}
-                size="sm"
-                className="h-8"
-                onClick={handleHfProLogin}
-                disabled={isCheckingAuth}
-              >
-                {isCheckingAuth ? "Checking..." : isHfProLoggedIn ? "✓ HF Connected" : "Login with HuggingFace"}
-              </Button>
+              {/* HF Login Button / User Info */}
+              {isHfProLoggedIn && hfUser ? (
+                <div className="flex items-center gap-2">
+                  {hfUser.avatarUrl && (
+                    <img
+                      src={hfUser.avatarUrl}
+                      alt={hfUser.name || 'User'}
+                      className="w-6 h-6 rounded-full"
+                    />
+                  )}
+                  <span className="text-sm font-medium">{hfUser.name || hfUser.username}</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 px-2 text-xs"
+                    onClick={handleHfProLogin}
+                  >
+                    Logout
+                  </Button>
+                </div>
+              ) : (
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="h-8"
+                  onClick={handleHfProLogin}
+                  disabled={isCheckingAuth}
+                >
+                  {isCheckingAuth ? "Checking..." : "Login with HuggingFace"}
+                </Button>
+              )}
 
               {/* Model Selector - only show when logged in */}
               {isHfProLoggedIn && (

next.config.ts

@@ -8,6 +8,11 @@ const nextConfig: NextConfig = {
   serverRuntimeConfig: {
     bodySizeLimit: '50mb',
   },
+  // Expose HuggingFace OAuth environment variables to the client
+  // HF injects OAUTH_CLIENT_ID when hf_oauth: true is set in README
+  env: {
+    NEXT_PUBLIC_OAUTH_CLIENT_ID: process.env.OAUTH_CLIENT_ID || process.env.NEXT_PUBLIC_OAUTH_CLIENT_ID || '',
+  },
   // Redirect /editor to main page
   async redirects() {
     return [