@strands.gg/accui 1.3.2 → 1.4.0

package/dist/strands-auth-ui.cjs.js

@@ -370,7 +370,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     placeholder: { type: String, required: false },
     disabled: { type: Boolean, required: false },
     required: { type: Boolean, required: false },
-    error: { type: String, required: false },
+    error: { type: Object, required: false },
     helpText: { type: String, required: false },
     autocomplete: { type: String, required: false },
     size: { type: String, required: false, default: "md" }
@@ -539,7 +539,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     $props.error ? (vue.openBlock(), vue.createElementBlock(
       "p",
       _hoisted_9$b,
-      vue.toDisplayString($props.error),
+      vue.toDisplayString($props.error.message),
       1
       /* TEXT */
     )) : $props.helpText ? (vue.openBlock(), vue.createElementBlock(
@@ -1031,7 +1031,11 @@ function useStrandsMfa() {
   const { getUrl } = useStrandsConfig.useStrandsConfig();
   const { currentSession } = useStrandsAuth.useStrandsAuth();
   const hasMfaDevices = vue.computed(() => mfaDevices.value.length > 0);
-  const activeMfaDevices = vue.computed(() => mfaDevices.value.filter((d) => d.is_active));
+  const activeMfaDevices = vue.computed(
+    () => mfaDevices.value.filter(
+      (d) => d.is_active && d.device_type !== "hardware" && d.device_type !== "passkey"
+    )
+  );
   const makeAuthenticatedRequest = async (url, options = {}) => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
@@ -1266,7 +1270,12 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     const cooldownActive = vue.ref(false);
     const cooldownSeconds = vue.ref(0);
     let cooldownInterval = null;
-    const availableMethods = vue.computed(() => props.availableMfaMethods || []);
+    const availableMethods = vue.computed(() => {
+      const methods = props.availableMfaMethods || [];
+      return methods.filter(
+        (method) => method.device_type !== "hardware" && method.device_type !== "passkey"
+      );
+    });
     vue.watch(() => availableMethods.value, (methods) => {
       if (methods.length === 1) {
         selectedMethod.value = methods[0];
@@ -1392,14 +1401,33 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           throw new Error("Hardware keys are not supported in this browser");
         }
         const challengeResponse = await getMfaWebAuthnChallenge(selectedMethod.value.id);
-        const challenge = challengeResponse.challenge;
-        console.log("Received WebAuthn challenge:", challenge);
+        const challengeData = challengeResponse.challenge.publicKey || challengeResponse.challenge;
+        const base64ToUint8Array = (base64) => {
+          if (!base64 || typeof base64 !== "string") {
+            return new Uint8Array(0);
+          }
+          const padding = "=".repeat((4 - base64.length % 4) % 4);
+          const b64 = (base64 + padding).replace(/-/g, "+").replace(/_/g, "/");
+          const rawData = window.atob(b64);
+          const outputArray = new Uint8Array(rawData.length);
+          for (let i = 0; i < rawData.length; ++i) {
+            outputArray[i] = rawData.charCodeAt(i);
+          }
+          return outputArray;
+        };
         const isPasskey = selectedMethod.value.device_type === "passkey";
         const publicKeyCredentialRequestOptions = {
-          ...challenge,
-          timeout: isPasskey ? 3e5 : challenge.timeout || 6e4,
+          ...challengeData,
+          challenge: challengeData.challenge ? base64ToUint8Array(challengeData.challenge) : new Uint8Array(32),
+          timeout: isPasskey ? 3e5 : challengeData.timeout || 6e4,
           userVerification: isPasskey ? "required" : "discouraged"
         };
+        if (challengeData.allowCredentials && Array.isArray(challengeData.allowCredentials)) {
+          publicKeyCredentialRequestOptions.allowCredentials = challengeData.allowCredentials.map((cred) => ({
+            ...cred,
+            id: base64ToUint8Array(cred.id)
+          }));
+        }
         const credential = await navigator.credentials.get({
           publicKey: publicKeyCredentialRequestOptions
         });
@@ -1440,6 +1468,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
         await verifyMfa(selectedMethod.value.id, JSON.stringify(credentialData));
         emit("success");
       } catch (error) {
+        console.error("Hardware key authentication error:", error);
         emit("error", error instanceof Error ? error.message : "Hardware key authentication failed");
       }
     };
@@ -1492,7 +1521,7 @@ const _hoisted_19$6 = {
   key: 3,
   class: "text-center space-y-4"
 };
-const _hoisted_20$4 = { class: "bg-blue-50 border border-blue-200 rounded-lg p-4" };
+const _hoisted_20$5 = { class: "bg-blue-50 border border-blue-200 rounded-lg p-4" };
 const _hoisted_21$4 = { class: "flex items-center space-x-3" };
 const _hoisted_22$3 = { class: "text-left" };
 const _hoisted_23$2 = { class: "font-medium text-blue-900" };
@@ -1506,21 +1535,21 @@ const _hoisted_27$2 = {
   key: 4,
   class: "space-y-4"
 };
-const _hoisted_28$2 = {
+const _hoisted_28$1 = {
   key: 0,
   class: "bg-green-50 border border-green-200 rounded-lg p-4"
 };
-const _hoisted_29$2 = {
+const _hoisted_29$1 = {
   key: 1,
   class: "text-sm text-gray-600"
 };
-const _hoisted_30$2 = {
+const _hoisted_30$1 = {
   key: 2,
   class: "flex justify-between text-sm"
 };
-const _hoisted_31$2 = ["disabled"];
-const _hoisted_32$2 = { class: "pt-4 border-t border-gray-200" };
-const _hoisted_33$2 = {
+const _hoisted_31$1 = ["disabled"];
+const _hoisted_32$1 = { class: "pt-4 border-t border-gray-200" };
+const _hoisted_33$1 = {
   key: 3,
   class: "space-y-4 bg-amber-50 border border-amber-200 rounded-lg p-4"
 };
@@ -1729,7 +1758,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
               ])) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" Hardware Key & Passkey Authentication "),
               $setup.selectedMethod?.device_type === "hardware" || $setup.selectedMethod?.device_type === "passkey" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19$6, [
-                vue.createElementVNode("div", _hoisted_20$4, [
+                vue.createElementVNode("div", _hoisted_20$5, [
                   vue.createElementVNode("div", _hoisted_21$4, [
                     _cache[11] || (_cache[11] = vue.createElementVNode(
                       "div",
@@ -1859,7 +1888,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
               vue.createCommentVNode(" Code Input "),
               $setup.selectedMethod && $setup.selectedMethod.device_type !== "hardware" && $setup.selectedMethod.device_type !== "passkey" && ($setup.selectedMethod.device_type !== "email" || $setup.emailCodeSent) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_27$2, [
                 vue.createCommentVNode(" Email confirmation "),
-                $setup.selectedMethod.device_type === "email" && $setup.emailCodeSent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28$2, _cache[14] || (_cache[14] = [
+                $setup.selectedMethod.device_type === "email" && $setup.emailCodeSent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28$1, _cache[14] || (_cache[14] = [
                   vue.createElementVNode(
                     "div",
                     { class: "flex items-start space-x-2" },
@@ -1900,21 +1929,21 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 vue.createCommentVNode(" TOTP Help "),
                 $setup.selectedMethod.device_type === "totp" ? (vue.openBlock(), vue.createElementBlock(
                   "div",
-                  _hoisted_29$2,
+                  _hoisted_29$1,
                   ' Open your authenticator app and enter the 6-digit code for "' + vue.toDisplayString($setup.selectedMethod.device_name) + '" ',
                   1
                   /* TEXT */
                 )) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" Email Resend "),
-                $setup.selectedMethod.device_type === "email" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30$2, [
+                $setup.selectedMethod.device_type === "email" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30$1, [
                   vue.createElementVNode("button", {
                     onClick: $setup.sendEmailCode,
                     disabled: $setup.loading || $setup.cooldownActive,
                     class: "text-strands-600 hover:text-strands-800 disabled:text-gray-400 disabled:cursor-not-allowed"
-                  }, vue.toDisplayString($setup.cooldownActive ? `Resend in ${$setup.cooldownSeconds}s` : "Resend Code"), 9, _hoisted_31$2)
+                  }, vue.toDisplayString($setup.cooldownActive ? `Resend in ${$setup.cooldownSeconds}s` : "Resend Code"), 9, _hoisted_31$1)
                 ])) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" Backup Codes Option "),
-                vue.createElementVNode("div", _hoisted_32$2, [
+                vue.createElementVNode("div", _hoisted_32$1, [
                   vue.createElementVNode("button", {
                     onClick: _cache[3] || (_cache[3] = ($event) => $setup.showBackupCodeInput = !$setup.showBackupCodeInput),
                     class: "flex items-center text-sm text-gray-600 hover:text-gray-800 transition-colors"
@@ -1946,7 +1975,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 ]),
                 vue.createCommentVNode(" Backup Code Input "),
-                $setup.showBackupCodeInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33$2, [
+                $setup.showBackupCodeInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33$1, [
                   _cache[16] || (_cache[16] = vue.createElementVNode(
                     "div",
                     { class: "flex items-start space-x-2 mb-3" },
@@ -3388,7 +3417,7 @@ const _hoisted_16$5 = { class: "alert-error" };
 const _hoisted_17$5 = { class: "flex items-start gap-3" };
 const _hoisted_18$5 = { class: "font-medium" };
 const _hoisted_19$5 = { class: "mt-8 text-center" };
-const _hoisted_20$3 = { class: "text-sm text-neutral-600" };
+const _hoisted_20$4 = { class: "text-sm text-neutral-600" };
 const _hoisted_21$3 = { key: 0 };
 const _hoisted_22$2 = { class: "text-neutral-400 text-sm" };
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
@@ -3653,7 +3682,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
             ])) : vue.createCommentVNode("v-if", true),
             vue.createCommentVNode(" Sign in link "),
             vue.createElementVNode("div", _hoisted_19$5, [
-              vue.createElementVNode("p", _hoisted_20$3, [
+              vue.createElementVNode("p", _hoisted_20$4, [
                 _cache[10] || (_cache[10] = vue.createTextVNode(
                   " Already have an account? ",
                   -1
@@ -7803,7 +7832,7 @@ const _hoisted_18$3 = {
   class: "space-y-4"
 };
 const _hoisted_19$3 = { class: "text-center" };
-const _hoisted_20$2 = { class: "text-sm text-gray-600 mb-6" };
+const _hoisted_20$3 = { class: "text-sm text-gray-600 mb-6" };
 const _hoisted_21$2 = { class: "flex justify-end space-x-3 pt-4" };
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock($setup["UiModal"], {
@@ -8256,7 +8285,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
           )),
           vue.createElementVNode(
             "p",
-            _hoisted_20$2,
+            _hoisted_20$3,
             vue.toDisplayString($setup.errorMessage),
             1
             /* TEXT */
@@ -8989,21 +9018,15 @@ const _hoisted_15$2 = { class: "flex flex-col space-y-2 ml-4" };
 const _hoisted_16$2 = { class: "flex items-center justify-between" };
 const _hoisted_17$2 = { class: "flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
 const _hoisted_18$2 = { class: "flex flex-col space-y-2 ml-4" };
-const _hoisted_19$2 = { class: "flex items-center justify-between" };
-const _hoisted_20$1 = { class: "flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
-const _hoisted_21$1 = { class: "flex flex-col space-y-2 ml-4" };
-const _hoisted_22$1 = { class: "flex items-center justify-between" };
-const _hoisted_23$1 = { class: "flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
-const _hoisted_24$1 = { class: "flex flex-col space-y-2 ml-4" };
-const _hoisted_25$1 = { class: "space-y-6" };
-const _hoisted_26$1 = { class: "max-h-96 overflow-y-auto space-y-4 pr-2" };
-const _hoisted_27$1 = { class: "flex items-start justify-between" };
-const _hoisted_28$1 = { class: "flex items-start space-x-4" };
-const _hoisted_29$1 = { class: "min-w-0 flex-1" };
-const _hoisted_30$1 = { class: "font-semibold text-gray-900 text-lg" };
-const _hoisted_31$1 = { class: "text-sm text-gray-600 mt-1" };
-const _hoisted_32$1 = { class: "text-xs text-gray-500 mt-2" };
-const _hoisted_33$1 = { class: "flex flex-col space-y-2 ml-4" };
+const _hoisted_19$2 = { class: "space-y-6" };
+const _hoisted_20$2 = { class: "max-h-96 overflow-y-auto space-y-4 pr-2" };
+const _hoisted_21$1 = { class: "flex items-start justify-between" };
+const _hoisted_22$1 = { class: "flex items-start space-x-4" };
+const _hoisted_23$1 = { class: "min-w-0 flex-1" };
+const _hoisted_24$1 = { class: "font-semibold text-gray-900 text-lg" };
+const _hoisted_25$1 = { class: "text-sm text-gray-600 mt-1" };
+const _hoisted_26$1 = { class: "text-xs text-gray-500 mt-2" };
+const _hoisted_27$1 = { class: "flex flex-col space-y-2 ml-4" };
 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock(
     vue.Fragment,
@@ -9134,7 +9157,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                 vue.createCommentVNode(" Tab Content: Add New Device "),
                 $setup.activeTab === "add" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$2, [
                   vue.createElementVNode("div", null, [
-                    _cache[21] || (_cache[21] = vue.createElementVNode(
+                    _cache[17] || (_cache[17] = vue.createElementVNode(
                       "h3",
                       { class: "text-xl font-semibold text-gray-900 mb-6" },
                       "Choose Your Authentication Method",
@@ -9230,94 +9253,35 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                           ])
                         ])
                       ]),
-                      vue.createCommentVNode(" Hardware Key Setup "),
-                      vue.createElementVNode("div", {
-                        class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer",
-                        onClick: $setup.startHardwareKeySetup
-                      }, [
-                        vue.createElementVNode("div", _hoisted_19$2, [
-                          vue.createElementVNode("div", _hoisted_20$1, [
-                            vue.createVNode($setup["KeyRound"], {
-                              size: 24,
-                              class: "text-[var(--strands-primary)]"
-                            })
-                          ]),
-                          _cache[18] || (_cache[18] = vue.createElementVNode(
-                            "div",
-                            { class: "flex items-start space-x-4" },
-                            [
-                              vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                                vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Hardware Security Key"),
-                                vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Use YubiKey, FIDO2, or other physical security keys for ultimate protection ")
-                              ])
-                            ],
-                            -1
-                            /* CACHED */
-                          )),
-                          vue.createElementVNode("div", _hoisted_21$1, [
-                            vue.createVNode($setup["StrandsUiButton"], {
-                              variant: "primary",
-                              size: "md",
-                              onClick: vue.withModifiers($setup.startHardwareKeySetup, ["stop"]),
-                              disabled: $setup.mfaLoading
-                            }, {
-                              default: vue.withCtx(() => _cache[17] || (_cache[17] = [
-                                vue.createTextVNode(
-                                  " Setup ",
-                                  -1
-                                  /* CACHED */
-                                )
-                              ])),
-                              _: 1,
-                              __: [17]
-                            }, 8, ["disabled"])
-                          ])
-                        ])
-                      ]),
-                      vue.createCommentVNode(" Passkey Setup "),
-                      vue.createElementVNode("div", {
-                        class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer",
-                        onClick: $setup.startPasskeySetup
-                      }, [
-                        vue.createElementVNode("div", _hoisted_22$1, [
-                          vue.createElementVNode("div", _hoisted_23$1, [
-                            vue.createVNode($setup["Shield"], {
-                              size: 24,
-                              class: "text-[var(--strands-primary)]"
-                            })
-                          ]),
-                          _cache[20] || (_cache[20] = vue.createElementVNode(
-                            "div",
-                            { class: "flex items-start space-x-4" },
-                            [
-                              vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                                vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Passkey"),
-                                vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Use your device's built-in biometrics, PIN, or cross-device passkeys ")
-                              ])
-                            ],
-                            -1
-                            /* CACHED */
-                          )),
-                          vue.createElementVNode("div", _hoisted_24$1, [
-                            vue.createVNode($setup["StrandsUiButton"], {
-                              variant: "primary",
-                              size: "md",
-                              onClick: vue.withModifiers($setup.startPasskeySetup, ["stop"]),
-                              disabled: $setup.mfaLoading
-                            }, {
-                              default: vue.withCtx(() => _cache[19] || (_cache[19] = [
-                                vue.createTextVNode(
-                                  " Setup ",
-                                  -1
-                                  /* CACHED */
-                                )
-                              ])),
-                              _: 1,
-                              __: [19]
-                            }, 8, ["disabled"])
-                          ])
-                        ])
-                      ])
+                      vue.createCommentVNode(" Hardware Key Setup - Temporarily Disabled "),
+                      vue.createCommentVNode(' \n                  <div class="group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer" @click="startHardwareKeySetup">\n                    <div class="flex items-center justify-between">\n                      <div class="flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors">\n                        <KeyRound :size="24" class="text-[var(--strands-primary)]" />\n                      </div>\n                      <div class="flex items-start space-x-4">\n                        <div class="min-w-0 flex-1">\n                          <h4 class="font-semibold text-gray-900 text-lg">Hardware Security Key</h4>\n                          <p class="text-xs text-gray-500 mt-2">\n                            Use YubiKey, FIDO2, or other physical security keys for ultimate protection\n                          </p>\n                        </div>\n                      </div>\n                      <div class="flex flex-col space-y-2 ml-4">\n                        <StrandsUiButton\n                          variant="primary"\n                          size="md"\n                          @click.stop="startHardwareKeySetup"\n                          :disabled="mfaLoading"\n                        >\n                          Setup\n                        </StrandsUiButton>\n                      </div>\n                    </div>\n                  </div>\n\n                  <-- Passkey Setup - Temporarily Disabled '),
+                      vue.createCommentVNode(` 
+                  <div class="group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer" @click="startPasskeySetup">
+                    <div class="flex items-center justify-between">
+                      <div class="flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors">
+                        <Shield :size="24" class="text-[var(--strands-primary)]" />
+                      </div>
+                      <div class="flex items-start space-x-4">
+                        <div class="min-w-0 flex-1">
+                          <h4 class="font-semibold text-gray-900 text-lg">Passkey</h4>
+                          <p class="text-xs text-gray-500 mt-2">
+                            Use your device's built-in biometrics, PIN, or cross-device passkeys
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex flex-col space-y-2 ml-4">
+                        <StrandsUiButton
+                          variant="primary"
+                          size="md"
+                          @click.stop="startPasskeySetup"
+                          :disabled="mfaLoading"
+                        >
+                          Setup
+                        </StrandsUiButton>
+                      </div>
+                    </div>
+                  </div>
+                  `)
                     ])
                   ])
                 ])) : $setup.activeTab === "manage" && $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock(
@@ -9325,16 +9289,16 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                   { key: 1 },
                   [
                     vue.createCommentVNode(" Tab Content: Active Devices "),
-                    vue.createElementVNode("div", _hoisted_25$1, [
+                    vue.createElementVNode("div", _hoisted_19$2, [
                       vue.createElementVNode("div", null, [
-                        _cache[25] || (_cache[25] = vue.createElementVNode(
+                        _cache[21] || (_cache[21] = vue.createElementVNode(
                           "h3",
                           { class: "text-xl font-semibold text-gray-900 mb-6" },
                           "Manage Your Active Devices",
                           -1
                           /* CACHED */
                         )),
-                        vue.createElementVNode("div", _hoisted_26$1, [
+                        vue.createElementVNode("div", _hoisted_20$2, [
                           (vue.openBlock(true), vue.createElementBlock(
                             vue.Fragment,
                             null,
@@ -9343,8 +9307,8 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                 key: device.id,
                                 class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200"
                               }, [
-                                vue.createElementVNode("div", _hoisted_27$1, [
-                                  vue.createElementVNode("div", _hoisted_28$1, [
+                                vue.createElementVNode("div", _hoisted_21$1, [
+                                  vue.createElementVNode("div", _hoisted_22$1, [
                                     vue.createElementVNode(
                                       "div",
                                       {
@@ -9359,31 +9323,31 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                       2
                                       /* CLASS */
                                     ),
-                                    vue.createElementVNode("div", _hoisted_29$1, [
+                                    vue.createElementVNode("div", _hoisted_23$1, [
                                       vue.createElementVNode(
                                         "h4",
-                                        _hoisted_30$1,
+                                        _hoisted_24$1,
                                         vue.toDisplayString(device.device_name),
                                         1
                                         /* TEXT */
                                       ),
                                       vue.createElementVNode(
                                         "p",
-                                        _hoisted_31$1,
+                                        _hoisted_25$1,
                                         vue.toDisplayString($setup.getDeviceTypeName(device.device_type)),
                                         1
                                         /* TEXT */
                                       ),
                                       vue.createElementVNode(
                                         "p",
-                                        _hoisted_32$1,
+                                        _hoisted_26$1,
                                         " Last used " + vue.toDisplayString($setup.formatLastUsed(device.last_used_at)),
                                         1
                                         /* TEXT */
                                       )
                                     ])
                                   ]),
-                                  vue.createElementVNode("div", _hoisted_33$1, [
+                                  vue.createElementVNode("div", _hoisted_27$1, [
                                     vue.createCommentVNode(" Backup codes button for TOTP, Hardware Key, and Passkey devices "),
                                     device.device_type === "totp" || device.device_type === "hardware" || device.device_type === "passkey" ? (vue.openBlock(), vue.createBlock($setup["StrandsUiButton"], {
                                       key: 0,
@@ -9397,14 +9361,14 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                           size: 14,
                                           class: "mr-2"
                                         }),
-                                        _cache[22] || (_cache[22] = vue.createTextVNode(
+                                        _cache[18] || (_cache[18] = vue.createTextVNode(
                                           " Backup Codes ",
                                           -1
                                           /* CACHED */
                                         ))
                                       ]),
                                       _: 2,
-                                      __: [22]
+                                      __: [18]
                                     }, 1032, ["onClick", "disabled"])) : vue.createCommentVNode("v-if", true),
                                     vue.createCommentVNode(" Test email MFA "),
                                     device.device_type === "email" ? (vue.openBlock(), vue.createBlock($setup["StrandsUiButton"], {
@@ -9419,14 +9383,14 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                           size: 14,
                                           class: "mr-2"
                                         }),
-                                        _cache[23] || (_cache[23] = vue.createTextVNode(
+                                        _cache[19] || (_cache[19] = vue.createTextVNode(
                                           " Send Test Code ",
                                           -1
                                           /* CACHED */
                                         ))
                                       ]),
                                       _: 2,
-                                      __: [23]
+                                      __: [19]
                                     }, 1032, ["onClick", "disabled"])) : vue.createCommentVNode("v-if", true),
                                     vue.createCommentVNode(" Remove device "),
                                     vue.createVNode($setup["StrandsUiButton"], {
@@ -9441,14 +9405,14 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                           size: 14,
                                           class: "mr-2"
                                         }),
-                                        _cache[24] || (_cache[24] = vue.createTextVNode(
+                                        _cache[20] || (_cache[20] = vue.createTextVNode(
                                           " Remove ",
                                           -1
                                           /* CACHED */
                                         ))
                                       ]),
                                       _: 2,
-                                      __: [24]
+                                      __: [20]
                                     }, 1032, ["onClick", "disabled"])
                                   ])
                                 ])
@@ -9974,7 +9938,7 @@ const _hoisted_16$1 = {
 const _hoisted_17$1 = { class: "space-y-3 md:space-y-4" };
 const _hoisted_18$1 = { class: "space-y-4 p-4 bg-gray-50 rounded-xl" };
 const _hoisted_19$1 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_20 = { class: "text-sm text-gray-600" };
+const _hoisted_20$1 = { class: "text-sm text-gray-600" };
 const _hoisted_21 = {
   key: 0,
   class: "space-y-3 overflow-hidden"
@@ -10236,7 +10200,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_20,
+                      _hoisted_20$1,
                       "Last updated " + vue.toDisplayString($setup.passwordLastUpdated),
                       1
                       /* TEXT */
@@ -10879,15 +10843,16 @@ const _hoisted_10 = { class: "flex flex-col items-center text-center space-y-4"
 const _hoisted_11 = { class: "w-16 h-16 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
 const _hoisted_12 = { class: "flex flex-col items-center text-center space-y-4" };
 const _hoisted_13 = { class: "w-16 h-16 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
-const _hoisted_14 = { class: "flex flex-col items-center text-center space-y-4" };
-const _hoisted_15 = { class: "w-16 h-16 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
-const _hoisted_16 = {
+const _hoisted_14 = { class: "group p-8 border border-gray-300 rounded-xl bg-gray-50 opacity-60 cursor-not-allowed" };
+const _hoisted_15 = { class: "flex flex-col items-center text-center space-y-4" };
+const _hoisted_16 = { class: "w-16 h-16 bg-gray-200 rounded-xl flex items-center justify-center" };
+const _hoisted_17 = {
   key: 1,
   class: "border-t border-gray-200 pt-8"
 };
-const _hoisted_17 = { class: "flex items-center justify-between" };
-const _hoisted_18 = { class: "text-gray-600 text-sm mt-1" };
-const _hoisted_19 = { class: "flex justify-end space-x-3" };
+const _hoisted_18 = { class: "flex items-center justify-between" };
+const _hoisted_19 = { class: "text-gray-600 text-sm mt-1" };
+const _hoisted_20 = { class: "flex justify-end space-x-3" };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock(
     vue.Fragment,
@@ -10924,7 +10889,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ]),
         footer: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_19, [
+          vue.createElementVNode("div", _hoisted_20, [
             vue.createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
               onClick: $setup.closeModal,
@@ -11073,52 +11038,48 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                           }, 8, ["disabled"])
                         ])
                       ]),
-                      vue.createCommentVNode(" Hardware Key Setup "),
-                      vue.createElementVNode("div", {
-                        class: "group p-8 border border-gray-200 rounded-xl hover:shadow-lg hover:border-[var(--strands-primary)] transition-all duration-200 cursor-pointer",
-                        onClick: $setup.startHardwareKeySetup
-                      }, [
-                        vue.createElementVNode("div", _hoisted_14, [
-                          vue.createElementVNode("div", _hoisted_15, [
+                      vue.createCommentVNode(" Hardware Key Setup - Temporarily Disabled "),
+                      vue.createElementVNode("div", _hoisted_14, [
+                        vue.createElementVNode("div", _hoisted_15, [
+                          vue.createElementVNode("div", _hoisted_16, [
                             vue.createVNode($setup["KeyRound"], {
                               size: 28,
-                              class: "text-[var(--strands-primary)]"
+                              class: "text-gray-400"
                             })
                           ]),
                           _cache[12] || (_cache[12] = vue.createElementVNode(
                             "div",
                             { class: "space-y-2" },
                             [
-                              vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Hardware Key & Passkeys"),
-                              vue.createElementVNode("p", { class: "text-sm text-gray-500 leading-relaxed" }, "Use YubiKey, FIDO2 devices, WebAuthn, or built-in passkeys for maximum security")
+                              vue.createElementVNode("h4", { class: "font-semibold text-gray-500 text-lg" }, "Hardware Key & Passkeys"),
+                              vue.createElementVNode("p", { class: "text-sm text-gray-400 leading-relaxed" }, "Temporarily unavailable - cross-domain support coming soon")
                             ],
                             -1
                             /* CACHED */
                           )),
                           vue.createVNode($setup["StrandsUiButton"], {
-                            variant: "primary",
+                            variant: "secondary",
                             size: "md",
-                            onClick: vue.withModifiers($setup.startHardwareKeySetup, ["stop"]),
-                            disabled: $setup.loading,
+                            disabled: "",
                             class: "w-full mt-4"
                           }, {
                             default: vue.withCtx(() => _cache[11] || (_cache[11] = [
                               vue.createTextVNode(
-                                " Setup Hardware Key ",
+                                " Coming Soon ",
                                 -1
                                 /* CACHED */
                               )
                             ])),
                             _: 1,
                             __: [11]
-                          }, 8, ["disabled"])
+                          })
                         ])
                       ])
                     ])
                   ]),
                   vue.createCommentVNode(" Manage Existing "),
-                  $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
-                    vue.createElementVNode("div", _hoisted_17, [
+                  $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
+                    vue.createElementVNode("div", _hoisted_18, [
                       vue.createElementVNode("div", null, [
                         _cache[14] || (_cache[14] = vue.createElementVNode(
                           "h3",
@@ -11129,7 +11090,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         )),
                         vue.createElementVNode(
                           "p",
-                          _hoisted_18,
+                          _hoisted_19,
                           vue.toDisplayString($setup.activeMfaDevices.length) + " device(s) currently active",
                           1
                           /* TEXT */