Spaces:

multimodalart
/

krea-realtime-video

Running on CPU Upgrade

App Files Files Community

apolinario commited on Oct 20

Commit

2ec4a9a

1 Parent(s): b4ebdaf

new attempt

Browse files

Files changed (2) hide show

app.py +62 -30
index.html +6 -36

app.py CHANGED Viewed

@@ -160,47 +160,84 @@ async def get_user_info(access_token: str) -> dict:
 @app.get("/", response_class=HTMLResponse)
 async def home(request: Request):
     """Home page - client-side auth with popup OAuth"""
-    # Dynamically detect origin from request
-    origin = get_origin_from_request(request)
-    redirect_uri = f"{origin}/oauth/callback"
     # Return template - authentication will be handled client-side
     return templates.TemplateResponse("index.html", {
         "request": request,
-        "oauth_client_id": OAUTH_CLIENT_ID,
-        "redirect_uri": redirect_uri
     })
 @app.get("/oauth/callback", response_class=HTMLResponse)
-async def oauth_callback(request: Request, code: str, state: Optional[str] = None):
     """Handle OAuth callback - returns HTML that posts message to opener window"""
     origin = get_origin_from_request(request)
     redirect_uri = f"{origin}/oauth/callback"
-    if not code:
-        # Return error HTML that closes popup
         error_html = f"""
         <!DOCTYPE html>
         <html>
         <body>
         <script>
             (function() {{
-                console.log('OAuth callback - missing code error');
                 const target = window.opener || window.parent || window;
                 if (target) {{
                     target.postMessage({{
                         type: 'HF_OAUTH_ERROR',
-                        payload: {{ message: 'Missing authorization code' }}
-                    }}, '*');
                 }}
-                setTimeout(function() {{ window.close(); }}, 300);
             }})();
         </script>
         </body>
         </html>
         """
-        return HTMLResponse(content=error_html)
     try:
         token_data = await exchange_code_for_token(code, redirect_uri)
         access_token = token_data.get("access_token")
