Revert earlier change to iframe srcdoc, using src instead, because srcdoc was not compatible with all passkey implementations (BitWarden).

frontend/src/utils/api.js

@@ -49,38 +49,37 @@ let authPromise = null
 let authResolve = null
 let authReject = null
 
-// Cache for auth iframe HTML by mode
-const authIframeHtmlCache = {}
+// Cache for auth iframe URL by mode
+const authIframeUrlCache = {}
 
 /**
- * Get the auth iframe HTML for a given mode.
- * Fetches from /auth/api/forward which returns HTML in the auth.iframe field.
+ * Get the auth iframe URL for a given mode.
+ * Fetches from /auth/api/forward which returns URL in the auth.iframe field.
  * Results are cached per mode.
  * @param {string} mode - The auth mode ('login', 'reauth', 'forbidden')
- * @returns {Promise<string>} - The HTML content for the iframe
+ * @returns {Promise<string>} - The URL for the iframe
  */
-export async function getAuthIframeHtml(mode = 'login') {
-  if (authIframeHtmlCache[mode]) {
-    return authIframeHtmlCache[mode]
+export async function getAuthIframeUrl(mode = 'login') {
+  if (authIframeUrlCache[mode]) {
+    return authIframeUrlCache[mode]
   }
 
-  // Fetch from forward endpoint - it returns HTML in auth.iframe on 401/403
+  // Fetch from forward endpoint - it returns URL in auth.iframe on 401/403
   const response = await fetch('/auth/api/forward', { credentials: 'include' })
   if (response.status === 401 || response.status === 403) {
     const data = await response.json()
     if (data.auth?.iframe) {
-      // Cache the HTML - it's the same regardless of mode (mode is in data attrs)
-      // But we need to patch the mode in the HTML if different from returned
-      let html = data.auth.iframe
+      // The iframe field now contains a URL with hash fragment
+      // If mode differs, update the hash param
+      let url = data.auth.iframe
       if (mode !== data.auth.mode) {
-        // Replace data-mode attribute value
-        html = html.replace(/data-mode="[^"]*"/, `data-mode="${mode}"`)
+        url = url.replace(/mode=[^&]*/, `mode=${mode}`)
       }
-      authIframeHtmlCache[mode] = html
-      return html
+      authIframeUrlCache[mode] = url
+      return url
     }
   }
-  throw new Error('Unable to fetch auth iframe HTML')
+  throw new Error('Unable to fetch auth iframe URL')
 }
 
 /**
@@ -94,11 +93,11 @@ export function isAuthIframeOpen() {
 /**
  * Show the authentication iframe and return a promise that resolves on success.
  * If an auth iframe is already open (from any source), hooks into its completion.
- * @param {string} iframeHtml - The HTML content for the iframe srcdoc
+ * @param {string} iframeUrl - The URL for the iframe src
  * @returns {Promise<void>}
  * @throws {AuthCancelledError} - If authentication is cancelled by user
  */
-export function showAuthIframe(iframeHtml) {
+export function showAuthIframe(iframeUrl) {
   // If we already have a promise (from us), return it
   if (authPromise) return authPromise
 
@@ -120,11 +119,12 @@ export function showAuthIframe(iframeHtml) {
   // Remove existing iframe if any
   hideAuthIframe()
 
-  // Create new iframe for authentication using srcdoc
+  // Create new iframe for authentication using src URL
   authIframe = document.createElement('iframe')
   authIframe.id = 'auth-iframe'
   authIframe.title = 'Authentication'
-  authIframe.srcdoc = iframeHtml
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = iframeUrl
   document.body.appendChild(authIframe)
 
   return authPromise

frontend/src/utils/passkey.js

@@ -37,7 +37,7 @@ export async function register(resetToken = null, displayName = null, onstartreg
       // Notify caller that we're about to show the browser prompt
       if (onstartreg) onstartreg()
 
-      const registrationResponse = await startRegistration({ optionsJSON: res })
+      const registrationResponse = await startRegistration(res)
       ws.send_json(registrationResponse)
 
       const result = await ws.receive_json()
@@ -64,7 +64,7 @@ export async function authenticate() {
       throw new Error(res.detail || `Authentication failed: ${res.status}`)
     }
 
-    const authResponse = await startAuthentication({ optionsJSON: res })
+    const authResponse = await startAuthentication(res)
     ws.send_json(authResponse)
 
     const result = await ws.receive_json()