fix

index.html

@@ -24,29 +24,28 @@
         After clicking "Signin with HF", you will be redirected to this space and the access token + user info will be displayed.
       </p>
       <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
-           alt="Sign in with Hugging Face" id="login-hf-btn" style="cursor:pointer;max-width:100%;">
+           alt="Sign in with Hugging Face" id="signin" style="cursor:pointer;display:none;max-width:100%;">
       <button id="signout" style="display:none;">Sign out</button>
       <div id="status"></div>
       <pre id="userinfo" style="display:none"></pre>
     </div>
     <script>
-      // Utiliser le client_id et client_secret injectés par Hugging Face dans l'environnement du Space
+      // Utiliser le client_id injecté par Hugging Face dans l'environnement du Space
       const CLIENT_ID = window.huggingface?.variables?.OAUTH_CLIENT_ID;
-      const CLIENT_SECRET = window.huggingface?.variables?.OAUTH_CLIENT_SECRET;
       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';
 
       // Helper pour afficher l'état et les infos utilisateur
       function showLoggedIn(userinfo) {
-        document.getElementById('login-hf-btn').style.display = 'none';
+        document.getElementById('signin').style.display = 'none';
         document.getElementById('signout').style.display = '';
         document.getElementById('status').textContent = 'Logged in!';
         document.getElementById('userinfo').style.display = '';
         document.getElementById('userinfo').textContent = userinfo;
       }
       function showLoggedOut() {
-        document.getElementById('login-hf-btn').style.display = '';
+        document.getElementById('signin').style.display = '';
         document.getElementById('signout').style.display = 'none';
         document.getElementById('status').textContent = '';
         document.getElementById('userinfo').style.display = 'none';
@@ -54,21 +53,22 @@
       }
 
       // Sign in button
-      document.getElementById('login-hf-btn').onclick = function () {
+      document.getElementById('signin').onclick = function () {
         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}`;
+          `&response_type=code&scope=openid%20profile&state=${state}&prompt=consent`;
         window.location = url;
       };
 
       // Sign out button
       document.getElementById('signout').onclick = function () {
-        localStorage.removeItem('hf_oauth_state');
         localStorage.removeItem('hf_oauth_token');
         localStorage.removeItem('hf_oauth_userinfo');
-        window.location.href = window.location.pathname;
+        localStorage.removeItem('hf_oauth_state');
+        showLoggedOut();
+        window.history.replaceState({}, '', window.location.pathname);
       };
 
       // Handle OAuth callback
@@ -91,43 +91,36 @@
           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',
-              'Authorization': `Basic ${btoa(CLIENT_ID + ':' + CLIENT_SECRET)}`
-            },
+            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);
-            document.getElementById('status').textContent = 'Logged in!';
             // Fetch userinfo
             const respUser = await fetch('https://huggingface.co/oauth/userinfo', {
               headers: { Authorization: `Bearer ${data.access_token}` }
             });
             const userinfo = await respUser.json();
-            localStorage.setItem('hf_oauth_userinfo', JSON.stringify(userinfo, null, 2));
-            document.getElementById('userinfo').style.display = '';
-            document.getElementById('userinfo').textContent = JSON.stringify(userinfo, null, 2);
-            document.getElementById('signout').style.display = '';
-            document.getElementById('login-hf-btn').style.display = 'none';
+            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();
           }
           return;
         }
 
-        // If already logged in, show info
+        // Already logged in?
         const token = localStorage.getItem('hf_oauth_token');
         const userinfo = localStorage.getItem('hf_oauth_userinfo');
         if (token && userinfo) {
-          document.getElementById('status').textContent = 'Already logged in!';
-          document.getElementById('userinfo').style.display = '';
-          document.getElementById('userinfo').textContent = userinfo;
-          document.getElementById('signout').style.display = '';
-          document.getElementById('login-hf-btn').style.display = 'none';
+          showLoggedIn(userinfo);
+        } else {
+          showLoggedOut();
         }
       };
     </script>