@adminforth/two-factors-auth 2.1.0 → 2.1.2

package/build.log

@@ -13,5 +13,5 @@ custom/package.json
 custom/tsconfig.json
 custom/utils.js
 
-sent 69,802 bytes  received 172 bytes  139,948.00 bytes/sec
-total size is 69,162  speedup is 0.99
+sent 74,931 bytes  received 172 bytes  150,206.00 bytes/sec
+total size is 74,291  speedup is 0.99

package/custom/TwoFAModal.vue

@@ -97,6 +97,25 @@
     (e: 'closed'): void
   }>();
 
+  function removeListeners() {
+    window.removeEventListener('paste', handlePaste);
+    document.removeEventListener('focusin', handleGlobalFocusIn, true);
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
+  }
+
+  async function addListeners() {
+    document.addEventListener('focusin', handleGlobalFocusIn, true);
+    
+    // Wait for DOM to be ready and OTP inputs to be rendered
+    await nextTick();
+    await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for v-otp-input to render
+    
+    focusFirstAvailableOtpInput();
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
+  }
+
   const modelShow = ref(false);
   let resolveFn: ((confirmationResult: string) => void) | null = null;
   let verifyingCallback: ((confirmationResult: string) => boolean) | null = null;
@@ -113,6 +132,7 @@
         customDialogTitle.value = title;
       }
       modelShow.value = true;
+      await addListeners();
       resolveFn = resolve;
       rejectFn = reject;
       verifyFn = verifyingCallback ?? null;
@@ -144,6 +164,7 @@
       result: passkeyData
     }
     customDialogTitle.value = "";
+    removeListeners();
     resolveFn(dataToReturn);
   }
 
@@ -195,6 +216,7 @@
       result: value
     }
     customDialogTitle.value = "";
+    removeListeners();
     resolveFn(dataToReturn);
   }
   
@@ -203,11 +225,22 @@
     modelShow.value = false;
     bindValue.value = '';
     confirmationResult.value?.clearInput();
+    removeListeners();
     rejectFn("Cancel");
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
 
+  watch(modalMode, async (newMode) => {
+    if (newMode === 'totp' && modelShow.value && !isLoading.value) {
+      await nextTick();
+      setTimeout(() => {
+        tagOtpInputs();
+        focusFirstAvailableOtpInput();
+      }, 100);
+    }
+  });
+
   watch(modelShow, async (open) => {
   if (open) {
     await nextTick();
@@ -215,8 +248,17 @@
     if (htmlRef) {
       htmlRef.style.overflow = 'hidden';
     }
-    tagOtpInputs();
-    window.addEventListener('paste', handlePaste);
+    
+    // Wait for conditional rendering to complete
+    if (modalMode.value === 'totp' && !isLoading.value) {
+      await nextTick();
+      setTimeout(() => {
+        tagOtpInputs();
+        window.addEventListener('paste', handlePaste);
+      }, 100);
+    } else {
+      window.addEventListener('paste', handlePaste);
+    }
   } else {
     window.removeEventListener('paste', handlePaste);
     const htmlRef = document.querySelector('html');
@@ -248,7 +290,47 @@
     });
   }
 
