> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Generic JavaScript agent wrapper for SPAs

<Info>
  In Fingerprint v4, the caching functionality from this library has been incorporated directly into the [JavaScript agent](/reference/js-agent). If you are using v4, you no longer need this wrapper library. See the [migration guide](/docs/generic-js-agent-wrapper-for-spas#migration-guide) for details.
  This page applies to the Fingerprint JavaScript agent v3.
</Info>

The [`fingerprintjs-pro-spa` open-source library](https://github.com/fingerprintjs/fingerprintjs-pro-spa) is a framework-agnostic wrapper over the Fingerprint JavaScript agent with a built-in caching mechanism. It is used by our other frontend libraries under the hood.

<Tip>
  **SDKs tailor-made for your framework**

  If you are using [React (including Next, Preact)](https://github.com/fingerprintjs/react), [Vue](https://github.com/fingerprintjs/fingerprintjs-pro-vue), [Svelte](https://github.com/fingerprintjs/fingerprintjs-pro-svelte) or [Angular](https://github.com/fingerprintjs/fingerprintjs-pro-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.
</Tip>

## Installation

Install using your favorite package manager:

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprintjs/fingerprintjs-pro-spa
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprintjs/fingerprintjs-pro-spa
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprintjs/fingerprintjs-pro-spa
  ```
</CodeGroup>

## 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.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
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](/reference/v3/javascript-agent).

## Initialise the JavaScript 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.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// 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](/reference/v3/js-agent-get-function).\
The second parameter `ignoreCache` will make sure that a request to the API is made even if the data is present in the cache.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// 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](https://github.com/fingerprintjs/fingerprintjs-pro-spa).