@adminforth/two-factors-auth 1.0.29 → 1.0.30

package/Changelog.md

@@ -1,3 +1,9 @@
+## [1.0.20] - 2024-12-05
+
+### Added
+
+- Added usersFilterToAllowSkipSetup to TwoFactorsAuthPlugin to allow skip 2FA setup for specific users
+
 ## [1.0.19] - 2024-12-02
 
 ### Fixed

package/custom/TwoFactorsConfirmation.vue

@@ -28,7 +28,7 @@
                       />
                     </div>
                     <!-- <Vue2FACodeInput v-model="code"/> -->
-                    <Button @click="() => {router.push('./login')}" class="w-full">Cancel</Button>
+                    <LinkButton to="/login" class="w-full">Back to login</LinkButton>
                 </div>
             </div>
         </div>
@@ -49,7 +49,7 @@
   import { callAdminForthApi, loadFile } from '@/utils';
   import { useRouter } from 'vue-router';
   import { showErrorTost } from '@/composables/useFrontendApi';
-  import { Button } from '@/afcl';
+  import { LinkButton } from '@/afcl';
   import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
   import VOtpInput from "vue3-otp-input";
 

package/custom/TwoFactorsSetup.vue

@@ -22,19 +22,12 @@
                       <div class="w-full max-w-[46rem]">
                           <div class="relative">
                               <label for="npm-install-copy-text" class="sr-only">Label</label>
-                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-20" :value="totp.newSecret" readonly>
+                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-12" :value="totp.newSecret" readonly>
                               <button @click="onCopyClick" data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
-                                  <span v-if="isCopied === false" id="default-message" class="inline-flex items-center">
-                                      <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                                  <span id="default-message" class="inline-flex items-center">
+                                      <svg class="w-3 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                                           <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                                       </svg>
-                                      <span class="text-xs font-semibold">Copy</span>
-                                  </span>
-                                  <span v-if="isCopied === true" id="success-message" class="inline-flex items-center">
-                                      <svg class="w-3 h-3 text-lightPrimary dark:text-darkPrimary me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
-                                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
-                                      </svg>
-                                      <span class="text-xs font-semibold text-lightPrimary dark:text-darkPrimary">Copied</span>   
                                   </span>
                               </button>
                           </div>
@@ -53,9 +46,14 @@
                     />
                   </div>
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
-                  <Button @click="()=>{router.push('./login')}" 
-                      class="w-full">Cancel
-                  </Button>      
+                   <div class="flex flex-row gap-2.5">
+                  <LinkButton to="/login" class="w-full">
+                    Back to login
+                  </LinkButton>
+                  <Button v-if="skipAllowed" @click="handleSkip" class="w-full">
+                    Skip for now
+                  </Button>
+                </div>
               </div>
           </div>
       </div>
@@ -75,12 +73,11 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
-import { Button } from '@/afcl';
+import { Button, LinkButton } from '@/afcl';
 import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
 import VOtpInput from "vue3-otp-input";
 
 const code = ref(null);
-const isCopied = ref<boolean>(false);
 const handleOnComplete = (value) => {
   sendCode(value);
 };
@@ -91,6 +88,8 @@ const inProgress = ref(false);
 const coreStore = useCoreStore();
 const user = useUserStore();
 
+const skipAllowed = ref(false);
+
 // use this simple function to automatically focus on the next input
 
 const showPw = ref(false);
@@ -122,7 +121,6 @@ function parseJwt(token) {
 } 
 
 function onCopyClick(){
-  isCopied.value = true;
   navigator.clipboard.writeText(totp.value.newSecret);
   window.adminforth.alert({message: 'Copied to clipboard', variant: 'success'})
 }
@@ -136,9 +134,16 @@ onMounted(async () => {
     totpJWT.value = resp.totpJWT;
   } 
   
-
   totp.value=parseJwt(totpJWT.value);
+  
+  const allowSkipResp = await callAdminForthApi({
+    path: '/plugin/twofa/skip-allow',
+    method: 'GET',
+  });
 
+  if (allowSkipResp?.skipAllowed){
+    skipAllowed.value = true;
+  }
 
   window.addEventListener('paste', handlePaste);
 });
@@ -177,6 +182,18 @@ function handlePaste(event) {
     code.value?.fillInput(pastedText);
   }
 }
