@fingerprintjs/fingerprintjs-pro-svelte

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

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

FingerprintJS Pro uses API calls as the basis for billing. Our best practices strongly recommend using cache to optimise API calls rate. The Library uses the SessionStorage cache strategy by default.

Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need exact 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.