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:
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom'
|
||||
import ProviderIcon from '../../components/ProviderIcon.jsx'
|
||||
import TrustLimitModal from '../../components/security/TrustLimitModal.jsx'
|
||||
import { useAuth } from '../../contexts/AuthContext.jsx'
|
||||
import { api } from '../../api/client.js'
|
||||
import PlayerShell, { honeypotStyle } from './PlayerShell.jsx'
|
||||
@@ -34,6 +35,12 @@ export default function PlayerLogin() {
|
||||
const [challenge, setChallenge] = useState('')
|
||||
const [code, setCode] = useState('')
|
||||
const [ssoTotp, setSsoTotp] = useState(false)
|
||||
const [trustDevice, setTrustDevice] = useState(false)
|
||||
const [useRecovery, setUseRecovery] = useState(false)
|
||||
// When trust was requested at login but the device cap is reached: show the
|
||||
// revoke-to-continue modal, then navigate on resolve. `pendingDest` holds where
|
||||
// to go once the prompt is dealt with.
|
||||
const [trustLimit, setTrustLimit] = useState(null) // { devices, dest }
|
||||
|
||||
const [providers, setProviders] = useState([])
|
||||
const [canRegister, setCanRegister] = useState(false)
|
||||
@@ -111,12 +118,25 @@ export default function PlayerLogin() {
|
||||
}
|
||||
navigate(returnTo || '/account', { replace: true })
|
||||
} else {
|
||||
const u = await loginTotp(challenge, code)
|
||||
navigate(destFor(u), { replace: true })
|
||||
const entered = code.trim()
|
||||
const data = await loginTotp(challenge, useRecovery ? '' : entered, {
|
||||
recoveryCode: useRecovery ? entered : undefined,
|
||||
trustDevice,
|
||||
})
|
||||
const to = destFor(data.user)
|
||||
// Trust was requested but the device cap is reached: the session is already
|
||||
// issued, so prompt to revoke one before trusting, then navigate.
|
||||
if (data.trustLimitReached) {
|
||||
setTrustLimit({ devices: data.devices || [], dest: to })
|
||||
setBusy(false)
|
||||
return
|
||||
}
|
||||
navigate(to, { replace: true })
|
||||
}
|
||||
} catch (err) {
|
||||
const expired = err.status === 401 && /expired/i.test(err.message)
|
||||
setError(expired ? 'Your verification session expired. Please sign in again.' : 'Invalid verification code.')
|
||||
const badRecovery = useRecovery ? 'That recovery code is not valid.' : 'Invalid verification code.'
|
||||
setError(expired ? 'Your verification session expired. Please sign in again.' : badRecovery)
|
||||
setBusy(false)
|
||||
if (expired) {
|
||||
setStage('creds')
|
||||
@@ -169,13 +189,42 @@ export default function PlayerLogin() {
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<label style={{ display: 'block', marginBottom: 22 }}>
|
||||
<span className="field-label">Authentication code</span>
|
||||
<input type="text" inputMode="numeric" autoComplete="one-time-code" autoFocus placeholder="6-digit code" value={code} onChange={(e) => setCode(e.target.value)} className="input" />
|
||||
<span className="sans" style={{ display: 'block', marginTop: 8, color: 'var(--dim)', fontSize: '0.76rem' }}>
|
||||
Enter the code from your authenticator app.
|
||||
</span>
|
||||
</label>
|
||||
<>
|
||||
<label style={{ display: 'block', marginBottom: 14 }}>
|
||||
<span className="field-label">{useRecovery ? 'Recovery code' : 'Authentication code'}</span>
|
||||
<input
|
||||
type="text"
|
||||
inputMode={useRecovery ? 'text' : 'numeric'}
|
||||
autoComplete="one-time-code"
|
||||
autoFocus
|
||||
placeholder={useRecovery ? 'xxxxx-xxxxx' : '6-digit code'}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
className="input"
|
||||
/>
|
||||
<span className="sans" style={{ display: 'block', marginTop: 8, color: 'var(--dim)', fontSize: '0.76rem' }}>
|
||||
{useRecovery ? 'Enter one of your saved single-use recovery codes.' : 'Enter the code from your authenticator app.'}
|
||||
</span>
|
||||
</label>
|
||||
{/* Trust-this-device only applies to real authenticator/recovery login,
|
||||
not the SSO 2FA bounce (which has no trust cookie flow here). */}
|
||||
{!ssoTotp && (
|
||||
<label className="sans" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, color: 'var(--muted)', fontSize: '0.84rem' }}>
|
||||
<input type="checkbox" checked={trustDevice} onChange={(e) => setTrustDevice(e.target.checked)} />
|
||||
Trust this device for 30 days (skip the code next time)
|
||||
</label>
|
||||
)}
|
||||
{!ssoTotp && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setUseRecovery((v) => !v); setCode('') }}
|
||||
className="sans"
|
||||
style={{ display: 'block', marginBottom: 22, background: 'none', border: 'none', padding: 0, color: 'var(--accent)', cursor: 'pointer', fontSize: '0.8rem' }}
|
||||
>
|
||||
{useRecovery ? 'Use an authenticator code instead' : 'Use a recovery code instead'}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{(error || (stage === 'creds' && ssoError)) && (
|
||||
@@ -208,6 +257,14 @@ export default function PlayerLogin() {
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{trustLimit && (
|
||||
<TrustLimitModal
|
||||
devices={trustLimit.devices}
|
||||
onTrusted={() => navigate(trustLimit.dest, { replace: true })}
|
||||
onCancel={() => navigate(trustLimit.dest, { replace: true })}
|
||||
/>
|
||||
)}
|
||||
</PlayerShell>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user