Skip to main content

​
Overview

In this quickstart, you’ll add Fingerprint to a new Angular v19 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 Angular 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 Angular and JavaScript/Typescript
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, create a new Angular project. If you already have a project you want to use, you can skip to the next section.
  1. Install the Angular CLI:
Terminal
npm install -g @angular/cli
  1. Create a new project:
Terminal
ng new fingerprint-angular-quickstart
You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire. If you don’t have any preferences, just hit the enter key to take the default options and continue with the setup. Important: When prompted with Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?, select No. After you select the configuration options and the CLI runs through the setup, you should see the following message:
Terminal
✔ Packages installed successfully.
 Successfully initialized git.
  1. Change into the project folder:
Terminal
cd fingerprint-angular-quickstart
  1. Open the fingerprint-angular-quickstart folder in your code editor and you’re ready to go! To run your project, run:
Terminal
npm start
  1. In your browser, go to http://localhost:4200, and you should see the Angular welcome page. The application will automatically reload whenever you modify any of the source files.

​
3. Set up your account creation form

  1. Before hooking up Fingerprint, create a new component at src/app/create-account-form/create-account-form.component.ts with the following:
src/app/create-account-form/create-account-form.component.ts
import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-create-account-form",
  imports: [FormsModule],
  template: `<div class="wrapper">
    <h1>Create an account</h1>

    <div class="input-group">
      <label for="username">Username</label>
      <input
        id="username"
        type="text"
        placeholder="Username"
        [(ngModel)]="username"
        required
      />
    </div>
    <div class="input-group">
      <label for="password">Password</label>
      <input
        id="password"
        type="password"
        placeholder="Password"
        [(ngModel)]="password"
        required
      />
    </div>
    <button [disabled]="isLoading" type="submit" (click)="handleSubmit()">
      {{ isLoading ? "Loading..." : "Create Account" }}
    </button>
  </div>`,
  styles: `
.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 200px;
}

.input-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

input[type="text"],
input[type="password"] {
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

input:focus {
    border-color: #007bff;
    outline: none;
}

button[type="submit"] {
    width: 200px;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: #e36132;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button[type="submit"]:hover:not(:disabled) {
    background-color: #e3531f;
}

button[type="submit"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
`,
})
export class CreateAccountFormComponent {}
  1. Import and add the component to your App in src/app/app.ts:
src/app/app.ts
// ... other imports here
import { CreateAccountFormComponent } from "./create-account-form/create-account-form.component";

@Component({
  selector: "app-root",
  imports: [CreateAccountFormComponent],
  template: `<main class="main">
    <app-create-account-form />
  </main>`,
})
export class App {}

​
4. Install and initialize the Fingerprint SDK

  1. To integrate Fingerprint into your Angular app, first add the SDK via npm:
Terminal
npm install @fingerprintjs/fingerprintjs-pro-angular
Since Angular v19 no longer uses NgModule-based structure, and the current Fingerprint SDK was built for earlier versions, we’ll create a helper function to export the necessary method..
  1. Create a src/app/utils/fingerprint.provider.ts file with the following code:
src/app/utils/fingerprint.provider.ts
import { EnvironmentProviders, Provider } from "@angular/core";
import {
  FingerprintjsProAngularModule,
  FpjsClientOptions,
} from "@fingerprintjs/fingerprintjs-pro-angular";

export function provideFingerprintPro(
  clientOptions: FpjsClientOptions
): Provider | EnvironmentProviders {
  const moduleWithProvider =
    FingerprintjsProAngularModule.forRoot(clientOptions);

  return moduleWithProvider.providers as Provider | EnvironmentProviders;
}
  1. Now that we have provideFingerprintPro, import and initialize it in your app config entry point. Open src/app/app.config.ts and add the Fingerprint provider provideFingerprintPro function into the providers array of the config option:
src/app/app.config.ts
// ... other imports here
import { provideFingerprintPro } from "./utils/fingerprint.provider";

export const appConfig: ApplicationConfig = {
  providers: [
    // ...other config options
    provideFingerprintPro({
      loadOptions: {
        apiKey: "<your-public-api-key>",
        region: "us",
        // Ensure this matches your workspace region
        // For more information, see <https://docs.fingerprint.com/docs/regions>
      },
    }),
  ],
};
  1. Replace <your-public-api-key> with your actual public API key from the Fingerprint dashboard.
Note: For production, consider using environment variables to configure the API 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/clicks 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. Within the empty CreateAccountFormComponent class in create-account-form.component.ts, declare username and password as properties with empty strings as initial value to track your form inputs. Also import FingerprintjsProAngularService:
src/app/create-account-form/create-account-form.component.ts
import { FingerprintjsProAngularService } from "@fingerprintjs/fingerprintjs-pro-angular";

// ... rest of component here
export class CreateAccountFormComponent {
  isLoading = false;

  username = "";
  password = "";
}
  1. Configure the Fingerprint service by passing it into the CreateAccountFormComponent class constructor. This automatically initializes it via Dependency Injection:
src/app/create-account-form/create-account-form.component.ts
export class CreateAccountFormComponent {
  // ... other properties here

  constructor(private fingerprintService: FingerprintjsProAngularService) {}
}
  1. Define the submit handler to trigger identification when the user clicks Create Account:
src/app/create-account-form/create-account-form.component.ts
 async handleSubmit() {
    this.isLoading = true;

    try {
      const data = await this.fingerprintService.getVisitorData();

      console.log(`
        Visitor ID: ${data.visitorId}
        Request ID: ${data.requestId}`);

      // Send the requestId to your server
      // await fetch("/api/create-account", {
      //   method: "POST",
      //   headers: { "Content-Type": "application/json" },
      //   body: JSON.stringify({
      //     username: this.username,
      //     password: this.password,
      //     requestId,
      //   }),
      // });

    } catch (err) {
      console.error('Registration failed', err);
    } finally {
      this.isLoading = false;
    }
  }
In this function:
  • this.isLoading = true is used to monitor the process stage for the function call.
  • const data = await this.fingerprintService.getVisitorData(); — This triggers Fingerprint’s device identification and returns a data object containing the visitor’s visitorId and requestId, which you can then send to your back end along with the username and password.

​
6. Test the app

  1. If your dev server isn’t already running, start it with:
Terminal
npm start
  1. In your browser, go to http://localhost:4200 (Angular’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: kLmvO1y70BHKyTgoNoPq
Request ID: 9171022083823.zox1GS

​
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: