Fingerprint Pro SPA

This library was designed to be used in SPA framework wrappers for the Fingerprint Pro JavaScript Agent. It also has several built-in caching mechanisms that are optimized according to the official recommendations.

If you just need the Fingerprint Pro JS agent, you can use it directly, without this wrapper. If you're looking for a framework-specific integration, we have dedicated SDKs for React (including Next, Preact), Vue, Svelte and Angular.

This SDK works with Fingerprint Pro, it will not work with the open-source FingerprintJS version! Learn more about the difference between Pro and OSS. If you'd like to have a similar SPA wrapper for the OSS version of FingerprintJS, consider raising an issue in our issue tracker.

Table of Contents

• Documentation
• Installation
• Getting Started
• Support + Feedback
• License

Documentation

This library uses Fingerprint Pro under the hood, you can view the document for the core technology.

• To learn more about Fingerprint Pro read our product documentation.
• To learn more about this SDK, there is a Typedoc-generated SDK Reference available.

Installation

Using npm:

npm install @fingerprintjs/fingerprintjs-pro-spa

Using yarn:

yarn add @fingerprintjs/fingerprintjs-pro-spa

Getting Started

Fingerprint Pro public API key

In order to identify visitors you'll need a Fingerprint Pro account (you can sign up for free).

• Go to Fingerprint Dashboard
• Open the API keys page from the sidebar
• Find your Public API key

Creating the client

Create a FpjsClient instance before rendering or initializing your application. You should only have one instance of the client.

import { FpjsClient } 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: "your-fpjs-public-api-key" // insert your public api key from the dashboard here
  }
});

You can learn more about different load options here: https://dev.fingerprint.com/docs/js-agent#agent-initialization

1 - Init the JS agent

Before you start making identification requests to the Fingerprint Pro 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()
})

2 - Calling an 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 be made even if the data is present in 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
  checkIfFingerprintIsFraudulent(visitorData.visitorId) // this method is just an example, this SDK doesn't actually supply it
})

Caching

The SDK can be configured to cache the visitor data in memory, in session storage, or in local storage. The default is in session storage. This setting can be controlled using the cacheLocation option when creating the Fpjs client.

To use the session storage mode, no additional options need are required as this is the default setting. To configure the SDK to cache data using local storage, set cacheLocation as follows:

const fpjsClient = new FpjsClient({
  loadOptions: {
    apiKey: "your-fpjs-public-api-key"
  },
  cacheLocation: 'localstorage'
});

Or if you are using TypeScript:

const fpjsClient = new FpjsClient({
  loadOptions: {
    apiKey: "your-fpjs-public-api-key"
  },
  cacheLocation: CacheLocation.LocalStorage
});

Cache keys are formed based on the combination of the GetOptions, so, for example, API responses for calls with extendedResult: true and extendedResult: false will be stored independently.

Creating a custom cache

The SDK can be configured to use a custom cache store that is implemented by your application. This is useful if you are using this SDK in an environment where a different data store is more convenient, such as a hybrid mobile app.

To do this, provide an object to the cache property of the SDK configuration.

The object should implement the following functions. Note that all of these functions can optionally return a Promise or a static value.

Note: The cache property takes precedence over the cacheLocation property if both are set. A warning is displayed in the console if this scenario occurs.

We also export the internal InMemoryCache, LocalStorageCache, SessionStorageCache, and CacheStub implementations, so you can wrap your custom cache around these implementations if you wish.

Cache time

Fpjs client receives cacheTimeInSeconds as one of the options. To ensure high identification accuracy we recommend that the visitor data is not cached for longer than 24 hours. For that reason, if you pass a value higher than 86400 (60 * 60 * 24), the FpjsClient constructor will throw an error.

Support + Feedback

For support or to provide feedback, please raise an issue on our issue tracker.

License

This project is licensed under the MIT license. See the LICENSE file for more information.