fix(auth): preserve MFA continuation through field hydration

packages/auth/assets/client/auth.js

@@ -405,10 +405,11 @@
     const form = element.querySelector("[data-auth-mfa-form]");
     const tokenInput = form?.querySelector("[name=mfaToken]");
     const challengeInput = form?.querySelector("[name=challengeId]");
-    const methodInput = form?.querySelector("[data-auth-mfa-method]");
+    const methodInput = form?.querySelector("select[name=method]");
     const codeInput = form?.querySelector("[name=code]");
     const status = form?.querySelector("[data-auth-mfa-status]");
     const saved = readMfaState();
+    let expired = false;
     if (tokenInput && !tokenInput.value && saved?.mfaToken) {
       tokenInput.value = String(saved.mfaToken);
     }
@@ -442,6 +443,16 @@
     };
 
     const onSubmit = async (event) => {
+      // Hydration may restore the component's empty initial prop after mount.
+      // Recover only this tab's existing challenge; never mint or extend one.
+      if (expired) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+      }
+      if (tokenInput && !tokenInput.value && saved?.mfaToken) {
+        tokenInput.value = String(saved.mfaToken);
+      }
       const method = methodInput?.value;
       if (!form || !["email-otp", "sms-otp"].includes(method) || challengeInput?.value) return;
       event.preventDefault();
@@ -474,14 +485,24 @@
       if (event.target !== form) return;
       sessionStorage.removeItem(MFA_STORAGE_KEY);
     };
+    const onError = (event) => {
+      if (event.target !== form || event.detail?.code !== "mfa-transaction-expired") return;
+      expired = true;
+      sessionStorage.removeItem(MFA_STORAGE_KEY);
+      if (tokenInput) tokenInput.value = "";
+      const restart = element.querySelector("[data-auth-mfa-restart]");
+      if (restart) restart.hidden = false;
+    };
     onMethodChange();
     methodInput?.addEventListener("change", onMethodChange);
     form?.addEventListener("submit", onSubmit, true);
     element.addEventListener("wrn:success", onSuccess);
+    element.addEventListener("wrn:error", onError);
     flowCleanups.set(element, () => {
       methodInput?.removeEventListener("change", onMethodChange);
       form?.removeEventListener("submit", onSubmit, true);
       element.removeEventListener("wrn:success", onSuccess);
+      element.removeEventListener("wrn:error", onError);
     });
   }