Using FingerprintJS Pro React library with Next.js

FingerprintJS Pro React is an official open-source package for React ecosystem. This library provides developers with native experience using React components and hooks together with a built-in caching mechanism. All FingerprintJS Pro agent capabilities are fully supported. This library also provides you with all necessary wrappers for using FingerprintJS Pro with Next.js.

Sample usage

  1. Add @fingerprintjs/fingerprintjs-pro-react as a dependency to your application via npm or yarn.
npm install @fingerprintjs/fingerprintjs-pro-react
yarn add @fingerprintjs/fingerprintjs-pro-react
  1. Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.
// pages/_app.tsx
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'

function MyApp({ Component, pageProps }) {
  return (
    <FpjsProvider
      loadOptions={{
        apiKey: 'fingerprintjs-pro-public-api-key',
      }}
    >
      <Component {...pageProps} />
    </FpjsProvider>
  )
}

export default MyApp
  1. Use the useVisitorData hook in your components to perform visitor identification and get the data.
// pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
import { useState } from 'react'

const Home: NextPage = () => {
  const [extendedResult, updateExtendedResult] = useState(false)
  const { isLoading, error, data, getData } = useVisitorData({ extendedResult }, { immediate: true })

  const reloadData = () => {
    getData({ ignoreCache: true })
  }

  const onChangeExtendedResult = (e) => {
    updateExtendedResult(e.target.checked)
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>FingerprintJS Pro NextJS Demo</title>
        <meta name='description' content='Check if fingerprintjs-pro-react integration works with NextJS SSR' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <h1>FingerprintJS Pro NextJS Demo</h1>
      <div className={styles.testArea}>
        <div className={styles.controls}>
          <button onClick={reloadData} type='button'>
            Reload data
          </button>
          <label>
            <input type='checkbox' onChange={onChangeExtendedResult} checked={extendedResult} />
            Extended result
          </label>
        </div>
        <h4>
          VisitorId: <span className={styles.visitorId}>{isLoading ? 'Loading...' : data?.visitorId}</span>
        </h4>
        <h4>Full visitor data:</h4>
        <pre className={styles.data}>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
      </div>
    </div>
  )
}

export default Home

Documentation

You can find the whole documentation in the official GitHub repository. The repository also contains an example app demonstrating usage of the library.


Did this page help you?