feat(app): remove dependency from fingerprintjs

sws2apps · Jun 16, 2023 · 928e6b8 · 928e6b8
1 parent fd99752
commit 928e6b8
Show file tree

Hide file tree

Showing 19 changed files with 151 additions and 156 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,6 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fingerprintjs/fingerprintjs-pro": "^3.8.3",
     "@fontsource/roboto": "^5.0.3",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
@@ -34,6 +33,7 @@
     "@react-pdf/renderer": "^3.1.12",
     "@sws2apps/react-sw-helper": "^1.14.0",
     "@tanstack/react-query": "^4.29.13",
+    "clientjs": "^0.2.1",
     "comlink": "^4.4.1",
     "date-fns": "^2.30.0",
     "dateformat": "^5.0.3",
@@ -52,9 +52,9 @@
     "react-router-dom": "^6.13.0",
     "recoil": "^0.7.7",
     "recoil-outside": "^0.1.1",
-    "simple-crypto-js": "^3.0.1",
     "use-pwa2": "^0.2.0",
     "validator": "^13.9.0",
+    "vite": "^4.3.9",
     "vite-plugin-comlink": "^3.0.5",
     "workbox-cli": "^7.0.0"
   },
@@ -72,7 +72,6 @@
     "eslint-plugin-cypress": "^2.13.3",
     "prop-types": "^15.8.1",
     "serve": "^14.2.0",
-    "vite": "^4.3.9",
     "vite-plugin-eslint": "^1.8.1"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,8 +3,8 @@ 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 CssBaseline from '@mui/material/CssBaseline';
-import FingerprintJS from '@fingerprintjs/fingerprintjs-pro';
 import PrivateVipConnectedRoute from './components/PrivateVipConnectedRoute';
 import PrivateElderRoute from './components/PrivateElderRoute';
 import PrivateSecretaryRoute from './components/PrivateSecretaryRoute';
