From 189e3d5599e57a98eaa6223fea727bd3bf5e53d0 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Mon, 16 Mar 2026 16:38:48 +0530
Subject: [PATCH] allow totp and passkey to co-exist

---
 .../src/components/EnableTwoFADialog.vue      | 37 ++++++++++++-------
 dashboard/src/views/ProfileView.vue           | 30 ++++++++++-----
 src/passkeys.js                               |  3 --
 src/users.js                                  |  4 --
 4 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/dashboard/src/components/EnableTwoFADialog.vue b/dashboard/src/components/EnableTwoFADialog.vue
index 7ab0de4ed..b4dd70c4f 100644
--- a/dashboard/src/components/EnableTwoFADialog.vue
+++ b/dashboard/src/components/EnableTwoFADialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Button, ButtonGroup, ClipboardAction, Dialog, TextInput, InputGroup, FormGroup } from '@cloudron/pankow';
+import { Button, ClipboardAction, Dialog, TextInput, InputGroup, FormGroup } from '@cloudron/pankow';
 import { startRegistration } from '@simplewebauthn/browser';
 import ProfileModel from '../models/ProfileModel.js';
 
@@ -64,37 +64,42 @@ async function onRegisterPasskey() {
   passkeyRegisterBusy.value = false;
 }
 