@@ -218,31 +255,25 @@ async def oauth_callback(request: Request, code: str, state: Optional[str] = Non
         <body>
         <script>
             (function() {{
-                console.log('OAuth callback - sending success message');
                 const target = window.opener || window.parent || window;
                 if (target) {{
-                    console.log('Posting message to target window');
                     target.postMessage({{
                         type: 'HF_OAUTH_SUCCESS',
                         payload: {{
                             token: {json.dumps(access_token)},
-                            username: {json.dumps(user_info["username"])},
-                            is_pro: {json.dumps(user_info["is_pro"])},
-                            fullname: {json.dumps(user_info["fullname"])},
-                            avatar: {json.dumps(user_info.get("avatar"))}
                         }}
-                    }}, '*');
                 }}
-                setTimeout(function() {{
-                    console.log('Closing popup window');
-                    window.close();
-                }}, 300);
             }})();
         </script>
         </body>
         </html>
         """
-        return HTMLResponse(content=success_html)
     except Exception as e:
         print(f"OAuth callback error: {e}")
@@ -252,21 +283,22 @@ async def oauth_callback(request: Request, code: str, state: Optional[str] = Non
         <body>
         <script>
             (function() {{
-                console.log('OAuth callback - error:', {json.dumps(str(e))});
                 const target = window.opener || window.parent || window;
                 if (target) {{
                     target.postMessage({{
                         type: 'HF_OAUTH_ERROR',
                         payload: {{ message: {json.dumps(str(e))} }}
-                    }}, '*');
                 }}
-                setTimeout(function() {{ window.close(); }}, 300);
             }})();
         </script>
         </body>
         </html>
         """
-        return HTMLResponse(content=error_html)
 @app.get("/api/whoami")
 async def whoami_endpoint(authorization: Optional[str] = Header(None)):

 @app.get("/", response_class=HTMLResponse)
 async def home(request: Request):
     """Home page - client-side auth with popup OAuth"""
     # Return template - authentication will be handled client-side
     return templates.TemplateResponse("index.html", {
         "request": request,
+        "oauth_client_id": OAUTH_CLIENT_ID
     })
+@app.get("/api/auth/login")
+async def auth_login(request: Request, state: Optional[str] = None):
+    """OAuth login - stores state in cookie and redirects to HF OAuth"""
+    # Dynamically detect origin from request
+    origin = get_origin_from_request(request)
+    redirect_uri = f"{origin}/oauth/callback"
+    # Generate or use provided state
+    oauth_state = state or os.urandom(16).hex()
+    # Build OAuth authorize URL
+    auth_url = f"https://huggingface.co/oauth/authorize"
+    auth_url += f"?response_type=code"
+    auth_url += f"&client_id={OAUTH_CLIENT_ID}"
+    auth_url += f"&redirect_uri={redirect_uri}"
+    auth_url += f"&scope=openid profile"
+    auth_url += f"&state={oauth_state}"
+    # Create response that redirects to HF OAuth
+    response = RedirectResponse(url=auth_url, status_code=302)
+    # Store state in cookie for validation in callback
+    if not state:  # Only set cookie if state wasn't provided
+        response.set_cookie(
+            key="hf_oauth_state",
+            value=oauth_state,
+            httponly=True,
+            samesite="lax",
+            secure=True,
+            max_age=300,  # 5 minutes
+            path="/"
+        )
+    return response
 @app.get("/oauth/callback", response_class=HTMLResponse)
+async def oauth_callback(request: Request, code: str = None, state: str = None, hf_oauth_state: Optional[str] = Cookie(None)):
     """Handle OAuth callback - returns HTML that posts message to opener window"""
     origin = get_origin_from_request(request)
     redirect_uri = f"{origin}/oauth/callback"
+    # Validate state from cookie
+    if not code or not state or not hf_oauth_state or state != hf_oauth_state:
+        error_msg = 'Invalid or expired OAuth state'
+        if not code:
+            error_msg = 'Missing authorization code'
         error_html = f"""
         <!DOCTYPE html>
         <html>
         <body>
         <script>
             (function() {{
+                console.log('OAuth callback error: {error_msg}');
                 const target = window.opener || window.parent || window;
                 if (target) {{
                     target.postMessage({{
                         type: 'HF_OAUTH_ERROR',
+                        payload: {{ message: '{error_msg}' }}
+                    }}, '{origin}');
                 }}
+                setTimeout(function() {{ window.close(); }}, 100);
             }})();
         </script>
         </body>
         </html>
         """
+        response = HTMLResponse(content=error_html)
+        response.delete_cookie("hf_oauth_state")
+        return response
+    # Delete state cookie
     try:
         token_data = await exchange_code_for_token(code, redirect_uri)
         access_token = token_data.get("access_token")
         <body>
         <script>
             (function() {{
                 const target = window.opener || window.parent || window;
                 if (target) {{
                     target.postMessage({{
                         type: 'HF_OAUTH_SUCCESS',
                         payload: {{
                             token: {json.dumps(access_token)},
+                            namespace: {json.dumps(user_info["username"])}
                         }}
+                    }}, '{origin}');
                 }}
+                setTimeout(function() {{ window.close(); }}, 100);
             }})();
         </script>
         </body>
         </html>
         """
+        response = HTMLResponse(content=success_html)
+        response.delete_cookie("hf_oauth_state")
+        return response
     except Exception as e:
         print(f"OAuth callback error: {e}")
         <body>
         <script>
             (function() {{
                 const target = window.opener || window.parent || window;
                 if (target) {{
                     target.postMessage({{
                         type: 'HF_OAUTH_ERROR',
                         payload: {{ message: {json.dumps(str(e))} }}
+                    }}, '{origin}');
                 }}
+                setTimeout(function() {{ window.close(); }}, 100);
             }})();
         </script>
         </body>
         </html>
         """
+        response = HTMLResponse(content=error_html)
+        response.delete_cookie("hf_oauth_state")
+        return response
 @app.get("/api/whoami")
 async def whoami_endpoint(authorization: Optional[str] = Header(None)):

index.html CHANGED Viewed

@@ -717,7 +717,6 @@
     <script>
         const OAUTH_CLIENT_ID = "{{ oauth_client_id }}";
-        const REDIRECT_URI = "{{ redirect_uri }}";
         const AUTH_STORAGE_KEY = 'HF_AUTH_STATE';
         // Authentication Manager
@@ -782,35 +781,9 @@
             },
             loginWithOAuth() {
-                console.log('Opening OAuth popup');
-                const state = crypto.randomUUID();
-                sessionStorage.setItem('HF_OAUTH_STATE', state);
-                const authUrl = new URL('https://huggingface.co/oauth/authorize');
-                authUrl.searchParams.set('response_type', 'code');
-                authUrl.searchParams.set('client_id', OAUTH_CLIENT_ID);
-                authUrl.searchParams.set('redirect_uri', REDIRECT_URI);
-                authUrl.searchParams.set('scope', 'openid profile');
-                authUrl.searchParams.set('state', state);
-                console.log('OAuth URL:', authUrl.toString());
-                console.log('Redirect URI:', REDIRECT_URI);
-                // Open popup
-                const width = 600;
-                const height = 700;
-                const left = (screen.width - width) / 2;
-                const top = (screen.height - height) / 2;
-                const popup = window.open(
-                    authUrl.toString(),
-                    'HF OAuth',
-                    `width=${width},height=${height},left=${left},top=${top}`
-                );
-                if (!popup) {
-                    console.error('Failed to open popup - may be blocked');
-                    app.showError('Popup was blocked. Please allow popups for this site.');
-                }
             },
             async handleOAuthMessage(event) {
@@ -821,16 +794,15 @@
                     return;
                 }
