feat: adding ui-fingerprint utility (#589)

### **PR Type** Enhancement, Tests, Documentation ___ ### **Description** - Implemented various fingerprinting techniques including audio, browser, canvas, fonts, hardware, locale, screen, and system. - Added unit tests for the `hash` function. - Configured build and test environments using Vite, tsup, and Vitest. - Updated dependencies and build scripts to include `@versini/ui-fingerprint`. - Added documentation and configuration files for the new package. ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>15 files</summary><table> <tr> <td> <details> <summary><strong>main.tsx</strong><dd><code>Add main entry point for fingerprint utility</code>                          </dd></summary> <hr> packages/bundlesize/src/fingerprint/src/main.tsx <li>Imported <code>@versini/ui-fingerprint</code> and React libraries.<br> <li> Rendered a simple React component.<br> <li> Added a loop to ensure all components are bundled.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-ed494ebfed7fe18b73f874e8decc25b85f112a409cbd8932d32c23d9e93edec1">+16/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>fingerprint.ts</strong><dd><code>Implement fingerprint data collection and hashing</code>                </dd></summary> <hr> packages/ui-fingerprint/src/common/fingerprint.ts <li>Implemented functions to gather and hash fingerprint data.<br> <li> Added error handling for data gathering and hashing.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-2b944da987f50f2d3e783b6e102884ae859f65bc674688b542b5e26576b15ea3">+68/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>hash.ts</strong><dd><code>Implement SHA-256 hash function</code>                                                    </dd></summary> <hr> packages/ui-fingerprint/src/common/hash.ts - Implemented `hash` function to generate SHA-256 hash. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-0aa86e15c05b907df039f58379633dbfca4676d27a15f776efa20ff0c1e9030d">+12/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>types.d.ts</strong><dd><code>Define types for fingerprint components</code>                                    </dd></summary> <hr> packages/ui-fingerprint/src/common/types.d.ts - Defined types for various fingerprint components. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-30ea2ad7a246b04f769f89562bf8b47932a184e37d2cdf2e4a1e4171a580cdae">+63/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>utilities.ts</strong><dd><code>Add utility functions for hashing and DOM manipulation</code>      </dd></summary> <hr> packages/ui-fingerprint/src/common/utilities.ts - Added utility functions for hashing and DOM manipulation. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-881cf3587a7325277db6870d182e6dba88f53b4364b29166b3778802c75fdb24">+115/-0</a>  </td> </tr> <tr> <td> <details> <summary><strong>audio.ts</strong><dd><code>Implement audio fingerprinting</code>                                                      </dd></summary> <hr> packages/ui-fingerprint/src/components/audio.ts <li>Implemented audio fingerprinting.<br> <li> Added error handling for audio context creation.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-e1b2946cdbd3ff235dcc8126fd4eadde7b5ac5f42a8cd43ccd13bf7d70b33212">+53/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>browser.ts</strong><dd><code>Implement browser fingerprinting</code>                                                  </dd></summary> <hr> packages/ui-fingerprint/src/components/browser.ts - Implemented browser fingerprinting. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-bcb61015a33d02e92cbed739dabefd757655a24abcf8b9b8806b1d450ea5b9b8">+9/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>canvas.ts</strong><dd><code>Implement canvas fingerprinting</code>                                                    </dd></summary> <hr> packages/ui-fingerprint/src/components/canvas.ts <li>Implemented canvas fingerprinting.<br> <li> Added techniques to defeat canvas counter-fingerprinting.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-e4c67d9fc77cde065ec9ac0131bf83396251bff417924d7875146923e91e30c7">+123/-0</a>  </td> </tr> <tr> <td> <details> <summary><strong>fonts.ts</strong><dd><code>Implement font detection for fingerprinting</code>                            </dd></summary> <hr> packages/ui-fingerprint/src/components/fonts.ts <li>Implemented font detection for fingerprinting.<br> <li> Added iframe-based font detection.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-13f70fac3638c4dc5491645c3af8f92cb6b47f6ad41c88bc72b8cb1435068333">+133/-0</a>  </td> </tr> <tr> <td> <details> <summary><strong>hardware.ts</strong><dd><code>Implement hardware fingerprinting</code>                                                </dd></summary> <hr> packages/ui-fingerprint/src/components/hardware.ts <li>Implemented hardware fingerprinting.<br> <li> Added functions to detect video card and architecture.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-1b1eb6d2074b49c52af3d132cdcf455748bc626a92ee0e8d011300d5bfce1417">+76/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Export fingerprint data and hash functions</code>                              </dd></summary> <hr> packages/ui-fingerprint/src/components/index.ts - Exported fingerprint data and hash functions. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-ed0a88971651b02b4fb54b04ea7a480f1e2801b5105d60e5d601b6443654235a">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>locale.ts</strong><dd><code>Implement locale fingerprinting</code>                                                    </dd></summary> <hr> packages/ui-fingerprint/src/components/locale.ts - Implemented locale fingerprinting. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-eb4d5e99e954b49b148925d879f2432c7f8f2c7694d017208b5c808503001f28">+17/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>screen.ts</strong><dd><code>Implement screen fingerprinting</code>                                                    </dd></summary> <hr> packages/ui-fingerprint/src/components/screen.ts - Implemented screen fingerprinting. - Added media query detection. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-455cb14eded0cfbcf2ef3e1ac4db2bd2a13f6f20770711b91b6c068bbcacb95d">+69/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>system.ts</strong><dd><code>Implement system fingerprinting</code>                                                    </dd></summary> <hr> packages/ui-fingerprint/src/components/system.ts - Implemented system fingerprinting. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-cc9ee437d754149edddb45d314cd597f79cbc662e06b7152f65708b7120f3f80">+27/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.html</strong><dd><code>Add HTML entry point for fingerprint utility</code>                          </dd></summary> <hr> packages/bundlesize/src/fingerprint/index.html - Added HTML entry point for fingerprint utility. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-6a87f40b3556e3c180369beca00a05752815609693abc4fc023e9a3af73965fc">+19/-0</a>    </td> </tr> </table></details></td></tr><tr><td><strong>Configuration changes</strong></td><td><details><summary>13 files</summary><table> <tr> <td> <details> <summary><strong>vite-env.d.ts</strong><dd><code>Add Vite environment type reference</code>                                            </dd></summary> <hr> packages/bundlesize/src/fingerprint/src/vite-env.d.ts - Added Vite environment type reference. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-fd1953bdce11e374e90db5ee17fbcb77f14ac7726e668b48e35fdc38647f8544">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>vite-env.d.ts</strong><dd><code>Add Vite environment type reference</code>                                            </dd></summary> <hr> packages/ui-fingerprint/src/vite-env.d.ts - Added Vite environment type reference. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-44315ad9d5c2a16e17aef5c59052bcb47194bfc7eb4db5ed4619aeb0d563f29a">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>tsup.config.ts</strong><dd><code>Add tsup configuration</code>                                                                      </dd></summary> <hr> packages/ui-fingerprint/tsup.config.ts - Added configuration for `tsup` bundler. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-0c6a8637783c0ec8b75082e2d0c17330059b4e8a2d6cdbafef94095732ca5e52">+12/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>vite.config.ts</strong><dd><code>Add Vite configuration for building package</code>                            </dd></summary> <hr> packages/ui-fingerprint/vite.config.ts <li>Added Vite configuration for building the package.<br> <li> Included custom banner and input handling.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-4e068be355d0f24465d4688bf6b09cad19b86bead5e4e36363c05a573792ffd7">+109/-0</a>  </td> </tr> <tr> <td> <details> <summary><strong>vitest.config.ts</strong><dd><code>Add Vitest configuration for testing</code>                                          </dd></summary> <hr> packages/ui-fingerprint/vitest.config.ts <li>Added Vitest configuration for testing.<br> <li> Included coverage thresholds.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-d4bf42296bebc43030f20ce05801e327e9305ac2bc5aa0677e704cabbc4f9472">+28/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>vitest.setup.ts</strong><dd><code>Add Vitest setup file</code>                                                                        </dd></summary> <hr> packages/ui-fingerprint/vitest.setup.ts <li>Added setup file for Vitest.<br> <li> Included custom error handling for console errors.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-2371955acdd94a4265d84b09e78f4898ba4cf02811a6d2121f233552ffdb95dd">+17/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>bundlesize.config.js</strong><dd><code>Add bundlesize configuration</code>                                                          </dd></summary> <hr> packages/ui-fingerprint/bundlesize.config.js - Added bundlesize configuration for fingerprint package. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-b462994d2549a253292661cbc6265fb8b637b523bbec739ac53d4f71c570e07c">+18/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>package.json</strong><dd><code>Update build scripts and dependencies</code>                                        </dd></summary> <hr> packages/bundlesize/package.json <li>Added build script for fingerprint package.<br> <li> Included <code>@versini/ui-fingerprint</code> as a dependency.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-bc3bf4ac9fbc2a1e3543f129ba289a90bced4c31800976b09b7ea5e11a2e7b2c">+3/-1</a>      </td> </tr> <tr> <td> <details> <summary><strong>nodemon.json</strong><dd><code>Update nodemon configuration</code>                                                          </dd></summary> <hr> packages/documentation/nodemon.json - Added `ui-fingerprint` to watched directories. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-9bee6180ad6fa46afb0d309ae64f5226fb042b3e092235bd5c0a57108ed7e3dd">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>package.json</strong><dd><code>Update documentation dependencies</code>                                                </dd></summary> <hr> packages/documentation/package.json - Added `@versini/ui-fingerprint` as a dependency. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-46fe383cb201f1f668d4185052185194a35e1b2651f24aea5ce7ffb0a19b4732">+1/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>package.json</strong><dd><code>Add package configuration for ui-fingerprint</code>                          </dd></summary> <hr> packages/ui-fingerprint/package.json - Added package configuration for `@versini/ui-fingerprint`. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-23c93f64223cebb184a754677e16943433242f8136dfda25b98d0fc8c6d76ac0">+38/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>tsconfig.json</strong><dd><code>Add TypeScript configuration</code>                                                          </dd></summary> <hr> packages/ui-fingerprint/tsconfig.json - Added TypeScript configuration for `ui-fingerprint`. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-9de2931fd5c994b2529c73be4ae9754a28af763df6f3fece060e3ed82aa7bab2">+26/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>tsconfig.node.json</strong><dd><code>Add TypeScript node configuration</code>                                                </dd></summary> <hr> packages/ui-fingerprint/tsconfig.node.json - Added TypeScript node configuration for `ui-fingerprint`. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-093df991fef54cceb1e882364f5609dc8445bf3f1c8fdd08812e8712f99fe72d">+10/-0</a>    </td> </tr> </table></details></td></tr><tr><td><strong>Tests</strong></td><td><details><summary>1 files</summary><table> <tr> <td> <details> <summary><strong>hash.test.ts</strong><dd><code>Add unit tests for hash function</code>                                                  </dd></summary> <hr> packages/ui-fingerprint/src/common/__tests__/hash.test.ts <li>Added tests for the <code>hash</code> function.<br> <li> Covered various edge cases and typical usage scenarios.<br> </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-602b044ad77d200ea041833e13fa45dc3a3c259193c149a70902d2cd3de55f1a">+52/-0</a>    </td> </tr> </table></details></td></tr><tr><td><strong>Documentation</strong></td><td><details><summary>1 files</summary><table> <tr> <td> <details> <summary><strong>README.md</strong><dd><code>Add README for ui-fingerprint package</code>                                        </dd></summary> <hr> packages/ui-fingerprint/README.md - Added README for `@versini/ui-fingerprint` package. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-011365ac1ffba13adce35ba1dc0c11ae62087f8e28fca634e6f2dbe5c40a4d83">+3/-0</a>      </td> </tr> </table></details></td></tr><tr><td><strong>Dependencies</strong></td><td><details><summary>1 files</summary><table> <tr> <td> <details> <summary><strong>pnpm-lock.yaml</strong><dd><code>Update pnpm lockfile</code>                                                                          </dd></summary> <hr> pnpm-lock.yaml - Updated lockfile to include `@versini/ui-fingerprint`. </details> </td> <td><a href="https://github.com/aversini/ui-components/pull/589/files#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bb">+8/-0</a>      </td> </tr> </table></details></td></tr></tr></tbody></table> ___ > 💡 **PR-Agent usage**: >Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions
versini-org · Jul 18, 2024 · 30d5e3f · 30d5e3f
1 parent c4bc9cf
commit 30d5e3f
Show file tree

Hide file tree

Showing 34 changed files with 1,145 additions and 3 deletions.
diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml
@@ -35,6 +35,7 @@ jobs:
           refresh-message-position: true
           message-path: |
             packages/ui-components/tmp/pr-stats.md
+            packages/ui-fingerprint/tmp/pr-stats.md
             packages/ui-form/tmp/pr-stats.md
             packages/ui-system/tmp/pr-stats.md
 

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -5,5 +5,6 @@
 	"packages/ui-private": "1.4.6",
 	"packages/ui-icons": "1.11.0",
 	"packages/ui-styles": "1.9.3",
-	"packages/ui-form": "1.3.6"
+	"packages/ui-form": "1.3.6",
+	"packages/ui-fingerprint": "0.0.0"
 }
