@micha.bigler/ui-core-micha 1.2.10 → 1.3.2

package/dist/auth/authApi.js

@@ -115,21 +115,26 @@ export async function updateUserProfile(data) {
 // -----------------------------
 // Authentication: password
 // -----------------------------
+/*
 export async function loginWithPassword(email, password) {
-    try {
-        await axios.post(`${HEADLESS_BASE}/auth/login`, { email, password }, { withCredentials: true });
-    }
-    catch (error) {
-        if (error.response && error.response.status === 409) {
-            // Already logged in: continue and fetch current user
-        }
-        else {
-            throw new Error(extractErrorMessage(error));
-        }
-    }
-    const user = await fetchCurrentUser();
-    return { user };
+  try {
+    await axios.post(
+      `${HEADLESS_BASE}/auth/login`,
+      { email, password },
+      { withCredentials: true },
+    );
+  } catch (error) {
+    if (error.response && error.response.status === 409) {
+      // Already logged in: continue and fetch current user
+    } else {
+      throw new Error(extractErrorMessage(error));
+    }
+  }
+
+  const user = await fetchCurrentUser();
+  return { user };
 }
+*/
 export async function requestPasswordReset(email) {
     try {
         await axios.post(`${USERS_BASE}/reset-request/`, { email }, { withCredentials: true });
@@ -346,6 +351,99 @@ export async function deletePasskey(id) {
     { withCredentials: true });
 }
 // -----------------------------
+// Authentication: MFA Step
+// -----------------------------
+export async function authenticateWithMFA({ code, credential }) {
+    // Entweder 'code' (TOTP/Recovery) oder 'credential' (Passkey) senden
+    const payload = {};
+    if (code)
+        payload.code = code;
+    if (credential)
+        payload.credential = credential;
+    try {
+        const res = await axios.post(`${HEADLESS_BASE}/auth/mfa/authenticate`, // Endpoint für Schritt 2
+        payload, { withCredentials: true });
+        return res.data; // Enthält User-Objekt bei Erfolg
+    }
+    catch (error) {
+        throw new Error(extractErrorMessage(error));
+    }
+}
+// -----------------------------
+// Authentication: password (MODIFIZIERT)
+// -----------------------------
+export async function loginWithPassword(email, password) {
+    var _a;
+    try {
+        await axios.post(`${HEADLESS_BASE}/auth/login`, { email, password }, { withCredentials: true });
+    }
+    catch (error) {
+        // SKEPTISCHER CHECK: Ist es der MFA-Flow?
+        if (error.response &&
+            error.response.status === 401 &&
+            ((_a = error.response.data) === null || _a === void 0 ? void 0 : _a.flow) === 'mfa_authenticate') {
+            // KEIN FEHLER! Wir geben zurück, dass MFA nötig ist.
+            return {
+                needsMfa: true,
+                availableTypes: error.response.data.types || [], // z.B. ["webauthn", "totp"]
+            };
+        }
+        // Bestehende Logik für "Already logged in"
+        if (error.response && error.response.status === 409) {
+            // continue to fetch user
+        }
+        else {
+            throw new Error(extractErrorMessage(error));
+        }
+    }
+    // Wenn wir hier landen, war kein MFA nötig oder wir waren schon eingeloggt
+    const user = await fetchCurrentUser();
+    return { user, needsMfa: false };
+}
+// 1. Status prüfen (Liste der aktiven Authenticators)
+export async function fetchAuthenticators() {
+    const res = await axios.get(`${HEADLESS_BASE}/mfa/authenticators`, {
+        withCredentials: true,
+    });
+    return res.data; // Array von Objekten, z.B. [{ type: 'totp', ... }, { type: 'webauthn' }]
+}
+// 2. TOTP Einrichtung starten (liefert Secret & QR-URL)
+export async function requestTotpKey() {
+    // GET /mfa/totp/key liefert das Secret für die Einrichtung
+    const res = await axios.get(`${HEADLESS_BASE}/mfa/totp/key`, {
+        withCredentials: true,
+    });
+    return res.data; // { secret: "...", key_uri: "otpauth://..." }
+}
+// 3. TOTP Einrichtung abschließen (Code verifizieren)
+export async function activateTotp(code) {
+    const res = await axios.post(`${HEADLESS_BASE}/mfa/totp/key`, { code }, { withCredentials: true });
+    return res.data;
+}
+// 4. TOTP deaktivieren
+export async function deactivateTotp(id) {
+    // Manche Implementierungen nutzen DELETE auf /mfa/totp, andere auf den Authenticator-ID endpoint.
+    // Wir nutzen hier den allgemeinen Authenticator-Delete Endpoint, wenn wir die ID haben.
+    // Alternativ: DELETE /mfa/totp
+    const res = await axios.delete(`${HEADLESS_BASE}/mfa/authenticators/${id}`, {
+        withCredentials: true,
+    });
+    return res.data;
+}
+// -----------------------------
+// MFA: Recovery Codes
+// -----------------------------
+export async function fetchRecoveryCodes() {
+    const res = await axios.get(`${HEADLESS_BASE}/mfa/recovery_codes`, {
+        withCredentials: true,
+    });
+    return res.data; // { codes: [...] }
+}
+export async function generateRecoveryCodes() {
+    const res = await axios.post(`${HEADLESS_BASE}/mfa/recovery_codes`, {}, { withCredentials: true });
+    return res.data; // { codes: [...] }
+}
+// -----------------------------
 // Aggregated API object
 // -----------------------------
 export const authApi = {
@@ -363,6 +461,13 @@ export const authApi = {
     registerPasskey,
     fetchPasskeys,
     deletePasskey,
+    authenticateWithMFA,
+    fetchAuthenticators,
+    requestTotpKey,
+    activateTotp,
+    deactivateTotp,
+    fetchRecoveryCodes,
+    generateRecoveryCodes,
     validateAccessCode,
     requestInviteWithCode,
 };

package/dist/components/MFAComponent.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/components/MFAComponent.jsx
+import React, { useState, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { Box, Typography, Button, TextField, Card, CardContent, Alert, CircularProgress, Stack, Divider, IconButton, Tooltip, } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { authApi } from '../auth/authApi';
+const MFAComponent = () => {
+    const [authenticators, setAuthenticators] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    // Setup State
+    const [isSettingUp, setIsSettingUp] = useState(false);
+    const [totpData, setTotpData] = useState(null); // { secret, key_uri }
+    const [verifyCode, setVerifyCode] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    // Recovery Codes State
+    const [recoveryCodes, setRecoveryCodes] = useState([]);
+    const [showRecovery, setShowRecovery] = useState(false);
+    const loadData = async () => {
+        setLoading(true);
+        setError('');
+        try {
+            // Lade Authenticators (TOTP, WebAuthn, etc.)
+            const data = await authApi.fetchAuthenticators();
+            setAuthenticators(Array.isArray(data) ? data : []);
+        }
+        catch (err) {
+            // Ignorieren wir 404/Empty falls noch nichts da ist, sonst Error
+            console.error(err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        loadData();
+    }, []);
+    const totpAuthenticator = authenticators.find((a) => a.type === 'totp');
+    // --- HANDLER: TOTP START ---
+    const handleStartSetup = async () => {
+        setError('');
+        setIsSettingUp(true);
+        try {
+            const data = await authApi.requestTotpKey();
+            setTotpData(data);
+        }
+        catch (err) {
+            setError('Could not fetch setup key.');
+            setIsSettingUp(false);
+        }
+    };
+    // --- HANDLER: TOTP VERIFY ---
+    const handleVerify = async (e) => {
+        e.preventDefault();
+        setSubmitting(true);
+        setError('');
+        try {
+            await authApi.activateTotp(verifyCode);
+            setIsSettingUp(false);
+            setVerifyCode('');
+            setTotpData(null);
+            // Neu laden, um den neuen Status zu sehen
+            await loadData();
+            // Automatisch Recovery Codes anzeigen (Best Practice!)
+            handleShowRecoveryCodes();
+        }
+        catch (err) {
+            setError('Invalid code. Please try again.');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    // --- HANDLER: TOTP DELETE ---
+    const handleDeleteTotp = async () => {
+        if (!window.confirm('Disable Authenticator App? Your security will be reduced.'))
+            return;
+        try {
+            if (totpAuthenticator === null || totpAuthenticator === void 0 ? void 0 : totpAuthenticator.id) {
+                await authApi.deactivateTotp(totpAuthenticator.id);
+            }
+            await loadData();
+        }
+        catch (err) {
+            setError('Could not deactivate TOTP.');
+        }
+    };
+    // --- HANDLER: RECOVERY CODES ---
+    const handleShowRecoveryCodes = async () => {
+        try {
+            // Versuch, existierende zu laden
+            let data = await authApi.fetchRecoveryCodes();
+            // Wenn keine existieren (oft leer beim ersten Mal), generiere neue
+            if (!data.codes || data.codes.length === 0) {
+                data = await authApi.generateRecoveryCodes();
+            }
+            setRecoveryCodes(data.codes);
+            setShowRecovery(true);
+        }
+        catch (err) {
+            setError('Could not load recovery codes.');
+        }
+    };
+    const handleCopyCode = (code) => {
+        navigator.clipboard.writeText(code);
+    };
+    if (loading)
+        return _jsx(CircularProgress, {});
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Authenticator App (TOTP)" }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: "Use an app like Google Authenticator or Microsoft Authenticator to generate verification codes." }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), totpAuthenticator ? (_jsx(Card, { variant: "outlined", sx: { mb: 3, bgcolor: '#f0fdf4' }, children: _jsxs(CardContent, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle1", color: "success.main", fontWeight: "bold", children: "Active" }), _jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["Created: ", new Date(totpAuthenticator.created_at * 1000).toLocaleDateString()] })] }), _jsx(Button, { variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: handleDeleteTotp, children: "Disable" })] }) })) : (
+            /* --- CASE 2: TOTP NOT ACTIVE --- */
+            !isSettingUp && (_jsx(Button, { variant: "contained", onClick: handleStartSetup, children: "Set up Authenticator App" }))), isSettingUp && totpData && (_jsx(Card, { variant: "outlined", sx: { mb: 3 }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: "Scan this QR Code" }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 3, alignItems: "center", children: [_jsx(Box, { sx: { p: 2, bgcolor: 'white', border: '1px solid #eee' }, children: _jsx(QRCodeSVG, { value: totpData.key_uri, size: 150 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: "Can't scan? Enter this key manually:" }), _jsx(Typography, { variant: "mono", sx: { fontFamily: 'monospace', bgcolor: '#eee', p: 1, borderRadius: 1, display: 'inline-block', mb: 2 }, children: totpData.secret }), _jsxs("form", { onSubmit: handleVerify, children: [_jsx(TextField, { label: "Verification Code (6 digits)", value: verifyCode, onChange: (e) => setVerifyCode(e.target.value), fullWidth: true, required: true, sx: { mb: 2 }, autoComplete: "off" }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting ? 'Verifying...' : 'Verify & Activate' }), _jsx(Button, { onClick: () => setIsSettingUp(false), disabled: submitting, children: "Cancel" })] })] })] })] })] }) })), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Recovery Codes" }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: "If you lose your device, these codes are the only way to access your account." }), !showRecovery ? (_jsx(Button, { variant: "outlined", onClick: handleShowRecoveryCodes, children: "View/Generate Recovery Codes" })) : (_jsxs(Box, { sx: { bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }, children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Save these codes in a safe place (e.g., password manager). Each code can be used only once." }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: recoveryCodes.map((code) => (_jsxs(Box, { sx: {
+                                bgcolor: 'white',
+                                border: '1px solid #ddd',
+                                p: 1,
+                                borderRadius: 1,
+                                fontFamily: 'monospace',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1
+                            }, children: [code, _jsx(Tooltip, { title: "Copy", children: _jsx(IconButton, { size: "small", onClick: () => handleCopyCode(code), children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }, code))) }), _jsx(Button, { sx: { mt: 2 }, size: "small", onClick: () => authApi.generateRecoveryCodes().then(d => setRecoveryCodes(d.codes)), children: "Generate New Codes" })] }))] }));
+};
+export default MFAComponent;

