96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { useEffect, useRef } from "react";
|
||
|
||
export function HelpDialog({
|
||
open,
|
||
onClose,
|
||
}: {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
}) {
|
||
const ref = useRef<HTMLDialogElement>(null);
|
||
useEffect(() => {
|
||
const dialog = ref.current;
|
||
if (!dialog) return;
|
||
if (open && !dialog.open) dialog.showModal();
|
||
if (!open && dialog.open) dialog.close();
|
||
}, [open]);
|
||
return (
|
||
<dialog ref={ref} className="tool-dialog" onClose={onClose}>
|
||
<div className="dialog-heading">
|
||
<div>
|
||
<p className="eyebrow">Local authentication laboratory</p>
|
||
<h2>OTP & Passkey Tools help</h2>
|
||
</div>
|
||
<button
|
||
className="icon-button"
|
||
type="button"
|
||
aria-label="Close help"
|
||
onClick={onClose}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div className="dialog-body prose">
|
||
<h3>Handle secrets deliberately</h3>
|
||
<p>
|
||
OTP seeds are equivalent to a second-factor credential. This app keeps
|
||
them in memory only, masks them by default and clears them on reload.
|
||
Plain URI/CSV exports are explicit and unencrypted. The encrypted
|
||
backup option authenticates its contents with AES-GCM and a password;
|
||
it is still not a recovery service or persistent browser vault.
|
||
</p>
|
||
<h3>OTP clock and counters</h3>
|
||
<p>
|
||
TOTP is computed from this device’s clock. A rejected valid-looking
|
||
value commonly means clock drift, a different T0/period, or the wrong
|
||
hash/digit profile. The timeline and drift finder are diagnostics;
|
||
HOTP counters must remain synchronized.
|
||
</p>
|
||
<p>
|
||
Migration QR codes and plaintext exports reveal OTP seeds. Aegis and
|
||
PSKC password decryption happens locally. Collection snapshots omit
|
||
seeds but include stable fingerprints that can correlate accounts.
|
||
Camera scanning starts only after your click and stops automatically.
|
||
</p>
|
||
<h3>Passkey inspection</h3>
|
||
<p>
|
||
Inspection is offline. Verification is layered: client-data
|
||
expectations, RP ID hash, authenticator flags, counter and
|
||
cryptographic signature are reported separately. Attestation signature
|
||
validity, metadata status and trust are distinct results. Metadata is
|
||
imported explicitly and never fetched silently.
|
||
</p>
|
||
<h3>Live ceremonies</h3>
|
||
<p>
|
||
WebAuthn credentials belong to an exact RP ID. Live tests are enabled
|
||
only on localhost or the dedicated authentication hostname. The shared
|
||
Toolbox origin remains inspect-only so unrelated apps do not share its
|
||
credential namespace.
|
||
</p>
|
||
<p>
|
||
Extension results are browser/authenticator capabilities, not security
|
||
guarantees. Redacted ceremony traces retain signed evidence for replay
|
||
and may therefore still contain correlatable identifiers.
|
||
</p>
|
||
<p>
|
||
No authentication material, file, telemetry or request leaves this
|
||
tab.
|
||
</p>
|
||
</div>
|
||
<div className="dialog-actions">
|
||
<a
|
||
className="secondary-button"
|
||
href="https://git.add-ideas.de/lotobo/auth-tools"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
Source and issues
|
||
</a>
|
||
<button className="primary-button" type="button" onClick={onClose}>
|
||
Done
|
||
</button>
|
||
</div>
|
||
</dialog>
|
||
);
|
||
}
|