Skip to main content

​
Overview

In this quickstart, you’ll add Fingerprint to a new React project and identify the user’s device. The example use case we’ll use for this quickstart is stopping new account fraud, where attackers create multiple fake accounts to abuse promotions, exploit systems, or evade bans. However, the steps you’ll follow apply to most use cases. By identifying the device behind each sign-up attempt, login, or transaction, you can flag and block suspicious users early. This guide focuses on the front-end integration. You’ll install the Fingerprint React SDK and initialize the client to generate a request ID to send to your back end for analysis. To see how to implement fraud prevention with this ID, continue to one of our back-end quickstarts after completing this quickstart.
Estimated time: < 10 minutes

​
Prerequisites

Before you begin, make sure you have the following:
  • Node.js (v20 or later) and npm installed
  • Your favorite code editor
  • Basic knowledge of React and JavaScript
This quickstart only covers the front-end setup. You’ll need a back-end server to receive and process the device identification event to enable fraud detection. Check out one of our back-end quickstarts after completing this quickstart.

​
1. Create a Fingerprint account and get your API key

  1. Sign up for a free Fingerprint trial if you don’t already have an account.
  2. After signing in, go to the API keys page in the dashboard.
  3. Copy your public API key; you’ll need it to initialize the Fingerprint client agent.

​
2. Set up your project

To get started, scaffold a new React app. If you already have a project you want to use, you can skip to the next section.
  1. Create a new Vite project with the React template:
Terminal
npm create vite@latest fingerprint-react-quickstart -- --template react
cd fingerprint-react-quickstart
npm install
  1. Open the fingerprint-react-quickstart folder in your code editor and you’re ready to go! To run your project, run:
Terminal
npm run dev
  1. In your browser, go to http://localhost:5173 (Vite’s default), and you should see the Vite welcome page.

​
3. Set up your account creation form

  1. Before adding Fingerprint, create a new component at src/components/CreateAccountForm.jsx with the following:
src/components/CreateAccountForm.jsx
import { useState } from "react";

export default function CreateAccountForm(props) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  return (
    <div className="wrapper">
      <h1>Create an account</h1>
      <div className="input-group">
        <label htmlFor="username">Username</label>
        <input
          id="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          type="text"
          placeholder="Username"
          required
        />
      </div>
      <div className="input-group">
        <label htmlFor="password">Password</label>
        <input
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          type="password"
          placeholder="Password"
          required
        />
      </div>
      <button disabled={props.isLoading} onClick={props.handleSubmit}>
        {props.isLoading ? "Loading…" : "Create Account"}
      </button>
    </div>
  );
}
  1. Open src/App.css and add these classes to the end of the file:
src/App.css
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1rem;
  padding: 1rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

button {
  background-color: #f35b22;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
  1. Import and add the component to your App component in src/App.jsx. The entire file can be replaced with this:
src/App.jsx
import "./App.css";
import CreateAccountForm from "./components/CreateAccountForm";

function App() {
  return (
    <>
      <CreateAccountForm />
    </>
  );
}

export default App;

​
4. Install and initialize the Fingerprint SDK

  1. To integrate Fingerprint into your React app, first add the SDK via npm:
Terminal
npm install @fingerprintjs/fingerprintjs-pro-react
Note: This quickstart is written for Fingerprint SDK version 2.x
  1. Now that the SDK is installed, import and initialize the Fingerprint provider in your app’s entry point. Open src/main.jsx and add:
src/main.jsx
import { FpjsProvider } from "@fingerprintjs/fingerprintjs-pro-react";
  1. Wrap <App /> with the FpjsProvider component:
src/main.jsx
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <FpjsProvider
      loadOptions={{
        apiKey: "<your-public-api-key>",
        region: "us", // Ensure this matches your workspace region
        // For more information, see <https://docs.fingerprint.com/docs/regions>
      }}
    >
      <App />
    </FpjsProvider>
  </StrictMode>
);
  1. Replace <your-public-api-key> with your public API key from the Fingerprint dashboard.
Note: For production, consider using Vite Env Variables to configure the key.

​
5. Trigger visitor identification

Now that the Fingerprint client is initialized, you can identify the visitor only when needed. In this case, that’s when the user taps the Create Account button. When making the visitor identification request, you will receive the visitorId as well as a requestId. Instead of using the visitorId returned directly on the front end (which could be tampered with), you’ll send the requestId to your back end. This ID is unique to each identification event. Your server can then use the Fingerprint Events API to retrieve complete identification data, including the trusted visitor ID and other actionable insights like whether they are using a VPN or are a bot.
  1. In App.jsx, import Fingerprint’s useVisitorData hook:
src/App.jsx
import "./App.css";
import CreateAccountForm from "./components/CreateAccountForm";
import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
  1. Inside the App component, use Fingerprint’s useVisitorData hook to obtain our visitor data. Here we configure the hook to defer identification until you call it, and it returns the state you’ll need:
src/App.jsx
function App() {
  const { getData, isLoading } = useVisitorData({}, { immediate: false }); 

  return (
    <>
      <CreateAccountForm />
    </>
  );
}
This gives you:
  • getData(): A function to trigger visitor identification on demand.
  • isLoading: A flag to monitor visitor identification progress.
By setting immediate to false you’re triggering device identification only when needed with the getData() method. Check our GitHub repo for available useVisitorData options.
  1. Straight after the hook, define the submit handler to trigger identification when the user clicks Create Account:
src/App.jsx
function App() {
  const { getData, isLoading } = useVisitorData({}, { immediate: false });

  async function handleSubmit() {
    const { visitorId, requestId } = await getData();

    console.log("Visitor ID:", visitorId);
    console.log("Request ID:", requestId);

    // Example of how you could send the requestId and form data to your server:
    // await fetch("http://localhost:3000/api/create-account", {
    //   method: "POST",
    //   headers: { "Content-Type": "application/json" },
    //   body: JSON.stringify({
    //     username: username.value,
    //     password: password.value,
    //     requestId,
    //   }),
    // });
  } 

  return (
    <>
      <CreateAccountForm />
    </>
  );
}
In this function, getData() is being called and Fingerprint is analyzing the visitor’s browser. The result of the identification will include a requestId, which you can then send to your back end along with the username and password for your fraud detection logic.
  1. Pass the isLoading and handleSubmit props to CreateAccountForm:
src/App.jsx
<CreateAccountForm isLoading={isLoading} handleSubmit={handleSubmit} />

​
6. Test the app

  1. If your dev server isn’t already running, start it with:
Terminal
npm run dev
  1. In your browser, go to http://localhost:5173 (Vite’s default).
  2. If you have any ad blockers, turn them off for localhost. View our documentation to learn how to protect your Fingerprint implementation from ad blockers in production.
  3. Enter a username and password, then click Create Account.
  4. Open the developer console in your browser and you should see the visitor ID and request ID in the output:
Output
Visitor ID: JkLmNoPqRsTuVwXyZaBc
Request ID: 1234566477745.abc1GS

​
Next steps

To use the identification data for fraud detection (like blocking repeat fake account creation attempts), you’ll need to send the requestId to your back end. From there, your server can call the Fingerprint Events API to retrieve the full visitor information data and use it to make decisions and prevent fraud. Check out these related resources: