feat/mfa: Added multifactor authentication.

client/src/api/client.ts

@@ -41,6 +41,10 @@ apiClient.interceptors.response.use(
 export const authApi = {
   register: (data: { username: string; email: string; password: string }) => apiClient.post('/auth/register', data).then(r => r.data),
   login: (data: { email: string; password: string }) => apiClient.post('/auth/login', data).then(r => r.data),
+  verifyMfaLogin: (data: { mfa_token: string; code: string }) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
+  mfaSetup: () => apiClient.post('/auth/mfa/setup', {}).then(r => r.data),
+  mfaEnable: (data: { code: string }) => apiClient.post('/auth/mfa/enable', data).then(r => r.data),
+  mfaDisable: (data: { password: string; code: string }) => apiClient.post('/auth/mfa/disable', data).then(r => r.data),
   me: () => apiClient.get('/auth/me').then(r => r.data),
   updateMapsKey: (key: string | null) => apiClient.put('/auth/me/maps-key', { maps_api_key: key }).then(r => r.data),
   updateApiKeys: (data: Record<string, string | null>) => apiClient.put('/auth/me/api-keys', data).then(r => r.data),

client/src/i18n/translations/de.ts

@@ -164,6 +164,22 @@ const de: Record<string, string> = {
   'settings.avatarUploaded': 'Profilbild aktualisiert',
   'settings.avatarRemoved': 'Profilbild entfernt',
   'settings.avatarError': 'Fehler beim Hochladen',
+  'settings.mfa.title': 'Zwei-Faktor-Authentifizierung (2FA)',
+  'settings.mfa.description': 'Zusätzlicher Schritt bei der Anmeldung mit E-Mail und Passwort. Nutze eine Authenticator-App (Google Authenticator, Authy, …).',
+  'settings.mfa.enabled': '2FA ist für dein Konto aktiv.',
+  'settings.mfa.disabled': '2FA ist nicht aktiviert.',
+  'settings.mfa.setup': 'Authenticator einrichten',
+  'settings.mfa.scanQr': 'QR-Code mit der App scannen oder den Schlüssel manuell eingeben.',
+  'settings.mfa.secretLabel': 'Geheimer Schlüssel (manuell)',
+  'settings.mfa.codePlaceholder': '6-stelliger Code',
+  'settings.mfa.enable': '2FA aktivieren',
+  'settings.mfa.cancelSetup': 'Abbrechen',
+  'settings.mfa.disableTitle': '2FA deaktivieren',
+  'settings.mfa.disableHint': 'Passwort und einen aktuellen Code aus der Authenticator-App eingeben.',
+  'settings.mfa.disable': '2FA deaktivieren',
+  'settings.mfa.toastEnabled': 'Zwei-Faktor-Authentifizierung aktiviert',
+  'settings.mfa.toastDisabled': 'Zwei-Faktor-Authentifizierung deaktiviert',
+  'settings.mfa.demoBlocked': 'In der Demo nicht verfügbar',
 
   // Login
   'login.error': 'Anmeldung fehlgeschlagen. Bitte Zugangsdaten prüfen.',
@@ -207,6 +223,13 @@ const de: Record<string, string> = {
   'login.demoFailed': 'Demo-Login fehlgeschlagen',
   'login.oidcSignIn': 'Anmelden mit {name}',
   'login.demoHint': 'Demo ausprobieren — ohne Registrierung',
+  'login.mfaTitle': 'Zwei-Faktor-Authentifizierung',
+  'login.mfaSubtitle': 'Gib den 6-stelligen Code aus deiner Authenticator-App ein.',
+  'login.mfaCodeLabel': 'Bestätigungscode',
+  'login.mfaCodeRequired': 'Bitte den Code aus der Authenticator-App eingeben.',
+  'login.mfaHint': 'Google Authenticator, Authy oder eine andere TOTP-App öffnen.',
+  'login.mfaBack': '← Zurück zur Anmeldung',
+  'login.mfaVerify': 'Bestätigen',
 
   // Register
   'register.passwordMismatch': 'Passwörter stimmen nicht überein',

client/src/i18n/translations/en.ts

@@ -164,6 +164,22 @@ const en: Record<string, string> = {
   'settings.avatarUploaded': 'Profile picture updated',
   'settings.avatarRemoved': 'Profile picture removed',
   'settings.avatarError': 'Upload failed',
+  'settings.mfa.title': 'Two-factor authentication (2FA)',
+  'settings.mfa.description': 'Adds a second step when you sign in with email and password. Use an authenticator app (Google Authenticator, Authy, etc.).',
+  'settings.mfa.enabled': '2FA is enabled on your account.',
+  'settings.mfa.disabled': '2FA is not enabled.',
+  'settings.mfa.setup': 'Set up authenticator',
+  'settings.mfa.scanQr': 'Scan this QR code with your app, or enter the secret manually.',
+  'settings.mfa.secretLabel': 'Secret key (manual entry)',
+  'settings.mfa.codePlaceholder': '6-digit code',
+  'settings.mfa.enable': 'Enable 2FA',
+  'settings.mfa.cancelSetup': 'Cancel',
+  'settings.mfa.disableTitle': 'Disable 2FA',
+  'settings.mfa.disableHint': 'Enter your account password and a current code from your authenticator.',
+  'settings.mfa.disable': 'Disable 2FA',
+  'settings.mfa.toastEnabled': 'Two-factor authentication enabled',
+  'settings.mfa.toastDisabled': 'Two-factor authentication disabled',
+  'settings.mfa.demoBlocked': 'Not available in demo mode',
 
   // Login
   'login.error': 'Login failed. Please check your credentials.',
@@ -207,6 +223,13 @@ const en: Record<string, string> = {
   'login.demoFailed': 'Demo login failed',
   'login.oidcSignIn': 'Sign in with {name}',
   'login.demoHint': 'Try the demo — no registration needed',
+  'login.mfaTitle': 'Two-factor authentication',
+  'login.mfaSubtitle': 'Enter the 6-digit code from your authenticator app.',
+  'login.mfaCodeLabel': 'Verification code',
+  'login.mfaCodeRequired': 'Enter the code from your authenticator app.',
+  'login.mfaHint': 'Open Google Authenticator, Authy, or another TOTP app.',
+  'login.mfaBack': '← Back to sign in',
+  'login.mfaVerify': 'Verify',
 
   // Register
   'register.passwordMismatch': 'Passwords do not match',

client/src/pages/LoginPage.tsx

@@ -4,7 +4,7 @@ import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
 import { useTranslation } from '../i18n'
 import { authApi } from '../api/client'
-import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield } from 'lucide-react'
+import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound } from 'lucide-react'
 
 interface AppConfig {
   has_users: boolean
@@ -25,7 +25,7 @@ export default function LoginPage(): React.ReactElement {
   const [error, setError] = useState<string>('')
   const [appConfig, setAppConfig] = useState<AppConfig | null>(null)
 
-  const { login, register, demoLogin } = useAuthStore()
+  const { login, register, demoLogin, completeMfaLogin } = useAuthStore()
   const { setLanguageLocal } = useSettingsStore()
   const navigate = useNavigate()
 
@@ -83,18 +83,39 @@ export default function LoginPage(): React.ReactElement {
   }
 
   const [showTakeoff, setShowTakeoff] = useState<boolean>(false)
+  const [mfaStep, setMfaStep] = useState(false)
+  const [mfaToken, setMfaToken] = useState('')
+  const [mfaCode, setMfaCode] = useState('')
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
     setError('')
     setIsLoading(true)
     try {
+      if (mode === 'login' && mfaStep) {
+        if (!mfaCode.trim()) {
+          setError(t('login.mfaCodeRequired'))
+          setIsLoading(false)
+          return
+        }
+        await completeMfaLogin(mfaToken, mfaCode)
+        setShowTakeoff(true)
+        setTimeout(() => navigate('/dashboard'), 2600)
+        return
+      }
       if (mode === 'register') {
         if (!username.trim()) { setError('Username is required'); setIsLoading(false); return }
         if (password.length < 6) { setError('Password must be at least 6 characters'); setIsLoading(false); return }
         await register(username, email, password)
       } else {
-        await login(email, password)
+        const result = await login(email, password)
+        if ('mfa_required' in result && result.mfa_required && 'mfa_token' in result) {
+          setMfaToken(result.mfa_token)
+          setMfaStep(true)
+          setMfaCode('')
+          setIsLoading(false)
+          return
+        }
       }
       setShowTakeoff(true)
       setTimeout(() => navigate('/dashboard'), 2600)
@@ -435,10 +456,18 @@ export default function LoginPage(): React.ReactElement {
 
           <div style={{ background: 'white', borderRadius: 20, border: '1px solid #e5e7eb', padding: '36px 32px', boxShadow: '0 2px 16px rgba(0,0,0,0.06)' }}>
             <h2 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 800, color: '#111827' }}>
-              {mode === 'register' ? (!appConfig?.has_users ? t('login.createAdmin') : t('login.createAccount')) : t('login.title')}
+              {mode === 'login' && mfaStep
+                ? t('login.mfaTitle')
+                : mode === 'register'
+                  ? (!appConfig?.has_users ? t('login.createAdmin') : t('login.createAccount'))
+                  : t('login.title')}
             </h2>
             <p style={{ margin: '0 0 28px', fontSize: 13.5, color: '#9ca3af' }}>
-              {mode === 'register' ? (!appConfig?.has_users ? t('login.createAdminHint') : t('login.createAccountHint')) : t('login.subtitle')}
+              {mode === 'login' && mfaStep
+                ? t('login.mfaSubtitle')
+                : mode === 'register'
+                  ? (!appConfig?.has_users ? t('login.createAdminHint') : t('login.createAccountHint'))
+                  : t('login.subtitle')}
             </p>
 
             <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -448,6 +477,35 @@ export default function LoginPage(): React.ReactElement {
                 </div>
               )}
 
+              {mode === 'login' && mfaStep && (
+                <div>
+                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('login.mfaCodeLabel')}</label>
+                  <div style={{ position: 'relative' }}>
+                    <KeyRound size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      autoComplete="one-time-code"
+                      value={mfaCode}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMfaCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                      placeholder="000000"
+                      required
+                      style={inputBase}
+                      onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
+                      onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}
+                    />
+                  </div>
+                  <p style={{ fontSize: 12, color: '#9ca3af', marginTop: 8 }}>{t('login.mfaHint')}</p>
+                  <button
+                    type="button"
+                    onClick={() => { setMfaStep(false); setMfaToken(''); setMfaCode(''); setError('') }}
+                    style={{ marginTop: 8, background: 'none', border: 'none', color: '#6b7280', fontSize: 13, cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}
+                  >
+                    {t('login.mfaBack')}
+                  </button>
+                </div>
+              )}
+
               {/* Username (register only) */}
               {mode === 'register' && (
                 <div>
@@ -465,6 +523,7 @@ export default function LoginPage(): React.ReactElement {
               )}
 
               {/* Email */}
+              {!(mode === 'login' && mfaStep) && (
               <div>
                 <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('common.email')}</label>
                 <div style={{ position: 'relative' }}>
@@ -477,8 +536,10 @@ export default function LoginPage(): React.ReactElement {
                   />
                 </div>
               </div>
+              )}
 
               {/* Password */}
+              {!(mode === 'login' && mfaStep) && (
               <div>
                 <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>{t('common.password')}</label>
                 <div style={{ position: 'relative' }}>
@@ -497,6 +558,7 @@ export default function LoginPage(): React.ReactElement {
                   </button>
                 </div>
               </div>
+              )}
 
               <button type="submit" disabled={isLoading} style={{
                 marginTop: 4, width: '100%', padding: '12px', background: '#111827', color: 'white',
@@ -508,8 +570,8 @@ export default function LoginPage(): React.ReactElement {
                 onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.background = '#111827'}
               >
                 {isLoading
-                  ? <><div style={{ width: 15, height: 15, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />{mode === 'register' ? t('login.creating') : t('login.signingIn')}</>
-                  : <><Plane size={16} />{mode === 'register' ? t('login.createAccount') : t('login.signIn')}</>
+                  ? <><div style={{ width: 15, height: 15, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />{mode === 'register' ? t('login.creating') : (mode === 'login' && mfaStep ? t('login.mfaVerify') : t('login.signingIn'))}</>
+                  : <><Plane size={16} />{mode === 'register' ? t('login.createAccount') : (mode === 'login' && mfaStep ? t('login.mfaVerify') : t('login.signIn'))}</>
                 }
               </button>
             </form>
@@ -518,7 +580,7 @@ export default function LoginPage(): React.ReactElement {
             {showRegisterOption && appConfig?.has_users && !appConfig?.demo_mode && (
               <p style={{ textAlign: 'center', marginTop: 16, fontSize: 13, color: '#9ca3af' }}>
                 {mode === 'login' ? t('login.noAccount') + ' ' : t('login.hasAccount') + ' '}
-                <button onClick={() => { setMode(m => m === 'login' ? 'register' : 'login'); setError('') }}
+                <button onClick={() => { setMode(m => m === 'login' ? 'register' : 'login'); setError(''); setMfaStep(false); setMfaToken(''); setMfaCode('') }}
                   style={{ background: 'none', border: 'none', color: '#111827', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13 }}>
                   {mode === 'login' ? t('login.register') : t('login.signIn')}
                 </button>

client/src/pages/SettingsPage.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from '../i18n'
 import Navbar from '../components/Layout/Navbar'
 import CustomSelect from '../components/shared/CustomSelect'
 import { useToast } from '../components/shared/Toast'
-import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock } from 'lucide-react'
+import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock, KeyRound } from 'lucide-react'
 import { authApi, adminApi } from '../api/client'
 import type { LucideIcon } from 'lucide-react'
 import type { UserWithOidc } from '../types'
@@ -46,7 +46,7 @@ function Section({ title, icon: Icon, children }: SectionProps): React.ReactElem
 }
 
 export default function SettingsPage(): React.ReactElement {
-  const { user, updateProfile, uploadAvatar, deleteAvatar, logout } = useAuthStore()
+  const { user, updateProfile, uploadAvatar, deleteAvatar, logout, loadUser, demoMode } = useAuthStore()
   const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
   const avatarInputRef = React.useRef<HTMLInputElement>(null)
   const { settings, updateSetting, updateSettings } = useSettingsStore()
@@ -72,6 +72,13 @@ export default function SettingsPage(): React.ReactElement {
   const [newPassword, setNewPassword] = useState<string>('')
   const [confirmPassword, setConfirmPassword] = useState<string>('')
 
+  const [mfaQr, setMfaQr] = useState<string | null>(null)
+  const [mfaSecret, setMfaSecret] = useState<string | null>(null)
+  const [mfaSetupCode, setMfaSetupCode] = useState('')
+  const [mfaDisablePwd, setMfaDisablePwd] = useState('')
+  const [mfaDisableCode, setMfaDisableCode] = useState('')
+  const [mfaLoading, setMfaLoading] = useState(false)
+
   useEffect(() => {
     setMapTileUrl(settings.map_tile_url || '')
     setDefaultLat(settings.default_lat || 48.8566)
@@ -447,6 +454,145 @@ export default function SettingsPage(): React.ReactElement {
               </div>
             </div>
 
+            {/* MFA */}
+            <div style={{ paddingTop: 8, marginTop: 8, borderTop: '1px solid var(--border-secondary)' }}>
+              <div className="flex items-center gap-2 mb-3">
+                <KeyRound className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+                <h3 className="font-semibold text-base m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.title')}</h3>
+              </div>
+              <div className="space-y-3">
+                <p className="text-sm m-0" style={{ color: 'var(--text-muted)', lineHeight: 1.5 }}>{t('settings.mfa.description')}</p>
+                {demoMode ? (
+                  <p className="text-sm text-amber-700 m-0">{t('settings.mfa.demoBlocked')}</p>
+                ) : (
+                  <>
+                    <p className="text-sm font-medium m-0" style={{ color: 'var(--text-secondary)' }}>
+                      {user?.mfa_enabled ? t('settings.mfa.enabled') : t('settings.mfa.disabled')}
+                    </p>
+
+                    {!user?.mfa_enabled && !mfaQr && (
+                      <button
+                        type="button"
+                        disabled={mfaLoading}
+                        onClick={async () => {
+                          setMfaLoading(true)
+                          try {
+                            const data = await authApi.mfaSetup() as { qr_data_url: string; secret: string }
+                            setMfaQr(data.qr_data_url)
+                            setMfaSecret(data.secret)
+                            setMfaSetupCode('')
+                          } catch (err: unknown) {
+                            toast.error(getApiErrorMessage(err, t('common.error')))
+                          } finally {
+                            setMfaLoading(false)
+                          }
+                        }}
+                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                        style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                      >
+                        {mfaLoading ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" /> : <KeyRound size={14} />}
+                        {t('settings.mfa.setup')}
+                      </button>
+                    )}
+
+                    {!user?.mfa_enabled && mfaQr && (
+                      <div className="space-y-3">
+                        <p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.scanQr')}</p>
+                        <img src={mfaQr} alt="" className="rounded-lg border mx-auto block" style={{ maxWidth: 200, borderColor: 'var(--border-primary)' }} />
+                        <div>
+                          <label className="block text-xs font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.secretLabel')}</label>
+                          <code className="block text-xs p-2 rounded break-all" style={{ background: 'var(--bg-hover)', color: 'var(--text-primary)' }}>{mfaSecret}</code>
+                        </div>
+                        <input
+                          type="text"
+                          inputMode="numeric"
+                          value={mfaSetupCode}
+                          onChange={(e) => setMfaSetupCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                          placeholder={t('settings.mfa.codePlaceholder')}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                        />
+                        <div className="flex flex-wrap gap-2">
+                          <button
+                            type="button"
+                            disabled={mfaLoading || mfaSetupCode.length < 6}
+                            onClick={async () => {
+                              setMfaLoading(true)
+                              try {
+                                await authApi.mfaEnable({ code: mfaSetupCode })
+                                toast.success(t('settings.mfa.toastEnabled'))
+                                setMfaQr(null)
+                                setMfaSecret(null)
+                                setMfaSetupCode('')
+                                await loadUser()
+                              } catch (err: unknown) {
+                                toast.error(getApiErrorMessage(err, t('common.error')))
+                              } finally {
+                                setMfaLoading(false)
+                              }
+                            }}
+                            className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
+                          >
+                            {t('settings.mfa.enable')}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => { setMfaQr(null); setMfaSecret(null); setMfaSetupCode('') }}
+                            className="px-4 py-2 rounded-lg text-sm border"
+                            style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}
+                          >
+                            {t('settings.mfa.cancelSetup')}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+
+                    {user?.mfa_enabled && (
+                      <div className="space-y-3">
+                        <p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.disableTitle')}</p>
+                        <p className="text-xs" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.disableHint')}</p>
+                        <input
+                          type="password"
+                          value={mfaDisablePwd}
+                          onChange={(e) => setMfaDisablePwd(e.target.value)}
+                          placeholder={t('settings.currentPassword')}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                        />
+                        <input
+                          type="text"
+                          inputMode="numeric"
+                          value={mfaDisableCode}
+                          onChange={(e) => setMfaDisableCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                          placeholder={t('settings.mfa.codePlaceholder')}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                        />
+                        <button
+                          type="button"
+                          disabled={mfaLoading || !mfaDisablePwd || mfaDisableCode.length < 6}
+                          onClick={async () => {
+                            setMfaLoading(true)
+                            try {
+                              await authApi.mfaDisable({ password: mfaDisablePwd, code: mfaDisableCode })
+                              toast.success(t('settings.mfa.toastDisabled'))
+                              setMfaDisablePwd('')
+                              setMfaDisableCode('')
+                              await loadUser()
+                            } catch (err: unknown) {
+                              toast.error(getApiErrorMessage(err, t('common.error')))
+                            } finally {
+                              setMfaLoading(false)
+                            }
+                          }}
+                          className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 disabled:opacity-50"
+                        >
+                          {t('settings.mfa.disable')}
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+
             <div className="flex items-center gap-4">
               <div style={{ position: 'relative', flexShrink: 0 }}>
                 {user?.avatar_url ? (

client/src/store/authStore.ts

@@ -9,6 +9,8 @@ interface AuthResponse {
   token: string
 }
 
+export type LoginResult = AuthResponse | { mfa_required: true; mfa_token: string }
+
 interface AvatarResponse {
   avatar_url: string
 }
@@ -22,7 +24,8 @@ interface AuthState {
   demoMode: boolean
   hasMapsKey: boolean
 
-  login: (email: string, password: string) => Promise<AuthResponse>
+  login: (email: string, password: string) => Promise<LoginResult>
+  completeMfaLogin: (mfaToken: string, code: string) => Promise<AuthResponse>
   register: (username: string, email: string, password: string) => Promise<AuthResponse>
   logout: () => void
   loadUser: () => Promise<void>
@@ -48,7 +51,11 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   login: async (email: string, password: string) => {
     set({ isLoading: true, error: null })
     try {
-      const data = await authApi.login({ email, password })
+      const data = await authApi.login({ email, password }) as AuthResponse & { mfa_required?: boolean; mfa_token?: string }
+      if (data.mfa_required && data.mfa_token) {
+        set({ isLoading: false, error: null })
+        return { mfa_required: true as const, mfa_token: data.mfa_token }
+      }
       localStorage.setItem('auth_token', data.token)
       set({
         user: data.user,
@@ -58,7 +65,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         error: null,
       })
       connect(data.token)
-      return data
+      return data as AuthResponse
     } catch (err: unknown) {
       const error = getApiErrorMessage(err, 'Login failed')
       set({ isLoading: false, error })
@@ -66,6 +73,27 @@ export const useAuthStore = create<AuthState>((set, get) => ({
     }
   },
 
+  completeMfaLogin: async (mfaToken: string, code: string) => {
+    set({ isLoading: true, error: null })
+    try {
+      const data = await authApi.verifyMfaLogin({ mfa_token: mfaToken, code: code.replace(/\s/g, '') })
+      localStorage.setItem('auth_token', data.token)
+      set({
+        user: data.user,
+        token: data.token,
+        isAuthenticated: true,
+        isLoading: false,
+        error: null,
+      })
+      connect(data.token)
+      return data as AuthResponse
+    } catch (err: unknown) {
+      const error = getApiErrorMessage(err, 'Verification failed')
+      set({ isLoading: false, error })
+      throw new Error(error)
+    }
+  },
+
   register: async (username: string, email: string, password: string) => {
     set({ isLoading: true, error: null })
     try {

client/src/types.ts

@@ -8,6 +8,8 @@ export interface User {
   avatar_url: string | null
   maps_api_key: string | null
   created_at: string
+  /** Present after load; true when TOTP MFA is enabled for password login */
+  mfa_enabled?: boolean
 }
 
 export interface Trip {