diff --git a/frontend/package.json b/frontend/package.json
index 2b15dbc..5e27719 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
diff --git a/frontend/pages/index.jsx b/frontend/pages/index.jsx
index 5a35f5c..d2272b8 100644
--- a/frontend/pages/index.jsx
+++ b/frontend/pages/index.jsx
@@ -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";
@@ -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();
@@ -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());
@@ -119,10 +115,6 @@ export default function Home() {
setHasMorePosts(!(posts.length === 0));
}, []);
- // useEffect(() => {
- // localStorage.setItem("sort", sortMethod);
- // }, [sortMethod]);
-
async function loadMore() {
try {
console.log("Loading");
@@ -130,9 +122,9 @@ export default function Home() {
`${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) {
@@ -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) => {
@@ -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
) => (
{/* this is the left and right indicators */}
@@ -266,7 +258,7 @@ export default function Home() {
key={`${post._id}${i}`}
/>
- ),
+ )
)}
diff --git a/frontend/pages/post/[id].jsx b/frontend/pages/post/[id].jsx
index 5d1acce..5b1c7f1 100644
--- a/frontend/pages/post/[id].jsx
+++ b/frontend/pages/post/[id].jsx
@@ -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";
@@ -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();
@@ -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");
@@ -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) {
@@ -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) => {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8d6b1d5..f0dc565 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -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"