feat(auth): trusted devices, recovery codes, and admin MFA management
Add opt-in "Trust this device" so a browser/app skips the TOTP step (never the password) for 30 days, single-use bcrypt recovery codes as a 2FA-lockout fallback, and admin trusted-device/MFA-reset management — backend, web UI, OpenAPI spec, and tests. - Schema: trusted_devices (sha256 token hash, looked up by unique index) and recovery_codes (bcrypt, single-use). Both additive/idempotent. - Session service: trust-token mint/hash/resolve + cap helpers; new rg_trust httpOnly cookie (survives logout, revoked on untrust/password change/reset/ TOTP disable). JWTs stay stateless — trust is a server-side row, not a claim. - Web + mobile login accept a trusted-device token / recovery code; login/totp gains trustDevice + recoveryCode. Cap of 10/user with NO silent pruning — an over-cap trust returns 409/trustLimitReached and the client prompts to revoke. - Self-service /auth/me/trusted-devices* + recovery-codes*; admin /admin/users/:id/trusted-devices* + /mfa/reset. All actions audit-logged. - Client: "Trust this device" + recovery-code login options, one-time recovery code display, Trusted Devices + Recovery Codes account panels, a TOTP-styled revoke-to-continue cap modal, and admin per-user security controls. - OpenAPI regenerated; 33 new server tests (all suites green). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
124
client/src/components/security/TrustLimitModal.jsx
Normal file
124
client/src/components/security/TrustLimitModal.jsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react'
|
||||
import { api } from '../../api/client.js'
|
||||
|
||||
// Shown when a user tries to trust a device but is already at the trusted-device
|
||||
// cap. Styled like the TOTP entry flow (centered card on a dim overlay). The user
|
||||
// MUST revoke at least one existing device before they can continue — there is no
|
||||
// silent pruning — or they can cancel and leave the device untrusted.
|
||||
//
|
||||
// Props:
|
||||
// devices — the existing trusted devices (from the 409 / trustLimitReached payload)
|
||||
// onTrusted — called after the current device is successfully trusted (post-revoke)
|
||||
// onCancel — called when the user backs out without trusting this device
|
||||
export default function TrustLimitModal({ devices: initialDevices, onTrusted, onCancel }) {
|
||||
const [devices, setDevices] = useState(initialDevices || [])
|
||||
const [revokedAny, setRevokedAny] = useState(false)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
async function revoke(id) {
|
||||
setBusy(true)
|
||||
setError('')
|
||||
try {
|
||||
await api.revokeTrustedDevice(id)
|
||||
setDevices((list) => list.filter((d) => d.id !== id))
|
||||
setRevokedAny(true)
|
||||
} catch {
|
||||
setError('Could not revoke that device. Please try again.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function trustNow() {
|
||||
setBusy(true)
|
||||
setError('')
|
||||
try {
|
||||
await api.trustThisDevice()
|
||||
onTrusted?.()
|
||||
} catch (err) {
|
||||
// Still at the cap somehow (a race) — surface it and let them revoke more.
|
||||
if (err.status === 409 && err.body?.devices) {
|
||||
setDevices(err.body.devices)
|
||||
setError('Still at the limit — revoke another device.')
|
||||
} else {
|
||||
setError('Could not trust this device. Please try again.')
|
||||
}
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={overlay} role="dialog" aria-modal="true" aria-label="Trusted-device limit reached">
|
||||
<div style={card}>
|
||||
<h2 className="display" style={{ margin: '0 0 8px', fontSize: '1.15rem', color: 'var(--head)' }}>
|
||||
Trusted-device limit reached
|
||||
</h2>
|
||||
<p className="sans" style={{ margin: '0 0 16px', color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
|
||||
You can trust up to {Math.max(devices.length, 1)} devices. Revoke one below to make room, then
|
||||
continue — or cancel to leave this device untrusted.
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16, maxHeight: 240, overflowY: 'auto' }}>
|
||||
{devices.map((d) => (
|
||||
<div key={d.id} style={row}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div className="sans" style={{ color: 'var(--head)', fontSize: '0.88rem' }}>
|
||||
{d.deviceName || d.platform || 'Device'}
|
||||
</div>
|
||||
<div className="sans dim" style={{ fontSize: '0.74rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{d.userAgent || '—'}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => revoke(d.id)} disabled={busy} className="pill" style={{ color: '#d98b84', borderColor: '#d98b84' }}>
|
||||
Revoke
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{devices.length === 0 && (
|
||||
<p className="sans dim" style={{ fontSize: '0.84rem', margin: 0 }}>All devices revoked. You can trust this one now.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.84rem' }}>{error}</p>}
|
||||
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
||||
<button onClick={trustNow} disabled={busy || !revokedAny} className="btn btn-primary btn-sq">
|
||||
{busy ? 'Working…' : 'Trust this device'}
|
||||
</button>
|
||||
<button onClick={onCancel} disabled={busy} className="pill">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const overlay = {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
zIndex: 1000,
|
||||
}
|
||||
const card = {
|
||||
width: '100%',
|
||||
maxWidth: 460,
|
||||
background: 'var(--panel, #1a1a1f)',
|
||||
border: '1px solid var(--line)',
|
||||
borderRadius: 12,
|
||||
padding: 24,
|
||||
}
|
||||
const row = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
padding: '10px 14px',
|
||||
border: '1px solid var(--line)',
|
||||
borderRadius: 8,
|
||||
}
|
||||
Reference in New Issue
Block a user