Next.js Quickstart

Overview

In this quickstart, you’ll add Fingerprint to a new Next.js project 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 install the Fingerprint React SDK and initialize the JavaScript agent to generate an event 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 Next.js and React

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

Sign up for a free Fingerprint trial if you don’t already have an account.
After signing in, go to the API keys page in the dashboard.
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 Next.js app. If you already have a project you want to use, you can skip to the next section.

Create a new Next.js project:

Terminal

npx create-next-app@latest fingerprint-nextjs-quickstart
cd fingerprint-nextjs-quickstart

When prompted, select the default options (TypeScript, ESLint, Tailwind CSS, App Router).
Open the fingerprint-nextjs-quickstart folder in your code editor. To run your project:

Terminal

npm run dev

In your browser, go to http://localhost:3000, and you should see the Next.js welcome page.

3. Set up your account creation form

Before adding Fingerprint, create a new client component at app/components/CreateAccountForm.tsx with the following:

app/components/CreateAccountForm.tsx

"use client";

import { useState } from "react";

interface CreateAccountFormProps {
  isLoading?: boolean;
  handleSubmit?: () => void;
}

export default function CreateAccountForm(props: CreateAccountFormProps) {
  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>
  );
}

Open app/globals.css and add these classes to the end of the file:

app/globals.css

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1rem;
  padding: 2rem 3rem;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}

@layer base {
  h1 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
  }
}

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;
}

Create a client component for the home page at app/components/HomePage.tsx:

app/components/HomePage.tsx

"use client";

import CreateAccountForm from "./CreateAccountForm";

export default function HomePage() {
  return (
    <main>
      <CreateAccountForm />
    </main>
  );
}

Update app/page.tsx to use the new component:

app/page.tsx

import HomePage from "./components/HomePage";

export default function Home() {
  return <HomePage />;
}

4. Install and initialize the JavaScript agent

To integrate Fingerprint into your Next.js app, add the Fingerprint React SDK via npm:

Terminal

npm install @fingerprint/react

Note: This quickstart is written for version 3.x of the Fingerprint React SDK

Import and initialize the Fingerprint provider in app/layout.tsx:

app/layout.tsx

import { FingerprintProvider } from "@fingerprint/react";

Wrap your app with the Fingerprint provider in app/layout.tsx:

app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <FingerprintProvider
          apiKey="PUBLIC_API_KEY"
          region="us" // Ensure this matches your workspace region
          // For more information, see https://docs.fingerprint.com/docs/regions
        >
          {children}
        </FingerprintProvider>
      </body>
    </html>
  );
}

Set PUBLIC_API_KEY to the public API key from the Fingerprint dashboard.

Note: For production, consider using Next.js environment 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 visitor ID as well as an event ID. Instead of using the visitor ID returned directly on the frontend (which could be tampered with), you’ll send the event ID 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.

In app/components/HomePage.tsx, import Fingerprint’s useVisitorData hook and add the identification logic:

app/components/HomePage.tsx

"use client";

import CreateAccountForm from "./CreateAccountForm";
import { useVisitorData } from "@fingerprint/react"; 

export default function HomePage() {
  const { getData, isLoading } = useVisitorData({ immediate: false }); 

  async function handleSubmit() {
    const { visitor_id, event_id } = await getData();

    console.log("Visitor ID:", visitor_id);
    console.log("Event ID:", event_id);

    // Example of how you could send the event_id 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,
    //     event_id,
    //   }),
    // });
  } 

  return (
    <main>
      <CreateAccountForm isLoading={isLoading} handleSubmit={handleSubmit} />
    </main>
  );
}

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.

6. Test the app

If your dev server isn’t already running, start it with:

Terminal

npm run dev

In your browser, go to http://localhost:3000.
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.
Enter a username and password, then click Create Account.
Open the developer console in your browser and you should see the visitor ID and event ID in the output:

Output

Visitor ID: JkLmNoPqRsTuVwXyZaBc
Event 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 event_id 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:

Getting started

Web

Mobile

Server

Use Case Tutorials

Overview

Prerequisites

1. Create a Fingerprint account and get your API key

2. Set up your project

3. Set up your account creation form

4. Install and initialize the JavaScript agent

5. Trigger visitor identification

6. Test the app

Next steps

​Overview

​Prerequisites

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

​2. Set up your project

​3. Set up your account creation form

​4. Install and initialize the JavaScript agent

​5. Trigger visitor identification

​6. Test the app

​Next steps

Overview

Prerequisites

1. Create a Fingerprint account and get your API key

2. Set up your project

3. Set up your account creation form

4. Install and initialize the JavaScript agent

5. Trigger visitor identification

6. Test the app

Next steps