register totp mfa during account enrollment

package.json

@@ -11,6 +11,7 @@
     "typesafe-i18n": "typesafe-i18n",
     "generate-translation-types": "typesafe-i18n --no-watch",
     "fix": "biome check --fix && prettier src/**/*.scss -w --log-level silent",
+    "fix-unsafe": "biome check --fix --unsafe && prettier src/**/*.scss -w --log-level silent",
     "lint": "biome lint && pnpm run typecheck && prettier src/**/*.scss --check --log-level error",
     "lint-ci": "biome ci && pnpm run typecheck && prettier src/**/*.scss --check --log-level error",
     "vite": "vite",

src-tauri/Cargo.toml

@@ -67,7 +67,7 @@ tauri-plugin-clipboard-manager = "2"
 tauri-plugin-deep-link = "2"
 tauri-plugin-dialog = "2"
 tauri-plugin-fs = "2"
-tauri-plugin-http = "2"
+tauri-plugin-http = { version = "2", features = ["unsafe-headers"] }
 tauri-plugin-log = "2"
 tauri-plugin-notification = "2"
 tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }

src/i18n/en/index.ts

@@ -490,6 +490,7 @@ If this will not change, please contact your administrator.`,
           password: 'Create password',
           vpn: 'Configure VPN',
           finish: 'Finish',
+          mfa: 'Configure MFA',
         },
         appVersion: 'Application version',
       },

src/i18n/i18n-types.ts

@@ -1126,6 +1126,10 @@ type RootTranslation = {
 					 * F​i​n​i​s​h
 					 */
 					finish: string
+					/**
+					 * C​o​n​f​i​g​u​r​e​ ​m​f​a
+					 */
+					mfa: string
 				}
 				/**
 				 * A​p​p​l​i​c​a​t​i​o​n​ ​v​e​r​s​i​o​n
@@ -2790,6 +2794,10 @@ export type TranslationFunctions = {
 					 * Finish
 					 */
 					finish: () => LocalizedString
+					/**
+					 * Configure mfa
+					 */
+					mfa: () => LocalizedString
 				}
 				/**
 				 * Application version

src/pages/client/pages/ClientInstancePage/components/LocationsList/modals/MFAModal/MFAModal.tsx

@@ -26,10 +26,7 @@ import { useToaster } from '../../../../../../../../shared/defguard-ui/hooks/toa
 import { isPresent } from '../../../../../../../../shared/defguard-ui/utils/isPresent';
 import { clientApi } from '../../../../../../clientAPI/clientApi';
 import { useClientStore } from '../../../../../../hooks/useClientStore';
-import {
-  type DefguardInstance,
-  LocationMfaType,
-} from '../../../../../../types';
+import { type DefguardInstance, LocationMfaType } from '../../../../../../types';
 import { MfaMobileApprove } from './components/MfaMobileApprove/MfaMobileApprove';
 import { BrowserErrorIcon, BrowserPendingIcon, GoToBrowserIcon } from './Icons';
 import { useMFAModal } from './useMFAModal';

src/pages/client/pages/ClientInstancePage/components/LocationsList/modals/MFAModal/components/MfaMobileApprove/MfaMobileApprove.tsx

@@ -47,16 +47,10 @@ export const MfaMobileApprove = ({
     [proxyUrl],
   );
 
-  const { lastMessage, readyState } = useWebSocket(wsUrl, {
+  const { lastMessage } = useWebSocket(wsUrl, {
     queryParams: {
       token,
     },
-    onOpen: () => {
-      console.log('Websocket connected');
-    },
-    onClose: () => {
-      console.log('Websocket closed');
-    },
   });
 
   const qrString = useMemo(() => {
@@ -71,10 +65,6 @@ export const MfaMobileApprove = ({
     return fromUint8Array(encoded);
   }, [token, challenge, instanceUuid]);
 
-  useEffect(() => {
-    console.log(`Last msg: ${lastMessage}\nState ${readyState}`);
-  }, [lastMessage, readyState]);
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: Side effect
   useEffect(() => {
     if (lastMessage != null) {
@@ -102,9 +92,90 @@ export const MfaMobileApprove = ({
 
   return (
     <div id="mobile-approve-mfa">
-      <MessageBox message="Scan this QR with the defguard mobile app from the same instance screen." />
+      <MessageBox message="Scan this QR with the defguard mobile app from the same instance screen.">
+        <p>
+          <span>
+            {'Go to the mobile app, select this instance and click the Biometry button'}
+          </span>
+          <ExampleButton />
+          <span>{'in the botom right corner.'}</span>
+        </p>
+      </MessageBox>
       <QrCode value={qrString} />
       <Button text="Cancel" onClick={onCancel} />
     </div>
   );
 };
+
+const ExampleButton = () => {
+  return (
+    <div className="example-mobile-button">
+      <QrIcon />
+    </div>
+  );
+};
+
+const QrIcon = () => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.02151 8.81162L0.917016 8.80673C0.401354 8.75382 0 8.31229 0 7.7745V1.03712C1.95739e-05 0.499341 0.401362 0.0577882 0.917016 0.00488286L1.02151 0H7.65449C8.21928 0 8.67598 0.463589 8.676 1.03712V7.7745C8.676 8.34805 8.21929 8.81162 7.65449 8.81162H1.02151ZM2.00005 6.81159H6.67595V2.00002H2.00005V6.81159Z"
+        fill="white"
+      />
+      <path
+        d="M14.3455 8.81162L14.241 8.80673C13.7253 8.75382 13.324 8.31229 13.324 7.7745V1.03712C13.324 0.499341 13.7253 0.0577882 14.241 0.00488286L14.3455 0H20.9785C21.5433 0 22 0.463589 22 1.03712V7.7745C22 8.34805 21.5433 8.81162 20.9785 8.81162H14.3455ZM15.324 6.81159H19.9999V2.00002H15.324V6.81159Z"
+        fill="white"
+      />
+      <path
+        d="M1.02151 22L0.917016 21.9951C0.401354 21.9422 0 21.5006 0 20.9629V14.2255C1.95739e-05 13.6877 0.401362 13.2461 0.917016 13.1932L1.02151 13.1884H7.65449C8.21928 13.1884 8.67598 13.6519 8.676 14.2255V20.9629C8.676 21.5364 8.21929 22 7.65449 22H1.02151ZM2.00005 19.9999H6.67595V15.1884H2.00005V19.9999Z"
+        fill="white"
+      />
+      <path
+        d="M18.885 17.3795H18.1823C17.8953 17.3795 17.6625 17.143 17.6625 16.8516V16.138C17.6625 15.8466 17.8953 15.6101 18.1823 15.6101H18.885C19.172 15.6101 19.4048 15.8466 19.4048 16.138V16.8516C19.4048 17.143 19.172 17.3795 18.885 17.3795Z"
+        fill="white"
+      />
+      <path
+        d="M21.0777 19.5782H20.374C20.0871 19.5782 19.8552 19.3417 19.8552 19.0503V18.3367C19.8552 18.0453 20.0871 17.8088 20.374 17.8088H21.0777C21.3637 17.8088 21.5966 18.0453 21.5966 18.3367V19.0503C21.5966 19.3417 21.3637 19.5782 21.0777 19.5782Z"
+        fill="white"
+      />
+      <path
+        d="M18.885 21.776H18.1823C17.8953 21.776 17.6625 21.5395 17.6625 21.2481V20.5345C17.6625 20.2431 17.8953 20.0066 18.1823 20.0066H18.885C19.172 20.0066 19.4048 20.2431 19.4048 20.5345V21.2481C19.4048 21.5395 19.172 21.776 18.885 21.776Z"
+        fill="white"
+      />
+      <path
+        d="M4.68991 5.29049H3.98725C3.70027 5.29049 3.46741 5.05402 3.46741 4.76259V4.04903C3.46741 3.75759 3.70027 3.52112 3.98725 3.52112H4.68991C4.9769 3.52112 5.20976 3.75759 5.20976 4.04903V4.76259C5.20976 5.05402 4.9769 5.29049 4.68991 5.29049Z"
+        fill="white"
+      />
+      <path
+        d="M4.68991 18.6925H3.98725C3.70027 18.6925 3.46741 18.456 3.46741 18.1646V17.451C3.46741 17.1596 3.70027 16.9231 3.98725 16.9231H4.68991C4.9769 16.9231 5.20976 17.1596 5.20976 17.451V18.1646C5.20976 18.456 4.9769 18.6925 4.68991 18.6925Z"
+        fill="white"
+      />
+      <path
+        d="M16.6361 17.8079H16.1581H15.9334H13.7407C13.4537 17.8079 13.2208 18.0443 13.2208 18.3358V19.0493C13.2208 19.3408 13.4537 19.5772 13.7407 19.5772H15.9334H16.1581H16.6361C16.9231 19.5772 17.1559 19.3408 17.1559 19.0493V18.3358C17.1559 18.0443 16.9231 17.8079 16.6361 17.8079Z"
+        fill="white"
+      />
+      <path
+        d="M21.0777 11.0996H20.4588H20.3751H18.1823C17.8953 11.0996 17.6625 11.3361 17.6625 11.6275V12.3411C17.6625 12.6325 17.8953 12.869 18.1823 12.869H19.8552V14.6539C19.8552 14.9454 20.0881 15.1818 20.3751 15.1818H21.0777C21.3647 15.1818 21.5976 14.9454 21.5976 14.6539V12.3411V12.1274V11.6275C21.5976 11.3361 21.3647 11.0996 21.0777 11.0996Z"
+        fill="white"
+      />
+      <path
+        d="M16.6362 13.4124H14.9633V11.6285C14.9633 11.3371 14.7304 11.1006 14.4434 11.1006H14.0502H13.7408H11.5766C11.2896 11.1006 11.0568 11.3371 11.0568 11.6285V12.3421C11.0568 12.6335 11.2896 12.87 11.5766 12.87H13.2209V13.9403V14.155V14.6539V16.8526C13.2209 17.1441 13.4538 17.3805 13.7408 17.3805H14.4434C14.7304 17.3805 14.9633 17.1441 14.9633 16.8526V15.1818H16.6362C16.9232 15.1818 17.156 14.9453 17.156 14.6539V13.9403C17.156 13.6489 16.9232 13.4124 16.6362 13.4124Z"
+        fill="white"
+      />
+      <path
+        d="M12.2793 21.776H11.5766C11.2896 21.776 11.0568 21.5395 11.0568 21.2481V20.5345C11.0568 20.2431 11.2896 20.0066 11.5766 20.0066H12.2793C12.5663 20.0066 12.7991 20.2431 12.7991 20.5345V21.2481C12.7991 21.5395 12.5663 21.776 12.2793 21.776Z"
+        fill="white"
+      />
+      <path
+        d="M18.0139 5.29049H17.3102C17.0232 5.29049 16.7914 5.05402 16.7914 4.76259V4.04903C16.7914 3.75759 17.0232 3.52112 17.3102 3.52112H18.0139C18.2999 3.52112 18.5327 3.75759 18.5327 4.04903V4.76259C18.5327 5.05402 18.2999 5.29049 18.0139 5.29049Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

src/pages/client/pages/ClientInstancePage/components/LocationsList/modals/MFAModal/components/MfaMobileApprove/style.scss

@@ -6,4 +6,24 @@
   box-sizing: border-box;
   padding: var(--spacing-m) var(--spacing-s);
   gap: var(--spacing-m);
+
+  .message-box {
+    p {
+      display: inline-flex;
+      flex-flow: row wrap;
+      column-gap: 10px;
+      align-items: center;
+    }
+  }
+
+  .example-mobile-button {
+    border-radius: 15px;
+    background-color: var(--surface-main-primary);
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+  }
 }

src/pages/enrollment/EnrollmentPage.tsx

@@ -29,6 +29,8 @@ import { DataVerificationStep } from './steps/DataVerificationStep/DataVerificat
 import { DeviceStep } from './steps/DeviceStep/DeviceStep';
 import { FinishStep } from './steps/FinishStep/FinishStep';
 import { PasswordStep } from './steps/PasswordStep/PasswordStep';
+import { SendFinishStep } from './steps/SendFinishStep/SendFinishStep';
+import { TotpEnrollmentStep } from './steps/Totp/TotpEnrollmentStep';
 import { WelcomeStep } from './steps/WelcomeStep/WelcomeStep';
 
 export const EnrollmentPage = () => {
@@ -51,10 +53,17 @@ export const EnrollmentPage = () => {
 
   // ensure number of steps is correct
   useEffect(() => {
-    if (stepsMax !== steps.length - 1) {
-      setEnrollmentState({ stepsMax: steps.length - 1 });
-    }
-  }, [setEnrollmentState, stepsMax]);
+    const stepsIgnored: number[] = [];
+    steps.forEach((step, index) => {
+      if (step.ignoreCount) {
+        stepsIgnored.push(index);
+      }
+    });
+    setEnrollmentState({
+      stepsIgnored,
+      stepsMax: steps.length - 1,
+    });
+  }, [setEnrollmentState]);
 
   useEffect(() => {
     if (!enrollmentFinished.current) {
@@ -64,19 +73,19 @@ export const EnrollmentPage = () => {
         if (diff > 0) {
           const timeout = setTimeout(() => {
             if (!enrollmentFinished.current) {
-              debug('Enrollment session time ended, navigatig to timeout page.');
+              debug('Enrollment session time ended, navigating to timeout page.');
               navigate(routes.timeout, { replace: true });
             }
           }, diff);
           return () => {
             clearTimeout(timeout);
           };
         } else {
-          debug('Enrollment session time ended, navigatig to timeout page.');
+          debug('Enrollment session time ended, navigating to timeout page.');
           navigate(routes.timeout, { replace: true });
         }
       } else {
-        error('Seesion end time not found, navigating to timeout page.');
+        error('Session end time not found, navigating to timeout page.');
         navigate(routes.timeout, { replace: true });
       }
     }
@@ -139,13 +148,25 @@ const steps: EnrollmentStep[] = [
   },
   {
     key: 4,
-    step: <FinishStep key={4} />,
+    step: <TotpEnrollmentStep key={4} />,
+    backDisabled: true,
+  },
+  {
+    key: 5,
+    step: <SendFinishStep key={5} />,
+    backDisabled: true,
+    ignoreCount: true,
+  },
+  {
+    key: 6,
+    step: <FinishStep key={6} />,
     backDisabled: true,
   },
 ];
 
 type EnrollmentStep = {
   backDisabled?: boolean;
   key: string | number;
+  ignoreCount?: boolean;
   step: ReactNode;
 };