@micha.bigler/ui-core-micha 2.4.3 → 2.4.4

package/dist/auth/AuthContext.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/AuthContext.jsx
 import React, { createContext, useState, useEffect, } from 'react';
 import { ensureCsrfToken } from './apiClient'; // <--- IMPORT ADDED
 import { fetchAuthMethods, fetchCurrentUser, logoutSession, } from './authApi';
+import { ReauthModal } from './ReauthModal';
 export const AuthContext = createContext(null);
 const DEFAULT_AUTH_METHODS = {
     password_login: true,
@@ -80,11 +81,11 @@ export const AuthProvider = ({ children }) => {
             setUser(null);
         }
     };
-    return (_jsx(AuthContext.Provider, { value: {
+    return (_jsxs(AuthContext.Provider, { value: {
             user,
             authMethods,
             loading,
             login,
             logout,
-        }, children: children }));
+        }, children: [children, _jsx(ReauthModal, {})] }));
 };

package/dist/auth/ReauthModal.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import apiClient from './apiClient';
+import { HEADLESS_BASE } from './authConfig.jsx';
+import { rejectReauth, resolveReauth, subscribe } from './reauth';
+export function ReauthModal() {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [password, setPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        return subscribe((active) => {
+            setOpen(active);
+            if (!active) {
+                setPassword('');
+                setError(null);
+                setLoading(false);
+            }
+        });
+    }, []);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        try {
+            await apiClient.post(`${HEADLESS_BASE}/auth/reauthenticate`, { password });
+            resolveReauth();
+        }
+        catch (_a) {
+            setError(t('Auth.REAUTH_FAILED'));
+            setLoading(false);
+        }
+    };
+    const handleCancel = () => {
+        rejectReauth(new Error('cancelled'));
+    };
+    return (_jsx(Dialog, { open: open, onClose: handleCancel, maxWidth: "xs", fullWidth: true, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(DialogTitle, { children: t('Auth.REAUTH_TITLE') }), _jsxs(DialogContent, { children: [error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), _jsx(TextField, { autoFocus: true, fullWidth: true, type: "password", label: t('Auth.LOGIN_PASSWORD_LABEL'), value: password, onChange: (e) => setPassword(e.target.value), disabled: loading, sx: { mt: 1 } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleCancel, disabled: loading, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') }), _jsx(Button, { type: "submit", variant: "contained", disabled: loading || !password, children: loading ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING') : t('Auth.MFA_VERIFY') })] })] }) }));
+}

