Updated: Secure localStorage with cryptojs

Author: fhmiibrhimdev

frontend/package-lock.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "axios": "^1.3.5",
+        "crypto-js": "^4.1.1",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

frontend/package.json

@@ -8,7 +8,7 @@ export default function Footer() {
                 By
                 <a href="https://github.com/fhmiibrhimdev"> Fahmi Ibrahim</a>
             </div>
-            <div className="footer-right">0.1.7</div>
+            <div className="footer-right">0.1.8</div>
         </footer>
     );
 }

frontend/src/components/Footer.jsx

@@ -42,18 +42,18 @@ export default function Navigation() {
                 handleClickOutsideDropdown
             );
         };
-    }, []);
+    }, [navigate]);
 
     const fetchData = async () => {
         axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-        await axios.get(`${appConfig.baseURL}/user`).then((response) => {
+        await axios.get(`${appConfig.baseurlAPI}/user`).then((response) => {
             setUser(response.data);
         });
     };
 
     const logoutHandler = async () => {
         axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-        await axios.post(`${appConfig.baseURL}/logout`).then(() => {
+        await axios.post(`${appConfig.baseurlAPI}/logout`).then(() => {
             localStorage.removeItem("token");
             navigate("/");
         });

frontend/src/components/Navigation.jsx

@@ -1,6 +1,6 @@
 const appConfig = {
     debounceTimeout: 750,
-    expirationTime: 60 * 60 * 1000,
+    expirationTime: 60 * 60 * 1000, // set 1 hours
     baseURL: "http://127.0.0.1:8000",
     baseurlAPI: "http://127.0.0.1:8000/api",
 };

frontend/src/config/appConfig.js

@@ -1,24 +1,43 @@
 import appConfig from "../../config/appConfig";
+import CryptoJS from "crypto-js";
 
 export function setTokenWithExpiration(key, token) {
     const now = new Date();
     const expirationTime = now.getTime() + appConfig.expirationTime;
-    const item = token + "|" + expirationTime;
+
+    const keyStr = "sangat-aman-12345";
+    const iv = CryptoJS.lib.WordArray.random(16);
+    const encryptedToken = CryptoJS.AES.encrypt(token, keyStr, {
+        iv: iv,
+    }).toString();
+
+    const item = encryptedToken + "|" + expirationTime + "|" + iv.toString();
     localStorage.setItem(key, item);
 }
 
 export function getTokenWithExpiration(key) {
     const item = localStorage.getItem(key);
+
     if (!item) {
         return null;
     }
-    const [token, expirationTime] = item.split("|");
-    const now = new Date();
-    if (now.getTime() > expirationTime) {
+
+    const parts = item.split("|");
+    const encryptedToken = parts[0];
+    const expirationTime = parts[1];
+    const iv = parts[2];
+
+    const keyStr = "sangat-aman-12345";
+    const decryptedToken = CryptoJS.AES.decrypt(encryptedToken, keyStr, {
+        iv: CryptoJS.enc.Hex.parse(iv),
+    }).toString(CryptoJS.enc.Utf8);
+
+    if (parseInt(expirationTime) < new Date().getTime()) {
         localStorage.removeItem(key);
         return null;
     }
-    return token;
+
+    return decryptedToken;
 }
 
 export function getTokenExpirationTime(key) {