@@ -207,18 +207,11 @@ const App = ({ updatePwa }) => {
   }, [isLight]);
 
   useEffect(() => {
-    // get visitor ID and check if there is an active connection
     const getUserID = async () => {
       try {
-        const fpPromise = FingerprintJS.load({
-          apiKey: import.meta.env.VITE_FINGERPRINT_API_CLIENT_KEY,
-        });
+        const client = new ClientJS();
+        const visitorId = client.getFingerprint();
 
-        let visitorId = '';
-
-        const fp = await fpPromise;
-        const result = await fp.get();
-        visitorId = result.visitorId;
         console.info('CPE: Fingerprint: Device visitor id has been set');
 
         setVisitorID(visitorId);
@@ -228,9 +221,7 @@ const App = ({ updatePwa }) => {
       }
     };
 
-    if (isOnline) {
-      getUserID();
-    }
+    getUserID();
   }, [setVisitorID, isOnline]);
 
   useEffect(() => {

diff --git a/src/features/congregationPersons/CongregationPersonPocketDevice.jsx b/src/features/congregationPersons/CongregationPersonPocketDevice.jsx
@@ -41,7 +41,9 @@ const CongregationPersonPocketDevice = ({ device, handleDeleteDevice }) => {
               }}
             />
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
-              <Typography sx={{ fontSize: '14px' }}>{device.name}</Typography>
+              <Typography
+                sx={{ fontSize: '14px' }}
+              >{`IP: ${device.visitor_details.ip} - ${device.visitor_details.ipLocation.country_name}`}</Typography>
               <Box>
                 <Chip
                   label={formatLastSeen(device.sws_last_seen)}

diff --git a/src/features/congregationPersons/CongregationPersonVipDevice.jsx b/src/features/congregationPersons/CongregationPersonVipDevice.jsx
@@ -35,11 +35,9 @@ const CongregationPersonVipDevice = ({ session, handleRevokeSession }) => {
             <GpsFixedIcon sx={{ fontSize: '60px', marginRight: '10px', color: '#1976d2' }} />
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
               <Typography sx={{ fontSize: '18px', fontWeight: 'bold' }}>
-                {`IP: ${session.visitor_details.ip} - ${session.visitor_details.ipLocation.country.name}`}
-              </Typography>
-              <Typography>
-                {`${session.visitor_details.browserDetails.browserName} (${session.visitor_details.browserDetails.os} ${session.visitor_details.browserDetails.osVersion})`}
+                {`IP: ${session.visitor_details.ip} - ${session.visitor_details.ipLocation.country_name}`}
               </Typography>
+              <Typography>{session.visitor_details.browser}</Typography>
               <Typography>{t('lastSeen', { last_seen: formatLastSeen(session.sws_last_seen) })}</Typography>
               {visitorID === session.visitorid && (
                 <Box>

diff --git a/src/features/settings/UserPocketSessionItem.jsx b/src/features/settings/UserPocketSessionItem.jsx
@@ -92,7 +92,9 @@ const UserPocketSessionItem = ({ device }) => {
               }}
             />
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
-              <Typography sx={{ fontSize: '14px' }}>{device.name}</Typography>
+              <Typography
+                sx={{ fontSize: '14px' }}
+              >{`IP: ${device.visitor_details.ip} - ${device.visitor_details.ipLocation.country_name}`}</Typography>
               <Box>
                 <Chip
                   label={formatLastSeen(device.sws_last_seen)}

diff --git a/src/features/settings/UserVipSessionItem.jsx b/src/features/settings/UserVipSessionItem.jsx
@@ -94,9 +94,7 @@ const UserSessionItem = ({ session, setSessions }) => {
         <GpsFixedIcon sx={{ fontSize: '60px', marginRight: '10px', color: '#1976d2' }} />
         <Box>
           <Typography sx={{ fontSize: '14px' }}>{`${session.ip} - ${session.country_name}`}</Typography>
-          <Typography sx={{ fontSize: '14px' }}>
-            {`${session.device.browserName} (${session.device.os} ${session.device.osVersion})`}
-          </Typography>
+          <Typography sx={{ fontSize: '14px' }}>{`${session.device.browserName} - ${session.device.os}`}</Typography>
           <Typography sx={{ fontSize: '14px' }}>{t('lastSeen', { last_seen: lastSeen })}</Typography>
           {visitorID === session.visitorid && (
             <Chip

diff --git a/src/features/startup/AccountChooser.jsx b/src/features/startup/AccountChooser.jsx
@@ -52,7 +52,7 @@ const AccountChooser = () => {
           </RadioGroup>
         </FormControl>
       </Box>
-      <Button variant="contained" disabled={visitorID.length === 0} onClick={handleConfirmOption}>
+      <Button variant="contained" disabled={visitorID.toString().length === 0} onClick={handleConfirmOption}>
         {t('next')}
       </Button>
     </Container>

diff --git a/src/features/startup/pocket/PocketSignUp.jsx b/src/features/startup/pocket/PocketSignUp.jsx
@@ -147,8 +147,8 @@ const PocketSignUp = () => {
         </Button>
         <Button
           variant="contained"
-          disabled={!isOnline || isProcessing || visitorID.length === 0}
-          endIcon={visitorID.length === 0 || isProcessing ? <CircularProgress size={25} /> : null}
+          disabled={!isOnline || isProcessing || visitorID.toString().length === 0}
+          endIcon={visitorID.toString().length === 0 || isProcessing ? <CircularProgress size={25} /> : null}
           onClick={handleSignUp}
         >
           {t('activate')}

diff --git a/src/features/startup/pocket/index.jsx b/src/features/startup/pocket/index.jsx
@@ -57,7 +57,7 @@ const PocketStartup = () => {
         return;
       }
 
-      if (isOnline && visitorID.length > 0) {
+      if (isOnline && visitorID.toString().length > 0) {
         const { data, status } = await apiPocketValidate();
 
         if (status !== 200) {

diff --git a/src/features/startup/vip/EmailLinkAuthentication.jsx b/src/features/startup/vip/EmailLinkAuthentication.jsx
@@ -95,7 +95,7 @@ const EmailLinkAuthentication = () => {
           </Link>
           <Button
             variant="contained"
-            disabled={isProcessing || visitorID.length === 0}
+            disabled={isProcessing || visitorID.toString().length === 0}
             endIcon={isProcessing ? <CircularProgress size={25} /> : null}
             onClick={completeEmailAuth}
           >

diff --git a/src/features/startup/vip/EmailOTP.jsx b/src/features/startup/vip/EmailOTP.jsx
@@ -156,7 +156,7 @@ const EmailOTP = () => {
 
       <Button
         variant="contained"
-        disabled={isProcessingOTP || visitorID.length === 0}
+        disabled={isProcessingOTP || visitorID.toString().length === 0}
         onClick={handleSendEmailOTP}
         endIcon={isProcessingOTP ? <CircularProgress size={25} /> : null}
       >
@@ -186,7 +186,7 @@ const EmailOTP = () => {
       >
         <Button
           variant="contained"
-          disabled={isProcessing || visitorID.length === 0}
+          disabled={isProcessing || visitorID.toString().length === 0}
           onClick={handleVerifyEmailOTP}
           endIcon={isProcessing ? <CircularProgress size={25} /> : null}
         >

diff --git a/src/features/startup/vip/OAuthButtonBase.jsx b/src/features/startup/vip/OAuthButtonBase.jsx
@@ -142,7 +142,7 @@ const OAuthButtonBase = ({ buttonStyles, logo, text, provider, isEmail }) => {
       variant="contained"
       sx={{ ...buttonStyles, height: '41px', padding: 0, width: '320px', justifyContent: 'flex-start' }}
       onClick={handleAction}
-      disabled={visitorID.length === 0 || isAuthProcessing}
+      disabled={visitorID.toString().length === 0 || isAuthProcessing}
     >
       <Box sx={{ width: '50px', display: 'flex', alignItems: 'center' }}>
         <Box

diff --git a/src/features/startup/vip/SetupMFA.jsx b/src/features/startup/vip/SetupMFA.jsx
@@ -285,7 +285,7 @@ const SetupMFA = () => {
       >
         <Button
           variant="contained"
-          disabled={isProcessing || visitorID.length === 0}
+          disabled={isProcessing || visitorID.toString().length === 0}
           onClick={handleVerifyOTP}
           endIcon={isProcessing ? <CircularProgress size={25} /> : null}
         >

diff --git a/src/features/startup/vip/UserAccountUpgrade.jsx b/src/features/startup/vip/UserAccountUpgrade.jsx
@@ -136,7 +136,7 @@ const UserAccountUpgrade = () => {
             <Box sx={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
               <Button
                 variant="contained"
-                disabled={!isOnline || isProcessing || visitorID.length === 0}
+                disabled={!isOnline || isProcessing || visitorID.toString().length === 0}
                 endIcon={isProcessing ? <CircularProgress size={25} /> : null}
                 onClick={handleAuthSignIn}
               >

diff --git a/src/features/startup/vip/VerifyMFA.jsx b/src/features/startup/vip/VerifyMFA.jsx
@@ -191,7 +191,7 @@ const VerifyMFA = () => {
       >
         <Button
           variant="contained"
-          disabled={isProcessing || visitorID.length === 0}
+          disabled={isProcessing || visitorID.toString().length === 0}
           onClick={handleVerifyOTP}
           endIcon={isProcessing ? <CircularProgress size={25} /> : null}
         >

diff --git a/src/features/startup/vip/index.jsx b/src/features/startup/vip/index.jsx
@@ -137,7 +137,7 @@ const VipStartup = () => {
 
   useEffect(() => {
     if (showTermsUse) return;
-    if (visitorID.length === 0) return;
+    if (visitorID.toString().length === 0) return;
 
     const runAuthenticatedStep = async () => {
       try {