New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@fingerprintjs/fingerprintjs-pro-spa

Package Overview
Dependencies
Maintainers
2
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fingerprintjs/fingerprintjs-pro-spa - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

62

dist/fp-pro-spa.cjs.js
/**
* FingerprintJS Pro SPA v1.2.2 - Copyright (c) FingerprintJS, Inc, 2023 (https://fingerprint.com)
* FingerprintJS Pro SPA v1.3.0 - Copyright (c) FingerprintJS, Inc, 2023 (https://fingerprint.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.

@@ -253,3 +253,3 @@ */

var version = "1.2.2";
var version = "1.3.0";

@@ -295,3 +295,3 @@ const cacheLocationBuilders = {

this.agentPromise = null;
this.customAgent = options.customAgent;
this.customAgent = options === null || options === void 0 ? void 0 : options.customAgent;
this.agent = {

@@ -302,12 +302,12 @@ get: () => {

};
this.loadOptions = Object.assign(Object.assign({}, options.loadOptions), { integrationInfo: [...(options.loadOptions.integrationInfo || []), `fingerprintjs-pro-spa/${version}`] });
if (options.cache && options.cacheLocation) {
this.loadOptions = options === null || options === void 0 ? void 0 : options.loadOptions;
if ((options === null || options === void 0 ? void 0 : options.cache) && (options === null || options === void 0 ? void 0 : options.cacheLocation)) {
console.warn('Both `cache` and `cacheLocation` options have been specified in the FpjsClient configuration; ignoring `cacheLocation` and using `cache`.');
}
let cache;
if (options.cache) {
if (options === null || options === void 0 ? void 0 : options.cache) {
cache = options.cache;
}
else {
this.cacheLocation = options.cacheLocation || exports.CacheLocation.SessionStorage;
this.cacheLocation = (options === null || options === void 0 ? void 0 : options.cacheLocation) || exports.CacheLocation.SessionStorage;
if (!cacheFactory(this.cacheLocation)) {

@@ -319,8 +319,8 @@ throw new Error(`Invalid cache location "${this.cacheLocation}"`);

}
cache = cacheFactory(this.cacheLocation)(options.cachePrefix);
cache = cacheFactory(this.cacheLocation)(options === null || options === void 0 ? void 0 : options.cachePrefix);
}
if (options.cacheTimeInSeconds && options.cacheTimeInSeconds > MAX_CACHE_LIFE) {
if ((options === null || options === void 0 ? void 0 : options.cacheTimeInSeconds) && options.cacheTimeInSeconds > MAX_CACHE_LIFE) {
throw new Error(`Cache time cannot exceed 86400 seconds (24 hours)`);
}
const cacheTime = (_a = options.cacheTimeInSeconds) !== null && _a !== void 0 ? _a : DEFAULT_CACHE_LIFE;
const cacheTime = (_a = options === null || options === void 0 ? void 0 : options.cacheTimeInSeconds) !== null && _a !== void 0 ? _a : DEFAULT_CACHE_LIFE;
this.cacheManager = new CacheManager(cache, cacheTime);

@@ -331,10 +331,20 @@ }

* [https://dev.fingerprint.com/docs/js-agent#agent-initialization]
*
* @param passedLoadOptions Additional load options to be passed to the agent, they will be merged with load options provided in the constructor.
*/
init() {
var _a;
init(passedLoadOptions) {
var _a, _b;
return tslib.__awaiter(this, void 0, void 0, function* () {
if (!this.loadOptions && !passedLoadOptions) {
throw new TypeError('No load options provided');
}
const loadOptions = Object.assign(Object.assign(Object.assign({}, this.loadOptions), passedLoadOptions), { integrationInfo: [
...(((_a = this.loadOptions) === null || _a === void 0 ? void 0 : _a.integrationInfo) || []),
...((passedLoadOptions === null || passedLoadOptions === void 0 ? void 0 : passedLoadOptions.integrationInfo) || []),
`fingerprintjs-pro-spa/${version}`,
] });
if (!this.agentPromise) {
const agentLoader = (_a = this.customAgent) !== null && _a !== void 0 ? _a : FingerprintJSPro__namespace;
const agentLoader = (_b = this.customAgent) !== null && _b !== void 0 ? _b : FingerprintJSPro__namespace;
this.agentPromise = agentLoader
.load(this.loadOptions)
.load(loadOptions)
.then((agent) => {

@@ -373,2 +383,20 @@ this.agent = agent;

/**
* Returns cached visitor data based on the request options, or undefined if the data is not present in cache
* */
getVisitorDataFromCache(options = {}) {
return tslib.__awaiter(this, void 0, void 0, function* () {
const cacheKey = FpjsClient.makeCacheKey(options);
const cacheResult = yield this.cacheManager.get(cacheKey);
return cacheResult ? Object.assign(Object.assign({}, cacheResult), { cacheHit: true }) : undefined;
});
}
/**
* Checks if request matching given options is present in cache
* */
isInCache(options = {}) {
return tslib.__awaiter(this, void 0, void 0, function* () {
return Boolean(yield this.getVisitorDataFromCache(options));
});
}
/**
* Clears visitor data from cache regardless of the cache implementation

@@ -393,8 +421,8 @@ */

if (cacheResult) {
return cacheResult;
return Object.assign(Object.assign({}, cacheResult), { cacheHit: true });
}
}
const agentResult = yield this.agent.get(options);
const agentResult = (yield this.agent.get(options));
yield this.cacheManager.set(key, agentResult);
return agentResult;
return Object.assign(Object.assign({}, agentResult), { cacheHit: false });
});

@@ -401,0 +429,0 @@ }

/**
* FingerprintJS Pro SPA v1.2.2 - Copyright (c) FingerprintJS, Inc, 2023 (https://fingerprint.com)
* FingerprintJS Pro SPA v1.3.0 - Copyright (c) FingerprintJS, Inc, 2023 (https://fingerprint.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.

@@ -7,6 +7,9 @@ */

import * as FingerprintJS from '@fingerprintjs/fingerprintjs-pro';
import { GetOptions as GetOptions$1 } from '@fingerprintjs/fingerprintjs-pro';
import { GetOptions as GetOptions$1, LoadOptions as LoadOptions$1 } from '@fingerprintjs/fingerprintjs-pro';
export { FingerprintJS as FingerprintJSPro };
type VisitorData<TExtended extends boolean = false> = TExtended extends false ? FingerprintJS.GetResult : FingerprintJS.ExtendedGetResult;
type FpjsSpaResponse<T> = T & {
cacheHit: boolean;
};
declare enum CacheLocation {

@@ -129,4 +132,5 @@ Memory = "memory",

}
interface FpjsSpaOptions extends FpjsClientOptions {
interface FpjsSpaOptions extends Omit<FpjsClientOptions, 'loadOptions'> {
customAgent?: CustomAgent;
loadOptions?: FpjsClientOptions['loadOptions'];
}

@@ -138,3 +142,3 @@ /**

private cacheManager;
private loadOptions;
private readonly loadOptions?;
private agent;

@@ -145,8 +149,10 @@ private agentPromise;

private inFlightRequests;
constructor(options: FpjsSpaOptions);
constructor(options?: FpjsSpaOptions);
/**
* Loads FPJS JS agent with certain settings and stores the instance in memory
* [https://dev.fingerprint.com/docs/js-agent#agent-initialization]
*
* @param passedLoadOptions Additional load options to be passed to the agent, they will be merged with load options provided in the constructor.
*/
init(): Promise<FingerprintJS.Agent>;
init(passedLoadOptions?: Partial<LoadOptions$1>): Promise<FingerprintJS.Agent>;
/**

@@ -159,4 +165,12 @@ * Returns visitor identification data based on the request options

*/
getVisitorData<TExtended extends boolean>(options?: GetOptions$1<TExtended>, ignoreCache?: boolean): Promise<VisitorData<TExtended>>;
getVisitorData<TExtended extends boolean>(options?: GetOptions$1<TExtended>, ignoreCache?: boolean): Promise<FpjsSpaResponse<VisitorData<TExtended>>>;
/**
* Returns cached visitor data based on the request options, or undefined if the data is not present in cache
* */
getVisitorDataFromCache<TExtended extends boolean>(options?: GetOptions$1<TExtended>): Promise<FpjsSpaResponse<VisitorData<TExtended>> | undefined>;
/**
* Checks if request matching given options is present in cache
* */
isInCache(options?: GetOptions$1<boolean>): Promise<boolean>;
/**
* Clears visitor data from cache regardless of the cache implementation

@@ -226,2 +240,2 @@ */

export { Agent, CacheLocation, CacheStub, Cacheable, CustomAgent, ExtendedGetResult, FpjsClient, FpjsClientOptions, FpjsSpaOptions, GetOptions, GetResult, ICache, InMemoryCache, LoadOptions, LocalStorageCache, SessionStorageCache, VisitorData, defaultEndpoint, defaultScriptUrlPattern, defaultTlsEndpoint };
export { Agent, CacheLocation, CacheStub, Cacheable, CustomAgent, ExtendedGetResult, FpjsClient, FpjsClientOptions, FpjsSpaOptions, FpjsSpaResponse, GetOptions, GetResult, ICache, InMemoryCache, LoadOptions, LocalStorageCache, SessionStorageCache, VisitorData, defaultEndpoint, defaultScriptUrlPattern, defaultTlsEndpoint };
/**
* FingerprintJS Pro SPA v1.2.2 - Copyright (c) FingerprintJS, Inc, 2023 (https://fingerprint.com)
* FingerprintJS Pro SPA v1.3.0 - Copyright (c) FingerprintJS, Inc, 2023 (https://fingerprint.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.

@@ -230,3 +230,3 @@ */

var version = "1.2.2";
var version = "1.3.0";

@@ -272,3 +272,3 @@ const cacheLocationBuilders = {

this.agentPromise = null;
this.customAgent = options.customAgent;
this.customAgent = options === null || options === void 0 ? void 0 : options.customAgent;
this.agent = {

@@ -279,12 +279,12 @@ get: () => {

};
this.loadOptions = Object.assign(Object.assign({}, options.loadOptions), { integrationInfo: [...(options.loadOptions.integrationInfo || []), `fingerprintjs-pro-spa/${version}`] });
if (options.cache && options.cacheLocation) {
this.loadOptions = options === null || options === void 0 ? void 0 : options.loadOptions;
if ((options === null || options === void 0 ? void 0 : options.cache) && (options === null || options === void 0 ? void 0 : options.cacheLocation)) {
console.warn('Both `cache` and `cacheLocation` options have been specified in the FpjsClient configuration; ignoring `cacheLocation` and using `cache`.');
}
let cache;
if (options.cache) {
if (options === null || options === void 0 ? void 0 : options.cache) {
cache = options.cache;
}
else {
this.cacheLocation = options.cacheLocation || CacheLocation.SessionStorage;
this.cacheLocation = (options === null || options === void 0 ? void 0 : options.cacheLocation) || CacheLocation.SessionStorage;
if (!cacheFactory(this.cacheLocation)) {

@@ -296,8 +296,8 @@ throw new Error(`Invalid cache location "${this.cacheLocation}"`);

}
cache = cacheFactory(this.cacheLocation)(options.cachePrefix);
cache = cacheFactory(this.cacheLocation)(options === null || options === void 0 ? void 0 : options.cachePrefix);
}
if (options.cacheTimeInSeconds && options.cacheTimeInSeconds > MAX_CACHE_LIFE) {
if ((options === null || options === void 0 ? void 0 : options.cacheTimeInSeconds) && options.cacheTimeInSeconds > MAX_CACHE_LIFE) {
throw new Error(`Cache time cannot exceed 86400 seconds (24 hours)`);
}
const cacheTime = (_a = options.cacheTimeInSeconds) !== null && _a !== void 0 ? _a : DEFAULT_CACHE_LIFE;
const cacheTime = (_a = options === null || options === void 0 ? void 0 : options.cacheTimeInSeconds) !== null && _a !== void 0 ? _a : DEFAULT_CACHE_LIFE;
this.cacheManager = new CacheManager(cache, cacheTime);

@@ -308,10 +308,20 @@ }

* [https://dev.fingerprint.com/docs/js-agent#agent-initialization]
*
* @param passedLoadOptions Additional load options to be passed to the agent, they will be merged with load options provided in the constructor.
*/
init() {
var _a;
init(passedLoadOptions) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
if (!this.loadOptions && !passedLoadOptions) {
throw new TypeError('No load options provided');
}
const loadOptions = Object.assign(Object.assign(Object.assign({}, this.loadOptions), passedLoadOptions), { integrationInfo: [
...(((_a = this.loadOptions) === null || _a === void 0 ? void 0 : _a.integrationInfo) || []),
...((passedLoadOptions === null || passedLoadOptions === void 0 ? void 0 : passedLoadOptions.integrationInfo) || []),
`fingerprintjs-pro-spa/${version}`,
] });
if (!this.agentPromise) {
const agentLoader = (_a = this.customAgent) !== null && _a !== void 0 ? _a : FingerprintJSPro;
const agentLoader = (_b = this.customAgent) !== null && _b !== void 0 ? _b : FingerprintJSPro;
this.agentPromise = agentLoader
.load(this.loadOptions)
.load(loadOptions)
.then((agent) => {

@@ -350,2 +360,20 @@ this.agent = agent;

/**
* Returns cached visitor data based on the request options, or undefined if the data is not present in cache
* */
getVisitorDataFromCache(options = {}) {
return __awaiter(this, void 0, void 0, function* () {
const cacheKey = FpjsClient.makeCacheKey(options);
const cacheResult = yield this.cacheManager.get(cacheKey);
return cacheResult ? Object.assign(Object.assign({}, cacheResult), { cacheHit: true }) : undefined;
});
}
/**
* Checks if request matching given options is present in cache
* */
isInCache(options = {}) {
return __awaiter(this, void 0, void 0, function* () {
return Boolean(yield this.getVisitorDataFromCache(options));
});
}
/**
* Clears visitor data from cache regardless of the cache implementation

@@ -370,8 +398,8 @@ */

if (cacheResult) {
return cacheResult;
return Object.assign(Object.assign({}, cacheResult), { cacheHit: true });
}
}
const agentResult = yield this.agent.get(options);
const agentResult = (yield this.agent.get(options));
yield this.cacheManager.set(key, agentResult);
return agentResult;
return Object.assign(Object.assign({}, agentResult), { cacheHit: false });
});

@@ -378,0 +406,0 @@ }

{
"name": "@fingerprintjs/fingerprintjs-pro-spa",
"version": "1.2.2",
"version": "1.3.0",
"description": "FingerprintJS Pro JavaScript agent for Single-Page Applications (SPA)",

@@ -5,0 +5,0 @@ "main": "dist/fp-pro-spa.cjs.js",

@@ -19,3 +19,2 @@ <p align="center">

# Fingerprint Pro SPA

@@ -25,9 +24,9 @@

This library is designed to be used in single-page-application framework wrappers for the Fingerprint Pro JavaScript Agent.
It has multiple built-in caching mechanisms with recommended default settings.
This library is designed to be used in single-page-application framework wrappers for the Fingerprint Pro JavaScript Agent.
It has multiple built-in caching mechanisms with recommended default settings.
If you just need the Fingerprint Pro [JS agent](https://www.npmjs.com/package/@fingerprintjs/fingerprintjs-pro), 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)](https://github.com/fingerprintjs/fingerprintjs-pro-react), [Vue](https://github.com/fingerprintjs/fingerprintjs-pro-vue), [Svelte](https://github.com/fingerprintjs/fingerprintjs-pro-svelte) and [Angular](https://github.com/fingerprintjs/fingerprintjs-pro-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](https://dev.fingerprint.com/docs/pro-vs-open-source).
**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](https://dev.fingerprint.com/docs/pro-vs-open-source).
If you'd like to have a similar SPA wrapper for the OSS version of FingerprintJS, consider [raising an issue in our issue tracker](https://github.com/fingerprintjs/fingerprintjs-pro-spa/issues).

@@ -40,2 +39,3 @@

- [Getting Started](#getting-started)
- [Caching](#caching)
- [Support and Feedback](#support-and-feedback)

@@ -83,20 +83,18 @@ - [Documentation](#documentation)

```js
import {
FpjsClient,
FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-spa';
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({
// You can also pass these options later in `.init()` method
loadOptions: {
apiKey: "<PUBLIC_API_KEY>",
apiKey: '<PUBLIC_API_KEY>',
// endpoint: ["<CUSTOM_ENDPOINT>", FingerprintJSPro.defaultEndpoint],
// scriptUrlPattern: ["<CUSTOM_SCRIPT_URL>", FingerprintJSPro.defaultScriptUrlPattern],
// region: "eu"
}
});
},
})
```
You can learn more about different load options in the [JS Agent API Reference](https://dev.fingerprint.com/docs/js-agent#initializing-the-agent).
> [!NOTE]
> You must provide `loadOptions` containing your public API key either in the constructor or in the `init` method. If you don't, the SDK will throw an error. You can learn more about different load options here in the [JS Agent documentation](https://dev.fingerprint.com/docs/js-agent#initializing-the-agent).
### 3. Initialize the JS Agent

@@ -109,2 +107,3 @@

await fpjsClient.init()
const visitorData = await fpjsClient.getVisitorData()

@@ -118,2 +117,13 @@

You can also pass the `loadOptions` into the `init` method here. They will be merged with the options passed to the constructor.
```js
await fpjsClient.init({
apiKey: '<PUBLIC_API_KEY>',
// endpoint: ["<CUSTOM_ENDPOINT>", FingerprintJSPro.defaultEndpoint],
// scriptUrlPattern: ["<CUSTOM_SCRIPT_URL>", FingerprintJSPro.defaultScriptUrlPattern],
// region: "eu"
})
```
### 4. Identify visitors

@@ -135,13 +145,13 @@

See the [JS Agent API reference](https://dev.fingerprint.com/docs/js-agent) for more details.
See the [JS Agent API reference](https://dev.fingerprint.com/docs/js-agent) for more details.
### Caching
## Caching
Fingerprint Pro usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. The SDK provides three ways to cache visitor data out of the box:
* Session storage (default) - `sessionStorage`
* Local storage - `localStorage`
* Memory - `memory`
* No cache - `nocache`
- Session storage (default) - `sessionStorage`
- Local storage - `localStorage`
- Memory - `memory`
- No cache - `nocache`
You can specify the `cacheLocation` option when creating the `FpjsClient`:

@@ -152,8 +162,8 @@

loadOptions: {
apiKey: "your-fpjs-public-api-key"
apiKey: 'your-fpjs-public-api-key',
},
cacheLocation: 'localstorage'
cacheLocation: 'localstorage',
// You can also use the provided TypeScript enum
// cacheLocation: CacheLocation.LocalStorage
});
})
```

@@ -163,11 +173,31 @@

* You can ignore the cached result for a specific API call by passing `{ ignoreCache: true }` to the `getVisitorData()` method.
* You can also use your custom cache implementation as described below.
> [!NOTE]
> If you use data from [`extendedResult`](https://dev.fingerprint.com/docs/js-agent#extendedresult), pay additional attention to your caching strategy.
> Some fields, for example, `ip` or `lastSeenAt`, might change over time for the same visitor. Use `getVisitorData({ ignoreCache: true })` to fetch the latest identification results.
> If you use data from [`extendedResult`](https://dev.fingerprint.com/docs/js-agent#extendedresult), pay additional attention to your caching strategy. Some fields, for example, `ip` or `lastSeenAt`, might change over time for the same visitor.
#### Creating a custom cache
You can ignore the cached result for a specific API call and using `{ ignoreCache: true }`:
```js
const visitorData = await fpjsClient.getVisitorData({ ignoreCache: true })
```
Check if your response was retrieved from cache using the returned `cacheHit` flag:
```js
const { cacheHit, ...visitorData } = await fpjsClient.getVisitorData()
```
Use `getVisitorDataFromCache` to directly retrieve responses from cache:
```js
// Checks if request matching given options is present in cache
await fpjsClient.isInCache({ extendedResult: true })
// Returns cached visitor data based on the request options, or undefined if the data is not present in cache
const cachedResult = await fpjsClient.getVisitorDataFromCache({ extendedResult: true })
```
You can also use your custom cache implementation as described below.
### Creating a custom cache
The SDK can use a custom cache store implemented inside your application. This is useful when a different data store is more convenient in your environment, such as a hybrid mobile app.

@@ -177,7 +207,7 @@

| Signature | Return type | Description |
| -------------------------------- | ------------------------------ |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `get(key)` | Promise<object> or object | Returns the item from the cache with the specified key, or `undefined` if it was not found |
| `set(key: string, object: any) ` | Promise<void> or void | Sets an item into the cache |
| `remove(key)` | Promise<void> or void | Removes a single item from the cache at the specified key, or no-op if the item was not found |
| Signature | Return type | Description |
| -------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `get(key)` | Promise<object> or object | Returns the item from the cache with the specified key, or `undefined` if it was not found |
| `set(key: string, object: any) ` | Promise<void> or void | Sets an item into the cache |
| `remove(key)` | Promise<void> or void | Removes a single item from the cache at the specified key, or no-op if the item was not found |
| `allKeys()` | Promise<string[]> or string [] | Returns the list of all keys. By default, the keys we use are prefixed with `@fpjs@client@` but you can pass your own custom prefix as an option when you create the FpjsClient |

@@ -190,5 +220,6 @@

#### Cache time
Use the `cacheTimeInSeconds` client constructor option to set a custom cache time. To ensure high identification accuracy we recommend not to cache visitors data for longer than 24 hours. If you pass a value higher than 86400 (60 * 60 * 24), the `FpjsClient` constructor will throw an error.
### Cache time
Use the `cacheTimeInSeconds` client constructor option to set a custom cache time. To ensure high identification accuracy we recommend not to cache visitors data for longer than 24 hours. If you pass a value higher than 86400 (60 _ 60 _ 24), the `FpjsClient` constructor will throw an error.
## Support and feedback

@@ -201,2 +232,3 @@

This library uses [Fingerprint Pro](https://fingerprint.com/github/) under the hood.
- To learn more about Fingerprint Pro read our [product documentation](https://dev.fingerprint.com/docs).

@@ -203,0 +235,0 @@ - To learn more about this SDK, there is a [Typedoc-generated SDK Reference](https://fingerprintjs.github.io/fingerprintjs-pro-spa) available.

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc