← FingerprintCONTENT HISTORY

Update to Fingerprint

Snapshot Sep 30, 2026 · 23:11 UTC · version 1.0.0

Collection source: not recorded for this historical snapshot.

WHAT CHANGED · RULE-BASED ANALYSIS

First saved snapshot

No earlier snapshot is available to establish a change.

Compare saved observations

Download comparison JSON
Full technical diff · 0 changed fields
Full snapshot data
{
  "name": "fingerprint-react",
  "description": "Integrate Fingerprint device identification into a React (or Preact) app — initialize the agent and get the visitor's visitor_id and event_id.",
  "included_files": [
    {
      "relative_path": "skill.json",
      "size_in_bytes": 222
    },
    {
      "relative_path": "snippets/provider.jsx",
      "size_in_bytes": 456
    },
    {
      "relative_path": "snippets/use-visitor-data.jsx",
      "size_in_bytes": 622
    }
  ],
  "skill_md_contents": "---\nname: fingerprint-react\ndescription: Integrate Fingerprint device identification into a React (or Preact) app — initialize the agent and get the visitor's visitor_id and event_id.\n---\n\n# Fingerprint — React\n\nIntegrate Fingerprint into a React app to identify visitors: initialize the agent once at startup,\nthen ask it for the visitor's `visitor_id` and a single-use `event_id` wherever you need it (on\nload, or on an action like login or checkout).\n\n> Docs: https://docs.fingerprint.com/docs/react · JS Agent v4: https://docs.fingerprint.com/reference/js-agent-v4\n\n## Package\n`@fingerprint/react` — install the latest version. (Preact uses the same package. For plain HTML\nor an unsupported framework, use `fingerprint-javascript` and `@fingerprint/agent` instead.)\n\n## Env var\n- `FINGERPRINT_PUBLIC_API_KEY` — the public key, safe to ship to the browser.\n\n> Bundlers only expose prefixed vars to client code — map the key to the bundler's convention:\n> - Vite: `VITE_FINGERPRINT_PUBLIC_API_KEY` → `import.meta.env.VITE_...`\n> - Create React App: `REACT_APP_FINGERPRINT_PUBLIC_API_KEY` → `process.env.REACT_APP_...`\n> Never expose `FINGERPRINT_SECRET_API_KEY` to the frontend.\n\n## Steps\n\n1. **Install** `@fingerprint/react`. On pnpm, the package's `postinstall` may be blocked with\n   `ERR_PNPM_IGNORED_BUILDS` — run `pnpm approve-builds`, approve `@fingerprint/react`, then\n   install again. Keep pnpm's build-script protection on.\n\n2. **Initialize once at the app root.** Wrap the app in `FingerprintProvider`, passing the public\n   key and region (`us` | `eu` | `ap`, matching the workspace). Client-side only. See\n   `snippets/provider.jsx`.\n\n3. **Get the identification where you need it.** Use `useVisitorData`. For identify-on-demand pass\n   `{ immediate: false }` and call `getData()` on the action you care about; it returns\n   `{ visitor_id, event_id, ... }`. See `snippets/use-visitor-data.jsx`.\n\n4. **Verify it works.** Disable your ad blocker, run the dev server, trigger the call, and confirm\n   a `visitor_id` is logged in the browser console (or that the event appears on the dashboard\n   Events page).\n\n## Notes\n- Region must match the workspace (`us` | `eu` | `ap`).\n- Initialize once at the root; don't re-instantiate per component. Don't block the UI on\n  identification — handle the hook's `isLoading` / error states.\n- **Production:** protect the agent from ad blockers with a custom subdomain or proxy —\n  https://docs.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers.\n- Don't use legacy `@fingerprintjs/fingerprintjs-pro`, `FingerprintJS.load()`, or `scriptUrlPattern`.\n"
}

SHA-256: e542e5a28b280e02d89dfceae2ab11e461520443827932263ae6a4b4b0eee728