feat: add QR code device pairing for mobile Firefox

frontend/package.json

@@ -17,6 +17,7 @@
     "dompurify": "^3.3.1",
     "jose": "^6.1.3",
     "lucide-react": "^0.576.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router": "^7.13.1",
@@ -33,8 +34,10 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
     "globals": "^17.0.0",
+    "happy-dom": "^20.7.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   }
 }

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react"
-import { useSearchParams } from "react-router"
+import { Routes, Route, useSearchParams } from "react-router"
 import type { AppConfig } from "@/lib/types"
 import { checkBrowserCompatibility } from "@/lib/browser-check"
 import { loadConfig } from "@/lib/config"
@@ -10,6 +10,8 @@ import { ErrorPage } from "@/components/ErrorPage"
 import { BrowserWarning } from "@/components/BrowserWarning"
 import { SignInPage } from "@/components/SignInPage"
 import { DashboardPage } from "@/components/DashboardPage"
+import { PairAuthorityPage } from "@/components/PairAuthorityPage"
+import { PairSupplicantPage } from "@/components/PairSupplicantPage"
 import { ThemeProvider } from "@/components/theme-provider"
 import { ThemeToggle } from "@/components/theme-toggle"
 
@@ -140,11 +142,57 @@ function MainFlow() {
   )
 }
 
+function PairRoute({
+  Component,
+}: {
+  Component: React.ComponentType<{ config: AppConfig }>
+}) {
+  const [config, setConfig] = useState<AppConfig | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const initialized = useRef(false)
+
+  useEffect(() => {
+    if (initialized.current) return
+    initialized.current = true
+    loadConfig()
+      .then(setConfig)
+      .catch((err) =>
+        setError(err instanceof Error ? err.message : String(err))
+      )
+  }, [])
+
+  if (error) {
+    return (
+      <ErrorPage
+        title="Configuration Error"
+        message={error}
+        onRestart={() => window.location.reload()}
+      />
+    )
+  }
+
+  if (!config) {
+    return <LoadingPage message="Loading..." />
+  }
+
+  return <Component config={config} />
+}
+
 export default function App() {
   return (
     <ThemeProvider defaultTheme="system">
       <Layout>
-        <MainFlow />
+        <Routes>
+          <Route
+            path="/pair"
+            element={<PairRoute Component={PairAuthorityPage} />}
+          />
+          <Route
+            path="/pair/supp"
+            element={<PairRoute Component={PairSupplicantPage} />}
+          />
+          <Route path="*" element={<MainFlow />} />
+        </Routes>
       </Layout>
     </ThemeProvider>
   )