#28: stop enrolment from silently replacing a secret the authenticator already has

Enrolling a second factor could reach a state where the authenticator showed
perfectly valid codes and every one of them was rejected, with the only
feedback being "TOTP verification failed".

The browser holds the enrolment secret in component state alone. Reloading the
settings page - or leaving and coming back - brought the "enable" button back,
and pressing it called the enrol endpoint again, which deleted the pending row
and stored a brand new secret. The entry already saved in the authenticator
then belonged to a secret the server no longer had. Nothing about that is
visible from either side: the app generates codes correctly, the server
compares them correctly, and they are for different keys.

Enrolment now resumes. The endpoint returns the pending secret if there is
one, so the QR shown after a reload is the same one already scanned and
rescanning is harmless. Starting over is still possible - ?reset=1, exposed in
the settings screen - because someone who deleted the entry from their app
needs a secret they can actually generate codes for. A pending row that can no
longer be decrypted is replaced rather than resumed, since nobody could ever
confirm it.

Also: the submitted code now has every non-digit stripped rather than just
surrounding whitespace. Authenticators display the code grouped as "123 456",
and a value typed or pasted with that space failed the six-character length
check before it was ever compared - which, to someone reading the right number
off their phone, looks like the server being wrong. The inputs sanitise as you
type for the same reason.

Ruled out first, rather than guessed at: the algorithm passes all six RFC 6238
reference vectors, base32 round-trips, and the deployment's clock is exactly in
sync with real time, so neither the implementation nor drift explains it.

Verified: the resume test fails without the change and passes with it; 47 auth
tests green against a real Postgres.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

services/webmail/messages/en.json

@@ -205,6 +205,7 @@
     "signatureSaved": "Signature saved.",
     "signatureTitle": "Email signature",
     "sixDigitCode": "Six-digit code",
+    "startOverMfa": "Lost the entry? Start over with a new key",
     "subtitle": "Two-factor authentication, filters, auto-reply and your signature.",
     "title": "Settings",
     "twoFactorIntro": "Protect your account with Google Authenticator, Aegis, Authy or 1Password.",

services/webmail/messages/es.json

@@ -205,6 +205,7 @@
     "signatureSaved": "Firma guardada.",
     "signatureTitle": "Firma de correo",
     "sixDigitCode": "Código de seis dígitos",
+    "startOverMfa": "¿Perdió el registro? Empiece de nuevo con una clave nueva",
     "subtitle": "Verificación en dos pasos, filtros, respuesta automática y su firma.",
     "title": "Configuración",
     "twoFactorIntro": "Proteja su cuenta con Google Authenticator, Aegis, Authy o 1Password.",

services/webmail/messages/pt-BR.json

@@ -205,6 +205,7 @@
     "signatureSaved": "Assinatura salva.",
     "signatureTitle": "Assinatura de e-mail",
     "sixDigitCode": "Código de seis dígitos",
+    "startOverMfa": "Perdeu o registro? Recomece com uma nova chave",
     "subtitle": "Verificação em duas etapas, filtros, resposta automática e sua assinatura.",
     "title": "Configurações",
     "twoFactorIntro": "Proteja sua conta com o Google Authenticator, Aegis, Authy ou 1Password.",

services/webmail/src/app/(auth)/admin/login/page.tsx

@@ -138,8 +138,8 @@ export default function AdminLoginPage() {
                   inputMode="numeric"
                   autoComplete="one-time-code"
                   value={mfaCode}
-                  onChange={(e) => setMfaCode(e.target.value)}
-                  maxLength={6}
+                  onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                  maxLength={7}
                   required
                   className="w-full rounded-lg border border-slate-800 bg-slate-900 px-4 py-2.5 text-center font-mono text-lg tracking-widest text-white focus:border-emerald-500 focus:outline-none"
                 />
@@ -180,9 +180,9 @@ export default function AdminLoginPage() {
               <input
                 type="text"
                 value={mfaCode}
-                onChange={(e) => setMfaCode(e.target.value)}
+                onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                 placeholder="123456"
-                maxLength={6}
+                maxLength={7}
                 required
                 className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white text-center tracking-widest text-lg font-mono focus:outline-none focus:border-emerald-500 transition-colors"
               />

services/webmail/src/app/(auth)/user/login/page.tsx

@@ -131,9 +131,9 @@ export default function UserLoginPage() {
                 <input
                   type="text"
                   value={mfaCode}
-                  onChange={(e) => setMfaCode(e.target.value)}
+                  onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                   placeholder="123456"
-                  maxLength={6}
+                  maxLength={7}
                   required
                   className="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-900/90 border border-slate-800 text-white text-center tracking-widest text-lg font-mono focus:outline-none focus:border-indigo-500 transition-colors"
                 />

services/webmail/src/app/(user)/user/settings/page.tsx

@@ -291,6 +291,24 @@ export default function UserSettingsPage() {
           {qrSecret && (
             <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-4 text-xs">
               <TotpEnrolment secret={qrSecret} uri={qrUri} />
+              {/* Enrolment resumes rather than restarting, so this code is the
+                  same one already scanned. Anyone who removed the entry from
+                  their app needs a way to ask for a different secret. */}
+              <button
+                type="button"
+                onClick={async () => {
+                  const res = await fetch("/api/v1/user/mfa/totp/enroll?reset=1", { method: "POST" });
+                  const data = await res.json().catch(() => ({}));
+                  if (res.ok) {
+                    setQrSecret(data.secret);
+                    setQrUri(data.uri);
+                    setTotpCode("");
+                  }
+                }}
+                className="text-[11px] text-slate-400 underline hover:text-slate-200"
+              >
+                {t("settings.startOverMfa")}
+              </button>
               <form
                 onSubmit={async (e) => {
                   e.preventDefault();
@@ -316,9 +334,9 @@ export default function UserSettingsPage() {
                   inputMode="numeric"
                   autoComplete="one-time-code"
                   value={totpCode}
-                  onChange={(e) => setTotpCode(e.target.value)}
+                  onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                   placeholder={t("settings.sixDigitCode")}
-                  maxLength={6}
+                  maxLength={7}
                   required
                   className="px-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
                 />