Fingerprint Angular SDK is an easy way to integrate Fingerprint into your Angular application. See the src folder for a full usage example.

This SDK supports v4 of the Fingerprint JavaScript agent. See the v3 to v4 migration guide for more information.

• Requirements
• Installation
• Getting started
• Caching strategy
• Documentation
• Version support
• Support and feedback
• License

The following dependencies are required:

• TypeScript >=4.6
• Node 16+
• Angular 15+

This package works with the commercial Fingerprint platform. It is not compatible with the source-available FingerprintJS library. Learn more about the differences between Fingerprint and FingerprintJS.

Using npm:

npm install @fingerprint/angular

Using pnpm:

pnpm add @fingerprint/angular

Using yarn:

yarn add @fingerprint/angular

To identify visitors, you'll need a Fingerprint account (you can sign up for free). To get your API key and get started, see the Quick Start guide in our documentation.

1. Add provideFingerprint to your providers array (for standalone applications) or FingerprintModule.forRoot() to the imports section (for NgModule applications), and pass it the startOptions configuration object. You can specify multiple configuration options. Set a region if you have chosen a non-global region during registration. Set endpoints if you are using one of our proxy integrations to increase accuracy and effectiveness of visitor identification. Read more about other forRoot() / provideFingerprint() parameters below.

Standalone application example:

import { ApplicationConfig } from '@angular/core';
import { provideFingerprint } from '@fingerprint/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFingerprint({
      startOptions: {
        apiKey: '<PUBLIC_API_KEY>',
        endpoints: 'https://metrics.yourwebsite.com',
        // region: 'eu',
      },
    }),
  ],
}

Legacy NgModule application example:

import { NgModule } from '@angular/core'
import { FingerprintModule, Fingerprint } from '@fingerprint/angular'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Add this block
    FingerprintModule.forRoot({
      startOptions: {
        apiKey: '<PUBLIC_API_KEY>',
        endpoints: 'https://metrics.yourwebsite.com',
        // region: "eu"
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Inject FingerprintService in your component using inject(). Now you can identify visitors using the getVisitorData() method.

Standalone application example (Angular 16+):

import { Component, inject, signal } from '@angular/core'
import { FingerprintService } from '@fingerprint/angular'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrl: './home.component.css',
})
export class HomeComponent {
  private fingerprintService = inject(FingerprintService)

  eventId = signal('Press "Identify" button to get eventId')

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintService.getVisitorData()
    this.eventId.set(data.event_id)
  }
}

Legacy NgModule application example:

import { Component } from '@angular/core'
import { FingerprintService } from '@fingerprint/angular'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  constructor(private fingerprintService: FingerprintService) {}

  eventId = 'Press "Identify" button to get eventId'

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintService.getVisitorData()
    this.eventId = data.event_id
  }
}

The library can be used with Angular SSR. Keep in mind that visitor identification is only possible in the browser, so your visitor identification code should only run client-side. See the Angular 15 demo application for an example implementation.

The event_id provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the linkedId and tags, see Linking and tagging information.

Associate your data with an identification event using the linkedId or tags parameter of the options object passed into the getVisitorData() method:

Standalone application example (Angular 16+):

// ...

import { Component, inject } from '@angular/core'
import { FingerprintService } from '@fingerprint/angular'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrl: './home.component.css',
})
export class HomeComponent {
  private fingerprintService = inject(FingerprintService)

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintService.getVisitorData({
      linkedId: 'user_1234',
      tags: {
        userAction: 'login',
        analyticsId: 'UA-5555-1111-1',
      },
    })

    // ...
  }
}

Legacy NgModule application example:

// ...

import { Component } from '@angular/core'
import { FingerprintService } from '@fingerprint/angular'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  constructor(private fingerprintService: FingerprintService) {}

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintService.getVisitorData({
      linkedId: 'user_1234',
      tags: {
        userAction: 'login',
        analyticsId: 'UA-5555-1111-1',
      },
    })

    // ...
  }
}

Fingerprint usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. By default, the SDK does not use caching.

• Specify cache on the FingerprintModule.forRoot props or provideFingerprint options to enable and configure caching.
• For more details, see Caching results.

This library uses Fingerprint JavaScript Agent V4 under the hood. See our documentation for the full JavaScript Agent API reference.

The library provides two ways to initialize the Fingerprint JS agent and provide FingerprintService to your application: FingerprintModule (for NgModule-based applications) and provideFingerprint (for standalone applications).

{ startOptions: Fingerprint.StartOptions }

Options for the Fingerprint JS agent. Options follow the agent's initialization properties.

An endpoint for a specific HTTPS request. Can be a single URL string, an array of strings, or wrapped with withoutDefault(...) to disable fallback.

Hashes URL parts before sending them to the Fingerprint server.

Configuration for caching agent results.

This method performs identification requests with the FingerprintJS Pro API.

• options: Fingerprint.GetOptions parameter follows the parameters of the FingerprintJS Pro's get function.

The projects/demo-angular15 folder contains an example Angular 15 application that uses NgModule and server-side rendering. It is a separate package with its own dependencies and uses the library source directly. To run the demo locally:

1. Clone the repository with git clone [email protected]:fingerprintjs/angular.git.
2. Inside the root folder, run pnpm install to install the dependencies.
3. Run pnpm generate:version to create an SDK version file.
4. Run cd projects/demo-angular15 to move into the demo folder.
5. Create a dev environment file with cp src/environments/environment.ts src/environments/environment.dev.ts, and inside, replace Fingerprint public key with your actual public key.
6. Run pnpm start to start the demo application.

The application will start on http://localhost:4200.

To try server-side rendering, run pnpm build:ssr && pnpm serve:ssr from the demo folder. The server starts on http://localhost:4000.

The projects/demo-angular21 folder contains an example standalone Angular 21 application. It is a separate package with its own dependencies. To run the demo locally:

1. Clone the repository with git clone [email protected]:fingerprintjs/angular.git.
2. Inside the root folder, run pnpm install to install the dependencies.
3. Run pnpm generate:version to create an SDK version file.
4. Run cd projects/demo-angular21 to move into the demo folder.
5. Create a dev environment file with cp src/environments/environment.ts src/environments/environment.dev.ts, and inside, replace Fingerprint public key with your actual public key.
6. Run pnpm start to start the demo application.

The application will start on http://localhost:4200.

To ask questions or provide feedback, use Issues. If you need private support, please email us at [email protected]. If you'd like to have a similar Angular wrapper for the source-available FingerprintJS, consider creating an issue in the main FingerprintJS repository.

See the full generated API reference.

This project is licensed under the MIT license. See the LICENSE file for more info.