@adminforth/two-factors-auth 1.10.6 → 1.11.0

package/build.log

@@ -11,6 +11,7 @@ custom/TwoFactorsSetup.vue
 custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
+custom/utils.js
 
-sent 58,387 bytes  received 153 bytes  117,080.00 bytes/sec
-total size is 57,814  speedup is 0.99
+sent 68,334 bytes  received 172 bytes  137,012.00 bytes/sec
+total size is 67,703  speedup is 0.99

package/custom/TwoFAModal.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="af-two-factors-modal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
-    v-show ="modelShow">
-      <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
+    v-show ="modelShow && (isLoading === false)">
+      <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
         <div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100 text-center">
-          {{ $t('Please enter your authenticator code') }}
+          <p> {{ customDialogTitle }} </p>
+          <p>{{ $t('Please enter your authenticator code') }}</p>
         </div>
   
         <div class="my-4 w-full flex justify-center" ref="otpRoot">
           <v-otp-input
-            ref="code"
+            ref="confirmationResult"
             container-class="grid grid-cols-6 gap-3 w-full"
             input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
             :num-inputs="6"
@@ -21,7 +22,8 @@
           />
         </div>
   
-        <div class="mt-6 flex justify-center gap-3">
+        <div class="mt-6 flex justify-center items-center gap-32 w-full">
+          <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >use passkey</p>
           <button
             class="px-4 py-2 rounded border bg-gray-100 dark:bg-gray-600"
             @click="onCancel"
@@ -29,18 +31,60 @@
           >{{ $t('Cancel') }}</button>
         </div>
       </div>
+
+
+
+      <div v-else-if="modalMode === 'passkey'" class="af-two-factor-modal-passkeys flex flex-col items-center justify-center py-4 gap-6 relative bg-white dark:bg-gray-700 rounded-lg shadow p-6">
+        <button
+          type="button"
+          class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+          @click="onCancel"
+        >
+          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+        <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
+        <p class="text-4xl font-semibold mb-4 text:gray-900 dark:text-gray-200 ">Passkey</p>
+        <div class="mb-2 max-w-[300px] text:gray-900 dark:text-gray-200">
+          <p class="mb-2">{{customDialogTitle}} </p>
+          <p>Authenticate yourself using the button below</p>
+        </div>
+        <Button @click="usePasskeyButtonClick" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="w-full mx-16">
+          Use passkey
+        </Button>
+        <div v-if="modalMode === 'passkey'" class="max-w-sm px-6 pt-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
+          <div class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+            <p> Have issues with passkey? </p>
+            <p class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'totp'" >use TOTP</p>
+          </div>
+        </div>
+
+
+
+      </div>
     </div>
   </template>
   
   <script setup lang="ts">
   import VOtpInput from 'vue3-otp-input';
-  import { ref, nextTick, watch } from 'vue';
+  import { ref, nextTick, watch, onMounted } from 'vue';
   import { useUserStore } from '@/stores/user';
   import { useI18n } from 'vue-i18n';
+  import { callAdminForthApi } from '@/utils';
+  import { Link, Button } from '@/afcl';
+  import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
+  import { getPasskey } from './utils.js' 
+
+
   declare global {
     interface Window {
       adminforthTwoFaModal: {
-        getCode: () => Promise<any>;
+        get2FaConfirmationResult: (        
+          verifyingCallback?: (confirmationResult: string) => Promise<boolean>,
+          title?: string
+        ) => Promise<any>;
       };
     }
   }
@@ -54,15 +98,20 @@
   }>();
 
   const modelShow = ref(false);
-  let resolveFn: ((code: string) => void) | null = null;
-  let verifyingCallback: ((code: string) => boolean) | null = null;
-  let verifyFn: null | ((code: string) => Promise<boolean> | boolean) = null;
+  let resolveFn: ((confirmationResult: string) => void) | null = null;
+  let verifyingCallback: ((confirmationResult: string) => boolean) | null = null;
+  let verifyFn: null | ((confirmationResult: string) => Promise<boolean> | boolean) = null;
   let rejectFn: ((err?: any) => void) | null = null;
 
