Dprintjs NPM | npm.io

dPrintJs

A lightweight, framework-agnostic browser fingerprinting library that generates unique device identifiers. It uses multiple browser characteristics to create either short (8 characters) or long (64 characters) fingerprints that remain consistent for the same device.

Features

🔒 Privacy-focused device fingerprinting
🎯 Consistent device identification
🔄 Short (8 chars) and long (64 chars) fingerprint formats
🛠 Framework agnostic (works with React, Vue, Angular, or vanilla JS)
⚡ Lightweight with zero dependencies
🎨 Configurable components (Canvas, Audio, WebGL)
🔐 Optional salt for additional uniqueness
💪 TypeScript support

Installation

npm install dprintjs
# or
yarn add dprintjs
# or
pnpm add dprintjs

Quick Start

import { dPrintId } from 'dprintjs';

// Get instance
const fingerprint = dPrintId.getInstance();

// Generate short fingerprint (8 characters)
const shortId = await fingerprint.generateFingerprint();
// Example output: "k7lm9n2p"

// Generate long fingerprint (64 characters)
const longId = await fingerprint.generateFingerprint({ format: 'long' });
// Example output: "8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92"

Framework Examples

React

import { useEffect, useState } from 'react';
import { dPrintId } from 'dprintjs';

function App() {
  const [deviceId, setDeviceId] = useState('');

  useEffect(() => {
    const getFingerprint = async () => {
      const fingerprint = dPrintId.getInstance();
      const id = await fingerprint.generateFingerprint();
      setDeviceId(id);
    };
    getFingerprint();
  }, []);

  return <div>Device ID: {deviceId}</div>;
}

Vue

<script setup>
import { ref, onMounted } from 'vue';
import { dPrintId } from 'dprintjs';

const deviceId = ref('');

onMounted(async () => {
  const fingerprint = dPrintId.getInstance();
  deviceId.value = await fingerprint.generateFingerprint();
});
</script>

<template>
  <div>Device ID: {{ deviceId }}</div>
</template>

Angular

import { Component, OnInit } from '@angular/core';
import { dPrintId } from 'dprintjs';

@Component({
  selector: 'app-root',
  template: '<div>Device ID: {{deviceId}}</div>'
})
export class AppComponent implements OnInit {
  deviceId = '';

  async ngOnInit() {
    const fingerprint = dPrintId.getInstance();
    this.deviceId = await fingerprint.generateFingerprint();
  }
}

Vanilla JavaScript

<script type="module">
  import { dPrintId } from 'dprintjs';

  async function init() {
    const fingerprint = dPrintId.getInstance();
    const deviceId = await fingerprint.generateFingerprint();
    document.getElementById('device-id').textContent = deviceId;
  }

  init();
</script>

<div id="device-id"></div>

API Reference

FingerprintOptions

interface FingerprintOptions {
  format?: 'short' | 'long';     // Output format (default: 'short')
  includeCanvas?: boolean;       // Use canvas fingerprinting (default: true)
  includeAudio?: boolean;        // Use audio fingerprinting (default: true)
  includeWebGL?: boolean;        // Use WebGL fingerprinting (default: true)
  salt?: string;                 // Additional salt for uniqueness
}

Methods

`dPrintId.getInstance()`

Returns the singleton instance of the dPrintId.

`generateFingerprint(options?: FingerprintOptions): Promise<string>`

Generates a device fingerprint based on the provided options.

Examples

Basic Usage

const fingerprint = dPrintId.getInstance();
const deviceId = await fingerprint.generateFingerprint();

Long Format with Custom Salt

const fingerprint = dPrintId.getInstance();
const deviceId = await fingerprint.generateFingerprint({
  format: 'long',
  salt: 'my-custom-salt'
});

Minimal Components

const fingerprint = dPrintId.getInstance();
const deviceId = await fingerprint.generateFingerprint({
  includeCanvas: false,
  includeAudio: false,
  includeWebGL: true
});

API Integration Example

import axios from 'axios';
import { dPrintId } from 'dprintjs';

const api = axios.create();

// Add fingerprint to all API requests
api.interceptors.request.use(async (config) => {
  const fingerprint = dPrintId.getInstance();
  const deviceId = await fingerprint.generateFingerprint();
  
  config.headers['Device-ID'] = deviceId;
  return config;
});