Skip to content

feat: use fingerprints instead of uuids #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jish2 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: use fingerprints instead of uuids #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d2c40b
add pkg
Jish2 Nov 3, 2025
e6a23e7
replace localstorage with fingerprint
Jish2 Nov 3, 2025
16e4e2a
fix window undefined error
Jish2 Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@chakra-ui/react": "^2.4.6",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@fingerprintjs/fingerprintjs": "^5.0.1",
"@next/font": "13.1.1",
"eslint": "8.30.0",
"eslint-config-next": "^12.0.4",
Expand Down
50 changes: 21 additions & 29 deletions frontend/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
// prettier-ignore
import { animateGreen, animateRed, scrollContainer, screenButtonContainer, createButton, sortText, relative } from "../styles/Card.module.css";
// Dependencies
import { v4 as uuidv4 } from "uuid";
import FingerprintJS from "@fingerprintjs/fingerprintjs";
import ReactGA from "react-ga";

import { useErrorToast } from "../hooks/useErrorToast";
Expand Down Expand Up @@ -68,7 +68,7 @@ export default function Home() {
try {
const response = await fetch(`${API_URL}/posts?sort=${type}`, {
headers: {
Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`,
Authorization: `Basic ${btoa(uuid)}`,
},
});
const results = await response.json();
Expand All @@ -91,25 +91,21 @@ export default function Home() {
ReactGA.initialize(TRACKING_ID);
ReactGA.pageview(window.location.pathname);

// Check if user has visited already
if (localStorage.getItem("uuid") == null) {
// If not, add UUID to local storage.
localStorage.setItem("uuid", uuidv4());
setUUID(localStorage.getItem("uuid"));
} else {
setUUID(localStorage.getItem("uuid"));
}
// Set UUID to fingerprint ID
(async () => {
const getFingerprintId = async () => {
if (typeof window === "undefined") {
return null;
}
const fpPromise = FingerprintJS.load();
const fp = await fpPromise;
const result = await fp.get();
return result.visitorId;
};

// if (localStorage.getItem("sort") == null) localStorage.setItem("sort", "0");
// setSortMethod(parseInt(localStorage.getItem("sort")));
// if (localStorage.getItem("sort") !== "0") {
// fetchPosts(SORT_ICONS[parseInt(localStorage.getItem("sort")) % SORT_ICONS.length].name.toLowerCase())
// .then((res) => setPosts(res))
// .catch((error) => {
// console.error(error);
// addToast(error?.response?.data || error.message);
// });
// }
const fingerprintId = await getFingerprintId();
setUUID(fingerprintId);
})();

(async () => {
const res = await fetchPosts(SORT_ICONS[sortMethod].name.toLowerCase());
Expand All @@ -119,20 +115,16 @@ export default function Home() {
setHasMorePosts(!(posts.length === 0));
}, []);

// useEffect(() => {
// localStorage.setItem("sort", sortMethod);
// }, [sortMethod]);

async function loadMore() {
try {
console.log("Loading");
const res = await fetch(
`${API_URL}/posts?offset=${posts.length}&sort=${SORT_ICONS[sortMethod].name.toLowerCase()}`,
{
headers: {
Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`,
Authorization: `Basic ${btoa(uuid)}`,
},
},
}
);
const loadedPosts = await res.json();
if (loadedPosts.length == 0) {
Expand Down Expand Up @@ -177,7 +169,7 @@ export default function Home() {
fetchPosts(
SORT_ICONS[
(sortMethod + 1) % SORT_ICONS.length
].name.toLowerCase(),
].name.toLowerCase()
)
.then((res) => setPosts(res))
.catch((error) => {
Expand Down Expand Up @@ -228,7 +220,7 @@ export default function Home() {
{posts.map(
(
post,
i, //TODO theres an error here...duplicate keys
i //TODO theres an error here...duplicate keys
) => (
<div key={`${post._id}${i}`} className={relative}>
{/* this is the left and right indicators */}
Expand Down Expand Up @@ -266,7 +258,7 @@ export default function Home() {
key={`${post._id}${i}`}
/>
</div>
),
)
)}
</div>
</InfiniteScroll>
Expand Down
42 changes: 19 additions & 23 deletions frontend/pages/post/[id].jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
// prettier-ignore
import { animateGreen, animateRed, scrollContainer, screenButtonContainer, createButton, sortText, relative } from "../../styles/Card.module.css";
// Dependencies
import { v4 as uuidv4 } from "uuid";
import FingerprintJS from "@fingerprintjs/fingerprintjs";
import ReactGA from "react-ga";

import { useErrorToast } from "../../hooks/useErrorToast";
Expand Down Expand Up @@ -78,7 +78,7 @@ export default function Home({ queriedPost, id }) {
try {
const response = await fetch(`${API_URL}/posts?sort=${type}`, {
headers: {
Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`,
Authorization: `Basic ${btoa(uuid)}`,
},
});
const results = await response.json();
Expand All @@ -101,25 +101,21 @@ export default function Home({ queriedPost, id }) {
ReactGA.initialize(TRACKING_ID);
ReactGA.pageview(window.location.pathname);

// Check if user has visited already
if (localStorage.getItem("uuid") == null) {
// If not, add UUID to local storage.
localStorage.setItem("uuid", uuidv4());
setUUID(localStorage.getItem("uuid"));
} else {
setUUID(localStorage.getItem("uuid"));
}
// Set UUID to fingerprint ID
(async () => {
const getFingerprintId = async () => {
if (typeof window === "undefined") {
return null;
}
const fpPromise = FingerprintJS.load();
const fp = await fpPromise;
const result = await fp.get();
return result.visitorId;
};

// if (localStorage.getItem("sort") == null) localStorage.setItem("sort", "0");
// setSortMethod(parseInt(localStorage.getItem("sort")));
// if (localStorage.getItem("sort") !== "0") {
// fetchPosts(SORT_ICONS[parseInt(localStorage.getItem("sort")) % SORT_ICONS.length].name.toLowerCase())
// .then((res) => setPosts(res))
// .catch((error) => {
// console.error(error);
// addToast(error?.response?.data || error.message);
// });
// }
const fingerprintId = await getFingerprintId();
setUUID(fingerprintId);
})();

(async () => {
const res = await fetchPosts("hot");
Expand All @@ -140,9 +136,9 @@ export default function Home({ queriedPost, id }) {
`${API_URL}/posts?offset=${posts.length}&sort=${SORT_ICONS[sortMethod].name.toLowerCase()}`,
{
headers: {
Authorization: `Basic ${btoa(localStorage.getItem("uuid"))}`,
Authorization: `Basic ${btoa(uuid)}`,
},
},
}
);
const loadedPosts = await res.json();
if (loadedPosts.length == 0) {
Expand Down Expand Up @@ -191,7 +187,7 @@ export default function Home({ queriedPost, id }) {
fetchPosts(
SORT_ICONS[
(sortMethod + 1) % SORT_ICONS.length
].name.toLowerCase(),
].name.toLowerCase()
)
.then((res) => setPosts(res))
.catch((error) => {
Expand Down
5 changes: 5 additions & 0 deletions frontend/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1538,6 +1538,11 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"

"@fingerprintjs/fingerprintjs@^5.0.1":
version "5.0.1"
resolved "https://artifactory.rbx.com/artifactory/api/npm/npm-all/@fingerprintjs/fingerprintjs/-/fingerprintjs-5.0.1.tgz#e6ca2f88719b90e54a0fa8ab2896eee970948bb7"
integrity sha512-KbaeE/rk2WL8MfpRP6jTI4lSr42SJPjvkyrjP3QU6uUDkOMWWYC2Ts1sNSYcegHC8avzOoYTHBj+2fTqvZWQBA==

"@humanwhocodes/config-array@^0.11.8":
version "0.11.14"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
Expand Down