@strands.gg/accui 1.2.0 → 1.2.2

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

@@ -7426,15 +7426,38 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           challenge: safeBufferConvert(challenge.challenge),
           pubKeyCredParams: challenge.pubKeyCredParams || [
             { type: "public-key", alg: -7 },
-            // ES256
-            { type: "public-key", alg: -257 }
-            // RS256
+            // ES256 (ECDSA w/ SHA-256)
+            { type: "public-key", alg: -35 },
+            // ES384 (ECDSA w/ SHA-384) 
+            { type: "public-key", alg: -36 },
+            // ES512 (ECDSA w/ SHA-512)
+            { type: "public-key", alg: -257 },
+            // RS256 (RSASSA-PKCS1-v1_5 w/ SHA-256)
+            { type: "public-key", alg: -258 },
+            // RS384 (RSASSA-PKCS1-v1_5 w/ SHA-384)
+            { type: "public-key", alg: -259 },
+            // RS512 (RSASSA-PKCS1-v1_5 w/ SHA-512)
+            { type: "public-key", alg: -37 },
+            // PS256 (RSASSA-PSS w/ SHA-256)
+            { type: "public-key", alg: -38 },
+            // PS384 (RSASSA-PSS w/ SHA-384)
+            { type: "public-key", alg: -39 },
+            // PS512 (RSASSA-PSS w/ SHA-512)
+            { type: "public-key", alg: -8 }
+            // EdDSA (Ed25519)
           ],
-          timeout: challenge.timeout || 6e4,
+          timeout: challenge.timeout || 12e4,
+          // Longer timeout for hardware keys
           authenticatorSelection: challenge.authenticatorSelection || {
-            userVerification: "preferred"
+            authenticatorAttachment: "cross-platform",
+            // Prefer external authenticators like YubiKey
+            requireResidentKey: false,
+            residentKey: "discouraged",
+            userVerification: "discouraged"
+            // YubiKeys work better with discouraged
           },