+async function loadTotpSecret() {
+  const [error, result] = await profileModel.setTotpSecret();
+  if (error) return console.error(error);
+
+  totpSecret.value = result.secret;
+  totpQRCode.value = result.qrcode;
+}
+
 defineExpose({
-  async open() {
-    setupMode.value = 'passkey';
+  async open(method) {
+    setupMode.value = method || 'passkey';
     totpEnableError.value = '';
     totpToken.value = '';
     passkeyRegisterError.value = '';
 
     dialog.value.open();
 
-    const [error, result] = await profileModel.setTotpSecret();
-    if (error) return console.error(error);
-
-    totpSecret.value = result.secret;
-    totpQRCode.value = result.qrcode;
+    if (setupMode.value === 'totp') await loadTotpSecret();
   },
   close() {
     dialog.value.close();
   }
 });
 
+async function switchMode(mode) {
+  setupMode.value = mode;
+  if (mode === 'totp' && !totpSecret.value) await loadTotpSecret();
+}
+
 </script>
 
 <template>
-  <Dialog ref="dialog" :title="$t('profile.enable2FA.title')" :dismissable="!props.mandatory2FA || props.has2FA">
+  <Dialog ref="dialog" :title="setupMode === 'totp' ? $t('profile.enableTotp.title') : $t('profile.enablePasskey.title')" :dismissable="!props.mandatory2FA || props.has2FA">
     <div>
       <p class="text-warning" v-if="props.mandatory2FA && !props.has2FA">{{ $t('profile.enable2FA.mandatorySetup') }}</p>
 
-      <ButtonGroup style="display: flex; justify-content: center;">        <Button secondary @click="setupMode = 'passkey'" :outline="setupMode !== 'passkey' || null">{{ $t('profile.enable2FA.passkeyOption') }}</Button>
-        <Button secondary @click="setupMode = 'totp'" :outline="setupMode !== 'totp' || null">{{ $t('profile.enable2FA.totpOption') }}</Button>
-      </ButtonGroup>
-
       <!-- Passkey Setup -->
       <div v-if="setupMode === 'passkey'">
         <p v-html="$t('profile.enable2FA.passkeyDescription', { googleAuthenticatorPlayStoreLink: 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2', googleAuthenticatorITunesLink: 'https://itunes.apple.com/us/app/google-authenticator/id388497605', freeOTPPlayStoreLink: 'https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp', freeOTPITunesLink: 'https://itunes.apple.com/us/app/freeotp-authenticator/id872559395'})"></p>
@@ -102,6 +107,9 @@ defineExpose({
           <Button @click="onRegisterPasskey()" :loading="passkeyRegisterBusy" :disabled="passkeyRegisterBusy">{{ $t('profile.enable2FA.registerPasskey') }}</Button>
           <div class="error-label" v-if="passkeyRegisterError">{{ passkeyRegisterError }}</div>
         </div>
+        <p v-if="props.mandatory2FA && !props.has2FA" style="text-align: center; margin-top: 15px;">
+          <a href="#" @click.prevent="switchMode('totp')">{{ $t('profile.enable2FA.switchToTotp') }}</a>
+        </p>
       </div>
 
       <!-- TOTP Setup -->
@@ -123,6 +131,9 @@ defineExpose({
             <div class="error-label" v-if="totpEnableError">{{ totpEnableError }}</div>
           </FormGroup>
         </form>
+        <p v-if="props.mandatory2FA && !props.has2FA" style="text-align: center; margin-top: 15px;">
+          <a href="#" @click.prevent="switchMode('passkey')">{{ $t('profile.enable2FA.switchToPasskey') }}</a>
+        </p>
       </div>
     </div>
   </Dialog>
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index 0d8eed623..6df4cf2c8 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -110,8 +110,8 @@ async function loadPasskey() {
   userPasskey.value = result;
 }
 
-async function onOpenTwoFASetupDialog() {
-  enableTwoFADialog.value.open();
+async function onOpenTwoFASetupDialog(method) {
+  enableTwoFADialog.value.open(method);
 }
 
 async function onEnableTwoFASuccess() {
@@ -119,8 +119,8 @@ async function onEnableTwoFASuccess() {
   await loadPasskey();
 }
 
-async function onTwoFADisable() {
-  disableTwoFADialog.value.open(userPasskey.value ? 'passkey' : 'totp');
+async function onTwoFADisable(method) {
+  disableTwoFADialog.value.open(method);
 }
 
 async function onTwoFADisableSuccess() {
@@ -230,13 +230,25 @@ onMounted(async () => {
 
           <SettingsItem v-if="!profile.source || !config.external2FA">
             <FormGroup>
-              <label>{{ $t('profile.twoFactorAuth.title') }}</label>
-              <div v-if="!has2FA">{{ $t('profile.twoFactorAuth.disabled') }}</div>
-              <div v-else-if="profile.totpEnabled">{{ $t('profile.twoFactorAuth.totpEnabled') }} <i class="fa-solid fa-check text-success"></i></div>
-              <div v-else-if="userPasskey">{{ $t('profile.twoFactorAuth.passkeyEnabled') }} <i class="fa-solid fa-check text-success"></i></div>
+              <label>{{ $t('profile.twoFactorAuth.totpTitle') }}</label>
+              <div v-if="profile.totpEnabled">{{ $t('profile.twoFactorAuth.totpEnabled') }} <i class="fa-solid fa-check text-success"></i></div>
+              <div v-else>{{ $t('profile.twoFactorAuth.disabled') }}</div>
             </FormGroup>
             <div style="display: flex; align-items: center">
-              <Button tool plain @click="has2FA ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(has2FA ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
+              <Button tool plain v-if="profile.totpEnabled" @click="onTwoFADisable('totp')">{{ $t('profile.disable2FAAction') }}</Button>
+              <Button tool plain v-else @click="onOpenTwoFASetupDialog('totp')">{{ $t('profile.enable2FAAction') }}</Button>
+            </div>
+          </SettingsItem>
+
+          <SettingsItem v-if="!profile.source || !config.external2FA">
+            <FormGroup>
+              <label>{{ $t('profile.twoFactorAuth.passkeyTitle') }}</label>
+              <div v-if="userPasskey">{{ $t('profile.twoFactorAuth.passkeyEnabled') }} <i class="fa-solid fa-check text-success"></i></div>
+              <div v-else>{{ $t('profile.twoFactorAuth.disabled') }}</div>
+            </FormGroup>
+            <div style="display: flex; align-items: center">
+              <Button tool plain v-if="userPasskey" @click="onTwoFADisable('passkey')">{{ $t('profile.disable2FAAction') }}</Button>
+              <Button tool plain v-else @click="onOpenTwoFASetupDialog('passkey')">{{ $t('profile.enable2FAAction') }}</Button>
             </div>
           </SettingsItem>
         </div>
diff --git a/src/passkeys.js b/src/passkeys.js
index bd14421a2..049139111 100644
--- a/src/passkeys.js
+++ b/src/passkeys.js
@@ -132,8 +132,6 @@ async function getRegistrationOptions(user) {
     const existingPasskeys = await listByUserId(user.id);
     if (existingPasskeys.length > 0) throw new BoxError(BoxError.ALREADY_EXISTS, 'User already has a passkey registered');
 
-    if (user.totpEnabled) throw new BoxError(BoxError.ALREADY_EXISTS, 'Cannot register passkey when TOTP is enabled');
-
     const { rpId, rpName } = await getRpInfo();
 
     const options = await generateRegistrationOptions({
@@ -164,7 +162,6 @@ async function verifyRegistration(user, response, name) {
     // check should ideally be in a transaction
     const existingPasskeys = await listByUserId(user.id);
     if (existingPasskeys.length > 0) throw new BoxError(BoxError.ALREADY_EXISTS, 'User already has a passkey registered');
-    if (user.totpEnabled) throw new BoxError(BoxError.ALREADY_EXISTS, 'Cannot register passkey when TOTP is enabled');
 
     const expectedChallenge = getAndDeleteChallenge(user.id);
     if (!expectedChallenge) throw new BoxError(BoxError.BAD_FIELD, 'Challenge expired or not found');
diff --git a/src/users.js b/src/users.js
index b03ea26b5..fe67fddc8 100644
--- a/src/users.js
+++ b/src/users.js
@@ -941,10 +941,6 @@ async function enableTotp(user, totpToken, auditSource) {
     const externalLdapConfig = await externalLdap.getConfig();
     if (user.source === 'ldap' && externalLdap.supports2FA(externalLdapConfig)) throw new BoxError(BoxError.BAD_STATE, 'Cannot enable 2FA of external auth user');
 
-    // Cannot enable TOTP if user has a passkey (user must choose one or the other)
-    const userPasskeys = await passkeys.listByUserId(user.id);
-    if (userPasskeys.length > 0) throw new BoxError(BoxError.ALREADY_EXISTS, 'Cannot enable TOTP when passkey is registered');
-
     const verified = speakeasy.totp.verify({ secret: user.totpSecret, encoding: 'base32', token: totpToken, window: 2 });
     if (!verified) throw new BoxError(BoxError.INVALID_CREDENTIALS, 'Invalid 2FA code');