Spaces:

MikelWL
/

ConverTA

Sleeping

App Files Files Community

MikelWL commited on Jan 14

Commit

97a1a34

1 Parent(s): abaccfd

Fix HF login by using token auth fallback

Browse files

Files changed (4) hide show

backend/api/main.py +14 -4
frontend/pages/config_view.py +1 -1
frontend/pages/main_page.py +144 -13
frontend/react_gradio_hybrid.py +9 -11

backend/api/main.py CHANGED Viewed

@@ -75,6 +75,12 @@ async def auth_middleware(request: Request, call_next):
     if request.headers.get(INTERNAL_HEADER) == password:
         return await call_next(request)
     token = request.cookies.get(COOKIE_NAME)
     if token and verify_session_token(token, password):
         return await call_next(request)
@@ -124,10 +130,14 @@ async def websocket_conversation_endpoint(websocket: WebSocket, conversation_id:
         if websocket.headers.get(INTERNAL_HEADER) == password:
             pass
         else:
-            token = websocket.cookies.get(COOKIE_NAME)
-            if not (token and verify_session_token(token, password)):
-                await websocket.close(code=1008)
-                return
     await websocket_endpoint(websocket, conversation_id)

     if request.headers.get(INTERNAL_HEADER) == password:
         return await call_next(request)
+    authz = request.headers.get("authorization")
+    if isinstance(authz, str) and authz.lower().startswith("bearer "):
+        token = authz.split(" ", 1)[1].strip()
+        if token and verify_session_token(token, password):
+            return await call_next(request)
     token = request.cookies.get(COOKIE_NAME)
     if token and verify_session_token(token, password):
         return await call_next(request)
         if websocket.headers.get(INTERNAL_HEADER) == password:
             pass
         else:
+            bearer = websocket.query_params.get("token")
+            if isinstance(bearer, str) and bearer and verify_session_token(bearer, password):
+                pass
+            else:
+                token = websocket.cookies.get(COOKIE_NAME)
+                if not (token and verify_session_token(token, password)):
+                    await websocket.close(code=1008)
+                    return
     await websocket_endpoint(websocket, conversation_id)

frontend/pages/config_view.py CHANGED Viewed

@@ -11,7 +11,7 @@ def get_config_view_js() -> str:
             const [savedAt, setSavedAt] = React.useState(existing?.saved_at || null);
             React.useEffect(() => {
-                fetch('/api/personas')
                     .then(r => r.json())
                     .then(data => {
                         setPersonas({

             const [savedAt, setSavedAt] = React.useState(existing?.saved_at || null);
             React.useEffect(() => {
+                authedFetch('/api/personas')
                     .then(r => r.json())
                     .then(data => {
                         setPersonas({

frontend/pages/main_page.py CHANGED Viewed

@@ -1,7 +1,7 @@
 from .config_view import get_config_view_js
-def get_main_page_html() -> str:
     html = r"""<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -20,6 +20,8 @@ def get_main_page_html() -> str:
         const { useState, useEffect, useRef } = React;
         const STORAGE_KEY = 'converta.config.v1';
         function loadConfig() {
             try {
@@ -31,6 +33,47 @@ def get_main_page_html() -> str:
             }
         }
         function PageNav({ active, onChange }) {
             const base = "px-4 py-2 rounded-lg text-sm font-semibold border transition-colors";
             const activeCls = "bg-slate-900 text-white border-slate-900";
@@ -45,7 +88,65 @@ def get_main_page_html() -> str:
         /*__CONFIG_VIEW__*/
         function App() {
             const [activePage, setActivePage] = useState('main');
             const [conversationActive, setConversationActive] = useState(false);
             const [messages, setMessages] = useState([]);
@@ -62,6 +163,28 @@ def get_main_page_html() -> str:
             const transcriptContainerRef = useRef(null);
             const stickToBottomRef = useRef(true);
             useEffect(() => {
                 return () => {
                     if (wsRef.current) {
@@ -81,7 +204,9 @@ def get_main_page_html() -> str:
             const connectWebSocket = () => {
                 conversationIdRef.current = `react_conv_${Date.now()}`;
                 const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
-                const wsUrl = `${wsScheme}://${window.location.host}/ws/frontend/${conversationIdRef.current}`;
                 const websocket = new WebSocket(wsUrl);
@@ -163,6 +288,7 @@ def get_main_page_html() -> str:
             };
             const startConversation = () => {
                 setMessages([]);
                 setInsights([]);
                 setRouting(null);
@@ -282,16 +408,16 @@ def get_main_page_html() -> str:
                             <h1 className="text-2xl font-extrabold text-slate-900 tracking-tight">ConverTA</h1>
                         </div>
-	                        <div className="bg-white rounded-lg shadow-lg p-4 mb-6">
-	                            <div className="flex items-center justify-between gap-4">
-	                                <PageNav active={activePage} onChange={setActivePage} />
-	                                {activePage === 'main' && (
-	                                    !conversationActive ? (
-	                                        <button onClick={startConversation} className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow">
-	                                            <span>⚡</span>
-	                                            Start
-	                                        </button>
-	                                    ) : (
 	                                        <button onClick={stopConversation} className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow">
 	                                            ⏹️ Stop
 	                                        </button>
@@ -510,6 +636,9 @@ def get_main_page_html() -> str:
 	                            </div>
 	                        )}
                     </div>
                 </div>
             );
         }
@@ -521,4 +650,6 @@ def get_main_page_html() -> str:
 </html>
 """
-    return html.replace("/*__CONFIG_VIEW__*/", get_config_view_js())

 from .config_view import get_config_view_js
+def get_main_page_html(auth_enabled: bool = False) -> str:
     html = r"""<!DOCTYPE html>
 <html lang="en">
 <head>
         const { useState, useEffect, useRef } = React;
         const STORAGE_KEY = 'converta.config.v1';
+        const SESSION_KEY = 'converta.session.v1';
+        const AUTH_ENABLED = /*__AUTH_ENABLED__*/ false;
         function loadConfig() {
             try {
             }
         }
+        function loadSessionToken() {
+            try {
+                const raw = localStorage.getItem(SESSION_KEY);
+                if (!raw) return null;
+                return raw;
+            } catch {
+                return null;
+            }
+        }
+        function saveSessionToken(token) {
+            localStorage.setItem(SESSION_KEY, token);
+        }
+        function clearSessionToken() {
+            localStorage.removeItem(SESSION_KEY);
+        }
+        async function loginWithPassword(password) {
+            const res = await fetch('/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ password })
+            });
+            if (!res.ok) {
+                if (res.status === 401) throw new Error('Incorrect password.');
+                throw new Error('Login failed.');
+            }
+            const data = await res.json();
+            if (!data || !data.token) throw new Error('Login failed.');
+            saveSessionToken(data.token);
+            return data.token;
+        }
+        async function authedFetch(url, options) {
+            const token = loadSessionToken();
+            const headers = Object.assign({}, (options && options.headers) || {});
+            if (token) headers['Authorization'] = `Bearer ${token}`;
+            return fetch(url, Object.assign({}, options || {}, { headers }));
+        }
         function PageNav({ active, onChange }) {
             const base = "px-4 py-2 rounded-lg text-sm font-semibold border transition-colors";
             const activeCls = "bg-slate-900 text-white border-slate-900";
         /*__CONFIG_VIEW__*/
+        function LoginOverlay({ onAuthed }) {
+            const [pw, setPw] = useState('');
+            const [err, setErr] = useState(null);
+            const [busy, setBusy] = useState(false);
+            const submit = async () => {
+                setErr(null);
+                setBusy(true);
+                try {
+                    const token = await loginWithPassword(pw);
+                    onAuthed(token);
+                } catch (e) {
+                    setErr(e?.message || 'Login failed.');
+                } finally {
+                    setBusy(false);
+                }
+            };
+            return (
+                <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-6 z-50">
+                    <div className="w-full max-w-md bg-white rounded-lg shadow-xl p-6">
+                        <div className="flex items-center gap-3 mb-4">
+                            <span className="text-3xl">🧠</span>
+                            <div className="text-xl font-extrabold text-slate-900 tracking-tight">ConverTA</div>
+                        </div>
+                        <div className="text-sm text-slate-600">
+                            Enter the shared password to unlock the app.
+                        </div>
+                        <div className="mt-4">
+                            <label className="block text-sm font-semibold text-slate-700 mb-2">Password</label>
+                            <input
+                                type="password"
+                                value={pw}
+                                onChange={(e) => setPw(e.target.value)}
+                                onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
+                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+                                autoFocus
+                            />
+                            {err && <div className="text-sm text-red-600 mt-2">{err}</div>}
+                        </div>
+                        <div className="mt-6 flex items-center justify-end">
+                            <button
+                                type="button"
+                                onClick={submit}
+                                disabled={busy}
+                                className="bg-slate-900 hover:bg-slate-800 disabled:bg-slate-400 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow"
+                            >
+                                {busy ? 'Checking…' : 'Unlock'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
         function App() {
+            const [authenticated, setAuthenticated] = useState(!AUTH_ENABLED);
             const [activePage, setActivePage] = useState('main');
             const [conversationActive, setConversationActive] = useState(false);
             const [messages, setMessages] = useState([]);
             const transcriptContainerRef = useRef(null);
             const stickToBottomRef = useRef(true);
+            useEffect(() => {
+                if (!AUTH_ENABLED) return;
+                const token = loadSessionToken();
+                if (!token) {
+                    setAuthenticated(false);
+                    return;
+                }
+                authedFetch('/api/health')
+                    .then((r) => {
+                        if (r.ok) {
+                            setAuthenticated(true);
+                        } else {
+                            clearSessionToken();
+                            setAuthenticated(false);
+                        }
+                    })
+                    .catch(() => {
+                        clearSessionToken();
+                        setAuthenticated(false);
+                    });
+            }, []);
             useEffect(() => {
                 return () => {
                     if (wsRef.current) {
             const connectWebSocket = () => {
                 conversationIdRef.current = `react_conv_${Date.now()}`;
                 const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+                const token = loadSessionToken();
+                const qs = token ? `?token=${encodeURIComponent(token)}` : '';
+                const wsUrl = `${wsScheme}://${window.location.host}/ws/frontend/${conversationIdRef.current}${qs}`;
                 const websocket = new WebSocket(wsUrl);
             };
             const startConversation = () => {
+                if (AUTH_ENABLED && !authenticated) return;
                 setMessages([]);
                 setInsights([]);
                 setRouting(null);
                             <h1 className="text-2xl font-extrabold text-slate-900 tracking-tight">ConverTA</h1>
                         </div>
+		                        <div className="bg-white rounded-lg shadow-lg p-4 mb-6">
+		                            <div className="flex items-center justify-between gap-4">
+		                                <PageNav active={activePage} onChange={setActivePage} />
+		                                {activePage === 'main' && (
+		                                    !conversationActive ? (
+		                                        <button onClick={startConversation} disabled={AUTH_ENABLED && !authenticated} className="bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow">
+		                                            <span>⚡</span>
+		                                            Start
+		                                        </button>
+		                                    ) : (
 	                                        <button onClick={stopConversation} className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow">
 	                                            ⏹️ Stop
 	                                        </button>
 	                            </div>
 	                        )}
                     </div>
+                    {AUTH_ENABLED && !authenticated && (
+                        <LoginOverlay onAuthed={() => setAuthenticated(true)} />
+                    )}
                 </div>
             );
         }
 </html>
 """
+    html = html.replace("/*__CONFIG_VIEW__*/", get_config_view_js())
+    html = html.replace("/*__AUTH_ENABLED__*/ false", "true" if auth_enabled else "false")
+    return html

frontend/react_gradio_hybrid.py CHANGED Viewed

@@ -17,7 +17,6 @@ sys.path.insert(0, str(project_root / "frontend"))
 from config.settings import get_settings
 from pages.main_page import get_main_page_html
-from pages.login_page import get_login_page_html
 from websocket_manager import WebSocketManager
 from backend.api.main import app as backend_app
 from backend.api.conversation_ws import manager as backend_ws_manager
@@ -80,15 +79,10 @@ def _is_request_authenticated(request: Request, password: str) -> bool:
 @app.get("/", response_class=HTMLResponse)
 async def serve_frontend(request: Request):
-    """Serve login page (if locked) or the single-page React UI."""
     password = get_app_password()
-    if not password:
-        return HTMLResponse(content=get_main_page_html())
-    if not _is_request_authenticated(request, password):
-        return HTMLResponse(content=get_login_page_html(app_name="ConverTA"))
-    return HTMLResponse(content=get_main_page_html())
 @app.post("/login")
@@ -104,7 +98,7 @@ async def login(request: Request, payload: dict):
         return JSONResponse({"error": "unauthorized"}, status_code=401)
     token = create_session_token(password)
-    resp = JSONResponse({"ok": True})
     forwarded = request.headers.get("x-forwarded-proto")
     secure = (forwarded == "https") or (request.url.scheme == "https")
     resp.set_cookie(
@@ -132,7 +126,11 @@ async def frontend_websocket(websocket: WebSocket, conversation_id: str):
     password = get_app_password()
     if password:
         token = websocket.cookies.get(COOKIE_NAME)
-        if not _is_authenticated_cookie(token, password):
             await websocket.close(code=1008)
             return

 from config.settings import get_settings
 from pages.main_page import get_main_page_html
 from websocket_manager import WebSocketManager
 from backend.api.main import app as backend_app
 from backend.api.conversation_ws import manager as backend_ws_manager
 @app.get("/", response_class=HTMLResponse)
 async def serve_frontend(request: Request):
+    """Serve the single-page React UI (conversation + configuration)."""
     password = get_app_password()
+    auth_enabled = bool(password)
+    return HTMLResponse(content=get_main_page_html(auth_enabled=auth_enabled))
 @app.post("/login")
         return JSONResponse({"error": "unauthorized"}, status_code=401)
     token = create_session_token(password)
+    resp = JSONResponse({"ok": True, "token": token})
     forwarded = request.headers.get("x-forwarded-proto")
     secure = (forwarded == "https") or (request.url.scheme == "https")
     resp.set_cookie(
     password = get_app_password()
     if password:
         token = websocket.cookies.get(COOKIE_NAME)
+        bearer = websocket.query_params.get("token")
+        authed = _is_authenticated_cookie(token, password) or (
+            isinstance(bearer, str) and verify_session_token(bearer, password)
+        )
+        if not authed:
             await websocket.close(code=1008)
             return