package/dist/auth/apiClient.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { CSRF_URL } from "./authConfig";
+import { requestReauth } from "./reauth";
 const apiClient = axios.create({
     withCredentials: true,
     xsrfCookieName: "csrftoken",
@@ -109,18 +110,34 @@ function extractAuthSignal(data) {
     }
     return { code: null, i18nKey: null };
 }
-apiClient.interceptors.response.use((response) => response, (error) => {
-    var _a, _b, _c, _d, _e;
+apiClient.interceptors.response.use((response) => response, async (error) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const status = (_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null;
     const data = (_d = (_c = error === null || error === void 0 ? void 0 : error.response) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : {};
     const { code, i18nKey } = extractAuthSignal(data);
     const isAuthStatus = status === 401 || status === 403;
     const isNotAuthenticated = code === "not_authenticated" || i18nKey === "auth.not_authenticated";
+    // Reauthentication gate: allauth returns 401 + flows[{id:"reauthenticate"}]
+    // when the session is stale before a sensitive operation (e.g. adding a passkey).
+    // Show the password-confirm modal, wait for it to complete, then retry once.
+    const flows = (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.data) === null || _e === void 0 ? void 0 : _e.flows) !== null && _f !== void 0 ? _f : data === null || data === void 0 ? void 0 : data.flows) !== null && _g !== void 0 ? _g : [];
+    const needsReauth = status === 401 &&
+        Array.isArray(flows) &&
+        flows.some((f) => f.id === "reauthenticate");
+    if (needsReauth && !((_h = error.config) === null || _h === void 0 ? void 0 : _h._reauthRetried)) {
+        try {
+            await requestReauth();
+            return apiClient(Object.assign(Object.assign({}, error.config), { _reauthRetried: true }));
+        }
+        catch (_k) {
+            return Promise.reject(error);
+        }
+    }
     // Per-request opt-out: bootstrap probes (e.g. fetchCurrentUser on app start)
     // expect to handle 401 silently and must not trigger a redirect-on-mount.
     // Carried as an axios config property, so it never travels to the backend
     // (would otherwise trigger a CORS preflight on cross-origin requests).
-    const skipRedirect = ((_e = error === null || error === void 0 ? void 0 : error.config) === null || _e === void 0 ? void 0 : _e.skipAuthRedirect) === true;
+    const skipRedirect = ((_j = error === null || error === void 0 ? void 0 : error.config) === null || _j === void 0 ? void 0 : _j.skipAuthRedirect) === true;
     if (isAuthStatus && isNotAuthenticated && !skipRedirect) {
         redirectToLoginOnce();
     }

package/dist/auth/authApi.js

@@ -410,6 +410,32 @@ export async function rejectRecoveryRequest(id, supportNote) {
     });
     return res.data;
 }
+// S164: server-side session handoff. After the email-link redirect lands the
+// SPA on `/login#recovery=ok`, the LoginPage fetches the plaintext recovery
+// token from the user's server session (set by `recovery_complete_view`).
+// The endpoint pops the token on every read — a single shot per browser
+// navigation — so a navigated-away tab cannot reuse the entry.
+export async function fetchRecoverySessionToken() {
+    var _a, _b;
+    try {
+        const res = await apiClient.get('/api/auth/recovery/session-token/', {
+            // Visiting `/login` without a pending recovery session is the common
+            // case; the 404 it returns must not bubble up as a global "session
+            // expired" auth error in the app shell.
+            skipAuthRedirect: true,
+        });
+        return ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.token) || null;
+    }
+    catch (err) {
+        if (((_b = err === null || err === void 0 ? void 0 : err.response) === null || _b === void 0 ? void 0 : _b.status) === 404) {
+            // No pending recovery in this session — treat as a non-error so the
+            // LoginPage can decide whether to surface a "link expired" message
+            // based on the `#recovery=` hash sentinel it already inspects.
+            return null;
+        }
+        throw normaliseApiError(err, 'Auth.RECOVERY_TOKEN_INVALID');
+    }
+}
 export async function loginWithRecoveryPassword(email, password, token) {
     try {
         // S50 (django-core-micha >=2.13.1): token wird im POST-Body übergeben,

package/dist/auth/reauth.js

@@ -0,0 +1,45 @@
+// Promise broker for the reauthentication gate.
+//
+// When the response interceptor encounters a 401+reauthenticate, it calls
+// requestReauth() and awaits the returned promise. The ReauthModal resolves
+// or rejects that promise after the user submits (or cancels) the password
+// dialog. Concurrent 401s share the same pending promise so only one modal
+// ever appears.
+let _pendingResolve = null;
+let _pendingReject = null;
+let _reauthPromise = null;
+let _listeners = [];
+export function requestReauth() {
+    if (_reauthPromise)
+        return _reauthPromise;
+    _reauthPromise = new Promise((resolve, reject) => {
+        _pendingResolve = resolve;
+        _pendingReject = reject;
+        _listeners.forEach(fn => fn(true));
+    });
+    return _reauthPromise;
+}
+export function resolveReauth() {
+    const resolve = _pendingResolve;
+    _pendingResolve = null;
+    _pendingReject = null;
+    _reauthPromise = null;
+    _listeners.forEach(fn => fn(false));
+    if (resolve)
+        resolve();
+}
+export function rejectReauth(error) {
+    const reject = _pendingReject;
+    _pendingResolve = null;
+    _pendingReject = null;
+    _reauthPromise = null;
+    _listeners.forEach(fn => fn(false));
+    if (reject)
+        reject(error || new Error('Reauthentication cancelled'));
+}
+export function subscribe(fn) {
+    _listeners = [..._listeners, fn];
+    return () => {
+        _listeners = _listeners.filter(l => l !== fn);
+    };
+}

package/dist/i18n/authTranslations.js

@@ -6,6 +6,36 @@ export const authTranslations = {
         "en": "Email address or password is incorrect.",
         "sw": "Barua pepe au nenosiri sio sahihi."
     },
+    "Auth.RECOVERY_TOKEN_INVALID": {
+        "de": "Der Recovery-Link ist ungültig oder wurde bereits verwendet.",
+        "fr": "Le lien de récupération est invalide ou a déjà été utilisé.",
+        "en": "The recovery link is invalid or has already been used.",
+        "sw": "Kiungo cha urejesho si halali au tayari kimetumika."
+    },
+    "Auth.RECOVERY_TOKEN_EXPIRED": {
+        "de": "Der Recovery-Link ist abgelaufen. Bitte fordere einen neuen an.",
+        "fr": "Le lien de récupération a expiré. Veuillez en demander un nouveau.",
+        "en": "The recovery link has expired. Please request a new one.",
+        "sw": "Kiungo cha urejesho kimeisha muda wake. Tafadhali omba kipya."
+    },
+    "Auth.RECOVERY_LINK_VALIDATING": {
+        "de": "Recovery-Link wird geprüft…",
+        "fr": "Vérification du lien de récupération…",
+        "en": "Validating recovery link…",
+        "sw": "Inathibitisha kiungo cha urejesho..."
+    },
+    "Auth.RECOVERY_LOGIN_WARNING": {
+        "de": "Recovery-Link validiert. Bitte gib dein Passwort ein.",
+        "fr": "Lien de récupération validé. Veuillez saisir votre mot de passe.",
+        "en": "Recovery link validated. Please enter your password.",
+        "sw": "Kiungo cha urejesho kimethibitishwa. Tafadhali weka nenosiri lako."
+    },
+    "Auth.TWO_FACTOR_REQUIRED_HINT": {
+        "de": "Diese App benötigt zwei Authentifizierungsfaktoren für vollen Zugriff.",
+        "fr": "Cette application requiert deux facteurs d’authentification pour un accès complet.",
+        "en": "This app requires two authentication factors for full access.",
+        "sw": "Programu hii inahitaji vipengele viwili vya uthibitisho kwa ufikiaji kamili."
+    },
     "Auth.PASSKEY_FAILED": {
         "de": "Die Anmeldung mit Passkey ist fehlgeschlagen.",
         "fr": "La connexion avec passkey a échoué.",
@@ -1757,5 +1787,23 @@ export const authTranslations = {
         "fr": "Politique de code d'accès enregistrée.",
         "en": "Access code policy saved.",
         "sw": "Sera ya msimbo wa ufikiaji imehifadhiwa."
+    },
+    "Auth.REAUTH_TITLE": {
+        "de": "Identität bestätigen",
+        "fr": "Confirmer votre identité",
+        "en": "Confirm your identity",
+        "sw": "Thibitisha utambulisho wako"
+    },
+    "Auth.REAUTH_SUBTITLE": {
+        "de": "Bitte gib dein Passwort ein, um fortzufahren.",
+        "fr": "Veuillez saisir votre mot de passe pour continuer.",
+        "en": "Please enter your password to continue.",
+        "sw": "Tafadhali ingiza nenosiri lako ili kuendelea."
+    },
+    "Auth.REAUTH_FAILED": {
+        "de": "Das Passwort ist falsch.",
+        "fr": "Le mot de passe est incorrect.",
+        "en": "The password is incorrect.",
+        "sw": "Nenosiri si sahihi."
     }
 };

package/dist/pages/LoginPage.js

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
 // API & Services (Clean Architecture)
-import { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
+import { fetchRecoverySessionToken, loginWithPassword, loginWithRecoveryPassword, } from '../auth/authApi';
 import { loginWithPasskey, startSocialLogin } from '../utils/authService';
 // Components
 import { LoginForm } from '../components/LoginForm';
@@ -23,13 +23,18 @@ export function LoginPage() {
     const [submitting, setSubmitting] = useState(false);
     const [errorKey, setErrorKey] = useState(null);
     const [mfaState, setMfaState] = useState(null); // { availableTypes: [...], identifier }
+    // S164: token never travels through the URL/fragment anymore. It is held
+    // in component state only, fetched from the server-side session handoff
+    // endpoint when the redirect lands the SPA here with `#recovery=ok`.
+    const [recoveryToken, setRecoveryToken] = useState(null);
+    const [recoveryFetching, setRecoveryFetching] = useState(false);
     // URL Params parsing
     const params = new URLSearchParams(location.search);
     const hashParams = new URLSearchParams(String(location.hash || "").startsWith("#") ? String(location.hash).slice(1) : String(location.hash || ""));
-    const recoveryTokenRaw = hashParams.get('recovery') || params.get('recovery');
-    const recoveryToken = ['invalid', 'expired'].includes(String(recoveryTokenRaw || '').toLowerCase())
-        ? null
-        : recoveryTokenRaw;
+    // After S164 the hash carries only a status sentinel: `ok`, `invalid`, or
+    // `expired`. We also accept the same key from query params as a defensive
+    // fallback for proxies that strip fragments.
+    const recoveryStatus = String(hashParams.get('recovery') || params.get('recovery') || '').toLowerCase();
     // Backward-compatible fallback for legacy links using query parameters.
     const recoveryEmail = hashParams.get('email') || params.get('email') || '';
     const requestedNext = params.get('next');
@@ -42,8 +47,29 @@ export function LoginPage() {
         if (requiresExtra) {
             return '/account?tab=security&from=weak_login';
         }
-        if (requestedNext && requestedNext.startsWith('/')) {
-            return requestedNext;
+        // Same-origin check via URL parser — `startsWith('/')` alone allows
+        // bypasses like `/\evil.com`, which WHATWG-parses to `https://evil.com/`
+        // for special schemes. Resolve against the current origin and only accept
+        // results whose origin matches.
+        // Require leading-slash absolute path on the raw input (rejects relative
+        // inputs like `account/settings` and protocol-relative `//host` before
+        // they reach the URL parser, which would normalise both into a same-
+        // origin pathname starting with `/`).
+        if (requestedNext &&
+            typeof requestedNext === 'string' &&
+            requestedNext.startsWith('/') &&
+            !requestedNext.startsWith('//')) {
+            try {
+                const parsed = new URL(requestedNext, window.location.origin);
+                // Catches WHATWG bypasses like `/\evil.com` that resolve to a
+                // different origin even though the raw input started with `/`.
+                if (parsed.origin === window.location.origin) {
+                    return parsed.pathname + parsed.search + parsed.hash;
+                }
+            }
+            catch (_b) {
+                // fall through to default redirect
+            }
         }
         return '/';
     };
@@ -53,6 +79,78 @@ export function LoginPage() {
             setErrorKey('Auth.SOCIAL_LOGIN_FAILED');
         }
     }, [location.search]);
+    // S164 handoff: on `#recovery=ok`, pull the plaintext token out of the
+    // server-side session (one-shot). On `invalid`/`expired`, or on any
+    // other non-empty value (legacy pre-S164 email links that carried the
+    // token directly in the hash), surface an invalid-link error so the
+    // user gets feedback instead of a silent login screen.
+    useEffect(() => {
+        var _a;
+        if (!recoveryStatus) {
+            return;
+        }
+        // Strip the `recovery=…` sentinel from BOTH hash and query string so a
+        // bookmark or page refresh does not re-trigger this effect against an
+        // already-popped session entry (which would render a confusing
+        // "invalid" error to a user who is mid-login).
+        //
+        // We use `history.replaceState` rather than `navigate(..., {replace})`
+        // intentionally: react-router's `navigate` would trigger an immediate
+        // re-render with an updated `useLocation()`, which would cause this
+        // effect's cleanup to set `cancelled=true` and discard the in-flight
+        // recovery-token fetch result. `replaceState` only mutates the browser
+        // URL bar; `useLocation()` stays at `recovery=ok` for this render, the
+        // fetch resolves, and `recoveryToken` gets set normally. The trade-off
+        // is that `useLocation().hash` is stale for the page lifetime — fine
+        // because nothing else in this component reads it.
+        if (typeof window !== 'undefined' && ((_a = window.history) === null || _a === void 0 ? void 0 : _a.replaceState)) {
+            const cleanParams = new URLSearchParams(window.location.search);
+            cleanParams.delete('recovery');
+            const cleanSearch = cleanParams.toString();
+            const cleanUrl = window.location.pathname + (cleanSearch ? `?${cleanSearch}` : '');
+            window.history.replaceState(null, '', cleanUrl);
+        }
+        if (recoveryStatus === 'expired') {
+            setErrorKey('Auth.RECOVERY_TOKEN_EXPIRED');
+            setRecoveryToken(null);
+            return;
+        }
+        if (recoveryStatus !== 'ok') {
+            // Catches `invalid` and any unknown value (including legacy email
+            // links that carried the plaintext token before S164).
+            setErrorKey('Auth.RECOVERY_TOKEN_INVALID');
+            setRecoveryToken(null);
+            return;
+        }
+        let cancelled = false;
+        setRecoveryFetching(true);
+        fetchRecoverySessionToken()
+            .then((token) => {
+            if (cancelled)
+                return;
+            if (!token) {
+                // Session entry missing or already consumed — treat as invalid.
+                setErrorKey('Auth.RECOVERY_TOKEN_INVALID');
+                setRecoveryToken(null);
+                return;
+            }
+            setRecoveryToken(token);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setErrorKey((err === null || err === void 0 ? void 0 : err.code) || 'Auth.RECOVERY_TOKEN_INVALID');
+            setRecoveryToken(null);
+        })
+            .finally(() => {
+            if (!cancelled) {
+                setRecoveryFetching(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [recoveryStatus]);
     useEffect(() => {
         if (loading || !user)
             return;
@@ -146,5 +244,8 @@ export function LoginPage() {
     const twoFactorRequired = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.two_factor_required)
         || Number((authMethods === null || authMethods === void 0 ? void 0 : authMethods.required_auth_factor_count) || 1) >= 2;
     // --- Render ---
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), twoFactorRequired && !recoveryToken && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.TWO_FACTOR_REQUIRED_HINT', 'This app requires two authentication factors for full access.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: passwordLoginEnabled ? handleSubmitCredentials : null, onForgotPassword: passwordResetEnabled ? () => navigate('/reset-request-password') : null, onSocialLogin: socialLoginEnabled ? (provider) => startSocialLogin(provider) : null, socialProviders: socialProviders, onPasskeyLogin: passkeyLoginEnabled ? handlePasskeyLoginInitial : null, onSignUp: signupEnabled ? () => navigate('/signup') : null, disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryFetching && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LINK_VALIDATING', 'Validating recovery link…') })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), twoFactorRequired && !recoveryToken && !recoveryFetching && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.TWO_FACTOR_REQUIRED_HINT', 'This app requires two authentication factors for full access.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: passwordLoginEnabled ? handleSubmitCredentials : null, onForgotPassword: passwordResetEnabled ? () => navigate('/reset-request-password') : null, onSocialLogin: socialLoginEnabled ? (provider) => startSocialLogin(provider) : null, socialProviders: socialProviders, onPasskeyLogin: passkeyLoginEnabled ? handlePasskeyLoginInitial : null, onSignUp: signupEnabled ? () => navigate('/signup') : null, 
+                // Block submit while the handoff is in flight so the user does not
+                // race the recovery-token fetch with a normal password POST.
+                disabled: submitting || recoveryFetching, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
 }

package/dist/pages/PasswordInvitePage.js

@@ -59,8 +59,33 @@ export function PasswordInvitePage() {
             setSuccessKey(isInvite
                 ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'
                 : 'Auth.RESET_PASSWORD_SUCCESS_RESET');
-            const target = nextPath
-                ? `/login?next=${encodeURIComponent(nextPath)}`
+            // Same-origin check via URL parser — startsWith('/') alone misses
+            // bypasses like `/\evil.com`, which WHATWG-parses to `https://evil.com/`
+            // for special schemes. The parser normalises backslashes and protocol-
+            // relative forms, so any cross-origin result is caught here.
+            let safeNextPath = null;
+            // Require leading-slash absolute path on the raw input (rejects
+            // relative inputs like `account/settings` and protocol-relative `//host`
+            // before they reach the URL parser, which would normalise both into a
+            // same-origin pathname starting with `/`).
+            if (nextPath &&
+                typeof nextPath === 'string' &&
+                nextPath.startsWith('/') &&
+                !nextPath.startsWith('//')) {
+                try {
+                    const parsed = new URL(nextPath, window.location.origin);
+                    // Catches WHATWG bypasses like `/\evil.com` that resolve to a
+                    // different origin even though the raw input started with `/`.
+                    if (parsed.origin === window.location.origin) {
+                        safeNextPath = parsed.pathname + parsed.search + parsed.hash;
+                    }
+                }
+                catch (_a) {
+                    // fall through to default redirect
+                }
+            }
+            const target = safeNextPath
+                ? `/login?next=${encodeURIComponent(safeNextPath)}`
                 : '/login';
             navigate(target);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/auth/AuthContext.jsx

@@ -10,6 +10,7 @@ import {
   fetchCurrentUser,
   logoutSession,
 } from './authApi';
+import { ReauthModal } from './ReauthModal';
 
 export const AuthContext = createContext(null);
 
@@ -136,6 +137,7 @@ export const AuthProvider = ({ children }) => {
       }}
     >
       {children}
+      <ReauthModal />
     </AuthContext.Provider>
   );
 };

package/src/auth/ReauthModal.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import apiClient from './apiClient';
+import { HEADLESS_BASE } from './authConfig.jsx';
+import { rejectReauth, resolveReauth, subscribe } from './reauth';
+
+export function ReauthModal() {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    return subscribe((active) => {
+      setOpen(active);
+      if (!active) {
+        setPassword('');
+        setError(null);
+        setLoading(false);
+      }
+    });
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.post(`${HEADLESS_BASE}/auth/reauthenticate`, { password });
+      resolveReauth();
+    } catch {
+      setError(t('Auth.REAUTH_FAILED'));
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    rejectReauth(new Error('cancelled'));
+  };
+
+  return (
+    <Dialog open={open} onClose={handleCancel} maxWidth="xs" fullWidth>
+      <form onSubmit={handleSubmit}>
+        <DialogTitle>{t('Auth.REAUTH_TITLE')}</DialogTitle>
+        <DialogContent>
+          {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+          <TextField
+            autoFocus
+            fullWidth
+            type="password"
+            label={t('Auth.LOGIN_PASSWORD_LABEL')}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={loading}
+            sx={{ mt: 1 }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancel} disabled={loading}>
+            {t('Auth.MFA_TOTP_CANCEL_BUTTON')}
+          </Button>
+          <Button type="submit" variant="contained" disabled={loading || !password}>
+            {loading ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING') : t('Auth.MFA_VERIFY')}
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}

package/src/auth/apiClient.jsx

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { CSRF_URL } from "./authConfig";
+import { requestReauth } from "./reauth";
 
 const apiClient = axios.create({
   withCredentials: true,
@@ -130,7 +131,7 @@ function extractAuthSignal(data) {
 
 apiClient.interceptors.response.use(
   (response) => response,
-  (error) => {
+  async (error) => {
     const status = error?.response?.status ?? null;
     const data = error?.response?.data ?? {};
     const { code, i18nKey } = extractAuthSignal(data);
@@ -139,6 +140,24 @@ apiClient.interceptors.response.use(
     const isNotAuthenticated =
       code === "not_authenticated" || i18nKey === "auth.not_authenticated";
 
+    // Reauthentication gate: allauth returns 401 + flows[{id:"reauthenticate"}]
+    // when the session is stale before a sensitive operation (e.g. adding a passkey).
+    // Show the password-confirm modal, wait for it to complete, then retry once.
+    const flows = data?.data?.flows ?? data?.flows ?? [];
+    const needsReauth =
+      status === 401 &&
+      Array.isArray(flows) &&
+      flows.some((f) => f.id === "reauthenticate");
+
+    if (needsReauth && !error.config?._reauthRetried) {
+      try {
+        await requestReauth();
+        return apiClient({ ...error.config, _reauthRetried: true });
+      } catch {
+        return Promise.reject(error);
+      }
+    }
+
     // Per-request opt-out: bootstrap probes (e.g. fetchCurrentUser on app start)
     // expect to handle 401 silently and must not trigger a redirect-on-mount.
     // Carried as an axios config property, so it never travels to the backend

package/src/auth/authApi.jsx

@@ -433,6 +433,31 @@ export async function rejectRecoveryRequest(id, supportNote) {
   return res.data;
 }
 
+// S164: server-side session handoff. After the email-link redirect lands the
+// SPA on `/login#recovery=ok`, the LoginPage fetches the plaintext recovery
+// token from the user's server session (set by `recovery_complete_view`).
+// The endpoint pops the token on every read — a single shot per browser
+// navigation — so a navigated-away tab cannot reuse the entry.
+export async function fetchRecoverySessionToken() {
+  try {
+    const res = await apiClient.get('/api/auth/recovery/session-token/', {
+      // Visiting `/login` without a pending recovery session is the common
+      // case; the 404 it returns must not bubble up as a global "session
+      // expired" auth error in the app shell.
+      skipAuthRedirect: true,
+    });
+    return res?.data?.token || null;
+  } catch (err) {
+    if (err?.response?.status === 404) {
+      // No pending recovery in this session — treat as a non-error so the
+      // LoginPage can decide whether to surface a "link expired" message
+      // based on the `#recovery=` hash sentinel it already inspects.
+      return null;
+    }
+    throw normaliseApiError(err, 'Auth.RECOVERY_TOKEN_INVALID');
+  }
+}
+
 export async function loginWithRecoveryPassword(email, password, token) {
   try {
     // S50 (django-core-micha >=2.13.1): token wird im POST-Body übergeben,

package/src/auth/reauth.js

@@ -0,0 +1,47 @@
+// Promise broker for the reauthentication gate.
+//
+// When the response interceptor encounters a 401+reauthenticate, it calls
+// requestReauth() and awaits the returned promise. The ReauthModal resolves
+// or rejects that promise after the user submits (or cancels) the password
+// dialog. Concurrent 401s share the same pending promise so only one modal
+// ever appears.
+
+let _pendingResolve = null;
+let _pendingReject = null;
+let _reauthPromise = null;
+let _listeners = [];
+
+export function requestReauth() {
+  if (_reauthPromise) return _reauthPromise;
+  _reauthPromise = new Promise((resolve, reject) => {
+    _pendingResolve = resolve;
+    _pendingReject = reject;
+    _listeners.forEach(fn => fn(true));
+  });
+  return _reauthPromise;
+}
+
+export function resolveReauth() {
+  const resolve = _pendingResolve;
+  _pendingResolve = null;
+  _pendingReject = null;
+  _reauthPromise = null;
+  _listeners.forEach(fn => fn(false));
+  if (resolve) resolve();
+}
+
+export function rejectReauth(error) {
+  const reject = _pendingReject;
+  _pendingResolve = null;
+  _pendingReject = null;
+  _reauthPromise = null;
+  _listeners.forEach(fn => fn(false));
+  if (reject) reject(error || new Error('Reauthentication cancelled'));
+}
+
+export function subscribe(fn) {
+  _listeners = [..._listeners, fn];
+  return () => {
+    _listeners = _listeners.filter(l => l !== fn);
+  };
+}

package/src/i18n/authTranslations.ts

@@ -6,6 +6,36 @@ export const authTranslations = {
     "en": "Email address or password is incorrect.",
     "sw": "Barua pepe au nenosiri sio sahihi."
   },
+  "Auth.RECOVERY_TOKEN_INVALID": {
+    "de": "Der Recovery-Link ist ungültig oder wurde bereits verwendet.",
+    "fr": "Le lien de récupération est invalide ou a déjà été utilisé.",
+    "en": "The recovery link is invalid or has already been used.",
+    "sw": "Kiungo cha urejesho si halali au tayari kimetumika."
+  },
+  "Auth.RECOVERY_TOKEN_EXPIRED": {
+    "de": "Der Recovery-Link ist abgelaufen. Bitte fordere einen neuen an.",
+    "fr": "Le lien de récupération a expiré. Veuillez en demander un nouveau.",
+    "en": "The recovery link has expired. Please request a new one.",
+    "sw": "Kiungo cha urejesho kimeisha muda wake. Tafadhali omba kipya."
+  },
+  "Auth.RECOVERY_LINK_VALIDATING": {
+    "de": "Recovery-Link wird geprüft…",
+    "fr": "Vérification du lien de récupération…",
+    "en": "Validating recovery link…",
+    "sw": "Inathibitisha kiungo cha urejesho..."
+  },
+  "Auth.RECOVERY_LOGIN_WARNING": {
+    "de": "Recovery-Link validiert. Bitte gib dein Passwort ein.",
+    "fr": "Lien de récupération validé. Veuillez saisir votre mot de passe.",
+    "en": "Recovery link validated. Please enter your password.",
+    "sw": "Kiungo cha urejesho kimethibitishwa. Tafadhali weka nenosiri lako."
+  },
+  "Auth.TWO_FACTOR_REQUIRED_HINT": {
+    "de": "Diese App benötigt zwei Authentifizierungsfaktoren für vollen Zugriff.",
+    "fr": "Cette application requiert deux facteurs d’authentification pour un accès complet.",
+    "en": "This app requires two authentication factors for full access.",
+    "sw": "Programu hii inahitaji vipengele viwili vya uthibitisho kwa ufikiaji kamili."
+  },
   "Auth.PASSKEY_FAILED": {
     "de": "Die Anmeldung mit Passkey ist fehlgeschlagen.",
     "fr": "La connexion avec passkey a échoué.",
@@ -1805,5 +1835,23 @@ export const authTranslations = {
     "fr": "Politique de code d'accès enregistrée.",
     "en": "Access code policy saved.",
     "sw": "Sera ya msimbo wa ufikiaji imehifadhiwa."
+  },
+  "Auth.REAUTH_TITLE": {
+    "de": "Identität bestätigen",
+    "fr": "Confirmer votre identité",
+    "en": "Confirm your identity",
+    "sw": "Thibitisha utambulisho wako"
+  },
+  "Auth.REAUTH_SUBTITLE": {
+    "de": "Bitte gib dein Passwort ein, um fortzufahren.",
+    "fr": "Veuillez saisir votre mot de passe pour continuer.",
+    "en": "Please enter your password to continue.",
+    "sw": "Tafadhali ingiza nenosiri lako ili kuendelea."
+  },
+  "Auth.REAUTH_FAILED": {
+    "de": "Das Passwort ist falsch.",
+    "fr": "Le mot de passe est incorrect.",
+    "en": "The password is incorrect.",
+    "sw": "Nenosiri si sahihi."
   }
 };

package/src/pages/LoginPage.jsx

@@ -9,7 +9,11 @@ import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
 
 // API & Services (Clean Architecture)
-import { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
+import {
+  fetchRecoverySessionToken,
+  loginWithPassword,
+  loginWithRecoveryPassword,
+} from '../auth/authApi';
 import { loginWithPasskey, startSocialLogin } from '../utils/authService';
 
 // Components
@@ -27,16 +31,23 @@ export function LoginPage() {
   const [submitting, setSubmitting] = useState(false);
   const [errorKey, setErrorKey] = useState(null);
   const [mfaState, setMfaState] = useState(null); // { availableTypes: [...], identifier }
+  // S164: token never travels through the URL/fragment anymore. It is held
+  // in component state only, fetched from the server-side session handoff
+  // endpoint when the redirect lands the SPA here with `#recovery=ok`.
+  const [recoveryToken, setRecoveryToken] = useState(null);
+  const [recoveryFetching, setRecoveryFetching] = useState(false);
 
   // URL Params parsing
   const params = new URLSearchParams(location.search);
   const hashParams = new URLSearchParams(
     String(location.hash || "").startsWith("#") ? String(location.hash).slice(1) : String(location.hash || ""),
   );
-  const recoveryTokenRaw = hashParams.get('recovery') || params.get('recovery');
-  const recoveryToken = ['invalid', 'expired'].includes(String(recoveryTokenRaw || '').toLowerCase())
-    ? null
-    : recoveryTokenRaw;
+  // After S164 the hash carries only a status sentinel: `ok`, `invalid`, or
+  // `expired`. We also accept the same key from query params as a defensive
+  // fallback for proxies that strip fragments.
+  const recoveryStatus = String(
+    hashParams.get('recovery') || params.get('recovery') || '',
+  ).toLowerCase();
   // Backward-compatible fallback for legacy links using query parameters.
   const recoveryEmail = hashParams.get('email') || params.get('email') || '';
   const requestedNext = params.get('next');
@@ -51,8 +62,30 @@ export function LoginPage() {
       return '/account?tab=security&from=weak_login';
     }
 
-    if (requestedNext && requestedNext.startsWith('/')) {
-      return requestedNext;
+    // Same-origin check via URL parser — `startsWith('/')` alone allows
+    // bypasses like `/\evil.com`, which WHATWG-parses to `https://evil.com/`
+    // for special schemes. Resolve against the current origin and only accept
+    // results whose origin matches.
+    // Require leading-slash absolute path on the raw input (rejects relative
+    // inputs like `account/settings` and protocol-relative `//host` before
+    // they reach the URL parser, which would normalise both into a same-
+    // origin pathname starting with `/`).
+    if (
+      requestedNext &&
+      typeof requestedNext === 'string' &&
+      requestedNext.startsWith('/') &&
+      !requestedNext.startsWith('//')
+    ) {
+      try {
+        const parsed = new URL(requestedNext, window.location.origin);
+        // Catches WHATWG bypasses like `/\evil.com` that resolve to a
+        // different origin even though the raw input started with `/`.
+        if (parsed.origin === window.location.origin) {
+          return parsed.pathname + parsed.search + parsed.hash;
+        }
+      } catch {
+        // fall through to default redirect
+      }
     }
 
     return '/';
@@ -65,6 +98,77 @@ export function LoginPage() {
     }
   }, [location.search]);
 
+  // S164 handoff: on `#recovery=ok`, pull the plaintext token out of the
+  // server-side session (one-shot). On `invalid`/`expired`, or on any
+  // other non-empty value (legacy pre-S164 email links that carried the
+  // token directly in the hash), surface an invalid-link error so the
+  // user gets feedback instead of a silent login screen.
+  useEffect(() => {
+    if (!recoveryStatus) {
+      return;
+    }
+    // Strip the `recovery=…` sentinel from BOTH hash and query string so a
+    // bookmark or page refresh does not re-trigger this effect against an
+    // already-popped session entry (which would render a confusing
+    // "invalid" error to a user who is mid-login).
+    //
+    // We use `history.replaceState` rather than `navigate(..., {replace})`
+    // intentionally: react-router's `navigate` would trigger an immediate
+    // re-render with an updated `useLocation()`, which would cause this
+    // effect's cleanup to set `cancelled=true` and discard the in-flight
+    // recovery-token fetch result. `replaceState` only mutates the browser
+    // URL bar; `useLocation()` stays at `recovery=ok` for this render, the
+    // fetch resolves, and `recoveryToken` gets set normally. The trade-off
+    // is that `useLocation().hash` is stale for the page lifetime — fine
+    // because nothing else in this component reads it.
+    if (typeof window !== 'undefined' && window.history?.replaceState) {
+      const cleanParams = new URLSearchParams(window.location.search);
+      cleanParams.delete('recovery');
+      const cleanSearch = cleanParams.toString();
+      const cleanUrl =
+        window.location.pathname + (cleanSearch ? `?${cleanSearch}` : '');
+      window.history.replaceState(null, '', cleanUrl);
+    }
+    if (recoveryStatus === 'expired') {
+      setErrorKey('Auth.RECOVERY_TOKEN_EXPIRED');
+      setRecoveryToken(null);
+      return;
+    }
+    if (recoveryStatus !== 'ok') {
+      // Catches `invalid` and any unknown value (including legacy email
+      // links that carried the plaintext token before S164).
+      setErrorKey('Auth.RECOVERY_TOKEN_INVALID');
+      setRecoveryToken(null);
+      return;
+    }
+    let cancelled = false;
+    setRecoveryFetching(true);
+    fetchRecoverySessionToken()
+      .then((token) => {
+        if (cancelled) return;
+        if (!token) {
+          // Session entry missing or already consumed — treat as invalid.
+          setErrorKey('Auth.RECOVERY_TOKEN_INVALID');
+          setRecoveryToken(null);
+          return;
+        }
+        setRecoveryToken(token);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setErrorKey(err?.code || 'Auth.RECOVERY_TOKEN_INVALID');
+        setRecoveryToken(null);
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setRecoveryFetching(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [recoveryStatus]);
+
   useEffect(() => {
     if (loading || !user) return;
     navigate(getRedirectTarget(user), { replace: true });
@@ -185,13 +289,19 @@ export function LoginPage() {
         </Alert>
       )}
 
+      {recoveryFetching && !errorKey && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {t('Auth.RECOVERY_LINK_VALIDATING', 'Validating recovery link…')}
+        </Alert>
+      )}
+
       {recoveryToken && !errorKey && (
         <Alert severity="info" sx={{ mb: 2 }}>
           {t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.')}
         </Alert>
       )}
 
-      {twoFactorRequired && !recoveryToken && (
+      {twoFactorRequired && !recoveryToken && !recoveryFetching && (
         <Alert severity="info" sx={{ mb: 2 }}>
           {t('Auth.TWO_FACTOR_REQUIRED_HINT', 'This app requires two authentication factors for full access.')}
         </Alert>
@@ -207,7 +317,9 @@ export function LoginPage() {
           socialProviders={socialProviders}
           onPasskeyLogin={passkeyLoginEnabled ? handlePasskeyLoginInitial : null}
           onSignUp={signupEnabled ? () => navigate('/signup') : null}
-          disabled={submitting}
+          // Block submit while the handoff is in flight so the user does not
+          // race the recovery-token fetch with a normal password POST.
+          disabled={submitting || recoveryFetching}
           initialIdentifier={recoveryEmail}
         />
       )}

package/src/pages/PasswordInvitePage.jsx

@@ -70,8 +70,34 @@ export function PasswordInvitePage() {
           ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'
           : 'Auth.RESET_PASSWORD_SUCCESS_RESET',
       );
-      const target = nextPath
-        ? `/login?next=${encodeURIComponent(nextPath)}`
+      // Same-origin check via URL parser — startsWith('/') alone misses
+      // bypasses like `/\evil.com`, which WHATWG-parses to `https://evil.com/`
+      // for special schemes. The parser normalises backslashes and protocol-
+      // relative forms, so any cross-origin result is caught here.
+      let safeNextPath = null;
+      // Require leading-slash absolute path on the raw input (rejects
+      // relative inputs like `account/settings` and protocol-relative `//host`
+      // before they reach the URL parser, which would normalise both into a
+      // same-origin pathname starting with `/`).
+      if (
+        nextPath &&
+        typeof nextPath === 'string' &&
+        nextPath.startsWith('/') &&
+        !nextPath.startsWith('//')
+      ) {
+        try {
+          const parsed = new URL(nextPath, window.location.origin);
+          // Catches WHATWG bypasses like `/\evil.com` that resolve to a
+          // different origin even though the raw input started with `/`.
+          if (parsed.origin === window.location.origin) {
+            safeNextPath = parsed.pathname + parsed.search + parsed.hash;
+          }
+        } catch {
+          // fall through to default redirect
+        }
+      }
+      const target = safeNextPath
+        ? `/login?next=${encodeURIComponent(safeNextPath)}`
         : '/login';
       navigate(target);
     } catch (err) {