Add "Log in with browser" cloud device login (#812)

* Add "Log in with browser" cloud device login

Connects the desktop app to Voicebox Cloud without the user ever handling an
API key. One button in Settings → General opens the system browser to
voicebox.sh, the user authorizes while signed in, and the credential lands
back in the app automatically.

Backend (FastAPI):
- /cloud/login/start opens the browser to the cloud authorize page with a
  state we mint; the existing loopback server catches the redirect at
  /cloud/callback and exchanges the one-time code (server-to-server, over TLS)
  for a voicebox_ API key, verifies it against the API, and stores it.
- /cloud/status and /cloud/disconnect back the settings UI.
- state round-trip guards against login-CSRF; the key never crosses a browser
  URL and is never exposed to the frontend (status returns a prefix only).
- CloudSettings singleton row; config gains VOICEBOX_CLOUD_URL /
  VOICEBOX_CLOUD_API_URL (default the prod hosts, overridable for dev).

Frontend (React):
- CloudSection in Settings → General: "Log in with browser", polls status,
  shows the connected device + a dashboard link. API keys are the advanced
  path only, surfaced in the web dashboard.

The key is stored in the local app DB for now; OS keychain is a marked
follow-up.

* Address review feedback on cloud login

- time out status polling after 2 min so an abandoned browser flow
  doesn't leave the button stuck on "Waiting for browser…"
- handle non-JSON / non-object payloads from the exchange and account
  endpoints instead of 500ing after the state is consumed
- make singleton row creation race-safe (IntegrityError -> re-query)
- clear device_name on disconnect along with the rest of the metadata
- serve the dashboard URL from /cloud/status so the Manage link follows
  VOICEBOX_CLOUD_URL instead of hardcoding production
- keep a "Disconnecting…" label on the disconnect button while pending

* Remove orphaned react-qr-code entries from lockfile

bun.lock was out of date with package.json (react-qr-code was removed
without reinstalling), failing the frozen-lockfile install in CI.

backend/config.py

@@ -138,3 +138,17 @@ def get_models_dir() -> Path:
     path = _data_dir / "models"
     path.mkdir(parents=True, exist_ok=True)
     return path
+
+
+# Voicebox Cloud (backup & sync). Two hosts: the web app owns auth + device
+# pairing (voicebox.sh), the API owns sync + account endpoints
+# (api.voicebox.sh). Override both for local development, e.g.
+# VOICEBOX_CLOUD_URL=http://localhost:17592 VOICEBOX_CLOUD_API_URL=http://localhost:17593
+def get_cloud_web_url() -> str:
+    """Base URL of the Voicebox Cloud web app (auth + /connect + exchange)."""
+    return os.environ.get("VOICEBOX_CLOUD_URL", "https://voicebox.sh").rstrip("/")
+
+
+def get_cloud_api_url() -> str:
+    """Base URL of the Voicebox Cloud API (bearer-authenticated sync/account)."""
+    return os.environ.get("VOICEBOX_CLOUD_API_URL", "https://api.voicebox.sh").rstrip("/")

backend/database/__init__.py

@@ -11,6 +11,7 @@ from .models import (
     Capture,
     CaptureSettings,
     ChannelDeviceMapping,
+    CloudSettings,
     EffectPreset,
     Generation,
     GenerationSettings,
@@ -32,6 +33,7 @@ __all__ = [
     "Capture",
     "CaptureSettings",
     "ChannelDeviceMapping",
+    "CloudSettings",
     "EffectPreset",
     "Generation",
     "GenerationSettings",

backend/database/models.py

@@ -234,6 +234,28 @@ class GenerationSettings(Base):
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
 
+class CloudSettings(Base):
+    """Singleton row holding the link to a Voicebox Cloud account.
+
+    Populated by the "Log in with browser" pairing flow (see services/cloud.py):
+    the browser hands back a one-time code, which the backend exchanges for an
+    ``api_key`` it stores here. The key is a bearer credential for
+    api.voicebox.sh — auth only, never an encryption key (E2E key material lives
+    elsewhere). Stored in the local app database alongside the user's other data;
+    moving it to the OS keychain is a future hardening step. The ``id`` is
+    always 1; a null ``api_key`` means "not connected".
+    """
+
+    __tablename__ = "cloud_settings"
+
+    id = Column(Integer, primary_key=True, default=1)
+    api_key = Column(String, nullable=True)
+    device_name = Column(String, nullable=True)
+    account_user_id = Column(String, nullable=True)
+    connected_at = Column(DateTime, nullable=True)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
 class MCPClientBinding(Base):
     """Per-MCP-client settings (voice profile, engine, personality default).
 

backend/models.py

@@ -794,3 +794,24 @@ class AvailableEffectsResponse(BaseModel):
     """Response listing all available effect types."""
 
     effects: List[AvailableEffect]
+
+
+# ─── Cloud (backup & sync) ──────────────────────────────────────────────
+
+
+class CloudLoginStartResponse(BaseModel):
+    """Returned when the desktop kicks off browser login. The backend has
+    already opened the browser; the URL is included for fallback/debugging."""
+
+    authorize_url: str
+
+
+class CloudStatusResponse(BaseModel):
+    """Current link between this device and a Voicebox Cloud account."""
+
+    connected: bool
+    device_name: Optional[str] = None
+    account_user_id: Optional[str] = None
+    key_prefix: Optional[str] = None
+    connected_at: Optional[datetime] = None
+    dashboard_url: str

backend/routes/__init__.py

@@ -24,6 +24,7 @@ def register_routers(app: FastAPI) -> None:
     from .speak import router as speak_router
     from .mcp_bindings import router as mcp_bindings_router
     from .events import router as events_router
+    from .cloud import router as cloud_router
 
     app.include_router(health_router)
     app.include_router(profiles_router)
@@ -44,3 +45,4 @@ def register_routers(app: FastAPI) -> None:
     app.include_router(speak_router)
     app.include_router(mcp_bindings_router)
     app.include_router(events_router)
+    app.include_router(cloud_router)

backend/routes/cloud.py

@@ -0,0 +1,75 @@
+"""Voicebox Cloud device login routes.
+
+The browser-based pairing flow:
+  1. POST /cloud/login/start  — opens the browser to the cloud authorize page.
+  2. GET  /cloud/callback     — the browser lands here with a one-time code;
+                                the backend exchanges it for an API key.
+  3. GET  /cloud/status       — the UI polls this to learn when it connected.
+  4. POST /cloud/disconnect   — forget the local credential.
+"""
+
+import socket
+
+from fastapi import APIRouter, Depends, Request
+from fastapi.responses import HTMLResponse
+from sqlalchemy.orm import Session
+
+from .. import models
+from ..database import get_db
+from ..services import cloud as cloud_service
+
+router = APIRouter(prefix="/cloud", tags=["cloud"])
+
+
+def _callback_url(request: Request) -> str:
+    # Always loopback — the cloud only redirects codes to 127.0.0.1/localhost.
+    port = request.url.port or 17493
+    return f"http://127.0.0.1:{port}/cloud/callback"
+
+
+@router.post("/login/start", response_model=models.CloudLoginStartResponse)
+async def start_cloud_login(request: Request):
+    device_name = socket.gethostname() or "Desktop"
+    authorize_url = cloud_service.start_login(_callback_url(request), device_name)
+    return models.CloudLoginStartResponse(authorize_url=authorize_url)
+
+
+@router.get("/callback", response_class=HTMLResponse)
+async def cloud_callback(
+    request: Request,
+    code: str = "",
+    state: str = "",
+    db: Session = Depends(get_db),
+):
+    ok, message = await cloud_service.handle_callback(db, code=code, state=state)
+    heading = "You're connected" if ok else "Couldn't connect"
+    accent = "#16a34a" if ok else "#dc2626"
+    sub = (
+        "Voicebox is now linked to your account. You can close this tab and return to the app."
+        if ok
+        else message
+    )
+    html = f"""<!doctype html>
+<html lang="en"><head><meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Voicebox Cloud</title>
+<style>
+  body {{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
+    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; background:#0b0b0d; color:#e7e7ea; }}
+  .card {{ max-width:28rem; padding:2.5rem; text-align:center; }}
+  h1 {{ font-size:1.5rem; margin:0 0 .5rem; color:{accent}; }}
+  p {{ color:#a1a1aa; line-height:1.5; }}
+</style></head>
+<body><div class="card"><h1>{heading}</h1><p>{sub}</p></div></body></html>"""
+    return HTMLResponse(content=html, status_code=200 if ok else 400)
+
+
+@router.get("/status", response_model=models.CloudStatusResponse)
+async def cloud_status(db: Session = Depends(get_db)):
+    return models.CloudStatusResponse(**cloud_service.get_status(db))
+
+
+@router.post("/disconnect", response_model=models.CloudStatusResponse)
+async def cloud_disconnect(db: Session = Depends(get_db)):
+    cloud_service.disconnect(db)
+    return models.CloudStatusResponse(**cloud_service.get_status(db))

backend/services/cloud.py

@@ -0,0 +1,183 @@
+"""
+Voicebox Cloud device login — the "Log in with browser" flow.
+
+The desktop opens the browser to ``{web}/connect``; the user authorizes while
+signed in; the cloud redirects a single-use code back to this backend's loopback
+callback. We exchange that code (server-to-server, over TLS) for a ``voicebox_…``
+API key, verify the key against the API, and store it locally. The key never
+travels through a browser URL, and an unfinished flow leaves nothing behind.
+
+The ``state`` we mint and round-trip prevents login-CSRF: a callback whose state
+we didn't issue (e.g. an attacker tricking the user into hitting the loopback
+callback with their own code) is rejected.
+"""
+
+import logging
+import secrets
+import time
+import webbrowser
+from urllib.parse import urlencode
+
+import httpx
+from sqlalchemy.exc import IntegrityError
+from sqlalchemy.orm import Session
+
+from .. import config
+from ..database import CloudSettings as DBCloudSettings
+
+logger = logging.getLogger(__name__)
+
+SINGLETON_ID = 1
+PENDING_TTL_SECONDS = 600  # the whole browser flow must finish within 10 min
+
+# state -> expiry epoch. In-memory: a single backend process owns the flow, and a
+# dropped pairing should simply be restarted.
+_pending: dict[str, float] = {}
+
+
+def _prune() -> None:
+    now = time.time()
+    for state, expiry in list(_pending.items()):
+        if expiry < now:
+            _pending.pop(state, None)
+
+
+def _json_dict(response: httpx.Response) -> dict | None:
+    """Parsed JSON body, or None when it isn't a JSON object."""
+    try:
+        payload = response.json()
+    except ValueError:
+        return None
+    return payload if isinstance(payload, dict) else None
+
+
+def _consume_state(state: str) -> bool:
+    """Validate and single-use-consume a pending state."""
+    _prune()
+    expiry = _pending.pop(state, None)
+    return expiry is not None and expiry >= time.time()
+
+
+def start_login(callback_url: str, device_name: str) -> str:
+    """Mint a state, build the authorize URL, and open the browser.
+
+    Returns the authorize URL (also opened here) so the caller can surface it as
+    a fallback if the browser didn't open.
+    """
+    state = secrets.token_urlsafe(24)
+    _prune()
+    _pending[state] = time.time() + PENDING_TTL_SECONDS
+
+    params = urlencode({"redirect_uri": callback_url, "state": state, "name": device_name})
+    authorize_url = f"{config.get_cloud_web_url()}/connect?{params}"
+
+    try:
+        webbrowser.open(authorize_url)
+    except Exception:  # pragma: no cover - platform dependent
+        logger.exception("failed to open browser for cloud login")
+
+    return authorize_url
+
+
+async def handle_callback(db: Session, code: str, state: str) -> tuple[bool, str]:
+    """Exchange the code for an API key and store it. Returns (ok, message)."""
+    if not _consume_state(state):
+        return False, "This sign-in link is invalid or has expired. Start again from the app."
+    if not code:
+        return False, "Missing authorization code."
+
+    web = config.get_cloud_web_url()
+    api = config.get_cloud_api_url()
+    try:
+        async with httpx.AsyncClient(timeout=15.0) as client:
+            exchanged = await client.post(f"{web}/api/connect/exchange", json={"code": code})
+            if exchanged.status_code != 200:
+                logger.warning("cloud exchange rejected code: %s", exchanged.status_code)
+                return False, "Could not complete sign-in — the code was rejected."
+            payload = _json_dict(exchanged)
+            if payload is None:
+                logger.warning("cloud exchange returned a non-JSON payload")
+                return False, "Voicebox Cloud returned an unexpected response."
+            api_key = payload.get("key")
+            device_name = payload.get("label")
+            if not api_key:
+                return False, "Voicebox Cloud did not return a key."
+
+            # Confirm the freshly minted key actually authenticates the API.
+            me = await client.get(
+                f"{api}/v1/account/me",
+                headers={"Authorization": f"Bearer {api_key}"},
+            )
+            if me.status_code != 200:
+                logger.warning("minted key failed verification: %s", me.status_code)
+                return False, "Sign-in succeeded but the key could not be verified."
+            # The 200 above proves the key works; the user id is best-effort.
+            data = (_json_dict(me) or {}).get("data")
+            account_user_id = data.get("userId") if isinstance(data, dict) else None
+    except httpx.HTTPError:
+        logger.exception("network error during cloud exchange")
+        return False, "Could not reach Voicebox Cloud. Check your connection and try again."
+
+    _store_key(db, api_key=api_key, device_name=device_name, account_user_id=account_user_id)
+    logger.info("connected to Voicebox Cloud as device %r", device_name)
+    return True, "Connected"
+
+
+def _get_or_create_row(db: Session) -> DBCloudSettings:
+    row = db.query(DBCloudSettings).filter(DBCloudSettings.id == SINGLETON_ID).first()
+    if row is None:
+        row = DBCloudSettings(id=SINGLETON_ID)
+        db.add(row)
+        try:
+            db.commit()
+        except IntegrityError:
+            # Another request created the singleton concurrently.
+            db.rollback()
+            row = db.query(DBCloudSettings).filter(DBCloudSettings.id == SINGLETON_ID).one()
+        else:
+            db.refresh(row)
+    return row
+
+
+def _store_key(db: Session, *, api_key: str, device_name: str | None, account_user_id: str | None):
+    from datetime import datetime
+
+    row = _get_or_create_row(db)
+    row.api_key = api_key
+    row.device_name = device_name
+    row.account_user_id = account_user_id
+    row.connected_at = datetime.utcnow()
+    db.commit()
+
+
+def get_status(db: Session) -> dict:
+    """Local view of the cloud link — never returns the full key."""
+    row = _get_or_create_row(db)
+    connected = bool(row.api_key)
+    # Prefix only: "voicebox_" (9) + 8 chars, matching the cloud's key_prefix.
+    key_prefix = row.api_key[:17] if row.api_key else None
+    return {
+        "connected": connected,
+        "device_name": row.device_name if connected else None,
+        "account_user_id": row.account_user_id if connected else None,
+        "key_prefix": key_prefix,
+        "connected_at": row.connected_at if connected else None,
+        "dashboard_url": f"{config.get_cloud_web_url()}/account",
+    }
+
+
+def disconnect(db: Session) -> None:
+    """Forget the local credential. The key remains valid on the server until
+    revoked from the account dashboard — surface that in the UI."""
+    row = _get_or_create_row(db)
+    row.api_key = None
+    row.device_name = None
+    row.account_user_id = None
+    row.connected_at = None
+    db.commit()
+
+
+def get_api_key(db: Session) -> str | None:
+    """The stored bearer key, for the (future) sync client. None if not linked."""
+    row = _get_or_create_row(db)
+    return row.api_key