+
   window.adminforthTwoFaModal = {
-    getCode: (verifyingCallback?: (code: string) => Promise<boolean>) =>
-      new Promise((resolve, reject) => {
+    get2FaConfirmationResult: (verifyingCallback?: (confirmationResult: string) => Promise<boolean>, title?: string) =>
+      new Promise(async (resolve, reject) => {
       if (modelShow.value) throw new Error('Modal is already open');
+      await checkIfUserHasPasskeys();
+      if (title) {
+        customDialogTitle.value = title;
+      }
       modelShow.value = true;
       resolveFn = resolve;
       rejectFn = reject;
@@ -73,10 +122,30 @@
   const { t } = useI18n();
   const user = useUserStore();
   
-  const code = ref<any>(null);
+  const confirmationResult = ref<any>(null);
   const otpRoot = ref<HTMLElement | null>(null);
   const bindValue = ref('');
+  const doesUserHavePasskeys = ref(false);
+  const modalMode = ref<"totp" | "passkey">("totp");
+  const isLoading = ref(false);
+  const customDialogTitle = ref("");
   
+  async function usePasskeyButtonClick() {
+    let passkeyData;
+    try {
+      passkeyData = await getPasskey();
+    } catch (e) {
+      adminforth.alert({message: 'Failed to get passkey', variant: 'danger'});
+      onCancel();
+    }
+    modelShow.value = false;
+    const dataToReturn = {
+      mode: "passkey",
+      result: passkeyData
+    }
+    resolveFn(dataToReturn);
+  }
+
   function tagOtpInputs() {
     const root = otpRoot.value;
     if (!root) return;
@@ -96,15 +165,15 @@
     event.preventDefault();
     const pastedText = event.clipboardData?.getData('text') || '';
     if (pastedText.length === 6) {
-      code.value?.fillInput(pastedText);
+      confirmationResult.value?.fillInput(pastedText);
     }
   }
   
   async function handleOnComplete(value: string) {
-    await sendCode(value);
+    await sendConfirmationResult(value);
   }
   
-  async function sendCode(value: string) {
+  async function sendConfirmationResult(value: string) {
     if (!resolveFn) throw new Error('Modal is not initialized properly');
     if (verifyFn) {
       try {
@@ -120,14 +189,19 @@
     }
 
     modelShow.value = false;
-    resolveFn(value);
+    const dataToReturn = {
+      mode: "totp",
+      result: value
+    }
+    resolveFn(dataToReturn);
   }
   
   
   function onCancel() {
     modelShow.value = false;
     bindValue.value = '';
-    code.value?.clearInput();
+    confirmationResult.value?.clearInput();
+    rejectFn("Cancel");
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
@@ -148,10 +222,30 @@
       htmlRef.style.overflow = '';
     }
     bindValue.value = '';
-    code.value?.clearInput();
+    confirmationResult.value?.clearInput();
   }
 });
 
+  async function checkIfUserHasPasskeys() {
+    isLoading.value = true;
+    callAdminForthApi({
+      method: 'GET',
+      path: '/plugin/passkeys/getPasskeys',
+    }).then((response) => {
+      if (response.ok) {
+        if (response.data.length >= 1) {
+          doesUserHavePasskeys.value = true;
+          modalMode.value = "passkey";
+          isLoading.value = false;
+        } else {
+          doesUserHavePasskeys.value = false;
+          modalMode.value = "totp";
+          isLoading.value = false;
+        }
+      }
+    });
+  }
+
   </script>
   
 <style scoped>

package/custom/TwoFactorsConfirmation.vue

@@ -8,7 +8,7 @@
     }: {}"
   >
 
-  <div id="authentication-modal" tabindex="-1" class="af-two-factors-confirmation overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
+  <div v-if="isLoading===false" id="authentication-modal" tabindex="-1" class="af-two-factors-confirmation overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
     <div class="relative p-4 w-full max-w-md max-h-full">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
@@ -44,7 +44,7 @@
                 <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
                 <p class="text-4xl font-semibold mb-4">Passkey</p>
                 <p class="mb-2 max-w-[300px]">When you are ready, authenticate using the button below</p>
-                <Button @click="usePasskeyButton" class="w-full mx-16">
+                <Button @click="usePasskeyButton" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="w-full mx-16">
                   Use passkey
                 </Button>
                 <div v-if="confirmationMode === 'passkey'" class="max-w-sm px-6 pt-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
@@ -68,6 +68,9 @@
         </div>
       </div>
     </div>
+    <div v-else>
+      <Spinner class="w-10 h-10" />
+    </div>
   </div>
 </template>
 
@@ -79,13 +82,14 @@
   import { useUserStore } from '@/stores/user';
   import { callAdminForthApi, loadFile } from '@/utils';
   import { showErrorTost } from '@/composables/useFrontendApi';
-  import { Button, Link } from '@/afcl';
+  import { Button, Link, Spinner } from '@/afcl';
   import VOtpInput from "vue3-otp-input";
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router'
   import { useRouter } from 'vue-router';
   import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
   import ErrorMessage from '@/components/ErrorMessage.vue';
+  import { handlePasskeyAlert } from './utils.js';
 
   const { t } = useI18n();
   const code = ref(null);
@@ -94,6 +98,7 @@
   const route = useRoute();
   const router = useRouter();
   const codeError = ref(null);
+  const isFetchingPasskey = ref(false);
 
   onBeforeMount(() => {
     if (localStorage.getItem('isAuthorized') === 'true') {
@@ -130,6 +135,7 @@
   const doesUserHavePasskeys = ref(false);
   const confirmationMode = ref("code");
   const isPasskeysSupported = ref(false);
+  const isLoading = ref(true);
 
   onMounted(async () => {
     if (localStorage.getItem('isAuthorized') !== 'true') {
@@ -144,6 +150,7 @@
       const rootEl = otpRoot.value;
       rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
     }
+    isLoading.value = false;
   });
 
   watch(route, (newRoute) => {
@@ -230,10 +237,12 @@
   }
 
   async function usePasskeyButton() {
+    isFetchingPasskey.value = true;
     const { _options, challengeId } = await createSignInRequest();
     const options = PublicKeyCredential.parseRequestOptionsFromJSON(_options);
     const credential = await authenticate(options);
     if (!credential) {
+      isFetchingPasskey.value = false;
       return;
     }
     const result = JSON.stringify(credential);
@@ -243,6 +252,7 @@
       origin: window.location.origin,
     };
     sendCode('', 'passkey', passkeyOptions);
+    isFetchingPasskey.value = false;
   }
 
   async function createSignInRequest() {
@@ -278,65 +288,6 @@
     }
   }
 
-  </script>
-
-  <script lang="ts">
-
-  export function handlePasskeyAlert(propSuggestionPeriod, router) {
-    const currentDate = Date.now();
-    window.localStorage.removeItem('suggestionPeriod');
-    window.localStorage.setItem('suggestionPeriod', propSuggestionPeriod);
-    let suggestionPeriod = window.localStorage.getItem('suggestionPeriod');
-    let lastSuggestionDate = window.localStorage.getItem('lastSuggestionDate');
-    let suggestPasskey = window.localStorage.getItem('suggestPasskey');
-    if ( !lastSuggestionDate ) { 
-      window.localStorage.setItem('lastSuggestionDate', currentDate.toString());
-      lastSuggestionDate = window.localStorage.getItem('lastSuggestionDate');
-    }
-    if ( !suggestPasskey ) {
-      window.localStorage.setItem('suggestPasskey', 'true');
-      suggestPasskey = window.localStorage.getItem('suggestPasskey');
-    }
-    if ( currentDate - parseInt(lastSuggestionDate) > parseInt(suggestionPeriod) ) {
-      suggestPasskey = window.localStorage.getItem('suggestPasskey');
-      if (suggestPasskey !== 'true'){
-        if ( suggestPasskey === 'false' || !suggestPasskey ) {
-          window.localStorage.setItem('suggestPasskey', 'true');
-        } else if ( suggestPasskey !== 'never' ) {
-          window.localStorage.setItem('suggestPasskey', 'false');
-        }
-      }
-    }
-    suggestPasskey = window.localStorage.getItem('suggestPasskey');
-
-    if ( suggestPasskey === 'true' ) {
-      adminforth.alert({
-        message: 'Do you want to add passkey?', 
-        variant: 'info', 
-        buttons: [
-          { value: 'yes', label: 'Add passkey' },
-          { value: 'later', label: 'Later' },
-          { value: 'never', label: 'Never' },
-        ],
-        timeout: 'unlimited'
-      }).then((value) => {
-        switch (value) {
-          case 'yes':
-            router.push({ name: 'settings', params: { page: 'passkeys' } });
-            break;
-          case 'later':
-            window.localStorage.setItem('suggestPasskey', 'false');
-            break;
-          case 'never':
-            window.localStorage.setItem('suggestPasskey', 'never');
-            break;
-          default:
-            window.localStorage.setItem('suggestPasskey', 'false');
-            break;
-        }
-      });
-    }
-  }
 
   function getOtpInputs() {
     const root = otpRoot.value;

package/custom/TwoFactorsPasskeysSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="text-3xl text-gray-900 font-semibold max-w-2xl mr-6 flex-col justify-center items-center">
+    <div class="text-3xl text-lightBreadcrumbsText dark:text-darkBreadcrumbsText font-semibold max-w-2xl mr-6 flex-col justify-center items-center">
         <p class="flex items-start justify-start leading-none">Passkeys</p>
         <div class="flex flex-col items-end">
             <Table
@@ -17,17 +17,23 @@
                         class="w-96"
                         :buttons="[
                             { label: 'Save', onclick: (dialog) => { renamePasskey(item.id, passkeysNewName); dialog.hide(); } },
-                            { label: 'Cancel', options: {class: 'bg-white focus:!ring-gray-200 !text-gray-900 hover:!bg-gray-200 dark:!bg-gray-800 dark:!text-gray-300 dark:hover:!bg-gray-700 dark:border-gray-900'}, onclick: (dialog) => {passkeysNewName = ''; dialog.hide();} },
+                            { label: 'Cancel', options: {class: 'bg-white focus:!ring-gray-200 !text-gray-900 hover:!bg-gray-200 dark:!bg-gray-800 dark:!text-gray-300 dark:hover:!bg-gray-700 dark:border-gray-900 dark:hover:!border-gray-800 dark:focus:!ring-gray-800'}, onclick: (dialog) => {passkeysNewName = ''; dialog.hide();} },
                         ]"
                         header="Edit Passkey"
                     >
                         <template #trigger>
-                            <div 
-                                @click="passkeysNewName = ''"
-                                class="w-7 h-7 flex items-center justify-center hover:border rounded-md hover:shadow-md text-blue-500 hover:text-blue-700 cursor-pointer"
-                            >
-                                <IconPenSolid class="w-5 h-5" />
-                            </div>
+                            <Tooltip>
+                                <div 
+                                    @click="passkeysNewName = ''"
+                                    class="w-7 h-7 flex items-center justify-center rounded-md text-blue-500 hover:text-blue-700 cursor-pointer"
+                                >
+                                    <IconPenSolid class="w-5 h-5" />
+                                </div>
+
+                                <template #tooltip>
+                                    Rename passkey
+                                </template>
+                            </Tooltip>
                         </template>
                         <div>
                             <p>Enter new passkey name:</p>
@@ -42,17 +48,22 @@
                     <Dialog 
                         class="w-96"
                         :buttons="[
-                            { label: 'Delete', options: {class: 'bg-red-700 !text-white hover:!bg-red-600 focus:ring-2 focus:ring-red-500'}, onclick: (dialog) => { deletePasskey(item.id); dialog.hide(); } },
-                            { label: 'Cancel', options: {class: 'bg-white focus:!ring-gray-200 !text-gray-900 hover:!bg-gray-200'}, onclick: (dialog) => dialog.hide() },
+                            { label: 'Delete', options: {class: 'bg-red-700 !text-white hover:!bg-red-600 focus:ring-2 focus:ring-red-500 dark:!bg-red-700 dark:hover:!bg-red-600 dark:focus:ring-red-500 dark:!border-red-800'}, onclick: (dialog) => { deletePasskey(item.id); dialog.hide(); } },
+                            { label: 'Cancel', options: {class: 'bg-white focus:!ring-gray-200 !text-gray-900 hover:!bg-gray-200 dark:!text-white dark:!bg-gray-700 dark:hover:!bg-gray-800 dark:!border-gray-600 dark:focus:!ring-gray-800'}, onclick: (dialog) => dialog.hide() },
                         ]"
                         header="Delete Passkey"
                     >
                         <template #trigger>
-                            <div class="w-7 h-7 flex items-center justify-center hover:border rounded-md hover:shadow-md text-red-500 hover:text-red-700 cursor-pointer">
-                                <IconTrashBinSolid 
-                                    class="w-5 h-5" 
-                                />
-                            </div>
+                            <Tooltip>
+                                <div class="w-7 h-7 flex items-center justify-center rounded-md text-red-500 hover:text-red-700 cursor-pointer">
+                                    <IconTrashBinSolid 
+                                        class="w-5 h-5" 
+                                    />
+                                </div>
+                                <template #tooltip>
+                                    Delete passkey
+                                </template>
+                            </Tooltip>
                         </template>
                         <div>
                             <p>Are you sure you want to delete this passkey?</p>
@@ -66,9 +77,9 @@
             </template>
             </Table>
             <div class="flex space-x-4 mt-4" v-if="isInitialFinished">
-                <ButtonGroup :solidColor="true">
+                <ButtonGroup :solidColor="true" v-if="isFetchingPasskey === false">
                     <template #button:Profile>
-                        <div class="flex px-4 py-2" @click="addPasskey()">
+                        <div class="flex px-4 py-2" @click="addPasskeyStartAction()">
                             <IconPlusOutline class="w-5 h-5 me-2"/>
                             <p>{{ addPasskeyMode === 'platform' ? 'Add Local Passkey' : 'Add External Passkey' }}</p>
                         </div>
@@ -79,6 +90,7 @@
                         </div>
                     </template>
                 </ButtonGroup>
+                <p v-else class="flex items-center justify-center gap-2 text-base">Processing <Spinner class="w-4 h-4 inline-block" /></p>
             </div> 
             <div v-if="isCardsVisible" id="cards-container" class="w-80 mt-2 border-gray-400 p-2 bg-white rounded-lg shadow-md flex flex-col space-y-2">
                 <div v-if="isPasskeySupported" class="flex justify-between gap-4" :class="!isPasskeySupported ? 'opacity-50 pointer-events-none' : ''">
@@ -127,6 +139,29 @@
                 </div>
             </div>
         </div>
+        <Dialog 
+            ref="confirmDialog" 
+            class="w-96" 
+            :click-to-close-outside="false"   
+            :buttons="[]"
+        >
+            <div class="flex flex-col">
+                <button
+                type="button"
+                class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+                @click="{ isFetchingPasskey = false; fetchedOptions = null; closeDialog(); }"
+                >
+                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                    </svg>
+                    <span class="sr-only">Close dialog</span>
+                </button>
+                <div class="flex items-center justify-center space-y-4">
+                    Now you can add a passkey. 
+                </div>
+                <Button class="mt-4" @click="addPasskeyFinishAction(fetchedOptions); closeDialog();">Add Passkey</Button>
+            </div>
+        </Dialog>
     </div>
 </template>
 
@@ -135,7 +170,7 @@
     import { callAdminForthApi } from '@/utils';
     import adminforth from '@/adminforth';
     import { onMounted, ref, Ref, onBeforeUnmount } from 'vue';
-    import { Card, Dialog, ButtonGroup, Tooltip } from '@/afcl'
+    import { Card, Dialog, ButtonGroup, Tooltip, Spinner, Button } from '@/afcl'
     import { IconTrashBinSolid, IconPenSolid, IconPlusOutline, IconCaretDownSolid, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
     import dayjs from 'dayjs';
     import utc from 'dayjs/plugin/utc';
@@ -152,6 +187,19 @@
     const addPasskeyMode: Ref<'platform' | 'cross-platform'> = ref('platform');
     const authenticatorAttachment = ref<'platform' | 'cross-platform' | 'both'>('platform');
     const isInitialFinished = ref(false);
+    const isFetchingPasskey = ref(false);
+
+    const confirmDialog = ref(null);
+
+    const openDialog = () => {
+        confirmDialog.value.open();
+    }
+
+    const closeDialog = () => {
+        confirmDialog.value.close();
+    }
+
+    const fetchedOptions = ref(null);
 
     onMounted(async () => {
         await getPasskeys();
@@ -179,13 +227,39 @@
         }
     }
 
-    async function addPasskey() {
-        const { options, challengeId } = await fetchInformationFromTheBackend();
+    async function addPasskeyStartAction() {
+        isFetchingPasskey.value = true;
+        let confirmationResult;
+        try {
+            confirmationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult(undefined, "To add passkey first verify yourself");
+        } catch (e) {
+            isFetchingPasskey.value = false;
+            return;
+        }
+        if (!confirmationResult) {
+            isFetchingPasskey.value = false;
+            return;
+        }
+        const { options } = await fetchInformationFromTheBackend(confirmationResult);
+        if (!options ) {
+            isFetchingPasskey.value = false;
+            adminforth.alert({message: 'Verification failed.', variant: 'warning'});
+            return;
+        }
+        fetchedOptions.value = options;
+        openDialog();
+    }
+
+    async function addPasskeyFinishAction(options) {
         const creationResult = await callWebAuthn(options);
         if (!creationResult) {
+            isFetchingPasskey.value = false;
+            fetchedOptions.value = null;
             return;
         }
-        finishRegisteringPasskey(creationResult, challengeId);
+        fetchedOptions.value = null;
+        finishRegisteringPasskey(creationResult);
+        isFetchingPasskey.value = false;
     }
 
     async function getPasskeys() {
@@ -267,20 +341,24 @@
         }  
     } 
     
-    async function fetchInformationFromTheBackend() {
+    async function fetchInformationFromTheBackend(confirmationResult) {
         let response;
         try {
             response = await callAdminForthApi({
                 path: `/plugin/passkeys/registerPasskeyRequest`,
                 method: 'POST',
                 body: {
-                    mode: addPasskeyMode.value
+                    mode: addPasskeyMode.value,
+                    confirmationResult: confirmationResult
                 },
             });
         } catch (error) {
             console.error('Error fetching passkeys info:', error);
             return;
         }
+        if (!response.ok) {
+            return {};
+        }
         const _options = response.data;
         const challengeId = response.challengeId;
         const options = PublicKeyCredential.parseCreationOptionsFromJSON(_options);
@@ -303,7 +381,7 @@
         return result;
     }
 
-    async function finishRegisteringPasskey(credential: any, challengeId: string) {
+    async function finishRegisteringPasskey(credential: any) {
         let res 
         try {
             res = await callAdminForthApi({
@@ -312,7 +390,6 @@
                 body: {
                     credential: credential,
                     origin: window.location.origin,
-                    challengeId: challengeId,
                 },
             });
         } catch (error) {

package/custom/TwoFactorsSetup.vue

@@ -80,7 +80,7 @@ import VOtpInput from "vue3-otp-input";
 import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { handlePasskeyAlert } from './TwoFactorsConfirmation.vue';
+import { handlePasskeyAlert } from './utils.js';
 import ErrorMessage from '@/components/ErrorMessage.vue';
 
 const { t } = useI18n();