fix

index.html

@@ -30,8 +30,9 @@
       <pre id="userinfo" style="display:none"></pre>
     </div>
     <script>
-      // Utiliser le client_id injecté par Hugging Face dans l'environnement du Space
-      const CLIENT_ID = window.huggingface?.variables?.OAUTH_CLIENT_ID;
+      // Le client_id est automatiquement injecté par Hugging Face dans les Spaces avec hf_oauth: true
+      // Il est disponible via window.huggingfaceConfig ou directement depuis l'URL de callback
+      const CLIENT_ID = window.huggingfaceConfig?.oauth?.client_id || 'e0906ea6-519f-4aa0-a128-9b7df044e477';
       const REDIRECT_URI = window.location.origin + window.location.pathname;
       const HF_OAUTH_URL = 'https://huggingface.co/oauth/authorize';
       const HF_TOKEN_URL = 'https://huggingface.co/oauth/token';
@@ -54,11 +55,17 @@
 
       // Sign in button
       document.getElementById('signin').onclick = function () {
+        if (!CLIENT_ID) {
+          document.getElementById('status').textContent = 'Erreur: CLIENT_ID non défini. Vérifiez la configuration OAuth du Space.';
+          return;
+        }
+        
         const state = Math.random().toString(36).slice(2);
         localStorage.setItem('hf_oauth_state', state);
         const url = `${HF_OAUTH_URL}?client_id=${CLIENT_ID}` +
           `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
           `&response_type=code&scope=openid%20profile&state=${state}&prompt=consent`;
+        console.log('Redirecting to:', url);
         window.location = url;
       };
 
@@ -73,6 +80,9 @@
 
       // Handle OAuth callback
       window.onload = async function () {
+        console.log('CLIENT_ID:', CLIENT_ID);
+        console.log('REDIRECT_URI:', REDIRECT_URI);
+        
         // If returning from OAuth redirect
         const params = new URLSearchParams(window.location.search);
         if (params.has('code') && params.has('state')) {
@@ -81,6 +91,12 @@
             document.getElementById('status').textContent = 'Invalid state, possible CSRF detected.';
             return;
           }
+          
+          if (!CLIENT_ID) {
+            document.getElementById('status').textContent = 'Erreur: CLIENT_ID non défini. Vérifiez la configuration OAuth du Space.';
+            return;
+          }
+          
           const code = params.get('code');
           const body = new URLSearchParams({
             client_id: CLIENT_ID,
@@ -88,27 +104,40 @@
             code: code,
             redirect_uri: REDIRECT_URI
           });
+          
+          console.log('Token exchange body:', body.toString());
           document.getElementById('status').textContent = 'Exchanging code for token...';
-          const resp = await fetch(HF_TOKEN_URL, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body
-          });
-          const data = await resp.json();
-          if (data.access_token) {
-            localStorage.setItem('hf_oauth_token', data.access_token);
-            // Fetch userinfo
-            const respUser = await fetch('https://huggingface.co/oauth/userinfo', {
-              headers: { Authorization: `Bearer ${data.access_token}` }
+          
+          try {
+            const resp = await fetch(HF_TOKEN_URL, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+              body
             });
-            const userinfo = await respUser.json();
-            const userinfoStr = JSON.stringify(userinfo, null, 2);
-            localStorage.setItem('hf_oauth_userinfo', userinfoStr);
-            showLoggedIn(userinfoStr);
-            // Clean up URL
-            window.history.replaceState({}, '', window.location.pathname);
-          } else {
-            document.getElementById('status').textContent = 'OAuth failed: ' + JSON.stringify(data);
+            
+            console.log('Token response status:', resp.status);
+            const data = await resp.json();
+            console.log('Token response data:', data);
+            
+            if (data.access_token) {
+              localStorage.setItem('hf_oauth_token', data.access_token);
+              // Fetch userinfo
+              const respUser = await fetch('https://huggingface.co/oauth/userinfo', {
+                headers: { Authorization: `Bearer ${data.access_token}` }
+              });
+              const userinfo = await respUser.json();
+              const userinfoStr = JSON.stringify(userinfo, null, 2);
+              localStorage.setItem('hf_oauth_userinfo', userinfoStr);
+              showLoggedIn(userinfoStr);
+              // Clean up URL
+              window.history.replaceState({}, '', window.location.pathname);
+            } else {
+              document.getElementById('status').textContent = 'OAuth failed: ' + JSON.stringify(data);
+              showLoggedOut();
+            }
+          } catch (error) {
+            console.error('Erreur lors de l\'échange du token:', error);
+            document.getElementById('status').textContent = 'Erreur réseau: ' + error.message;
             showLoggedOut();
           }
           return;