@strands.gg/accui 1.2.0 → 1.2.2

package/dist/accui.css

@@ -48,6 +48,8 @@
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -410,6 +412,9 @@
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -440,6 +445,9 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -770,6 +778,9 @@
   .border-neutral-200 {
     border-color: var(--color-neutral-200);
   }
+  .border-purple-200 {
+    border-color: var(--color-purple-200);
+  }
   .border-red-200 {
     border-color: var(--color-red-200);
   }
@@ -1135,6 +1146,9 @@
   .text-neutral-900 {
     color: var(--color-neutral-900);
   }
+  .text-purple-700 {
+    color: var(--color-purple-700);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }

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

@@ -7427,15 +7427,38 @@ const _sfc_main$b = /* @__PURE__ */ vue.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) => ({
@@ -7465,6 +7488,16 @@ const _sfc_main$b = /* @__PURE__ */ vue.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.");
         }
@@ -7531,7 +7564,26 @@ const _sfc_main$b = /* @__PURE__ */ vue.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;
@@ -9199,6 +9251,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const { getSupportEmail, config: strandsConfig, getUrl } = useStrandsConfig.useStrandsConfig(props.config);
     const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth.useStrandsAuth();
+    const { mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = vue.ref(null);
     const fetchingProfile = vue.ref(false);
     const currentUser = vue.computed(() => {
@@ -9276,6 +9329,54 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       const years = Math.floor(diffDays / 365);
       return years === 1 ? "1 year ago" : `${years} years ago`;
     });
+    const deviceTypeCounts = vue.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 = vue.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();
@@ -9285,6 +9386,9 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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;
@@ -9499,6 +9603,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const handleMfaUpdated = async () => {
       try {
         await fetchProfile();
+        await fetchMfaDevices();
         successMessage.value = "MFA settings updated successfully";
         emit("mfa-toggle", currentUser.value?.mfaEnabled || false);
       } catch (err) {
@@ -9536,7 +9641,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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;
@@ -9589,31 +9694,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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
     vue.createElementVNode("div", _hoisted_2$4, [
@@ -9910,7 +10021,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               vue.createCommentVNode(" Two-Factor Authentication "),
               vue.createElementVNode("div", _hoisted_22, [
                 vue.createElementVNode("div", _hoisted_23, [
-                  vue.createElementVNode("div", null, [
+                  vue.createElementVNode("div", _hoisted_24, [
                     _cache[17] || (_cache[17] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
@@ -9920,16 +10031,60 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_24,
+                      _hoisted_25,
                       vue.toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
-                    )
+                    ),
+                    vue.createCommentVNode(" Device Type Chips "),
+                    $setup.mfaDeviceChips.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList($setup.mfaDeviceChips, (chip) => {
+                          return vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: chip.type,
+                              class: vue.normalizeClass([
+                                "inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium border transition-colors",
+                                chip.color
+                              ])
+                            },
+                            [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(chip.icon), {
+                                size: 12,
+                                class: "mr-1.5"
+                              })),
+                              vue.createElementVNode(
+                                "span",
+                                null,
+                                vue.toDisplayString(chip.count),
+                                1
+                                /* TEXT */
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                _hoisted_27,
+                                vue.toDisplayString(chip.label),
+                                1
+                                /* TEXT */
+                              )
+                            ],
+                            2
+                            /* CLASS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ])) : vue.createCommentVNode("v-if", true)
                   ]),
                   vue.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: vue.withCtx(() => [
                       vue.createTextVNode(
@@ -9944,8 +10099,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               vue.createCommentVNode(" Active Sessions "),
-              vue.createElementVNode("div", _hoisted_25, [
-                vue.createElementVNode("div", _hoisted_26, [
+              vue.createElementVNode("div", _hoisted_28, [
+                vue.createElementVNode("div", _hoisted_29, [
                   vue.createElementVNode("div", null, [
                     _cache[18] || (_cache[18] = vue.createElementVNode(
                       "h4",
@@ -9956,7 +10111,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_27,
+                      _hoisted_30,
                       vue.toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -9983,7 +10138,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           vue.createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
             vue.createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -10021,9 +10176,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       vue.createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_29, [
-        vue.createElementVNode("div", _hoisted_30, [
-          vue.createElementVNode("div", _hoisted_31, [
+      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
+        vue.createElementVNode("div", _hoisted_33, [
+          vue.createElementVNode("div", _hoisted_34, [
             _cache[22] || (_cache[22] = vue.createElementVNode(
               "svg",
               {
@@ -10043,7 +10198,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_32,
+              _hoisted_35,
               vue.toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -10051,9 +10206,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : vue.createCommentVNode("v-if", true),
-      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, [
-        vue.createElementVNode("div", _hoisted_34, [
-          vue.createElementVNode("div", _hoisted_35, [
+      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
+        vue.createElementVNode("div", _hoisted_37, [
+          vue.createElementVNode("div", _hoisted_38, [
             _cache[23] || (_cache[23] = vue.createElementVNode(
               "svg",
               {
@@ -10073,7 +10228,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_36,
+              _hoisted_39,
               vue.toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -10104,8 +10259,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             /* STABLE */
           }, 8, ["disabled"]),
           vue.createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
-            vue.createElementVNode("p", _hoisted_38, [
+          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
+            vue.createElementVNode("p", _hoisted_41, [
               _cache[25] || (_cache[25] = vue.createTextVNode(
                 " Need help? ",
                 -1