-                // Verify origin for security (allow HF domains and localhost for testing)
                 if (!event.origin.includes('hf.space') && !event.origin.includes('huggingface.co') && !event.origin.includes('localhost')) {
                     console.warn('Message from untrusted origin:', event.origin);
                     return;
                 }
                 if (event.data.type === 'HF_OAUTH_SUCCESS') {
-                    console.log('OAuth success received');
-                    const { token, username, is_pro, fullname, avatar } = event.data.payload;
-                    sessionStorage.removeItem('HF_OAUTH_STATE');
                     try {
                         await this.validateAndSetAuth(token);
@@ -841,7 +813,6 @@
                     }
                 } else if (event.data.type === 'HF_OAUTH_ERROR') {
                     console.error('OAuth error received:', event.data.payload);
-                    sessionStorage.removeItem('HF_OAUTH_STATE');
                     app.showError(event.data.payload.message || 'Authentication failed');
                     this.showLoginStrip();
                 }
@@ -857,7 +828,6 @@
                 this.user = null;
                 this.canStart = false;
                 localStorage.removeItem(AUTH_STORAGE_KEY);
-                sessionStorage.removeItem('HF_OAUTH_STATE');
                 this.showLoginStrip();
             },

     <script>
         const OAUTH_CLIENT_ID = "{{ oauth_client_id }}";
         const AUTH_STORAGE_KEY = 'HF_AUTH_STATE';
         // Authentication Manager
             },
             loginWithOAuth() {
+                console.log('Starting OAuth flow - navigating to /api/auth/login');
+                // Navigate to login endpoint which handles state and redirects to HF OAuth
+                window.location.href = '/api/auth/login';
             },
             async handleOAuthMessage(event) {
                     return;
                 }
+                // Verify origin for security
                 if (!event.origin.includes('hf.space') && !event.origin.includes('huggingface.co') && !event.origin.includes('localhost')) {
                     console.warn('Message from untrusted origin:', event.origin);
                     return;
                 }
                 if (event.data.type === 'HF_OAUTH_SUCCESS') {
+                    console.log('OAuth success received', event.data.payload);
+                    const { token, namespace } = event.data.payload;
                     try {
                         await this.validateAndSetAuth(token);
                     }
                 } else if (event.data.type === 'HF_OAUTH_ERROR') {
                     console.error('OAuth error received:', event.data.payload);
                     app.showError(event.data.payload.message || 'Authentication failed');
                     this.showLoginStrip();
                 }
                 this.user = null;
                 this.canStart = false;
                 localStorage.removeItem(AUTH_STORAGE_KEY);
                 this.showLoginStrip();
             },