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

<Warning>
  **Deprecated in v4**

  In Fingerprint v4, the caching functionality from `@fingerprintjs/fingerprintjs-pro-spa` has been incorporated directly into the [JavaScript agent](/reference/js-agent). You no longer need this wrapper library.

  If you are using Fingerprint v3, see the [v3 documentation](/docs/v3/generic-js-agent-wrapper-for-spas).
</Warning>

## Migration guide

Follow these steps to migrate from `@fingerprintjs/fingerprintjs-pro-spa` to the v4 JavaScript agent.

### 1. Update dependencies

Remove the SPA library and install the v4 agent:

```shell theme={"theme":"github-dark-dimmed"}
npm uninstall @fingerprintjs/fingerprintjs-pro-spa
npm install @fingerprint/agent
```

### 2. Update imports and initialization

The v4 agent uses `Fingerprint.start()` instead of creating a `FpjsClient` instance and calling `init()`.

```js SPA library to v4 agent theme={"theme":"github-dark-dimmed"}
import { FpjsClient, FingerprintJSPro } from "@fingerprintjs/fingerprintjs-pro-spa"; // [!code --]
import * as Fingerprint from "@fingerprint/agent"; // [!code ++]

const fpjsClient = new FpjsClient({
  // [!code --]
  loadOptions: {
    // [!code --]
    apiKey: "PUBLIC_API_KEY", // [!code --]
    endpoint: ["https://metrics.yourwebsite.com", FingerprintJSPro.defaultEndpoint], // [!code --]
    region: "eu", // [!code --]
  }, // [!code --]
  cacheLocation: "sessionStorage", // [!code --]
  cacheTimeInSeconds: 3600, // [!code --]
}); // [!code --]
await fpjsClient.init(); // [!code --]
const agent = Fingerprint.start({
  // [!code ++]
  apiKey: "PUBLIC_API_KEY", // [!code ++]
  endpoints: "https://metrics.yourwebsite.com", // [!code ++]
  region: "eu", // [!code ++]
  cache: {
    // [!code ++]
    storage: "sessionStorage", // [!code ++]
    duration: 3600, // [!code ++]
  }, // [!code ++]
}); // [!code ++]
```

### 3. Update identification calls

Replace `getVisitorData()` with `get()`.

```js getVisitorData to get theme={"theme":"github-dark-dimmed"}
const visitorData = await fpjsClient.getVisitorData(); // [!code --]
console.log(visitorData.visitorId); // [!code --]
const result = await agent.get(); // [!code ++]
console.log(result.visitor_id); // [!code ++]
```

<Info>
  The v4 agent no longer supports `extendedResult`. Extended data like IP address and geolocation
  should be retrieved server-side using the [Server API](/reference/server-api) or [Sealed Client
  Results](/docs/sealed-client-results).
</Info>

### 4. Update cache configuration

The cache options have been renamed:

| SPA library                       | v4 agent                                                                        |
| --------------------------------- | ------------------------------------------------------------------------------- |
| `cacheLocation: 'sessionStorage'` | `cache: { storage: 'sessionStorage', ... }`                                     |
| `cacheLocation: 'localStorage'`   | `cache: { storage: 'localStorage', ... }`                                       |
| `cacheLocation: 'memory'`         | `cache: { storage: 'agent', ... }`                                              |
| `cacheLocation: 'nocache'`        | Omit the `cache` option entirely                                                |
| `cacheTimeInSeconds: 3600`        | `cache: { duration: 3600, ... }` or `cache: { duration: 'optimize-cost', ... }` |

The v4 agent also provides two convenient duration presets:

* `'optimize-cost'` — caches for 1 hour
* `'aggressive'` — caches for 12 hours (not recommended for fraud prevention)

### 5. Check for cached results

The `cacheHit` property is now `cache_hit` in the response:

```js cacheHit to cache_hit theme={"theme":"github-dark-dimmed"}
const { cacheHit, ...visitorData } = await fpjsClient.getVisitorData(); // [!code --]
if (cacheHit) {
  // [!code --]
  console.log("Result was from cache"); // [!code --]
} // [!code --]
const result = await agent.get(); // [!code ++]
if (result.cache_hit) {
  // [!code ++]
  console.log("Result was from cache"); // [!code ++]
} // [!code ++]
```

For more details about the v4 JavaScript agent, see the [JavaScript agent reference](/reference/js-agent).