> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Preact Quickstart

> Get started using the Fingerprint React SDK with Preact

## Overview

In this quickstart, you'll add Fingerprint to a new [Preact](https://preactjs.com/) 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](/docs/react) (which works with Preact) 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](/docs/server-quickstarts-overview) after completing this quickstart.**

> Estimated time: \< 10 minutes

## Prerequisites

Before you begin, make sure you have the following:

* [Node.js](https://nodejs.org/) (v20 or later) and npm installed
* Your favorite code editor
* Basic knowledge of [Preact](https://preactjs.com/) and JavaScript

<Note>
  This quickstart only covers the **frontend setup**. You'll need a [backend
  server](/reference/server-sdks) to receive and process the device identification event to enable
  fraud detection. Check out one of the [backend quickstarts](/docs/server-quickstarts-overview)
  after completing this quickstart.
</Note>

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

1. [Sign up](https://dashboard.fingerprint.com/signup) for a free Fingerprint trial if you don't already have an account.
2. After signing in, go to the [**API keys**](https://dashboard.fingerprint.com/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 Preact 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 Preact template:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npm create vite@latest fingerprint-preact-quickstart -- --template preact
cd fingerprint-preact-quickstart
npm install
```

2. Open the `fingerprint-preact-quickstart` folder in your code editor and you're ready to go! To run your project, run:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npm run dev
```

3. In your browser, go to [http://localhost:5173](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:

```jsx src/components/CreateAccountForm.jsx theme={"theme":"github-dark-dimmed"}
import { useState } from "preact/hooks";

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

2. Open `src/app.css` and add these classes to the end of the file:

```css src/app.css theme={"theme":"github-dark-dimmed"}
.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;
}
```

3. Import and add the component to your App component in `src/app.jsx`. The entire file can be replaced with this:

```jsx src/app.jsx theme={"theme":"github-dark-dimmed"}
import "./app.css";
import CreateAccountForm from "./components/CreateAccountForm";

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

## 4. Install and initialize the JavaScript agent

1. To integrate Fingerprint into your Preact app, add the Fingerprint React SDK via npm. The React SDK is compatible with Preact:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npm install @fingerprint/react
```

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

2. Now that the React SDK is installed, import and initialize the Fingerprint provider in your app's entry point. Open `src/main.jsx` and add:

```jsx src/main.jsx theme={"theme":"github-dark-dimmed"}
import { FingerprintProvider } from "@fingerprint/react";
```

3. Wrap `<App />` with the FingerprintProvider component:

```jsx src/main.jsx theme={"theme":"github-dark-dimmed"}
render(
  // [!code ++:5]
  <FingerprintProvider
    apiKey="PUBLIC_API_KEY"
    region="us" // Ensure this matches your workspace region
    // For more information, see https://docs.fingerprint.com/docs/regions
  >
    <App />
  </FingerprintProvider>, // [!code ++]
  document.getElementById("app"),
);
```

4. Replace `PUBLIC_API_KEY` with your public API key from the [Fingerprint dashboard](https://dashboard.fingerprint.com/api-keys).

*Note: For production, consider using* *[Vite Env Variables](https://vite.dev/guide/env-and-mode)* *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](/reference/server-api-v4-get-event) 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:

```jsx src/app.jsx theme={"theme":"github-dark-dimmed"}
import "./app.css";
import CreateAccountForm from "./components/CreateAccountForm";
import { useVisitorData } from "@fingerprint/react"; // [!code ++]
```

2. Inside the `App` component, use Fingerprint's `useVisitorData` hook to obtain visitor data. The hook is configured here to defer identification until you call it, and it returns the state you'll need:

```jsx src/app.jsx theme={"theme":"github-dark-dimmed"}
function App() {
  const { getData, isLoading } = useVisitorData({ immediate: false }); // [!code ++]

  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](https://github.com/fingerprintjs/react)* *for available useVisitorData options.*

3. Straight after the hook, define the submit handler to trigger identification when the user clicks **Create Account**:

```jsx src/app.jsx theme={"theme":"github-dark-dimmed"}
function App() {
  const { getData, isLoading } = useVisitorData({ immediate: false });

  // [!code ++:5]
  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,
    //   }),
    // });
  } // [!code ++]

  return (
    <>
      <CreateAccountForm />
    </>
  );
}
```

In this function, `getData()` is being called and Fingerprint is analyzing the visitor's browser. The result of the identification will include an `event_id`, which you can then send to your backend along with the username and password for your fraud detection logic.

4. Pass the `isLoading` and `handleSubmit` props to `CreateAccountForm`:

```jsx src/app.jsx theme={"theme":"github-dark-dimmed"}
<CreateAccountForm isLoading={isLoading} handleSubmit={handleSubmit} />
```

## 6. Test the app

1. If your dev server isn't already running, start it with:

```bash Terminal theme={"theme":"github-dark-dimmed"}
npm run dev
```

2. In your browser, go to [http://localhost:5173](http://localhost:5173/) (Vite's default).
3. If you have any ad blockers, turn them off for localhost. View the [documentation](/docs/protecting-the-javascript-agent-from-adblockers) to learn how to protect your Fingerprint implementation from ad blockers in production.
4. Enter a username and password, then click **Create Account**.
5. Open the developer console in your browser and you should see the visitor ID and event ID in the output:

```text Output theme={"theme":"github-dark-dimmed"}
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](/docs/server-quickstarts-overview). From there, your server can call the [Fingerprint Events API](/reference/server-api-v4-get-event) to retrieve the full visitor information data and use it to make decisions and prevent fraud.

Check out these related resources:

* [React SDK reference](https://github.com/fingerprintjs/react) (includes Preact support)
* [Node.js backend quickstart](/docs/node-server-quickstart)
* [API reference for the Events endpoint](/reference/server-api-v4-get-event)
* [Use case tutorial: Detecting new account fraud](/docs/new-account-fraud-use-case-tutorial)
* [Protecting from client-side tampering and replay attacks](/docs/protecting-from-client-side-tampering)