+
+const handleSkip = async () => {
+  const resp = await callAdminForthApi({
+    method: 'POST',
+    path: '/plugin/twofa/confirmSetup',
+  });
+  if (resp.allowedLogin){
+    await user.finishLogin()
+  } else {
+    showErrorTost('Something went wrong');
+  }
+}
 </script>
 <style>
 .otp-input {

package/dist/custom/TwoFactorsConfirmation.vue

@@ -28,7 +28,7 @@
                       />
                     </div>
                     <!-- <Vue2FACodeInput v-model="code"/> -->
-                    <Button @click="() => {router.push('./login')}" class="w-full">Cancel</Button>
+                    <LinkButton to="/login" class="w-full">Back to login</LinkButton>
                 </div>
             </div>
         </div>
@@ -49,7 +49,7 @@
   import { callAdminForthApi, loadFile } from '@/utils';
   import { useRouter } from 'vue-router';
   import { showErrorTost } from '@/composables/useFrontendApi';
-  import { Button } from '@/afcl';
+  import { LinkButton } from '@/afcl';
   import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
   import VOtpInput from "vue3-otp-input";
 

package/dist/custom/TwoFactorsSetup.vue

@@ -22,19 +22,12 @@
                       <div class="w-full max-w-[46rem]">
                           <div class="relative">
                               <label for="npm-install-copy-text" class="sr-only">Label</label>
-                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-20" :value="totp.newSecret" readonly>
+                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-12" :value="totp.newSecret" readonly>
                               <button @click="onCopyClick" data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
-                                  <span v-if="isCopied === false" id="default-message" class="inline-flex items-center">
-                                      <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                                  <span id="default-message" class="inline-flex items-center">
+                                      <svg class="w-3 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                                           <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                                       </svg>
-                                      <span class="text-xs font-semibold">Copy</span>
-                                  </span>
-                                  <span v-if="isCopied === true" id="success-message" class="inline-flex items-center">
-                                      <svg class="w-3 h-3 text-lightPrimary dark:text-darkPrimary me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
-                                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
-                                      </svg>
-                                      <span class="text-xs font-semibold text-lightPrimary dark:text-darkPrimary">Copied</span>   
                                   </span>
                               </button>
                           </div>
@@ -53,9 +46,14 @@
                     />
                   </div>
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
-                  <Button @click="()=>{router.push('./login')}" 
-                      class="w-full">Cancel
-                  </Button>      
+                   <div class="flex flex-row gap-2.5">
+                  <LinkButton to="/login" class="w-full">
+                    Back to login
+                  </LinkButton>
+                  <Button v-if="skipAllowed" @click="handleSkip" class="w-full">
+                    Skip for now
+                  </Button>
+                </div>
               </div>
           </div>
       </div>
@@ -75,12 +73,11 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
-import { Button } from '@/afcl';
+import { Button, LinkButton } from '@/afcl';
 import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
 import VOtpInput from "vue3-otp-input";
 
 const code = ref(null);
-const isCopied = ref<boolean>(false);
 const handleOnComplete = (value) => {
   sendCode(value);
 };
@@ -91,6 +88,8 @@ const inProgress = ref(false);
 const coreStore = useCoreStore();
 const user = useUserStore();
 
+const skipAllowed = ref(false);
+
 // use this simple function to automatically focus on the next input
 
 const showPw = ref(false);
@@ -122,7 +121,6 @@ function parseJwt(token) {
 } 
 
 function onCopyClick(){
-  isCopied.value = true;
   navigator.clipboard.writeText(totp.value.newSecret);
   window.adminforth.alert({message: 'Copied to clipboard', variant: 'success'})
 }
@@ -136,9 +134,16 @@ onMounted(async () => {
     totpJWT.value = resp.totpJWT;
   } 
   
-
   totp.value=parseJwt(totpJWT.value);
+  
+  const allowSkipResp = await callAdminForthApi({
+    path: '/plugin/twofa/skip-allow',
+    method: 'GET',
+  });
 
+  if (allowSkipResp?.skipAllowed){
+    skipAllowed.value = true;
+  }
 
   window.addEventListener('paste', handlePaste);
 });
@@ -177,6 +182,18 @@ function handlePaste(event) {
     code.value?.fillInput(pastedText);
   }
 }
