Simple Authentication

The simple tab supplies a minimal form: users enter a username (with a helper button to randomize it), initiate registration or authentication, and watch the inline status and spinner update through each step.

Behind the scenes, simpleRegister calls the server for credential creation options, normalizes requested extensions, invokes WebAuthn create, and posts the resulting credential back to /api/register/complete, reporting success, randomizing the username, and refreshing the saved credential cache. Similarly, simpleAuthenticate fetches assertion options, calls WebAuthn get, and submits the assertion to /api/authenticate/complete, mapping common WebAuthn errors to readable status messages.

Advanced Authentication

The advanced tab splits into registration and authentication sub-tabs, each containing expandable panels for user identity, authenticator selection, other options, and extensions with bilingual tooltips that explain every parameter choice. A dedicated JSON editor column mirrors the form state, offers expand, save, and reset controls, and keeps the textarea optimized for manual edits. On the right, a binary-format selector and saved credential panel provide quick format conversions and bulk deletion capabilities. When the page loads, helper scripts randomize IDs and challenges, seed large-blob and PRF fields, pull saved credentials, and wire input events so that any change updates the JSON representation automatically.

During advanced registration, the JSON editor’s payload is validated, optional extensions such as minPinLength are merged in, WebAuthn create is invoked, and the response is posted to /api/advanced/register/complete; success triggers modal details, status feedback, and a saved credential refresh, while failures surface likely incompatibilities (e.g., unsupported algorithms or extensions).

Advanced authentication mirrors that flow by validating request JSON, enforcing hint rules, performing WebAuthn get, and submitting the result to /api/advanced/authenticate/complete, again surfacing human-friendly outcomes or guidance when no suitable credential is found.

Saved Credentials and Credential Details

Saved credentials are fetched from /api/credentials, normalized with derived hex identifiers, and stored in client state before rendering the panel or updating JSON previews. Each list entry highlights discoverable, large-blob, or PQC traits, supports keyboard activation of the detail modal, and exposes a delete shortcut that targets the correct server record. Server-backed delete and clear-all handlers confirm intent, post to /api/deletepub or /api/credentials, and update both UI and status messaging when the operations complete.

The credential detail modal itself is defined in HTML but populated entirely by JavaScript at runtime. The renderer gathers user information, user handle encodings, and credential ID encodings; it evaluates stored attestation summaries and flags to describe discoverability, large blob support, minPinLength, attestation checks, authenticator data bits, signature counters, and any client extension outputs captured during registration. Public key information is annotated with COSE key type, ML-DSA parameter sets, and base64/base64url/hex encodings to aid PQC inspection.

When present, archived registration details are embedded for deeper comparison, and an AAGUID "Info" button appears for root-verified attestations; clicking it triggers an asynchronous lookup that can wait for metadata to load, surfaces status updates in the modal, and then closes the modal once the related authenticator entry is highlighted in the MDS table.

Decoder

The decoder tab enumerates all recognized WebAuthn payload formats—covering credential JSON, CBOR attestation objects, authenticator data, client data, PEM or DER certificates, general JSON, and CBOR blobs—and notes that binary inputs may be base64, base64url, or hex (with colon tolerance for hex). Submissions post the pasted payload to /api/decode, clear prior output, display progress, and then either render a structured summary with status chips and sectioned data or report parsing errors; users can also toggle a raw JSON textarea view for deeper inspection or hide it to focus on the summary.

FIDO MDS Explorer

The MDS tab features an update button, live entry counters, a sortable and filterable table, and modals dedicated to certificate decoding and authenticator detail browsing. When the page loads, any server-provided metadata snapshot is exposed through a hidden bootstrap element so the client can initialize without an extra network call.

The loadMdsData routine checks for forced reloads, applies bootstrap or cached payloads when available, and otherwise fetches the metadata BLOB with cache-aware options while handling missing files, clearing caches, and resetting UI state appropriately. Once metadata entries arrive, they are transformed, indexed by AAGUID, used to populate filter dropdowns, annotated with next-update deadlines, and reported through the status banner before column resizing is re-enabled.

Update requests toggle button states, post to /api/mds/update, interpret whether a reload is required, and either re-fetch the BLOB or inform the user when data is already current (highlighting overdue deadlines when necessary). When a credential detail’s AAGUID info button is pressed, the helper switches to the MDS tab, waits for metadata to load if needed, and then asks the explorer to locate and highlight the relevant authenticator; the highlighting routine normalizes AAGUIDs, resets filters, scrolls smoothly to the matching row, and returns whether the focus succeeded.

How Authenticator Detail Parameters Are Retrieved

Clicking an authenticator name stores the active entry (preferring the cached byAaguid map), scrolls the table row into view, and opens the authenticator modal for focused inspection. The modal content is generated by buildDetailContent, which reads the metadata statement to populate overview grids, description and legal headers, schema information, cryptographic strength, attestation key IDs, UPV values, algorithm families, attachment and matcher hints, display modes, and user-verification combinations, each rendered as labeled grids or chip lists for clarity.

Additional helpers append attestation certificate buttons that launch the certificate decoder modal, render authenticatorGetInfo fields (including numeric limits, supported versions, extensions, transports, algorithms, and option flags), and tabulate status reports with formatted dates and descriptors—all derived from the metadata entry returned by the MDS payload.