Merge pull request #145 from fingerprintjs/chore/reccurent-repository…

…-care

Recurrent repository care

.github/workflows/codeql-analysis.yml

@@ -40,13 +40,13 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/release.yml

@@ -9,6 +9,8 @@ jobs:
   build-and-release:
     name: 'Build project, run CI checks and publish new release'
     uses: fingerprintjs/dx-team-toolkit/.github/workflows/release-typescript-project.yml@v1
+    with:
+      appId: ${{ vars.APP_ID }}
     secrets:
-      GH_RELEASE_TOKEN: ${{ secrets.GH_RELEASE_TOKEN }}
+      APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
       NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.gitignore

@@ -13,8 +13,6 @@
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 .idea
 .vscode
 docs

.releaserc

@@ -25,7 +25,7 @@
     [
       "@semantic-release/exec",
       {
-        "prepareCmd": "yarn build"
+        "prepareCmd": "pnpm build"
       }
     ],
     [

README.md

@@ -17,9 +17,9 @@
   <a href="https://fingerprintjs.github.io/fingerprintjs-pro-react/"><img src="https://img.shields.io/badge/-Documentation-green" alt="Discord server"></a>
 </p>
 
-
 # Fingerprint Pro React
-Fingerprint is a device intelligence platform offering 99.5% accurate visitor identification. Fingerprint Pro React SDK is an easy way to integrate **[Fingerprint Pro](https://fingerprint.com/)** into your React application. It's also compatible with Next.js and Preact. See application demos in the [examples](https://github.com/fingerprintjs/fingerprintjs-pro-react/tree/main/examples) folder. 
+
+Fingerprint is a device intelligence platform offering 99.5% accurate visitor identification. Fingerprint Pro React SDK is an easy way to integrate **[Fingerprint Pro](https://fingerprint.com/)** into your React application. It's also compatible with Next.js and Preact. See application demos in the [examples](https://github.com/fingerprintjs/fingerprintjs-pro-react/tree/main/examples) folder.
 
 ## Table of contents
 
@@ -40,7 +40,8 @@ Fingerprint is a device intelligence platform offering 99.5% accurate visitor id
 - For Next.js users: Next.js 13.1 or higher
 - For Typescript users: Typescript 4.8 or higher
 
-Note: This package assumes you have a Fingerprint Pro subscription or trial, it is not compatible with the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs). See our documentation to learn more about the [differences between Fingerprint Pro and FingerprintJS](https://dev.fingerprint.com/docs/identification-vs-fingerprintjs).
+> [!NOTE]
+> This package assumes you have a Fingerprint Pro subscription or trial, it is not compatible with the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs). See our documentation to learn more about the [differences between Fingerprint Pro and FingerprintJS](https://dev.fingerprint.com/docs/identification-vs-fingerprintjs).
 
 ## Installation
 
@@ -62,56 +63,55 @@ Using [pnpm](https://pnpm.js.org):
 pnpm add @fingerprintjs/fingerprintjs-pro-react
 ```
 
-
 ## Getting started
 
 In order to identify visitors, you'll need a Fingerprint Pro account (you can [sign up for free](https://dashboard.fingerprint.com/signup/)).
-To get your API key and get started, see the [official Fingerprint Pro documentation](https://dev.fingerprint.com/docs/quick-start-guide).
+To get your API key and get started, see the [Fingerprint Pro Quick Start Guide](https://dev.fingerprint.com/docs/quick-start-guide).
+
+### 1. Wrap your application (or component) in `<FpjsProvider>`.
+
+- Set `apiKey` to your Fingerprint [Public API Key](https://dashboard.fingerprint.com/api-keys).
+- Set `region` if you have chosen a non-global [region](ttps://dev.fingerprint.com/docs/regions) during registration.
+- Set `endpoint` and `scriptUrlPattern` if you are using [one of our proxy integrations to increase accuracy](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) and effectiveness of visitor identification.
 
-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. See [Regions](https://dev.fingerprint.com/docs/regions) in our documentation. Set `endpoint` and `scriptUrlPattern` if you are using [one of our proxy integrations to increase accuracy](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) and effectiveness of visitor identification.
-
 ```jsx
 // src/index.js
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { FpjsProvider, /* defaultEndpoint, defaultScriptUrlPattern */ } from '@fingerprintjs/fingerprintjs-pro-react';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { FpjsProvider /*, FingerprintJSPro */ } from '@fingerprintjs/fingerprintjs-pro-react'
+import App from './App'
 
 const root = ReactDOM.createRoot(document.getElementById('app'))
 
 root.render(
   <FpjsProvider
     loadOptions={{
-      apiKey: 'your-fpjs-public-api-key',
+      apiKey: 'your-public-api-key',
       // region: 'eu',
-      // endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
-      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
+      // endpoint: ['metrics.yourwebsite.com', FingerprintJSPro.defaultEndpoint],
+      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', FingerprintJSPro.defaultScriptUrlPattern],
     }}
   >
     <App />
   </FpjsProvider>
-);
+)
 ```
 
-2. Use the `useVisitorData` hook in your components to identify visitors and get the result data. 
+### 2. Use the `useVisitorData()` hook in your components to identify visitors
 
 ```jsx
 // src/App.js
-import React from 'react';
+import React from 'react'
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
 
 function App() {
-  const {
-    isLoading,
-    error,
-    data,
-  } = useVisitorData();
+  const { isLoading, error, data } = useVisitorData()
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return <div>Loading...</div>
   }
   if (error) {
-    return <div>An error occured: {error.message}</div>;
+    return <div>An error occured: {error.message}</div>
   }
 
   if (data) {
@@ -120,78 +120,69 @@ function App() {
       <div>
         Welcome {data.visitorFound ? 'back' : ''}, {data.visitorId}!
       </div>
-    );
+    )
   } else {
-    return null;
+    return null
   }
 }
 
-export default App;
+export default App
 ```
 
 The `useVisitorData` hook also returns a `getData` method you can use to make an API call on command.
 
 ```jsx
 // src/App.js
-import React, { useState } from "react";
-import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
+import React, { useState } from 'react'
+import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
 
 function App() {
-  const {
-    isLoading,
-    error,
-    getData
-  } = useVisitorData({tag: "subscription-form"}, { immediate: false });
-  const [email, setEmail] = useState("");
+  const { isLoading, error, getData } = useVisitorData({ tag: 'subscription-form' }, { immediate: false })
+  const [email, setEmail] = useState('')
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return <div>Loading...</div>
   }
   if (error) {
-    return <div>An error occurred: {error.message}</div>;
+    return <div>An error occurred: {error.message}</div>
   }
 
   return (
     <div>
       <form
         onSubmit={(e) => {
-          e.preventDefault();
-           getData()
-             .then((data) => {
-                // Do something with the visitor data, for example,
-                // append visitor data to the form data to send to your server
-                console.log(data)
-             })
-             .catch((error) => {
-                // Handle error
-             })
-
+          e.preventDefault()
+          getData()
+            .then((data) => {
+              // Do something with the visitor data, for example,
+              // append visitor data to the form data to send to your server
+              console.log(data)
+            })
+            .catch((error) => {
+              // Handle error
+            })
         }}
       >
-        <label htmlFor="email">Email:</label>
-        <input
-          id="email"
-          type="email"
-          name="email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.currentTarget.value)}
-        />
-        <button type="submit">Subscribe</button>
+        <label htmlFor='email'>Email:</label>
+        <input type='email' value={email} onChange={(e) => setEmail(e.currentTarget.value)} />
+        <button type='submit'>Subscribe</button>
       </form>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App
 ```
 
-See the full code example in the [examples folder](https://github.com/fingerprintjs/fingerprintjs-pro-react/tree/main/examples/create-react-app).
+- See the full code example in the [examples folder](./examples/).
+- See our [Use cases](https://demo.fingerprint.com) page for [open-source](https://github.com/fingerprintjs/fingerprintjs-pro-use-cases) real-world examples of using Fingerprint to detect fraud and streamline user experiences.
 
 ## Linking and tagging information
+
 The `visitorId` provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the `linkedId` and `tag`, see [Linking and tagging information](https://dev.fingerprint.com/docs/tagging-information).
 
-Associate your data with a visitor ID using the `linkedId` or `tag` parameter of the options object passed into the `useVisitorData()` hook or the `getData` function:
+Associate the visitor ID with your data using the `linkedId` or `tag` parameter of the options object passed into the `useVisitorData()` hook or the `getData` function:
+
 ```jsx
 // ...
 
@@ -213,12 +204,12 @@ function App() {
 
 ## Caching strategy
 
-Fingerprint Pro usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. By default, the SDK uses `sessionStorage` to cache results. 
+Fingerprint Pro usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. By default, the SDK uses `sessionStorage` to cache results.
 
-* Specify the `cacheLocation` prop on `<FpjsProvider>` to instead store results in `memory` or  `localStorage`. Use `none` to disable caching completely.
-* Specify the `cache` prop on `<FpjsProvider>` to use your custom cache implementation instead. For more details, see [Creating a custom cache](https://github.com/fingerprintjs/fingerprintjs-pro-spa#creating-a-custom-cache)
- in the Fingerprint Pro SPA repository (a lower-level Fingerprint library used by this SDK).
-* Pass `{ignoreCache: true}` to the `getData()` function to ignore cached results for that specific API call. 
+- Specify the `cacheLocation` prop on `<FpjsProvider>` to instead store results in `memory` or `localStorage`. Use `none` to disable caching completely.
+- Specify the `cache` prop on `<FpjsProvider>` to use your custom cache implementation instead. For more details, see [Creating a custom cache](https://github.com/fingerprintjs/fingerprintjs-pro-spa#creating-a-custom-cache)
+  in the Fingerprint Pro SPA repository (a lower-level Fingerprint library used by this SDK).
+- Pass `{ignoreCache: true}` to the `getData()` function to ignore cached results for that specific API call.
 
 > [!NOTE]
 > If you use data from [`extendedResult`](https://dev.fingerprint.com/docs/js-agent#extendedresult), pay additional attention to your caching strategy.
@@ -233,8 +224,8 @@ The `getData` function throws errors directly from the JS Agent without changing
 See the full [generated API reference](https://fingerprintjs.github.io/fingerprintjs-pro-react/).
 
 ## Support and feedback
-To ask questions or provide feedback, use [Issues](https://github.com/fingerprintjs/fingerprintjs-pro-react/issues). If you need private support, please email us at `[email protected]`. If you'd like to have a similar React wrapper for the [open-source FingerprintJS](https://github.com/fingerprintjs/fingerprintjs), consider creating an issue in the main [FingerprintJS repository](https://github.com/fingerprintjs/fingerprintjs/issues).
 
+To ask questions or provide feedback, use [Issues](https://github.com/fingerprintjs/fingerprintjs-pro-react/issues). If you need private support, please email us at `[email protected]`. If you'd like to have a similar React wrapper for the [open-source FingerprintJS](https://github.com/fingerprintjs/fingerprintjs), consider creating an issue in the main [FingerprintJS repository](https://github.com/fingerprintjs/fingerprintjs/issues).
 
 ## License
 

contributing.md

@@ -2,7 +2,7 @@
 
 ## Working with code
 
-We prefer using [yarn](https://yarnpkg.com/) for installing dependencies and running scripts.
+We prefer using [pnpm](https://pnpm.io/) for installing dependencies and running scripts.
 
 The main branch is locked for the push action. For proposing changes, use the standard [pull request approach](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). It's recommended to discuss fixes or new functionality in the Issues, first.
 
@@ -15,39 +15,39 @@ There are 4 demo pages for this integration:
 4. In `/examples/preact` folder. It is a demo built with Preact. You can find more info about configuration and starting demo in the [readme](examples/preact/README.md).
 5. In `/examples/webpack-based` folder. It is a simple demo built with raw webpack.
 
-If you want to test integration with [fingerprintjs-pro-spa](https://github.com/fingerprintjs/fingerprintjs-pro-spa), just [link the package](https://yarnpkg.com/cli/link) with the `yarn link`.
+If you want to test integration with [fingerprintjs-pro-spa](https://github.com/fingerprintjs/fingerprintjs-pro-spa), just [link the package](https://pnpm.io/cli/link#replace-an-installed-package-with-a-local-version-of-it) with the `pnpm link <spa-directory>`.
 
 ❗ Build projects before testing integration. First build `fingerprintjs-pro-spa`, then `fingerprintjs-pro-react`, and then start spa example app.
 
 ### How to build
 Just run:
 ```shell
-yarn build
+pnpm build
 ```
 
 ### Code style
 
 The code style is controlled by [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/). Run to check that the code style is ok:
 ```shell
-yarn lint
+pnpm lint
 ```
 
 You aren't required to run the check manually, the CI will do it. Run the following command to fix style issues (not all issues can be fixed automatically):
 ```shell
-yarn lint:fix
+pnpm lint:fix
 ```
 
 ### How to test
 Tests are located in `__tests__` folder and run by [jest](https://jestjs.io/) in [jsdom](https://github.com/jsdom/jsdom) environment.
 
 To run tests you can use IDE instruments or just run:
 ```shell
-yarn test
+pnpm test
 ```
 
 To check the distributive TypeScript declarations, build the project and run:
 ```shell
-yarn test:dts
+pnpm test:dts
 ```
 
 ### How to publish

examples/create-react-app/.gitignore

@@ -13,13 +13,12 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 .idea
 .vscode

examples/create-react-app/README.md

@@ -1,23 +1,24 @@
 ## Setting up
-In order to try out these examples, you set your public API key as the value of the REACT_APP_FPJS_PUBLIC_API_KEY variable\
-in the `.env` file, located in this directory.
 
-### FingerprintJS public API key
-- Go to [FingerprintJS Dashboard](https://dashboard.fingerprint.com/)*
-- Open the _API keys_ page from the sidebar
-- Find your _Public_ API key
+### Fingerprint Public API key
 
-*If you don't have a FingerprintJS Pro account, [sign up for free](https://dashboard.fingerprint.com/signup/)).
+In order to try out this example: 
+1. Create a `.env` (or `.env.local`) file in this directory.
+2. Set the `REACT_APP_FPJS_PUBLIC_API_KEY` environment variable to the value of your Fingerprint Public API key. 
+
+To get the API key:
+
+- Go to Fingerprint Dashboard > [API Keys](https://dashboard.fingerprint.com/api-keys) and find it there.
+- If you don't have a Fingerprint Pro account, [sign up for free](https://dashboard.fingerprint.com/signup/).
 
 ### Installing dependencies
-1. Go to the root of the project, install dependencies and build it (`cd ../../ && yarn install && yarn build`)
-2. Link the package to be able to use it locally for the examples `yarn link`
-3. Also link React and React-DOM for the React Hooks to work properly (they won't work with 2 instances of React: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). Go to each folder in the `node_modules` and execute `yarn link` as well.
-4. Come back to the example folder (`cd examples/spa`) and run `yarn install`.
+
+1. Go to the root of the project, install dependencies and build it (`cd ../../ && pnpm install && pnpm build`)
+2. Come back to the example folder (`cd examples/create-react-app`) and run `pnpm install`.
 
 After you've completed all the steps and inserted the API key, you can run:
 
-### `yarn start`
+### `pnpm start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3001](http://localhost:3001) to view it in the browser.

examples/create-react-app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@fingerprintjs/fingerprintjs-pro-react": "workspace:*",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1"
   },
   "peerDependencies": {