+
+const handleSkip = async () => {
+  const resp = await callAdminForthApi({
+    method: 'POST',
+    path: '/plugin/twofa/confirmSetup',
+  });
+  if (resp.allowedLogin){
+    await user.finishLogin()
+  } else {
+    showErrorTost('Something went wrong');
+  }
+}
 </script>
 <style>
 .otp-input {

package/dist/index.js

@@ -55,12 +55,13 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             if (!userNeeds2FA) {
                 return { body: { loginAllowed: true }, ok: true };
             }
+            const userCanSkipSetup = this.options.usersFilterToAllowSkipSetup ? this.options.usersFilterToAllowSkipSetup(adminUser) : false;
             if (!secret) {
                 const tempSecret = twofactor.generateSecret({ name: brandName, account: userName });
                 newSecret = tempSecret.secret;
             }
             else {
-                const value = this.adminforth.auth.issueJWT({ userName, issuer: brandName, pk: userPk }, 'tempTotp', '2h');
+                const value = this.adminforth.auth.issueJWT({ userName, issuer: brandName, pk: userPk, userCanSkipSetup }, 'tempTotp', '2h');
                 response.setHeader('Set-Cookie', `adminforth_totpTemporaryJWT=${value}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; max-age=3600; `);
                 return {
                     body: {
@@ -70,7 +71,7 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
                     ok: true
                 };
             }
-            const totpTemporaryJWT = this.adminforth.auth.issueJWT({ userName, newSecret, issuer: brandName, pk: userPk }, 'tempTotp', '2h');
+            const totpTemporaryJWT = this.adminforth.auth.issueJWT({ userName, newSecret, issuer: brandName, pk: userPk, userCanSkipSetup }, 'tempTotp', '2h');
             response.setHeader('Set-Cookie', `adminforth_totpTemporaryJWT=${totpTemporaryJWT}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=${new Date(Date.now() + '1h').toUTCString()} `);
             return {
                 body: {
@@ -108,11 +109,13 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
                     return { status: 'error', message: 'Invalid token' };
                 }
                 if (decoded.newSecret) {
-                    const verified = twofactor.verifyToken(decoded.newSecret, body.code);
+                    const verified = decoded.userCanSkipSetup ? true : twofactor.verifyToken(decoded.newSecret, body.code);
                     if (verified) {
                         this.connectors = this.adminforth.connectors;
-                        const connector = this.connectors[this.authResource.dataSource];
-                        yield connector.updateRecord({ resource: this.authResource, recordId: decoded.pk, newValues: { [this.options.twoFaSecretFieldName]: decoded.newSecret } });
+                        if (!decoded.userCanSkipSetup) {
+                            const connector = this.connectors[this.authResource.dataSource];
+                            yield connector.updateRecord({ resource: this.authResource, recordId: decoded.pk, newValues: { [this.options.twoFaSecretFieldName]: decoded.newSecret } });
+                        }
                         this.adminforth.auth.removeCustomCookie({ response, name: 'totpTemporaryJWT' });
                         this.adminforth.auth.setAuthCookie({ response, username: decoded.userName, pk: decoded.pk });
                         return { status: 'ok', allowedLogin: true };
@@ -138,5 +141,27 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
                 }
             })
         });
+        server.endpoint({
+            method: "GET",
+            path: "/plugin/twofa/skip-allow",
+            noAuth: true,
+            handler: (_d) => __awaiter(this, [_d], void 0, function* ({ cookies }) {
+                var _e;
+                const totpTemporaryJWT = (_e = cookies.find((cookie) => cookie.key === "adminforth_totpTemporaryJWT")) === null || _e === void 0 ? void 0 : _e.value;
+                const decoded = yield this.adminforth.auth.verify(totpTemporaryJWT, "tempTotp");
+                if (!decoded) {
+                    return { status: "error", message: "Invalid token" };
+                }
+                if (!decoded.newSecret) {
+                    return { status: "ok", skipAllowed: false };
+                }
+                else {
+                    return {
+                        status: "ok",
+                        skipAllowed: decoded.userCanSkipSetup,
+                    };
+                }
+            }),
+        });
     }
 }

package/index.ts

@@ -1,4 +1,4 @@
-import {  AdminForthPlugin } from "adminforth";
+import {  AdminForthPlugin, Filters } from "adminforth";
 import type { AdminForthResource, AdminUser, IAdminForth, IHttpServer, IAdminForthAuth, BeforeLoginConfirmationFunction, IAdminForthHttpResponse } from "adminforth";
 import twofactor from 'node-2fa';
 import  { PluginOptions } from "./types.js"
@@ -61,11 +61,13 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
           return { body:{loginAllowed: true}, ok: true}
         }
 
+        const userCanSkipSetup = this.options.usersFilterToAllowSkipSetup ? this.options.usersFilterToAllowSkipSetup(adminUser) : false;
+
         if (!secret){
           const tempSecret = twofactor.generateSecret({name: brandName,account: userName})
           newSecret = tempSecret.secret
         } else {
-          const value = this.adminforth.auth.issueJWT({userName,  issuer:brandName, pk:userPk }, 'tempTotp', '2h');
+          const value = this.adminforth.auth.issueJWT({userName,  issuer:brandName, pk:userPk, userCanSkipSetup }, 'tempTotp', '2h');
           response.setHeader('Set-Cookie', `adminforth_totpTemporaryJWT=${value}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; max-age=3600; `);
 
           return {
@@ -76,7 +78,7 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             ok: true
           }
         }
-        const totpTemporaryJWT = this.adminforth.auth.issueJWT({userName, newSecret, issuer:brandName, pk:userPk },'tempTotp', '2h'); 
+        const totpTemporaryJWT = this.adminforth.auth.issueJWT({userName, newSecret, issuer:brandName, pk:userPk, userCanSkipSetup },'tempTotp', '2h'); 
         response.setHeader('Set-Cookie', `adminforth_totpTemporaryJWT=${totpTemporaryJWT}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=${new Date(Date.now() + '1h').toUTCString() } `);
         
         return { 
@@ -115,11 +117,13 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
           return {status:'error',message:'Invalid token'}
         }
         if (decoded.newSecret) {
-          const verified = twofactor.verifyToken(decoded.newSecret, body.code);
-          if (verified) { 
+          const verified = decoded.userCanSkipSetup ? true : twofactor.verifyToken(decoded.newSecret, body.code);
+          if (verified) {
             this.connectors = this.adminforth.connectors
-            const connector = this.connectors[this.authResource.dataSource];
-            await connector.updateRecord({resource:this.authResource, recordId:decoded.pk, newValues:{[this.options.twoFaSecretFieldName]: decoded.newSecret}})
+            if (!decoded.userCanSkipSetup) {
+              const connector = this.connectors[this.authResource.dataSource];
+              await connector.updateRecord({resource:this.authResource, recordId:decoded.pk, newValues:{[this.options.twoFaSecretFieldName]: decoded.newSecret}})
+            }
             this.adminforth.auth.removeCustomCookie({response, name:'totpTemporaryJWT'})
             this.adminforth.auth.setAuthCookie({response, username:decoded.userName, pk:decoded.pk})
             return { status: 'ok', allowedLogin: true }
@@ -142,5 +146,30 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
         }
       }
     })
+    server.endpoint({
+      method: "GET",
+      path: "/plugin/twofa/skip-allow",
+      noAuth: true,
+      handler: async ({ cookies }) => {
+        const totpTemporaryJWT = cookies.find(
+          (cookie) => cookie.key === "adminforth_totpTemporaryJWT"
+        )?.value;
+        const decoded = await this.adminforth.auth.verify(
+          totpTemporaryJWT,
+          "tempTotp"
+        );
+        if (!decoded) {
+          return { status: "error", message: "Invalid token" };
+        }
+        if (!decoded.newSecret) {
+          return { status: "ok", skipAllowed: false };
+        } else {
+          return {
+            status: "ok",
+            skipAllowed: decoded.userCanSkipSetup,
+          };
+        }
+      },
+    });
   }
 }

package/package.json

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

package/types.ts

@@ -16,5 +16,13 @@ export type PluginOptions = {
      * @param adminUser 
      * @returns true if 2FA should be applied to the user and false if AdminForth should not challenge the user with 2FA.
      */
-    usersFilterToApply: (adminUser: AdminUser) => boolean;
+    usersFilterToApply?: (adminUser: AdminUser) => boolean;
+
+    /**
+     * Optional function to allow users to skip 2FA setup.
+     * Should return true if the user should be allowed to skip the 2FA setup and false if AdminForth should require the user to set up 2FA.
+     * @param adminUser 
+     * @returns true if the user should be allowed to skip the 2FA setup and false if AdminForth should require the user to set up 2FA.
+     */
+    usersFilterToAllowSkipSetup?: (adminUser: AdminUser) => boolean;
 }