package/dist/components/SecurityComponent.js

@@ -5,6 +5,7 @@ import { Box, Typography, Divider, Alert, } from '@mui/material';
 import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
 import PasskeysComponent from './PasskeysComponent'; // <--- WICHTIG
+import MFAComponent from './MFAComponent';
 import { authApi } from '../auth/authApi';
 const SecurityComponent = () => {
     const [message, setMessage] = useState('');
@@ -34,6 +35,6 @@ const SecurityComponent = () => {
             setError(errorMsg);
         }
     };
-    return (_jsxs(Box, { children: [message && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Password" }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Social logins" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Sign in using a connected Google or Microsoft account." }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick }), _jsx(Divider, { sx: { my: 3 } }), _jsx(PasskeysComponent, {})] }));
+    return (_jsxs(Box, { children: [message && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Password" }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Social logins" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Sign in using a connected Google or Microsoft account." }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick }), _jsx(Divider, { sx: { my: 3 } }), _jsx(PasskeysComponent, {}), _jsx(Divider, { sx: { my: 3 } }), _jsx(MFAComponent, {})] }));
 };
 export default SecurityComponent;

package/dist/pages/LoginPage.js

@@ -1,70 +1,84 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/pages/LoginPage.jsx (oder wo deine LoginPage liegt)
+// src/pages/LoginPage.jsx
 import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Typography } from '@mui/material';
+import { Typography, Box, TextField, Button, Stack, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
-import { authApi } from '../auth/authApi';
+import { authApi, loginWithPasskey } from '../auth/authApi'; // loginWithPasskey direkt importieren oder via authApi
 import LoginForm from '../components/LoginForm';
 export function LoginPage() {
     const navigate = useNavigate();
     const { login } = useContext(AuthContext);
+    // States für den Ablauf
+    const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState('');
-    const handleSubmit = async ({ identifier, password }) => {
-        var _a, _b;
+    // Für den MFA Schritt
+    const [mfaTypes, setMfaTypes] = useState([]); // z.B. ['webauthn', 'totp']
+    const [totpCode, setTotpCode] = useState('');
+    // SCHRITT 1: Email & Passwort senden
+    const handleSubmitCredentials = async ({ identifier, password }) => {
         setError('');
         setSubmitting(true);
         try {
-            const data = await authApi.loginWithPassword(identifier, password);
-            login(data.user);
-            navigate('/');
+            const result = await authApi.loginWithPassword(identifier, password);
+            if (result.needsMfa) {
+                // Passwort war korrekt, aber MFA wird benötigt -> Wechsel zu Schritt 2
+                setMfaTypes(result.availableTypes);
+                setStep('mfa');
+            }
+            else {
+                // Login sofort erfolgreich (kein MFA eingerichtet)
+                login(result.user);
+                navigate('/');
+            }
         }
         catch (err) {
-            setError(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
-                (err === null || err === void 0 ? void 0 : err.message) ||
-                'Login failed.');
+            setError((err === null || err === void 0 ? void 0 : err.message) || 'Login failed.');
         }
         finally {
             setSubmitting(false);
         }
     };
-    const handleForgotPassword = () => {
-        navigate('/reset-request-password');
-    };
-    const handleSocialLogin = (providerKey) => {
+    // SCHRITT 2a: TOTP Code senden
+    const handleMfaTotpSubmit = async (e) => {
+        e.preventDefault();
         setError('');
+        setSubmitting(true);
         try {
-            authApi.startSocialLogin(providerKey);
+            const data = await authApi.authenticateWithMFA({ code: totpCode });
+            login(data.user || await authApi.fetchCurrentUser());
+            navigate('/');
         }
         catch (err) {
-            console.error('Social login init failed', err);
-            setError('Could not start social login.');
+            setError((err === null || err === void 0 ? void 0 : err.message) || 'Invalid code.');
+        }
+        finally {
+            setSubmitting(false);
         }
     };
-    const handlePasskeyLogin = async () => {
-        var _a, _b;
+    // SCHRITT 2b: Passkey als 2. Faktor nutzen
+    const handleMfaPasskey = async () => {
         setError('');
-        setSubmitting(true);
         try {
-            const { user } = await authApi.loginWithPasskey(); // API muss natürlich implementiert sein
+            // Wir nutzen die existierende Passkey-Login Funktion. 
+            // Allauth ist schlau genug: Wenn die Session im "MFA-Pending" Status ist,
+            // akzeptiert der /auth/webauthn/login Endpoint den Passkey als 2. Faktor.
+            const { user } = await authApi.loginWithPasskey();
             login(user);
             navigate('/');
         }
         catch (err) {
-            setError(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
-                (err === null || err === void 0 ? void 0 : err.message) ||
-                'Passkey login failed.');
-        }
-        finally {
-            setSubmitting(false);
+            setError('Passkey verification failed.');
         }
     };
-    const handleSignUp = () => {
-        navigate('/signup');
-    };
-    return (_jsxs(NarrowPage, { title: "Login", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Login" }) }), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(LoginForm, { onSubmit: handleSubmit, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLogin, onSignUp: handleSignUp, error: undefined, disabled: submitting })] }));
+    // ... (Social & Sign Up Handler bleiben gleich) ...
+    const handleSocialLogin = (provider) => authApi.startSocialLogin(provider);
+    const handlePasskeyLoginInitial = async () => { };
+    const handleSignUp = () => navigate('/signup');
+    const handleForgotPassword = () => navigate('/reset-request-password');
+    return (_jsxs(NarrowPage, { title: "Login", children: [_jsx(Helmet, { children: _jsx("title", { children: "Login" }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: handleSignUp, disabled: submitting })), step === 'mfa' && (_jsxs(Box, { children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: "Two-Factor Authentication required." }), _jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [mfaTypes.includes('webauthn') && (_jsx(Button, { variant: "outlined", onClick: handleMfaPasskey, fullWidth: true, children: "Use Passkey / Security Key" })), (mfaTypes.includes('totp') || mfaTypes.includes('recovery_codes')) && (_jsxs("form", { onSubmit: handleMfaTotpSubmit, children: [_jsx(TextField, { label: "Authenticator Code (or Recovery Code)", value: totpCode, onChange: (e) => setTotpCode(e.target.value), fullWidth: true, autoFocus: true, disabled: submitting, sx: { mb: 2 } }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting, children: "Verify" })] })), _jsx(Button, { size: "small", onClick: () => setStep('credentials'), children: "Back to Login" })] })] }))] }));
 }
 export default LoginPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "1.2.10",
+  "version": "1.3.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,
@@ -9,10 +9,12 @@
     "@emotion/styled": "^11.0.0",
     "@mui/material": "^7.3.5",
     "axios": "^1.0.0",
-    "react": "^18.0.0",
+    "react": "^19.2.0",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.0.0",
-    "react-router-dom": "^6.0.0"
+    "react-router-dom": "^6.0.0",
+    "qrcode.react": "^4.2.0"
+
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json"

package/src/auth/authApi.jsx

@@ -135,6 +135,7 @@ export async function updateUserProfile(data) {
 // -----------------------------
 // Authentication: password
 // -----------------------------
+/*
 export async function loginWithPassword(email, password) {
   try {
     await axios.post(
@@ -153,7 +154,7 @@ export async function loginWithPassword(email, password) {
   const user = await fetchCurrentUser();
   return { user };
 }
-
+*/
 export async function requestPasswordReset(email) {
   try {
     await axios.post(
@@ -459,6 +460,123 @@ export async function deletePasskey(id) {
   );
 }
 
+// -----------------------------
+// Authentication: MFA Step
+// -----------------------------
+export async function authenticateWithMFA({ code, credential }) {
+  // Entweder 'code' (TOTP/Recovery) oder 'credential' (Passkey) senden
+  const payload = {};
+  if (code) payload.code = code;
+  if (credential) payload.credential = credential;
+
+  try {
+    const res = await axios.post(
+      `${HEADLESS_BASE}/auth/mfa/authenticate`, // Endpoint für Schritt 2
+      payload,
+      { withCredentials: true }
+    );
+    return res.data; // Enthält User-Objekt bei Erfolg
+  } catch (error) {
+    throw new Error(extractErrorMessage(error));
+  }
+}
+
+// -----------------------------
+// Authentication: password (MODIFIZIERT)
+// -----------------------------
+export async function loginWithPassword(email, password) {
+  try {
+    await axios.post(
+      `${HEADLESS_BASE}/auth/login`,
+      { email, password },
+      { withCredentials: true }
+    );
+  } catch (error) {
+    // SKEPTISCHER CHECK: Ist es der MFA-Flow?
+    if (
+      error.response &&
+      error.response.status === 401 &&
+      error.response.data?.flow === 'mfa_authenticate'
+    ) {
+      // KEIN FEHLER! Wir geben zurück, dass MFA nötig ist.
+      return {
+        needsMfa: true,
+        availableTypes: error.response.data.types || [], // z.B. ["webauthn", "totp"]
+      };
+    }
+    
+    // Bestehende Logik für "Already logged in"
+    if (error.response && error.response.status === 409) {
+       // continue to fetch user
+    } else {
+       throw new Error(extractErrorMessage(error));
+    }
+  }
+
+  // Wenn wir hier landen, war kein MFA nötig oder wir waren schon eingeloggt
+  const user = await fetchCurrentUser();
+  return { user, needsMfa: false };
+}
+
+// 1. Status prüfen (Liste der aktiven Authenticators)
+export async function fetchAuthenticators() {
+  const res = await axios.get(`${HEADLESS_BASE}/mfa/authenticators`, {
+    withCredentials: true,
+  });
+  return res.data; // Array von Objekten, z.B. [{ type: 'totp', ... }, { type: 'webauthn' }]
+}
+
+// 2. TOTP Einrichtung starten (liefert Secret & QR-URL)
+export async function requestTotpKey() {
+  // GET /mfa/totp/key liefert das Secret für die Einrichtung
+  const res = await axios.get(`${HEADLESS_BASE}/mfa/totp/key`, {
+    withCredentials: true,
+  });
+  return res.data; // { secret: "...", key_uri: "otpauth://..." }
+}
+
+// 3. TOTP Einrichtung abschließen (Code verifizieren)
+export async function activateTotp(code) {
+  const res = await axios.post(
+    `${HEADLESS_BASE}/mfa/totp/key`,
+    { code },
+    { withCredentials: true }
+  );
+  return res.data;
+}
+
+// 4. TOTP deaktivieren
+export async function deactivateTotp(id) {
+  // Manche Implementierungen nutzen DELETE auf /mfa/totp, andere auf den Authenticator-ID endpoint.
+  // Wir nutzen hier den allgemeinen Authenticator-Delete Endpoint, wenn wir die ID haben.
+  // Alternativ: DELETE /mfa/totp
+  const res = await axios.delete(`${HEADLESS_BASE}/mfa/authenticators/${id}`, {
+    withCredentials: true,
+  });
+  return res.data;
+}
+
+// -----------------------------
+// MFA: Recovery Codes
+// -----------------------------
+
+export async function fetchRecoveryCodes() {
+  const res = await axios.get(`${HEADLESS_BASE}/mfa/recovery_codes`, {
+    withCredentials: true,
+  });
+  return res.data; // { codes: [...] }
+}
+
+export async function generateRecoveryCodes() {
+  const res = await axios.post(
+    `${HEADLESS_BASE}/mfa/recovery_codes`,
+    {},
+    { withCredentials: true }
+  );
+  return res.data; // { codes: [...] }
+}
+
+
 // -----------------------------
 // Aggregated API object
 // -----------------------------
@@ -477,6 +595,13 @@ export const authApi = {
   registerPasskey,
   fetchPasskeys,
   deletePasskey,
+  authenticateWithMFA,
+  fetchAuthenticators,
+  requestTotpKey,
+  activateTotp,
+  deactivateTotp,
+  fetchRecoveryCodes,
+  generateRecoveryCodes,
   validateAccessCode,
   requestInviteWithCode,
 };

package/src/components/MFAComponent.jsx

@@ -0,0 +1,264 @@
+// src/auth/components/MFAComponent.jsx
+import React, { useState, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import {
+  Box,
+  Typography,
+  Button,
+  TextField,
+  Card,
+  CardContent,
+  Alert,
+  CircularProgress,
+  Stack,
+  Divider,
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { authApi } from '../auth/authApi';
+
+
+const MFAComponent = () => {
+  const [authenticators, setAuthenticators] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  
+  // Setup State
+  const [isSettingUp, setIsSettingUp] = useState(false);
+  const [totpData, setTotpData] = useState(null); // { secret, key_uri }
+  const [verifyCode, setVerifyCode] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Recovery Codes State
+  const [recoveryCodes, setRecoveryCodes] = useState([]);
+  const [showRecovery, setShowRecovery] = useState(false);
+
+  const loadData = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      // Lade Authenticators (TOTP, WebAuthn, etc.)
+      const data = await authApi.fetchAuthenticators();
+      setAuthenticators(Array.isArray(data) ? data : []);
+    } catch (err) {
+      // Ignorieren wir 404/Empty falls noch nichts da ist, sonst Error
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const totpAuthenticator = authenticators.find((a) => a.type === 'totp');
+
+  // --- HANDLER: TOTP START ---
+  const handleStartSetup = async () => {
+    setError('');
+    setIsSettingUp(true);
+    try {
+      const data = await authApi.requestTotpKey();
+      setTotpData(data);
+    } catch (err) {
+      setError('Could not fetch setup key.');
+      setIsSettingUp(false);
+    }
+  };
+
+  // --- HANDLER: TOTP VERIFY ---
+  const handleVerify = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+    try {
+      await authApi.activateTotp(verifyCode);
+      setIsSettingUp(false);
+      setVerifyCode('');
+      setTotpData(null);
+      // Neu laden, um den neuen Status zu sehen
+      await loadData();
+      // Automatisch Recovery Codes anzeigen (Best Practice!)
+      handleShowRecoveryCodes();
+    } catch (err) {
+      setError('Invalid code. Please try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // --- HANDLER: TOTP DELETE ---
+  const handleDeleteTotp = async () => {
+    if (!window.confirm('Disable Authenticator App? Your security will be reduced.')) return;
+    try {
+      if (totpAuthenticator?.id) {
+          await authApi.deactivateTotp(totpAuthenticator.id);
+      }
+      await loadData();
+    } catch (err) {
+      setError('Could not deactivate TOTP.');
+    }
+  };
+
+  // --- HANDLER: RECOVERY CODES ---
+  const handleShowRecoveryCodes = async () => {
+    try {
+      // Versuch, existierende zu laden
+      let data = await authApi.fetchRecoveryCodes();
+      // Wenn keine existieren (oft leer beim ersten Mal), generiere neue
+      if (!data.codes || data.codes.length === 0) {
+        data = await authApi.generateRecoveryCodes();
+      }
+      setRecoveryCodes(data.codes);
+      setShowRecovery(true);
+    } catch (err) {
+      setError('Could not load recovery codes.');
+    }
+  };
+  
+  const handleCopyCode = (code) => {
+      navigator.clipboard.writeText(code);
+  };
+
+  if (loading) return <CircularProgress />;
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>Authenticator App (TOTP)</Typography>
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        Use an app like Google Authenticator or Microsoft Authenticator to generate verification codes.
+      </Typography>
+
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+
+      {/* --- CASE 1: TOTP IS ACTIVE --- */}
+      {totpAuthenticator ? (
+        <Card variant="outlined" sx={{ mb: 3, bgcolor: '#f0fdf4' }}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Box>
+                <Typography variant="subtitle1" color="success.main" fontWeight="bold">
+                    Active
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                    Created: {new Date(totpAuthenticator.created_at * 1000).toLocaleDateString()}
+                </Typography>
+            </Box>
+            <Button 
+                variant="outlined" 
+                color="error" 
+                startIcon={<DeleteIcon />}
+                onClick={handleDeleteTotp}
+            >
+                Disable
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        /* --- CASE 2: TOTP NOT ACTIVE --- */
+        !isSettingUp && (
+            <Button variant="contained" onClick={handleStartSetup}>
+                Set up Authenticator App
+            </Button>
+        )
+      )}
+
+      {/* --- WIZARD: SETUP --- */}
+      {isSettingUp && totpData && (
+        <Card variant="outlined" sx={{ mb: 3 }}>
+          <CardContent>
+            <Typography variant="subtitle1" gutterBottom>Scan this QR Code</Typography>
+            
+            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} alignItems="center">
+                {/* QR CODE */}
+                <Box sx={{ p: 2, bgcolor: 'white', border: '1px solid #eee' }}>
+                    <QRCodeSVG value={totpData.key_uri} size={150} />
+                </Box>
+                
+                {/* MANUAL ENTRY & VERIFY */}
+                <Box sx={{ flex: 1 }}>
+                    <Typography variant="body2" gutterBottom>
+                        Can't scan? Enter this key manually:
+                    </Typography>
+                    <Typography variant="mono" sx={{ fontFamily: 'monospace', bgcolor: '#eee', p: 1, borderRadius: 1, display: 'inline-block', mb: 2 }}>
+                        {totpData.secret}
+                    </Typography>
+
+                    <form onSubmit={handleVerify}>
+                        <TextField 
+                            label="Verification Code (6 digits)"
+                            value={verifyCode}
+                            onChange={(e) => setVerifyCode(e.target.value)}
+                            fullWidth
+                            required
+                            sx={{ mb: 2 }}
+                            autoComplete="off"
+                        />
+                        <Stack direction="row" spacing={1}>
+                            <Button type="submit" variant="contained" disabled={submitting}>
+                                {submitting ? 'Verifying...' : 'Verify & Activate'}
+                            </Button>
+                            <Button onClick={() => setIsSettingUp(false)} disabled={submitting}>
+                                Cancel
+                            </Button>
+                        </Stack>
+                    </form>
+                </Box>
+            </Stack>
+          </CardContent>
+        </Card>
+      )}
+
+      <Divider sx={{ my: 3 }} />
+
+      {/* --- RECOVERY CODES --- */}
+      <Typography variant="h6" gutterBottom>Recovery Codes</Typography>
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        If you lose your device, these codes are the only way to access your account.
+      </Typography>
+
+      {!showRecovery ? (
+        <Button variant="outlined" onClick={handleShowRecoveryCodes}>
+            View/Generate Recovery Codes
+        </Button>
+      ) : (
+        <Box sx={{ bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }}>
+            <Alert severity="warning" sx={{ mb: 2 }}>
+                Save these codes in a safe place (e.g., password manager). Each code can be used only once.
+            </Alert>
+            <Stack direction="row" flexWrap="wrap" gap={2}>
+                {recoveryCodes.map((code) => (
+                    <Box 
+                        key={code} 
+                        sx={{ 
+                            bgcolor: 'white', 
+                            border: '1px solid #ddd', 
+                            p: 1, 
+                            borderRadius: 1, 
+                            fontFamily: 'monospace',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1
+                        }}
+                    >
+                        {code}
+                        <Tooltip title="Copy">
+                            <IconButton size="small" onClick={() => handleCopyCode(code)}>
+                                <ContentCopyIcon fontSize="small" />
+                            </IconButton>
+                        </Tooltip>
+                    </Box>
+                ))}
+            </Stack>
+            <Button sx={{ mt: 2 }} size="small" onClick={() => authApi.generateRecoveryCodes().then(d => setRecoveryCodes(d.codes))}>
+                Generate New Codes
+            </Button>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default MFAComponent;

package/src/components/SecurityComponent.jsx

@@ -9,6 +9,7 @@ import {
 import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
 import PasskeysComponent from './PasskeysComponent';   // <--- WICHTIG
+import MFAComponent from './MFAComponent';
 import { authApi } from '../auth/authApi';
 
 const SecurityComponent = () => {
@@ -74,6 +75,10 @@ const SecurityComponent = () => {
 
       {/* Passkeys Section */}
       <PasskeysComponent />
+
+      <Divider sx={{ my: 3 }} />
+
+      <MFAComponent />
     </Box>
   );
 };

package/src/pages/LoginPage.jsx

@@ -1,96 +1,143 @@
-// src/pages/LoginPage.jsx (oder wo deine LoginPage liegt)
+// src/pages/LoginPage.jsx
 import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Typography } from '@mui/material';
+import { Typography, Box, TextField, Button, Stack, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
-import { authApi } from '../auth/authApi';
+import { authApi, loginWithPasskey } from '../auth/authApi'; // loginWithPasskey direkt importieren oder via authApi
 import LoginForm from '../components/LoginForm';
 
 export function LoginPage() {
   const navigate = useNavigate();
   const { login } = useContext(AuthContext);
+  
+  // States für den Ablauf
+  const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
+  
+  // Für den MFA Schritt
+  const [mfaTypes, setMfaTypes] = useState([]); // z.B. ['webauthn', 'totp']
+  const [totpCode, setTotpCode] = useState('');
 
-  const handleSubmit = async ({ identifier, password }) => {
+  // SCHRITT 1: Email & Passwort senden
+  const handleSubmitCredentials = async ({ identifier, password }) => {
     setError('');
     setSubmitting(true);
     try {
-      const data = await authApi.loginWithPassword(identifier, password);
-      login(data.user);
-      navigate('/');
+      const result = await authApi.loginWithPassword(identifier, password);
+      
+      if (result.needsMfa) {
+        // Passwort war korrekt, aber MFA wird benötigt -> Wechsel zu Schritt 2
+        setMfaTypes(result.availableTypes);
+        setStep('mfa');
+      } else {
+        // Login sofort erfolgreich (kein MFA eingerichtet)
+        login(result.user);
+        navigate('/');
+      }
     } catch (err) {
-      setError(
-        err?.response?.data?.detail ||
-          err?.message ||
-          'Login failed.',
-      );
+      setError(err?.message || 'Login failed.');
     } finally {
       setSubmitting(false);
     }
   };
 
-  const handleForgotPassword = () => {
-    navigate('/reset-request-password');
-  };
-
-  const handleSocialLogin = (providerKey) => {
+  // SCHRITT 2a: TOTP Code senden
+  const handleMfaTotpSubmit = async (e) => {
+    e.preventDefault();
     setError('');
+    setSubmitting(true);
     try {
-      authApi.startSocialLogin(providerKey);
+      const data = await authApi.authenticateWithMFA({ code: totpCode });
+      login(data.user || await authApi.fetchCurrentUser());
+      navigate('/');
     } catch (err) {
-      console.error('Social login init failed', err);
-      setError('Could not start social login.');
+      setError(err?.message || 'Invalid code.');
+    } finally {
+      setSubmitting(false);
     }
   };
 
-  const handlePasskeyLogin = async () => {
+  // SCHRITT 2b: Passkey als 2. Faktor nutzen
+  const handleMfaPasskey = async () => {
     setError('');
-    setSubmitting(true);
     try {
-      const { user } = await authApi.loginWithPasskey(); // API muss natürlich implementiert sein
-      login(user);
-      navigate('/');
+        // Wir nutzen die existierende Passkey-Login Funktion. 
+        // Allauth ist schlau genug: Wenn die Session im "MFA-Pending" Status ist,
+        // akzeptiert der /auth/webauthn/login Endpoint den Passkey als 2. Faktor.
+        const { user } = await authApi.loginWithPasskey();
+        login(user);
+        navigate('/');
     } catch (err) {
-      setError(
-        err?.response?.data?.detail ||
-          err?.message ||
-          'Passkey login failed.',
-      );
-    } finally {
-      setSubmitting(false);
+        setError('Passkey verification failed.');
     }
   };
 
-  const handleSignUp = () => {
-    navigate('/signup');
-  };
+  // ... (Social & Sign Up Handler bleiben gleich) ...
+  const handleSocialLogin = (provider) => authApi.startSocialLogin(provider);
+  const handlePasskeyLoginInitial = async () => { /* wie gehabt für Step 1 */ };
+  const handleSignUp = () => navigate('/signup');
+  const handleForgotPassword = () => navigate('/reset-request-password');
 
   return (
     <NarrowPage title="Login">
-      <Helmet>
-        <title>PROJECT_NAME – Login</title>
-      </Helmet>
+      <Helmet><title>Login</title></Helmet>
 
-      {error && (
-        <Typography color="error" gutterBottom>
-          {error}
-        </Typography>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+
+      {step === 'credentials' && (
+        <LoginForm
+          onSubmit={handleSubmitCredentials}
+          onForgotPassword={handleForgotPassword}
+          onSocialLogin={handleSocialLogin}
+          onPasskeyLogin={handlePasskeyLoginInitial} // Passkey als 1. Faktor
+          onSignUp={handleSignUp}
+          disabled={submitting}
+        />
       )}
 
-      <LoginForm
-        onSubmit={handleSubmit}
-        onForgotPassword={handleForgotPassword}
-        onSocialLogin={handleSocialLogin}
-        onPasskeyLogin={handlePasskeyLogin}
-        onSignUp={handleSignUp}
-        error={undefined}
-        disabled={submitting}
-      />
+      {step === 'mfa' && (
+        <Box>
+          <Typography variant="body1" gutterBottom>
+            Two-Factor Authentication required.
+          </Typography>
+          
+          <Stack spacing={2} sx={{ mt: 2 }}>
+            {/* OPTION A: Passkey Button (wenn verfügbar) */}
+            {mfaTypes.includes('webauthn') && (
+               <Button variant="outlined" onClick={handleMfaPasskey} fullWidth>
+                 Use Passkey / Security Key
+               </Button>
+            )}
+
+            {/* OPTION B: TOTP Input (wenn verfügbar) */}
+            {(mfaTypes.includes('totp') || mfaTypes.includes('recovery_codes')) && (
+                <form onSubmit={handleMfaTotpSubmit}>
+                    <TextField
+                        label="Authenticator Code (or Recovery Code)"
+                        value={totpCode}
+                        onChange={(e) => setTotpCode(e.target.value)}
+                        fullWidth
+                        autoFocus
+                        disabled={submitting}
+                        sx={{ mb: 2 }}
+                    />
+                    <Button type="submit" variant="contained" fullWidth disabled={submitting}>
+                        Verify
+                    </Button>
+                </form>
+            )}
+            
+            <Button size="small" onClick={() => setStep('credentials')}>
+                Back to Login
+            </Button>
+          </Stack>
+        </Box>
+      )}
     </NarrowPage>
   );
 }
 
-export default LoginPage;
+export default LoginPage;