Build a React Fingerprint Capture Interface

A fingerprint interface should give the customer a clear capture outcome while keeping biometric data out of the screen, console and analytics. The application also needs to separate capture from the identity service’s verification decision. A successful device operation alone does not establish a match.

Confirm the supported scanner, runtime version and API contract through the SDK developer entry point. Keep the runtime within the approved deployment boundary and apply the configured authentication and browser-origin controls. Do not expose a device-control endpoint publicly to make the interface reachable.

Keep the React component focused on state

The following UI example accepts an application-owned adapter. It does not define an SDK endpoint or send a real capture request. Implement the adapter against the verified device and identity-service contracts, and let it return only the result the screen needs. Cancellation must also be handled by that adapter; cancelling a browser operation does not automatically stop a physical device.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { useEffect, useRef, useState } from "react";

type Outcome = "verified" | "retry" | "assistance";
type Props = {
  captureAndVerify: (signal: AbortSignal) => Promise<Outcome>;
};

export function FingerprintStep({ captureAndVerify }: Props) {
  const active = useRef<AbortController | null>(null);
  const [status, setStatus] = useState("Ready to start");
  const [busy, setBusy] = useState(false);

  useEffect(() => () => active.current?.abort(), []);

  async function start() {
    if (active.current) return;
    const request = new AbortController();
    active.current = request;
    setBusy(true);
    setStatus("Follow the scanner instructions");
    try {
      const outcome = await captureAndVerify(request.signal);
      if (!request.signal.aborted) {
        setStatus({
          verified: "Verification completed",
          retry: "Please try again",
          assistance: "Please ask for assistance",
        }[outcome]);
      }
    } catch {
      if (!request.signal.aborted) setStatus("Please ask for assistance");
    } finally {
      if (active.current === request) active.current = null;
      setBusy(false);
    }
  }

  function cancel() {
    active.current?.abort();
    setStatus("Cancelling capture");
  }

  return <section aria-label="Fingerprint verification">
    <p role="status">{status}</p>
    <button onClick={start} disabled={busy}>Start capture</button>
    <button onClick={cancel} disabled={!busy}>Cancel</button>
  </section>;
}

Complete the application and device lifecycle

The adapter must associate the operation with the current customer session, reject late results after cancellation and release or cancel device work through the supported runtime mechanism. Prevent a new capture while the previous physical operation is unresolved. Unmount this step when the customer session ends, and clear any sensitive state held outside the component.

Do not put fingerprint templates or images in console messages, URLs, browser storage or analytics. Transfer them only through the approved verification path and apply the customer’s access and retention policy. Diagnostic events can record an operation reference and a non-sensitive outcome without copying the biometric payload.

Test with controlled data and an authorised scanner before deployment. Include disconnects, capture timeout, cancellation, repeated button presses and the next customer’s session. The identity workflow guide explains the responsibilities beyond the UI.