Auto-auth via HF login, fallback to token input

- First try connecting without token (HF proxy auth)
- Show token input only if auto-auth fails
- Cleaner UX for logged-in users

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

README.md

@@ -1,10 +1,20 @@
 ---
-title: Webrtc Example
-emoji: 📚
-colorFrom: indigo
-colorTo: green
+title: Reachy Mini WebRTC Demo
+emoji: 🤖
+colorFrom: blue
+colorTo: indigo
 sdk: static
 pinned: false
+hf_oauth: true
+hf_oauth_expiration_minutes: 480
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Reachy Mini WebRTC Demo
+
+WebRTC dashboard to connect to your Reachy Mini robot via the central signaling server.
+
+## Features
+
+- Video streaming from robot camera
+- Head control via data channel
+- HuggingFace OAuth authentication

index.html

@@ -119,10 +119,8 @@
         <div class="grid">
             <!-- Connection Panel -->
             <div class="card">
-                <h2>1. Authentication & Connection</h2>
-                <label>HuggingFace Token:</label>
-                <input type="password" id="hfToken" placeholder="hf_...">
-                <p class="token-info">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></p>
+                <h2>1. Connection</h2>
+                <p style="color: #888; font-size: 0.9em;">You should be automatically authenticated via your HuggingFace login.</p>
 
                 <div class="controls">
                     <button id="connectBtn" onclick="connectSignaling()">Connect</button>
@@ -134,6 +132,14 @@
                     <span id="signalingStatus" class="status disconnected">Disconnected</span>
                 </div>
 
+                <!-- Fallback token input (hidden by default, shown if auto-auth fails) -->
+                <div id="tokenSection" style="display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #0f3460;">
+                    <label>HuggingFace Token (fallback):</label>
+                    <input type="password" id="hfToken" placeholder="hf_...">
+                    <p class="token-info">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></p>
+                    <button onclick="connectWithToken()" style="width: 100%;">Connect with Token</button>
+                </div>
+
                 <h3 style="margin-top: 20px; font-size: 1em;">Available Robots:</h3>
                 <div id="producerList" class="producer-list">
                     <em style="color: #666;">Connect to signaling server first</em>
@@ -194,12 +200,6 @@
         let selectedProducerId = null;
         let myPeerId = null;
 
-        // Try to load token from localStorage
-        const savedToken = localStorage.getItem('hf_token');
-        if (savedToken) {
-            document.getElementById('hfToken').value = savedToken;
-        }
-
         // Logging
         function log(message, type = 'info') {
             const logArea = document.getElementById('logArea');
@@ -215,19 +215,24 @@
             document.getElementById('logArea').innerHTML = '';
         }
 
-        // Signaling
+        // Signaling - try without token first (HF proxy auth)
         function connectSignaling() {
+            doConnect(SIGNALING_SERVER);
+        }
+
+        // Fallback: connect with explicit token
+        function connectWithToken() {
             const token = document.getElementById('hfToken').value.trim();
             if (!token) {
                 log('Please enter your HuggingFace token', 'error');
                 return;
             }
-
-            // Save token for convenience
             localStorage.setItem('hf_token', token);
+            doConnect(`${SIGNALING_SERVER}?token=${encodeURIComponent(token)}`);
+        }
 
-            const url = `${SIGNALING_SERVER}?token=${encodeURIComponent(token)}`;
-            log(`Connecting to central signaling server...`);
+        function doConnect(url) {
+            log(`Connecting to signaling server...`);
             updateSignalingStatus('connecting');
 
             try {
@@ -238,6 +243,7 @@
                     updateSignalingStatus('connected');
                     document.getElementById('connectBtn').disabled = true;
                     document.getElementById('disconnectBtn').disabled = false;
+                    document.getElementById('tokenSection').style.display = 'none';
                 };
 
                 signalingWs.onmessage = (event) => {
@@ -253,7 +259,13 @@
                 signalingWs.onclose = (event) => {
                     log(`Disconnected: code=${event.code}`);
                     if (event.code === 4001) {
-                        log('Invalid token - please check your HuggingFace token', 'error');
+                        log('Auto-auth failed. Please enter your HF token below.', 'error');
+                        document.getElementById('tokenSection').style.display = 'block';
+                        // Try loading saved token
+                        const savedToken = localStorage.getItem('hf_token');
+                        if (savedToken) {
+                            document.getElementById('hfToken').value = savedToken;
+                        }
                     }
                     updateSignalingStatus('disconnected');
                     document.getElementById('connectBtn').disabled = false;