-          attestation: challenge.attestation || "none"
+          attestation: challenge.attestation || "direct"
+          // Better compatibility with hardware keys
         };
         if (challenge.excludeCredentials && Array.isArray(challenge.excludeCredentials) && challenge.excludeCredentials.length > 0) {
           cleanChallenge.excludeCredentials = challenge.excludeCredentials.map((cred) => ({
@@ -7464,6 +7487,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         if (!window.navigator.credentials || !window.PublicKeyCredential) {
           throw new Error("WebAuthn is not supported in this browser");
         }
+        try {
+          const available = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable?.();
+          console.log("Platform authenticator available:", available);
+          if (PublicKeyCredential.isConditionalMediationAvailable) {
+            const conditionalMediationAvailable = await PublicKeyCredential.isConditionalMediationAvailable();
+            console.log("Conditional mediation available:", conditionalMediationAvailable);
+          }
+        } catch (checkError) {
+          console.warn("Could not check authenticator availability:", checkError);
+        }
         if (!currentSession.value?.accessToken) {
           throw new Error("Not authenticated. Please sign in again.");
         }
@@ -7530,7 +7563,26 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }
       } catch (error) {
         console.error("Hardware key registration error:", error);
-        errorMessage.value = error instanceof Error ? error.message : "Hardware key registration failed";
+        let userErrorMessage = "Hardware key registration failed";
+        if (error instanceof Error) {
+          const errorMsg = error.message.toLowerCase();
+          if (errorMsg.includes("not supported") || errorMsg.includes("webauthn")) {
+            userErrorMessage = "WebAuthn is not supported in this browser. Please use Chrome, Firefox, Safari, or Edge.";
+          } else if (errorMsg.includes("cancelled") || errorMsg.includes("aborted")) {
+            userErrorMessage = "Hardware key registration was cancelled. Please try again and touch your key when prompted.";
+          } else if (errorMsg.includes("timeout")) {
+            userErrorMessage = "Hardware key registration timed out. Please ensure your key is connected and try again.";
+          } else if (errorMsg.includes("not allowed") || errorMsg.includes("invalid state")) {
+            userErrorMessage = "This hardware key may already be registered or cannot be used. Try a different key or contact support.";
+          } else if (errorMsg.includes("can't be used") || errorMsg.includes("newer or different")) {
+            userErrorMessage = "Your hardware key is not compatible. Please ensure you have a FIDO2/WebAuthn compatible key like YubiKey 5 Series, and that it's properly connected.";
+          } else if (errorMsg.includes("user verification") || errorMsg.includes("pin")) {
+            userErrorMessage = "Hardware key verification failed. If your key has a PIN, please enter it when prompted.";
+          } else {
+            userErrorMessage = error.message;
+          }
+        }
+        errorMessage.value = userErrorMessage;
         step.value = 5;
       } finally {
         internalLoading.value = false;
@@ -9198,6 +9250,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { getSupportEmail, config: strandsConfig, getUrl } = useStrandsConfig(props.config);
     const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth();
+    const { mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = ref(null);
     const fetchingProfile = ref(false);
     const currentUser = computed(() => {
@@ -9275,6 +9328,54 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       const years = Math.floor(diffDays / 365);
       return years === 1 ? "1 year ago" : `${years} years ago`;
     });
+    const deviceTypeCounts = computed(() => {
+      const devices = activeMfaDevices.value || [];
+      const counts = {
+        totp: 0,
+        email: 0,
+        hardware: 0,
+        passkey: 0
+      };
+      devices.forEach((device) => {
+        if (device.device_type in counts) {
+          counts[device.device_type]++;
+        }
+      });
+      return counts;
+    });
+    const mfaDeviceChips = computed(() => {
+      const chips = [];
+      const counts = deviceTypeCounts.value;
+      if (counts.totp > 0) {
+        chips.push({
+          type: "totp",
+          count: counts.totp,
+          label: counts.totp === 1 ? "Auth app" : "Auth apps",
+          icon: Smartphone,
+          color: "bg-blue-50 text-blue-700 border-blue-200"
+        });
+      }
+      if (counts.email > 0) {
+        chips.push({
+          type: "email",
+          count: counts.email,
+          label: "Email",
+          icon: Mail,
+          color: "bg-green-50 text-green-700 border-green-200"
+        });
+      }
+      if (counts.hardware > 0 || counts.passkey > 0) {
+        const totalHardware = counts.hardware + counts.passkey;
+        chips.push({
+          type: "hardware",
+          count: totalHardware,
+          label: totalHardware === 1 ? "Key" : "Keys",
+          icon: KeyRound,
+          color: "bg-purple-50 text-purple-700 border-purple-200"
+        });
+      }
+      return chips;
+    });
     const getInitials2 = (firstName, lastName) => {
       if (!firstName && !lastName) return "U";
       return `${firstName?.[0] || ""}${lastName?.[0] || ""}`.toUpperCase();
@@ -9284,6 +9385,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       fetchingProfile.value = true;
       try {
         await fetchProfile();
+        if (isAuthenticated.value) {
+          await fetchMfaDevices();
+        }
       } catch (err) {
         const errorMsg = err instanceof Error ? err.message : "Failed to load profile";
         errorMessage.value = errorMsg;
@@ -9498,6 +9602,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const handleMfaUpdated = async () => {
       try {
         await fetchProfile();
+        await fetchMfaDevices();
         successMessage.value = "MFA settings updated successfully";
         emit("mfa-toggle", currentUser.value?.mfaEnabled || false);
       } catch (err) {
@@ -9535,7 +9640,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         signingOut.value = false;
       }
     };
-    const __returned__ = { props, emit, getSupportEmail, strandsConfig, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, successMessage, errorMessage, activeSessions, fileInputRef, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerFileUpload, handleFileSelect, uploadAvatar, handleMfaUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
+    const __returned__ = { props, emit, getSupportEmail, strandsConfig, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, successMessage, errorMessage, activeSessions, fileInputRef, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, deviceTypeCounts, mfaDeviceChips, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerFileUpload, handleFileSelect, uploadAvatar, handleMfaUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
       return StrandsUiButton;
     }, get StrandsUiInput() {
       return StrandsUiInput;
@@ -9588,31 +9693,37 @@ const _hoisted_21 = {
   class: "space-y-3 overflow-hidden"
 };
 const _hoisted_22 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_23 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_24 = { class: "text-sm text-gray-600" };
-const _hoisted_25 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_26 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_27 = { class: "text-sm text-gray-600" };
-const _hoisted_28 = {
+const _hoisted_23 = { class: "flex items-start justify-between gap-4" };
+const _hoisted_24 = { class: "flex-1" };
+const _hoisted_25 = { class: "text-sm text-gray-600 mt-1" };
+const _hoisted_26 = {
+  key: 0,
+  class: "flex flex-wrap gap-2 mt-3"
+};
+const _hoisted_27 = { class: "ml-1" };
+const _hoisted_28 = { class: "p-4 bg-gray-50 rounded-xl" };
+const _hoisted_29 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_30 = { class: "text-sm text-gray-600" };
+const _hoisted_31 = {
   key: 0,
   class: "flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200 animate-slide-up"
 };
-const _hoisted_29 = {
+const _hoisted_32 = {
   key: 0,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_30 = { class: "alert-success" };
-const _hoisted_31 = { class: "flex items-start gap-3" };
-const _hoisted_32 = { class: "font-medium" };
-const _hoisted_33 = {
+const _hoisted_33 = { class: "alert-success" };
+const _hoisted_34 = { class: "flex items-start gap-3" };
+const _hoisted_35 = { class: "font-medium" };
+const _hoisted_36 = {
   key: 1,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_34 = { class: "alert-error" };
-const _hoisted_35 = { class: "flex items-start gap-3" };
-const _hoisted_36 = { class: "font-medium" };
-const _hoisted_37 = { key: 0 };
-const _hoisted_38 = { class: "text-gray-400 text-sm" };
+const _hoisted_37 = { class: "alert-error" };
+const _hoisted_38 = { class: "flex items-start gap-3" };
+const _hoisted_39 = { class: "font-medium" };
+const _hoisted_40 = { key: 0 };
+const _hoisted_41 = { class: "text-gray-400 text-sm" };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$5, [
     createElementVNode("div", _hoisted_2$4, [
@@ -9909,7 +10020,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               createCommentVNode(" Two-Factor Authentication "),
               createElementVNode("div", _hoisted_22, [
                 createElementVNode("div", _hoisted_23, [
-                  createElementVNode("div", null, [
+                  createElementVNode("div", _hoisted_24, [
                     _cache[17] || (_cache[17] = createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
@@ -9919,16 +10030,60 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_24,
+                      _hoisted_25,
                       toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
-                    )
+                    ),
+                    createCommentVNode(" Device Type Chips "),
+                    $setup.mfaDeviceChips.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList($setup.mfaDeviceChips, (chip) => {
+                          return openBlock(), createElementBlock(
+                            "div",
+                            {
+                              key: chip.type,
+                              class: normalizeClass([
+                                "inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium border transition-colors",
+                                chip.color
+                              ])
+                            },
+                            [
+                              (openBlock(), createBlock(resolveDynamicComponent(chip.icon), {
+                                size: 12,
+                                class: "mr-1.5"
+                              })),
+                              createElementVNode(
+                                "span",
+                                null,
+                                toDisplayString(chip.count),
+                                1
+                                /* TEXT */
+                              ),
+                              createElementVNode(
+                                "span",
+                                _hoisted_27,
+                                toDisplayString(chip.label),
+                                1
+                                /* TEXT */
+                              )
+                            ],
+                            2
+                            /* CLASS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ])) : createCommentVNode("v-if", true)
                   ]),
                   createVNode($setup["StrandsUiButton"], {
                     variant: $setup.currentUser?.mfaEnabled ? "secondary" : "primary",
                     size: "sm",
-                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true)
+                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true),
+                    class: "flex-shrink-0"
                   }, {
                     default: withCtx(() => [
                       createTextVNode(
@@ -9943,8 +10098,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               createCommentVNode(" Active Sessions "),
-              createElementVNode("div", _hoisted_25, [
-                createElementVNode("div", _hoisted_26, [
+              createElementVNode("div", _hoisted_28, [
+                createElementVNode("div", _hoisted_29, [
                   createElementVNode("div", null, [
                     _cache[18] || (_cache[18] = createElementVNode(
                       "h4",
@@ -9955,7 +10110,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_27,
+                      _hoisted_30,
                       toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -9982,7 +10137,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (openBlock(), createElementBlock("div", _hoisted_28, [
+          $setup.hasChanges ? (openBlock(), createElementBlock("div", _hoisted_31, [
             createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -10020,9 +10175,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (openBlock(), createElementBlock("div", _hoisted_29, [
-        createElementVNode("div", _hoisted_30, [
-          createElementVNode("div", _hoisted_31, [
+      $setup.successMessage ? (openBlock(), createElementBlock("div", _hoisted_32, [
+        createElementVNode("div", _hoisted_33, [
+          createElementVNode("div", _hoisted_34, [
             _cache[22] || (_cache[22] = createElementVNode(
               "svg",
               {
@@ -10042,7 +10197,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             createElementVNode(
               "p",
-              _hoisted_32,
+              _hoisted_35,
               toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -10050,9 +10205,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : createCommentVNode("v-if", true),
-      $setup.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_33, [
-        createElementVNode("div", _hoisted_34, [
-          createElementVNode("div", _hoisted_35, [
+      $setup.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_36, [
+        createElementVNode("div", _hoisted_37, [
+          createElementVNode("div", _hoisted_38, [
             _cache[23] || (_cache[23] = createElementVNode(
               "svg",
               {
@@ -10072,7 +10227,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             createElementVNode(
               "p",
-              _hoisted_36,
+              _hoisted_39,
               toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -10103,8 +10258,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             /* STABLE */
           }, 8, ["disabled"]),
           createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_37, [
-            createElementVNode("p", _hoisted_38, [
+          $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_40, [
+            createElementVNode("p", _hoisted_41, [
               _cache[25] || (_cache[25] = createTextVNode(
                 " Need help? ",
                 -1