feat(app): use fingerprintjs open-source

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fingerprintjs/fingerprintjs": "^3.4.1",
     "@fontsource/roboto": "^5.0.3",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
@@ -33,7 +34,6 @@
     "@react-pdf/renderer": "^3.1.12",
     "@sws2apps/react-sw-helper": "^1.14.0",
     "@tanstack/react-query": "^4.29.14",
-    "clientjs": "^0.2.1",
     "comlink": "^4.4.1",
     "date-fns": "^2.30.0",
     "dateformat": "^5.0.3",

src/App.jsx

@@ -3,7 +3,7 @@ import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { ClientJS } from 'clientjs';
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import CssBaseline from '@mui/material/CssBaseline';
 import PrivateVipConnectedRoute from './components/PrivateVipConnectedRoute';
 import PrivateElderRoute from './components/PrivateElderRoute';
@@ -209,19 +209,20 @@ const App = ({ updatePwa }) => {
   useEffect(() => {
     const getUserID = async () => {
       try {
-        const client = new ClientJS();
-        const visitorId = client.getFingerprint();
-
-        console.info('CPE: Fingerprint: Device visitor id has been set');
+        const fp = await FingerprintJS.load();
+        const result = await fp.get();
 
+        const visitorId = result.visitorId;
         setVisitorID(visitorId);
         backupWorkerInstance.setVisitorID(visitorId);
+
+        console.info('CPE: Fingerprint: Device visitor id has been set');
       } catch (error) {
         console.error(`CPE: Fingerprint: ${error}`);
       }
     };
 
-    getUserID();
+    if (isOnline) getUserID();
   }, [setVisitorID, isOnline]);
 
   useEffect(() => {