Skip to main content

​
Overview

In this quickstart, you’ll add Fingerprint to a new vanilla JavaScript project (scaffolded with Vite) and identify the user’s device. The example use case in 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 frontend integration. You’ll load the JavaScript agent and initialize it to generate a request ID to send to your backend for analysis. To see how to implement fraud prevention with this ID, continue to one of the backend 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 JavaScript
This quickstart only covers the frontend setup. You’ll need a backend server to receive and process the device identification event to enable fraud detection. Check out one of our backend 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 JavaScript agent.

​
2. Set up your project

To get started, scaffold a new vanilla JavaScript app with Vite. If you already have a project you want to use, skip to the next section.
  1. Create a new Vite project with the vanilla JavaScript template:
Terminal
npm create vite@latest fingerprint-js-quickstart -- --template vanilla
cd fingerprint-js-quickstart
npm install
  1. Open the fingerprint-js-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, add an account creation form to index.html:
index.html
<body>
  <div class="wrapper">
    <h1>Create an account</h1>
    <div class="input-group">
      <label for="username">Username</label>
      <input id="username" type="text" placeholder="Username" required />
    </div>
    <div class="input-group">
      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password" required />
    </div>
    <button id="create-account-btn">Create Account</button>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>
  1. Add some simple styling by overwriting the src/style.css file with the following:
src/style.css
html,
body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 400px;
  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;
}

​
4. Install and initialize the Fingerprint JavaScript agent

  1. To integrate Fingerprint into your app, first install the JavaScript agent via npm:
Terminal
npm install @fingerprintjs/fingerprintjs-pro
Note: This quickstart is written for Fingerprint JavaScript agent version 3.x
  1. Now that the JavaScript agent is installed, import and initialize it. Open src/main.js and replace it with:
src/main.js
import "./style.css";
import FingerprintJSPro from "@fingerprintjs/fingerprintjs-pro";

const fpPromise = FingerprintJSPro.load({
  apiKey: "<your-public-api-key>",
  region: "us", // Ensure this matches your workspace region
  // For more options, see https://docs.fingerprint.com/reference/js-agent-v4-start-function
});
  1. Replace <your-public-api-key> with your actual 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 JavaScript agent 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 frontend (which could be tampered with), you’ll send the requestId to your backend. 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. After initializing the JavaScript agent, grab the HTML elements and add an event listener for clicking on the button:
src/main.js
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const btn = document.getElementById("create-account-btn");
btn.addEventListener("click", handleClick);
  1. Then, define the handleClick function as follows:
src/main.js
async function handleClick() {
  // Wait for the agent to load
  const fp = await fpPromise;

  // Trigger identification
  const result = await fp.get();
  const { visitorId, requestId } = result;
  console.log("Visitor ID:", visitorId);
  console.log("Request ID:", requestId);

  // Send to your backend
  // await fetch("/api/create-account", {
  //   method: "POST",
  //   headers: { "Content-Type": "application/json" },
  //   body: JSON.stringify({
  //     username: usernameInput.value,
  //     password: passwordInput.value,
  //     requestId,
  //   }),
  // });
}
Inside the handleClick function:
  • Wait for fpPromise to get the loaded agent
  • Use fp.get() to have Fingerprint analyze the visitor’s browser and identify the visitor
  • You can then send the requestId to your backend, along with the username and password for your fraud prevention logic.

​
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 the 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 visitorId and requestId in the 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 backend. 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: