FingerprintJS Pro Svelte

FingerprintJS Pro Svelte is an easy-to-use Svelte library for FingerprintJS Pro that also works with svelte-kit. Example apps can be found in the examples folder. This package works with FingerprintJS Pro, it is not compatible with open-source FingerprintJS. You can learn more about the difference between FingerprintJS Pro and open-source FingerprintJS in the official documentation.

Installation

yarn add @fingerprintjs/fingerprintjs-pro-svelte

Or:

npm install @fingerprintjs/fingerprintjs-pro-svelte

Getting started

In order to identify visitors, you'll need a FingerprintJS Pro account (you can sign up for free). You can learn more about API keys in the official FingerprintJS Pro documentation.

1. Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.
   Set a region if you have chosen a non-global region during registration. Please refer to the Regions page.

<script>
  import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-svelte';
  import VisitorData from './VisitorData.svelte';

  const options = {
    loadOptions: {
      apiKey: '<YOUR_API_KEY>',
    },
  };
</script>

// App.svelte
<FpjsProvider {options}>
  <VisitorData />
</FpjsProvider>

2. Use the useVisitorData function in your svelte components to perform visitor identification and get the data.

<script>
  import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';

  // Set to true fo fetch data when component is mounted
  export let immediate = false;

  const { getData, data, isLoading, error } = useVisitorData({ extendedResult: true }, { immediate });

  $: {
    if ($data) {
      // Do something with visitorData here
    }
  }
</script>

// VisitorData.svelte
<div>
  <button id="get_data" on:click={() => getData()}> Get data</button>
  {#if $isLoading}
    <div id="loading">Loading...</div>
  {/if}
  {#if $error}
    <div id="error">Error occurred: {$error.message}</div>
  {/if}
  {#if $data}
    <div>
      <!--visitorData is available here!-->
    </div>
  {/if}
</div>

See the full code in example apps located in examples folder.

Caching strategy

When you use FingerprintJS Pro, you pay for each API call. Our best practices recommend using cache to reduce the API call rate. The Library uses the SessionStorage cache strategy by default.

:warning: WARNING If you use data from extendedResult, please pay additional attention to caching strategy.

Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need to get the current data, it is recommended to pass ignoreCache=true inside getData function.

Documentation

You can find API reference here.

This library uses FingerprintJS Pro agent internally. The documentation for the FingerprintJS Pro agent is available on https://dev.fingerprint.com/docs.