Generic JS Agent Wrapper for SPAs

The fingerprintjs-pro-spa open-source library is a framework-agnostic wrapper over the Fingerprint JS Agent with a built-in caching mechanism. It is used by our other frontend libraries under the hood.

👍

SDKs tailor-made for your framework

If you are using React (including Next, Preact), Vue, Svelte or Angular, we recommend using the SDK made for your specific framework.

If you are using vanilla JavaScript, a different framework, or you simply prefer a lower-level library, feel free to use fingerprintjs-pro-spa to integrate Fingerprint into your website.

Installation

Install using your favorite package manager:

npm install @fingerprintjs/fingerprintjs-pro-spa

yarn add @fingerprintjs/fingerprintjs-pro-spa

Create the client

Create a FpjsClient instance before rendering or initializing your application. You should only have one instance of the client. You need to specify your public API key and other configuration options based on your chosen region and active integration.

import { 
  FpjsClient,
  FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-spa';

// It can receive multiple parameters but the only required one is `loadOptions`, 
// which contains the public API key
const fpjsClient = new FpjsClient({
  loadOptions: {
    apiKey: "<PUBLIC_API_KEY>",
    endpoint: [
      // "https://metrics.yourwebsite.com", 
      FingerprintJSPro.defaultEndpoint
    ],
    scriptUrlPattern: [
      // "https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js",
      FingerprintJSPro.defaultScriptUrlPattern
    ],
    // region: "eu"
  }
});

You can learn more about different load options in the JavaScript agent reference.

Initialise the JS agent

Before you start making identification requests to the Fingerprint API, you need to initialize the Agent
to allow it to gather browser signals.
Make sure the initialization has been completed before calling the getVisitorData method to avoid errors.

// with async/await
await fpjsClient.init()
const visitorData = await fpjsClient.getVisitorData()

// with promises
const visitorData = fpjsClient.init().then(() => {
  return fpjsClient.getVisitorData()
})

Call the Fingerprint API

The getVisitorData method returns visitor identification data based on the request options.
The second parameter ignoreCache will make sure that a request to the API is made even if the data is present in the cache.

// with async/await
const visitorData = await fpjsClient.getVisitorData({ extendedResult: true })

// with promises
const visitorData = fpjsClient.getVisitorData({ extendedResult: true }).then((visitorData) => {
  // use visitor data in your fraud prevention logic
  console.log(visitorData.visitorId);
});

Full documentation and source code are available on GitHub.