diff --git a/packages/bundlesize/package.json b/packages/bundlesize/package.json
@@ -8,9 +8,10 @@
 	"scripts": {
 		"clean": "rimraf dist",
 		"build:components": "cross-env-shell VITE_UI_TARGET=components vite build",
+		"build:fingerprint": "cross-env-shell VITE_UI_TARGET=fingerprint vite build",
 		"build:form": "cross-env-shell VITE_UI_TARGET=form vite build",
 		"build:system": "cross-env-shell VITE_UI_TARGET=system vite build",
-		"build": "npm-run-all --serial clean build:components build:system build:form",
+		"build": "npm-run-all --serial clean build:*",
 		"test": "echo \"WARNING: no test specified\" && exit 0",
 		"test:coverage": "echo \"WARNING: no test specified\" && exit 0"
 	},
@@ -20,6 +21,7 @@
 	},
 	"dependencies": {
 		"@versini/ui-components": "workspace:../ui-components",
+		"@versini/ui-fingerprint": "workspace:../ui-fingerprint",
 		"@versini/ui-form": "workspace:../ui-form",
 		"@versini/ui-hooks": "workspace:../ui-hooks",
 		"@versini/ui-icons": "workspace:../ui-icons",

diff --git a/packages/bundlesize/src/fingerprint/index.html b/packages/bundlesize/src/fingerprint/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#64748b">
+  <link rel="icon" type="image/png" href="/favicon.ico?v=2">
+
+  <title>UI Fingerprint</title>
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/bundlesize/src/fingerprint/src/main.tsx b/packages/bundlesize/src/fingerprint/src/main.tsx
@@ -0,0 +1,16 @@
+import * as UI from "@versini/ui-fingerprint";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+Object.keys(UI).forEach(() => {
+	/**
+	 * This is simply to loop through all components
+	 * and trick rollup into bundling them (instead of
+	 * simply tree-shaking anything that is imported but
+	 * not used...)
+	 */
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>hello</React.StrictMode>,
+);
diff --git a/packages/bundlesize/src/fingerprint/src/vite-env.d.ts b/packages/bundlesize/src/fingerprint/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/documentation/nodemon.json b/packages/documentation/nodemon.json
@@ -6,6 +6,7 @@
 		"../ui-components/src/**/*.*",
 		"../ui-components/lib/**/*.*",
 		"../ui-styles/src/**/*.*",
+		"../ui-fingerprint/src/**/*.*",
 		"../ui-form/src/**/*.*",
 		"../ui-icons/src/**/*.*",
 		"../ui-system/src/**/*.*"

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -22,6 +22,7 @@
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.13",
 		"@versini/ui-components": "workspace:../ui-components",
+		"@versini/ui-fingerprint": "workspace:../ui-fingerprint",
 		"@versini/ui-form": "workspace:../ui-form",
 		"@versini/ui-icons": "workspace:../ui-icons",
 		"@versini/ui-styles": "workspace:../ui-styles",

diff --git a/packages/ui-fingerprint/README.md b/packages/ui-fingerprint/README.md
@@ -0,0 +1,3 @@
+# @versini/ui-fingerprint
+
+This package provides a simple way to fingerprint a user's browser and device.
diff --git a/packages/ui-fingerprint/bundlesize.config.js b/packages/ui-fingerprint/bundlesize.config.js
@@ -0,0 +1,18 @@
+const bundlePath = "../bundlesize/dist/fingerprint";
+export default {
+	report: {
+		header: "## Bundle Size (fingerprint)",
+		previous: "stats/stats.json",
+		current: "tmp/stats.json",
+	},
+	sizes: [
+		{
+			path: `${bundlePath}/assets/index.js`,
+			limit: "4 KB",
+		},
+		{
+			path: `${bundlePath}/assets/vendor.js`,
+			limit: "45 KB",
+		},
+	],
+};
diff --git a/packages/ui-fingerprint/package.json b/packages/ui-fingerprint/package.json
@@ -0,0 +1,38 @@
+{
+	"name": "@versini/ui-fingerprint",
+	"version": "0.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://github.com/aversini/ui-components",
+	"repository": {
+		"type": "git",
+		"url": "[email protected]:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": ["dist"],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "vite build",
+		"build:types": "tsup",
+		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"clean": "rimraf dist tmp",
+		"dev:js": "vite build --watch --mode development",
+		"dev:types": "tsup --watch src",
+		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"lint": "biome lint src",
+		"start": "static-server dist --port 5173",
+		"stats:pr": "bundlesize -c bundlesize.config.js -p \"$npm_package_version\" -o tmp/stats.json --silent",
+		"stats:release": "bundlesize -c bundlesize.config.js -p \"$npm_package_version\" -o stats/stats.json --silent",
+		"stats:report": "bundlesize -c bundlesize.config.js --type report -o tmp/pr-stats.md --silent",
+		"stats": "bundlesize -c bundlesize.config.js -p \"$npm_package_version\"",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"devDependencies": {},
+	"dependencies": {}
+}
diff --git a/packages/ui-fingerprint/src/common/__tests__/hash.test.ts b/packages/ui-fingerprint/src/common/__tests__/hash.test.ts
@@ -0,0 +1,52 @@
+import { hashFromString } from "../utilities";
+
+describe("hash happy path", () => {
+	it("should return correct hash when given a simple string", async () => {
+		const input = "hello";
+		const expectedHash =
+			"2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824";
+		const result = await hashFromString(input);
+		expect(result).toBe(expectedHash);
+	});
+
+	it("should hash an empty string correctly", async () => {
+		const input = "";
+		const expectedHash = "";
+		const result = await hashFromString(input);
+		expect(result).toBe(expectedHash);
+	});
+
+	// hashes a string with special characters correctly
+	it("should hash a string with special characters correctly", async () => {
+		const input = "Special!@#$%^&*()_+Characters";
+		const expectedHash =
+			"be9d7689cca679f9e797f80c9511a3181ba27b9207a20a5932127a9f4e45cc83";
+		const result = await hashFromString(input);
+		expect(result).toBe(expectedHash);
+	});
+});
+
+describe("hash edge cases", () => {
+	it("should return a hash when given a very large input string", async () => {
+		const input = "a".repeat(10 ** 6); // 1 million characters
+		const result = await hashFromString(input);
+		expect(result).toHaveLength(64); // SHA-256 hash length in hex is 64 characters
+	});
+
+	// handles non-ASCII characters
+	it("should return correct hash when given non-ASCII characters", async () => {
+		const input = "你好世界"; // Non-ASCII characters
+		const expectedHash =
+			"beca6335b20ff57ccc47403ef4d9e0b8fccb4442b3151c2e7d50050673d43172"; // Expected hash for the input
+		const result = await hashFromString(input);
+		expect(result).toBe(expectedHash);
+	});
+
+	it("should return empty hash when input is whitespace", async () => {
+		const input = "   ";
+		const expectedHash =
+			"0aad7da77d2ed59c396c99a74e49f3a4524dcdbcb5163251b1433d640247aeb4";
+		const result = await hashFromString(input);
+		expect(result).toBe(expectedHash);
+	});
+});
diff --git a/packages/ui-fingerprint/src/common/fingerprint.ts b/packages/ui-fingerprint/src/common/fingerprint.ts
@@ -0,0 +1,72 @@
+import type {
+	AudioFP,
+	BrowserFP,
+	CanvasFP,
+	FontsFP,
+	HardwareFP,
+	LocalesFP,
+	ScreenFP,
+	SystemFP,
+} from "../common/types";
+import { emptyAudio, getAudio } from "../components/audio";
+import { emptyBrowser, getBrowser } from "../components/browser";
+import { emptyCanvas, getCanvas } from "../components/canvas";
+import { emptyFonts, getFonts } from "../components/fonts";
+import { emptyHardware, getHardware } from "../components/hardware";
+import { emptyLocales, getLocales } from "../components/locale";
+import { emptyScreen, getScreen } from "../components/screen";
+import { emptySystem, getSystem } from "../components/system";
+
+import { hashFromString } from "./utilities";
+
+type FingerprintData = [
+	AudioFP,
+	BrowserFP,
+	CanvasFP,
+	FontsFP,
+	HardwareFP,
+	LocalesFP,
+	ScreenFP,
+	SystemFP,
+];
+
+export const getFingerprintData = async (
+	debug: boolean,
+): Promise<FingerprintData> => {
+	try {
+		return Promise.all([
+			getAudio(debug),
+			getBrowser(debug),
+			getCanvas(debug),
+			getFonts(debug),
+			getHardware(debug),
+			getLocales(debug),
+			getScreen(debug),
+			getSystem(debug),
+		]);
+	} catch (_error) {
+		return [
+			emptyAudio,
+			emptyBrowser,
+			emptyCanvas,
+			emptyFonts,
+			emptyHardware,
+			emptyLocales,
+			emptyScreen,
+			emptySystem,
+		];
+	}
+};
+
+export const getFingerprintHash = async (debug: boolean): Promise<string> => {
+	try {
+		const data = await getFingerprintData(debug);
+		return await hashFromString(JSON.stringify(data));
+	} catch (_error) {
+		if (debug) {
+			console.error("Error getting fingerprint hash");
+			console.info(_error);
+		}
+		return "";
+	}
+};
diff --git a/packages/ui-fingerprint/src/common/types.d.ts b/packages/ui-fingerprint/src/common/types.d.ts
@@ -0,0 +1,63 @@
+export type MaybePromise<T> = Promise<T> | T;
+export type BrowserFP = { browser: string };
+
+export type VideoCardFP = {
+	vendor: string;
+	vendorUnmasked: string;
+	renderer: string;
+	rendererUnmasked: string;
+	version: string;
+	shadingLanguageVersion: string;
+};
+
+export type HardwareFP = {
+	hardware: {
+		videocard: VideoCardFP;
+		architecture: number;
+		deviceMemory: string;
+		jsHeapSizeLimit: number;
+	};
+};
+
+export type CanvasFP = {
+	canvas: {
+		data: string;
+	};
+};
+
+export type AudioFP = {
+	audio: {
+		sampleHash: string;
+		oscillator: string;
+		maxChannels: number;
+		channelCountMode: string;
+	};
+};
+
+export type SystemFP = {
+	system: {
+		platform: string;
+		cookieEnabled: boolean;
+		productSub: string;
+		product: string;
+	};
+};
+
+export type LocalesFP = {
+	locales: {
+		languages: string;
+		timezone: string;
+	};
+};
+
+export type ScreenFP = {
+	screen: {
+		colorDepth: number;
+		pixelDepth: number;
+		isTouchScreen: boolean;
+		maxTouchPoints: number;
+		mediaMatches: string[];
+	};
+};
+
+export type FontsFP = string[];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# @versini/ui-fingerprint

		This package provides a simple way to fingerprint a user's browser and device.