add fingerprint

package.json

@@ -29,5 +29,8 @@
     "tslib": "^2.8.1",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
+  },
+  "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.5.1"
   }
 }

src/App.svelte

@@ -1,12 +1,24 @@
 <script lang="ts">
+  import type { GetResult } from "@fingerprintjs/fingerprintjs";
+  import { onMount } from "svelte";
   import Fingerprint from "./Pages/Fingerprint.svelte";
   import Questions from "./Pages/Questions.svelte";
   import Questions2 from "./Pages/Questions2.svelte";
   import Thanks from "./Pages/Thanks.svelte";
   import Welcome from "./Pages/Welcome.svelte";
+  import Fingerprinter from "./utils/Fingerprinter";
 
   let page = $state(0);
   let transitioning = $state<number | null>(null);
+  let fingerprint = $state<GetResult>();
+
+  const fingerprinter = new Fingerprinter();
+
+  onMount(() => {
+    if (fingerprint !== undefined) return;
+
+    fingerprinter.createFingerprint().then((result) => (fingerprint = result));
+  });
 
   $effect(() => {
     const anchor = Number(document.location.hash);
@@ -16,6 +28,9 @@
   });
 
   const handleNext = () => {
+    if (page === 0) {
+      fingerprinter.createFingerprint();
+    }
     if (page >= 4) return (page = 4);
     transitioning = page;
     page++;
@@ -34,7 +49,7 @@
   {:else if page === 2 && transitioning !== 1}
     <Questions2 {handleNext} {handleTransitionFinished} />
   {:else if page === 3 && transitioning !== 2}
-    <Fingerprint {handleNext} {handleTransitionFinished} />
+    <Fingerprint {handleNext} {handleTransitionFinished} {fingerprint} />
   {:else if page === 4 && transitioning !== 3}
     <Thanks />
   {/if}

src/Pages/Fingerprint.svelte

@@ -1,60 +1,118 @@
 <script lang="ts">
+  import type { GetResult } from "@fingerprintjs/fingerprintjs";
   import { fly } from "svelte/transition";
 
   type Props = {
     handleNext: () => void;
     handleTransitionFinished: () => void;
+    fingerprint?: GetResult;
   };
 
-  let { handleNext, handleTransitionFinished }: Props = $props();
+  let { handleNext, handleTransitionFinished, fingerprint }: Props = $props();
+
+  const fingerprintArr =
+    fingerprint &&
+    Object.entries(fingerprint.components).map(([componentName, component]) => {
+      const name = componentName;
+      let value;
+
+      if ("value" in component) value = component.value;
+
+      if (value && typeof value === "object") value = "Object";
+
+      if (value === undefined || value === "") value = "Unknown";
+
+      return {
+        name,
+        value,
+      };
+    });
 </script>
 
-<div
-  class="card space-y-4 p-4"
+<section
+  class="space-y-8 pb-8"
   in:fly={{ x: 200, duration: 500, delay: 0.001 }}
   out:fly={{ x: -200, duration: 100 }}
   onoutroend={handleTransitionFinished}
 >
-  <h2 class="text-lg text-teal-400">Nice, you made it this far!</h2>
-  <p>
-    In order to better understand <i class="text-teal-400">tracking methods</i>
-    I would like to read out some of your
-    <i class="text-teal-400">browser attributes</i> and save them to evaluate them
-    for my masters thesis.
-  </p>
-  <p>
-    <i class="text-teal-400">Browser attributes</i> are for example: your
-    operating system, the browser and version you are using, your screen size,
-    your installed system languages, and and and.
-    <span class="text-white text-opacity-40"
-      >(it's hard to give a complete list here, because it is pretty technical,
-      but the important thing to say is, that none of this data is related to
-      personal information about you)</span
-    >
-  </p>
-  <p>
-    But, did you know, that these attributes can be used to <i
-      class="text-teal-400">track</i
-    >
-    you? A lot of websites regularly collect this information and put them together
-    to create something called a
-    <i class="text-teal-400">browser fingerprint</i>.
-  </p>
-  <p>
-    💜💜💜<br />It would help me a lot if I could create such a
-    <i class="text-teal-400">browser fingerprint</i>
-    from your browser now to better understand how it works.<br />💜💜💜
-  </p>
-  <p>
-    Of course, your data is <i class="text-teal-400">handled with care</i> in a way
-    that you are not identifiable!
-  </p>
-  <div class="flex flex-col flex-wrap justify-end gap-4 pt-8 md:flex-row">
+  <div class="card">
+    <header class="card-header p-4">
+      <h2 class="text-2xl">Nice, you made it this far!</h2>
+    </header>
+
+    <section class="space-y-4 p-4">
+      <p>
+        In order to better understand <i class="text-teal-400"
+          >tracking methods</i
+        >
+        I would like to read out some of your
+        <i class="text-teal-400">browser attributes</i> and save them to evaluate
+        them for my masters thesis.
+      </p>
+      <p>
+        <i class="text-teal-400">Browser attributes</i> are for example: your
+        operating system, the browser and version you are using, your screen
+        size, your installed system languages, and and and.
+        <span class="text-white text-opacity-40"
+          >(it's hard to give a complete list here, because it is pretty
+          technical, but the important thing to say is, that none of this data
+          is related to personal information about you)</span
+        >
+      </p>
+      <p>
+        But, did you know, that these attributes can be used to <i
+          class="text-teal-400">track</i
+        >
+        you? A lot of websites regularly collect this information and put them together
+        to create something called a
+        <i class="text-teal-400">browser fingerprint</i>.
+      </p>
+      <p>
+        💜💜💜<br />It would help me a lot if I could create such a
+        <i class="text-teal-400">browser fingerprint</i>
+        from your browser now to better understand how it works.<br />💜💜💜
+      </p>
+      <p>
+        Of course, your data is <i class="text-teal-400">handled with care</i> in
+        a way that you are not identifiable!
+      </p>
+    </section>
+  </div>
+
+  {#if fingerprint !== undefined && fingerprintArr !== undefined}
+    <div class="card">
+      <header class="card-header p-4">
+        <h2 class="text-2xl">Your Device Fingerprint:</h2>
+      </header>
+      <section class="pt-4">
+        <ul
+          class="fingerprint-list flex flex-col overflow-hidden sm:grid sm:grid-cols-2"
+        >
+          <li
+            class="flex-cols flex flex-wrap justify-between gap-2 px-4 py-2 sm:col-span-2 sm:grid sm:grid-cols-subgrid"
+          >
+            <p>Your Visitor-ID:</p>
+            <p><i class="text-teal-400">{fingerprint.visitorId}</i></p>
+          </li>
+          {#each fingerprintArr as component, i}
+            <li
+              class={`flex-cols flex flex-wrap justify-between gap-2 px-4 py-2 sm:col-span-2 sm:grid sm:grid-cols-subgrid ${(i + 1) % 2 && "bg-surface-700"}`}
+            >
+              <p>{component.name}:</p>
+              <p>{component.value}</p>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    </div>
+  {/if}
+
+  <div class="flex flex-col flex-wrap justify-end gap-4 md:flex-row">
     <button class="variant-filled btn" onclick={handleNext}
       >Ok, you can use my browser data</button
     >
     <button class="variant-filled btn" onclick={handleNext}
       >No, I don't like to share this data</button
     >
   </div>
-</div>
+</section>

src/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.svelte"
+  ],
+}

src/utils/Fingerprinter.ts

@@ -0,0 +1,11 @@
+import FingerprintJS, { type GetResult } from "@fingerprintjs/fingerprintjs";
+
+class Fingerprinter {
+  async createFingerprint(): Promise<GetResult> {
+    const fingerprintAgent = await FingerprintJS.load();
+    const fingerprint = await fingerprintAgent.get();
+    return fingerprint;
+  }
+}
+
+export default Fingerprinter;

tsconfig.json

@@ -1,29 +1,11 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "resolveJsonModule": true,
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
-    "allowJs": true,
-    "checkJs": true,
-    "isolatedModules": true,
-    "moduleDetection": "force"
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.js",
-    "src/**/*.svelte"
-  ],
+  "include": [],
   "references": [
     {
       "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "src/tsconfig.json"
     }
   ]
 }