-  </script>
+  function getOtpInputs() {
+    const root = otpRoot.value;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('input.otp-input'));
+  }
+
+  function focusFirstAvailableOtpInput() {
+    const inputs = getOtpInputs();
+    if (!inputs.length) {
+      // Retry after a short delay if inputs aren't ready yet
+      setTimeout(() => focusFirstAvailableOtpInput(), 50);
+      return;
+    }
+    const firstEmpty = inputs.find((i) => !(i as HTMLInputElement).value);
+    ((firstEmpty || inputs[0]) as HTMLInputElement).focus();
+  }
+
+  function handleGlobalFocusIn(event) {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const target = event.target;
+    if (!target) return;
+    if (!inputs.includes(target)) {
+      requestAnimationFrame(() => {
+        focusFirstAvailableOtpInput();
+      });
+    }
+  }
+
+  function handleFocusOut() {
+    requestAnimationFrame(() => {
+      const inputs = getOtpInputs();
+      if (!inputs.length) return;
+      const active = document.activeElement;
+      if (!active || !inputs.includes(active)) {
+        focusFirstAvailableOtpInput();
+      }
+    });
+  }
+
+</script>
   
 <style scoped>
   :deep(.otp-input-container) {

package/custom/TwoFactorsConfirmation.vue

@@ -98,6 +98,9 @@
   import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
   import ErrorMessage from '@/components/ErrorMessage.vue';
   import { handlePasskeyAlert } from './utils.js';
+  
+  // Global provided by AdminForth runtime
+  declare const adminforth: any;
 
   const { t } = useI18n();
   const code = ref(null);
@@ -108,6 +111,29 @@
   const codeError = ref(null);
   const isFetchingPasskey = ref(false);
 
+  // Shared WebAuthn state to prevent concurrent navigator.credentials.get calls
+  const webAuthn = {
+    controller: null as AbortController | null,
+    inFlight: false,
+  };
+
+  function cancelPendingWebAuthn(reason?: string) {
+    try {
+      if (webAuthn.controller) {
+        // Abort any pending WebAuthn request
+        webAuthn.controller.abort();
+      }
+    } catch (e) {
+      // no-op
+    } finally {
+      webAuthn.controller = null;
+      webAuthn.inFlight = false;
+      if (reason) {
+        console.debug('[WebAuthn] Aborted pending request:', reason);
+      }
+    }
+  }
+
   onBeforeMount(() => {
     if (localStorage.getItem('isAuthorized') === 'true') {
       coreStore.fetchMenuAndResource();
@@ -147,6 +173,8 @@
 
   onMounted(async () => {
     if (localStorage.getItem('isAuthorized') !== 'true') {
+      // Safety: ensure no pending WebAuthn request survives SPA navigation
+      cancelPendingWebAuthn('mount-init');
       await nextTick();
       await isCMAAvailable();
       tagOtpInputs();
@@ -167,8 +195,10 @@
   watch(route, (newRoute) => {
     codeError.value = null;
     if ( newRoute.hash === '#passkey' ) {
+      cancelPendingWebAuthn('switch-to-passkey');
       confirmationMode.value = 'passkey';
     } else if ( newRoute.hash === '#code' ) {
+      cancelPendingWebAuthn('switch-to-code');
       confirmationMode.value = 'code';
     }
   });
@@ -188,6 +218,8 @@
     document.removeEventListener('focusin', handleGlobalFocusIn, true);
     const rootEl = otpRoot.value;
     rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
+    // Abort any in-flight WebAuthn request when leaving the component
+    cancelPendingWebAuthn('component-unmount');
   });
 
   async function sendCode (value: any, factorMode: 'TOTP' | 'passkey', passkeyOptions: any) {
@@ -257,8 +289,16 @@
   }
 
   async function usePasskeyButton() {
+    // Cancel any stray pending requests from earlier flows
+    cancelPendingWebAuthn('button-pressed');
+    codeError.value = null;
     isFetchingPasskey.value = true;
-    const { _options, challengeId } = await createSignInRequest();
+    const signIn = await createSignInRequest();
+    if (!signIn) {
+      isFetchingPasskey.value = false;
+      return;
+    }
+    const { _options, challengeId } = signIn;
     const options = PublicKeyCredential.parseRequestOptionsFromJSON(_options);
     const credential = await authenticate(options);
     if (!credential) {
@@ -300,25 +340,52 @@
   async function authenticate(options) {
     console.log("Authenticating with options:", options);
     try {
+      // Guard: prevent concurrent navigator.credentials.get calls
+      if (webAuthn.inFlight) {
+        console.warn('[WebAuthn] A request is already in flight. Aborting previous and retrying.');
+        cancelPendingWebAuthn('pre-auth-guard');
+      }
+
       const abortController = new AbortController();
+      webAuthn.controller = abortController;
+      webAuthn.inFlight = true;
+
       const credential = await navigator.credentials.get({
         publicKey: options,
         signal: abortController.signal,
+        // mediation can be set if using conditional UI, omitted here intentionally
       });
       console.log("Credential obtained:", credential);
       return credential;
     } catch (error) {
       console.error('Error during authentication:', error);
+      // Handle specific concurrent/pending request error cases gracefully
+      const name = (error && (error.name || error.constructor?.name)) || '';
+      const message = (error && error.message) || '';
+      if (name === 'AbortError') {
+        // Aborted intentionally; no user-facing error needed
+        return null;
+      }
+      if (name === 'InvalidStateError' || name === 'OperationError' || /pending/i.test(message)) {
+        adminforth.alert({ message: t('Another security prompt is already open. Please try again.'), variant: 'warning' });
+        codeError.value = t('A previous passkey attempt was still pending. Please try again.');
+        return null;
+      }
       adminforth.alert({message: `Error during authentication: ${error}`, variant: 'warning'});
       codeError.value = 'Error during authentication.';
     }
+    finally {
+      // Clear in-flight state regardless of outcome
+      webAuthn.inFlight = false;
+      webAuthn.controller = null;
+    }
   }
 
 
-  function getOtpInputs() {
+  function getOtpInputs(): HTMLInputElement[] {
     const root = otpRoot.value;
     if (!root) return [];
-    return Array.from(root.querySelectorAll('input.otp-input'));
+    return Array.from(root.querySelectorAll('input.otp-input')) as HTMLInputElement[];
   }
 
   function focusFirstAvailableOtpInput() {
@@ -331,7 +398,7 @@
   function handleGlobalFocusIn(event) {
     const inputs = getOtpInputs();
     if (!inputs.length) return;
-    const target = event.target;
+    const target = event.target as HTMLInputElement | null;
     if (!target) return;
     if (!inputs.includes(target)) {
       requestAnimationFrame(() => {
@@ -344,8 +411,9 @@
     requestAnimationFrame(() => {
       const inputs = getOtpInputs();
       if (!inputs.length) return;
-      const active = document.activeElement;
-      if (!active || !inputs.includes(active)) {
+      const active = document.activeElement as Element | null;
+      const activeInput = active instanceof HTMLInputElement ? active : null;
+      if (!activeInput || !inputs.includes(activeInput)) {
         focusFirstAvailableOtpInput();
       }
     });

package/custom/TwoFactorsPasskeysSettings.vue

@@ -144,6 +144,7 @@
             class="w-96" 
             :click-to-close-outside="false"   
             :buttons="[]"
+            :closable="false"
         >
             <div class="flex flex-col">
                 <button

package/dist/custom/TwoFAModal.vue

@@ -97,6 +97,25 @@
     (e: 'closed'): void
   }>();
 
+  function removeListeners() {
+    window.removeEventListener('paste', handlePaste);
+    document.removeEventListener('focusin', handleGlobalFocusIn, true);
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
+  }
+
+  async function addListeners() {
+    document.addEventListener('focusin', handleGlobalFocusIn, true);
+    
+    // Wait for DOM to be ready and OTP inputs to be rendered
+    await nextTick();
+    await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for v-otp-input to render
+    
+    focusFirstAvailableOtpInput();
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
+  }
+
   const modelShow = ref(false);
   let resolveFn: ((confirmationResult: string) => void) | null = null;
   let verifyingCallback: ((confirmationResult: string) => boolean) | null = null;
@@ -113,6 +132,7 @@
         customDialogTitle.value = title;
       }
       modelShow.value = true;
+      await addListeners();
       resolveFn = resolve;
       rejectFn = reject;
       verifyFn = verifyingCallback ?? null;
@@ -144,6 +164,7 @@
       result: passkeyData
     }
     customDialogTitle.value = "";
+    removeListeners();
     resolveFn(dataToReturn);
   }
 
@@ -195,6 +216,7 @@
       result: value
     }
     customDialogTitle.value = "";
+    removeListeners();
     resolveFn(dataToReturn);
   }
   
@@ -203,11 +225,22 @@
     modelShow.value = false;
     bindValue.value = '';
     confirmationResult.value?.clearInput();
+    removeListeners();
     rejectFn("Cancel");
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
 
+  watch(modalMode, async (newMode) => {
+    if (newMode === 'totp' && modelShow.value && !isLoading.value) {
+      await nextTick();
+      setTimeout(() => {
+        tagOtpInputs();
+        focusFirstAvailableOtpInput();
+      }, 100);
+    }
+  });
+
   watch(modelShow, async (open) => {
   if (open) {
     await nextTick();
@@ -215,8 +248,17 @@
     if (htmlRef) {
       htmlRef.style.overflow = 'hidden';
     }
-    tagOtpInputs();
-    window.addEventListener('paste', handlePaste);
+    
+    // Wait for conditional rendering to complete
+    if (modalMode.value === 'totp' && !isLoading.value) {
+      await nextTick();
+      setTimeout(() => {
+        tagOtpInputs();
+        window.addEventListener('paste', handlePaste);
+      }, 100);
+    } else {
+      window.addEventListener('paste', handlePaste);
+    }
   } else {
     window.removeEventListener('paste', handlePaste);
     const htmlRef = document.querySelector('html');
@@ -248,7 +290,47 @@
     });
   }
 
-  </script>
+  function getOtpInputs() {
+    const root = otpRoot.value;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('input.otp-input'));
+  }
+
+  function focusFirstAvailableOtpInput() {
+    const inputs = getOtpInputs();
+    if (!inputs.length) {
+      // Retry after a short delay if inputs aren't ready yet
+      setTimeout(() => focusFirstAvailableOtpInput(), 50);
+      return;
+    }
+    const firstEmpty = inputs.find((i) => !(i as HTMLInputElement).value);
+    ((firstEmpty || inputs[0]) as HTMLInputElement).focus();
+  }
+
+  function handleGlobalFocusIn(event) {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const target = event.target;
+    if (!target) return;
+    if (!inputs.includes(target)) {
+      requestAnimationFrame(() => {
+        focusFirstAvailableOtpInput();
+      });
+    }
+  }
+
+  function handleFocusOut() {
+    requestAnimationFrame(() => {
+      const inputs = getOtpInputs();
+      if (!inputs.length) return;
+      const active = document.activeElement;
+      if (!active || !inputs.includes(active)) {
+        focusFirstAvailableOtpInput();
+      }
+    });
+  }
+
+</script>
   
 <style scoped>
   :deep(.otp-input-container) {

package/dist/custom/TwoFactorsConfirmation.vue

@@ -98,6 +98,9 @@
   import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
   import ErrorMessage from '@/components/ErrorMessage.vue';
   import { handlePasskeyAlert } from './utils.js';
+  
+  // Global provided by AdminForth runtime
+  declare const adminforth: any;
 
   const { t } = useI18n();
   const code = ref(null);
@@ -108,6 +111,29 @@
   const codeError = ref(null);
   const isFetchingPasskey = ref(false);
 
+  // Shared WebAuthn state to prevent concurrent navigator.credentials.get calls
+  const webAuthn = {
+    controller: null as AbortController | null,
+    inFlight: false,
+  };
+
+  function cancelPendingWebAuthn(reason?: string) {
+    try {
+      if (webAuthn.controller) {
+        // Abort any pending WebAuthn request
+        webAuthn.controller.abort();
+      }
+    } catch (e) {
+      // no-op
+    } finally {
+      webAuthn.controller = null;
+      webAuthn.inFlight = false;
+      if (reason) {
+        console.debug('[WebAuthn] Aborted pending request:', reason);
+      }
+    }
+  }
+
   onBeforeMount(() => {
     if (localStorage.getItem('isAuthorized') === 'true') {
       coreStore.fetchMenuAndResource();
@@ -147,6 +173,8 @@
 
   onMounted(async () => {
     if (localStorage.getItem('isAuthorized') !== 'true') {
+      // Safety: ensure no pending WebAuthn request survives SPA navigation
+      cancelPendingWebAuthn('mount-init');
       await nextTick();
       await isCMAAvailable();
       tagOtpInputs();
@@ -167,8 +195,10 @@
   watch(route, (newRoute) => {
     codeError.value = null;
     if ( newRoute.hash === '#passkey' ) {
+      cancelPendingWebAuthn('switch-to-passkey');
       confirmationMode.value = 'passkey';
     } else if ( newRoute.hash === '#code' ) {
+      cancelPendingWebAuthn('switch-to-code');
       confirmationMode.value = 'code';
     }
   });
@@ -188,6 +218,8 @@
     document.removeEventListener('focusin', handleGlobalFocusIn, true);
     const rootEl = otpRoot.value;
     rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
+    // Abort any in-flight WebAuthn request when leaving the component
+    cancelPendingWebAuthn('component-unmount');
   });
 
   async function sendCode (value: any, factorMode: 'TOTP' | 'passkey', passkeyOptions: any) {
@@ -257,8 +289,16 @@
   }
 
   async function usePasskeyButton() {
+    // Cancel any stray pending requests from earlier flows
+    cancelPendingWebAuthn('button-pressed');
+    codeError.value = null;
     isFetchingPasskey.value = true;
-    const { _options, challengeId } = await createSignInRequest();
+    const signIn = await createSignInRequest();
+    if (!signIn) {
+      isFetchingPasskey.value = false;
+      return;
+    }
+    const { _options, challengeId } = signIn;
     const options = PublicKeyCredential.parseRequestOptionsFromJSON(_options);
     const credential = await authenticate(options);
     if (!credential) {
@@ -300,25 +340,52 @@
   async function authenticate(options) {
     console.log("Authenticating with options:", options);
     try {
+      // Guard: prevent concurrent navigator.credentials.get calls
+      if (webAuthn.inFlight) {
+        console.warn('[WebAuthn] A request is already in flight. Aborting previous and retrying.');
+        cancelPendingWebAuthn('pre-auth-guard');
+      }
+
       const abortController = new AbortController();
+      webAuthn.controller = abortController;
+      webAuthn.inFlight = true;
+
       const credential = await navigator.credentials.get({
         publicKey: options,
         signal: abortController.signal,
+        // mediation can be set if using conditional UI, omitted here intentionally
       });
       console.log("Credential obtained:", credential);
       return credential;
     } catch (error) {
       console.error('Error during authentication:', error);
+      // Handle specific concurrent/pending request error cases gracefully
+      const name = (error && (error.name || error.constructor?.name)) || '';
+      const message = (error && error.message) || '';
+      if (name === 'AbortError') {
+        // Aborted intentionally; no user-facing error needed
+        return null;
+      }
+      if (name === 'InvalidStateError' || name === 'OperationError' || /pending/i.test(message)) {
+        adminforth.alert({ message: t('Another security prompt is already open. Please try again.'), variant: 'warning' });
+        codeError.value = t('A previous passkey attempt was still pending. Please try again.');
+        return null;
+      }
       adminforth.alert({message: `Error during authentication: ${error}`, variant: 'warning'});
       codeError.value = 'Error during authentication.';
     }
+    finally {
+      // Clear in-flight state regardless of outcome
+      webAuthn.inFlight = false;
+      webAuthn.controller = null;
+    }
   }
 
 
-  function getOtpInputs() {
+  function getOtpInputs(): HTMLInputElement[] {
     const root = otpRoot.value;
     if (!root) return [];
-    return Array.from(root.querySelectorAll('input.otp-input'));
+    return Array.from(root.querySelectorAll('input.otp-input')) as HTMLInputElement[];
   }
 
   function focusFirstAvailableOtpInput() {
@@ -331,7 +398,7 @@
   function handleGlobalFocusIn(event) {
     const inputs = getOtpInputs();
     if (!inputs.length) return;
-    const target = event.target;
+    const target = event.target as HTMLInputElement | null;
     if (!target) return;
     if (!inputs.includes(target)) {
       requestAnimationFrame(() => {
@@ -344,8 +411,9 @@
     requestAnimationFrame(() => {
       const inputs = getOtpInputs();
       if (!inputs.length) return;
-      const active = document.activeElement;
-      if (!active || !inputs.includes(active)) {
+      const active = document.activeElement as Element | null;
+      const activeInput = active instanceof HTMLInputElement ? active : null;
+      if (!activeInput || !inputs.includes(activeInput)) {
         focusFirstAvailableOtpInput();
       }
     });

package/dist/custom/TwoFactorsPasskeysSettings.vue

@@ -144,6 +144,7 @@
             class="w-96" 
             :click-to-close-outside="false"   
             :buttons="[]"
+            :closable="false"
         >
             <div class="flex flex-col">
                 <button

package/dist/index.js

@@ -343,21 +343,15 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
                     let verified = null;
                     if (body.usePasskey && this.options.passkeys) {
                         // passkeys are enabled and user wants to use them
-                        console.log("Using passkey for 2FA verification");
                         const passkeysCookies = this.adminforth.auth.getCustomCookie({ cookies: cookies, name: `passkeyLoginTemporaryJWT` });
-                        console.log("Passkey cookies:", passkeysCookies);
                         if (!passkeysCookies) {
                             return { error: 'Passkey token is required' };
                         }
-                        console.log("Verifying passkey cookies");
                         const decodedPasskeysCookies = yield this.adminforth.auth.verify(passkeysCookies, 'tempLoginPasskeyChallenge', false);
                         if (!decodedPasskeysCookies) {
                             return { error: 'Invalid passkey' };
                         }
-                        console.log("Passkey cookies decoded:", decodedPasskeysCookies);
-                        console.log("Verifying passkey response");
                         const res = yield this.verifyPasskeyResponse(body.passkeyOptions, decoded.pk, decodedPasskeysCookies);
-                        console.log("Passkey response verification result:", res);
                         if (res.ok && res.passkeyConfirmed) {
                             verified = true;
                         }

package/index.ts

@@ -383,21 +383,15 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
           let verified = null;
           if (body.usePasskey && this.options.passkeys) {
             // passkeys are enabled and user wants to use them
-            console.log("Using passkey for 2FA verification");
             const passkeysCookies = this.adminforth.auth.getCustomCookie({cookies: cookies, name: `passkeyLoginTemporaryJWT`});
-            console.log("Passkey cookies:", passkeysCookies);
             if (!passkeysCookies) {
               return { error: 'Passkey token is required' };
             }
-            console.log("Verifying passkey cookies");
             const decodedPasskeysCookies = await this.adminforth.auth.verify(passkeysCookies, 'tempLoginPasskeyChallenge', false);
             if (!decodedPasskeysCookies) {
               return { error: 'Invalid passkey' };
             }
-            console.log("Passkey cookies decoded:", decodedPasskeysCookies);
-            console.log("Verifying passkey response");
             const res = await this.verifyPasskeyResponse(body.passkeyOptions, decoded.pk, decodedPasskeysCookies);
-            console.log("Passkey response verification result:", res);
             if (res.ok && res.passkeyConfirmed) {
               verified = true;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/two-factors-auth",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "AdminForth plugin for two factors authentication",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",