feat(encryption): update encryption library to tiny-enc

package.json

@@ -8,8 +8,8 @@
     "@fingerprintjs/fingerprintjs-pro": "^3.6.2",
     "@fontsource/roboto": "^4.5.5",
     "@mui/icons-material": "^5.6.2",
-    "@mui/lab": "^5.0.0-alpha.80",
-    "@mui/material": "^5.6.4",
+    "@mui/lab": "^5.0.0-alpha.81",
+    "@mui/material": "^5.7.0",
     "dateformat": "^5.0.3",
     "dexie": "^3.2.2",
     "dexie-export-import": "^1.0.3",
@@ -19,7 +19,8 @@
     "i18next": "^21.8.0",
     "interweave": "^13.0.0",
     "json-as-xlsx": "^2.4.2",
-    "jw-epub-parser": "^1.8.0",
+    "jw-epub-parser": "^1.9.0",
+    "public-encrypt": "^4.0.3",
     "qrcode": "^1.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -28,7 +29,7 @@
     "react-scripts": "^5.0.1",
     "recoil": "^0.7.2",
     "recoil-outside": "^0.1.1",
-    "simple-crypto-js": "^3.0.1",
+    "tiny-enc": "^1.0.2",
     "ua-parser-js": "^1.0.2",
     "use-pwa2": "^0.2.0",
     "workbox-cli": "^6.5.3"

src/components/settings/DialogDbBackup.js

@@ -14,7 +14,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import StorageIcon from '@mui/icons-material/Storage';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { decryptString } from '../../utils/sws-cryptr';
+import { decryptString } from '../../utils/sws-encryption';
 import {
 	appMessageState,
 	appSeverityState,
@@ -162,7 +162,7 @@ const DialogDbBackup = () => {
 		const backupData = await getEncryptedText();
 
 		try {
-			const decryptedData = decryptString(backupConfirmPwd, backupData);
+			const decryptedData = await decryptString(backupConfirmPwd, backupData);
 			fetch(decryptedData)
 				.then((res) => res.blob())
 				.then((blob) => {
@@ -191,7 +191,7 @@ const DialogDbBackup = () => {
 		setIsDisabled(true);
 
 		try {
-			const decryptedData = decryptString(backupConfirmPwd, backupData);
+			const decryptedData = await decryptString(backupConfirmPwd, backupData);
 			fetch(decryptedData)
 				.then((res) => res.blob())
 				.then((blob) => {

src/components/startup/UserMfaSetup.js

@@ -13,7 +13,7 @@ import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import StartupHeader from './StartupHeader';
-import { encryptString } from '../../utils/sws-cryptr';
+import { encryptString } from '../../utils/sws-encryption';
 import {
 	appMessageState,
 	appSeverityState,
@@ -104,7 +104,7 @@ const UserMfaSetup = () => {
 									}
 
 									// encrypt email & pwd
-									const encPwd = encryptString(
+									const encPwd = await encryptString(
 										userPwd,
 										JSON.stringify({ email: userEmail, pwd: userPwd })
 									);
@@ -114,7 +114,7 @@ const UserMfaSetup = () => {
 									obj.isCongVerified = true;
 									obj.cong_name = data.congregation.cong_name;
 									obj.cong_number = data.congregation.cong_number;
-									obj.userMe = encPwd;
+									obj.crd = encPwd;
 									await dbUpdateAppSettings(obj);
 
 									await loadApp();

src/components/startup/UserMfaVerify.js

@@ -8,7 +8,7 @@ import Container from '@mui/material/Container';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import StartupHeader from './StartupHeader';
-import { encryptString } from '../../utils/sws-cryptr';
+import { encryptString } from '../../utils/sws-encryption';
 import {
 	appMessageState,
 	appSeverityState,
@@ -88,7 +88,7 @@ const UserMfaVerify = () => {
 									}
 
 									// encrypt email & pwd
-									const encPwd = encryptString(
+									const encPwd = await encryptString(
 										userPwd,
 										JSON.stringify({ email: userEmail, pwd: userPwd })
 									);
@@ -98,7 +98,7 @@ const UserMfaVerify = () => {
 									obj.isCongVerified = true;
 									obj.cong_name = data.congregation.cong_name;
 									obj.cong_number = data.congregation.cong_number;
-									obj.userMe = encPwd;
+									obj.crd = encPwd;
 
 									await dbUpdateAppSettings(obj);
 

src/components/startup/UserSignIn.js

@@ -12,7 +12,7 @@ import Typography from '@mui/material/Typography';
 import StartupHeader from './StartupHeader';
 import { loadApp } from '../../utils/app';
 import { isEmailValid } from '../../utils/emailValid';
-import { decryptString } from '../../utils/sws-cryptr';
+import { decryptString } from '../../utils/sws-encryption';
 import { dbGetAppSettings, dbGetBackup } from '../../indexedDb/dbAppSettings';
 import {
 	dbRestoreDb,
@@ -80,7 +80,7 @@ const UserSignIn = () => {
 
 	const handleRestoreBackup = async () => {
 		const appBackup = await dbGetBackup();
-		const decryptedData = decryptString(userTmpPwd, appBackup);
+		const decryptedData = await decryptString(userTmpPwd, appBackup);
 
 		const data = await fetch(decryptedData);
 		const blob = await data.blob();
@@ -120,12 +120,10 @@ const UserSignIn = () => {
 				}
 
 				if (!isBackupDb && isMainDb) {
-					const { userMe } = await dbGetAppSettings();
-					const decryptData = decryptString(userTmpPwd, userMe);
-					if (
-						userTmpEmail === decryptData.email &&
-						userTmpPwd === decryptData.pwd
-					) {
+					const { crd } = await dbGetAppSettings();
+					const decryptData = await decryptString(userTmpPwd, crd);
+					const crdParse = JSON.parse(decryptData);
+					if (userTmpEmail === crdParse.email && userTmpPwd === crdParse.pwd) {
 						if (isOnline) {
 							await handleSignIn();
 						} else {
@@ -263,8 +261,8 @@ const UserSignIn = () => {
 					return;
 				}
 				if (isMainDb) {
-					const { userMe } = await dbGetAppSettings();
-					if (!userMe) {
+					const { crd } = await dbGetAppSettings();
+					if (!crd) {
 						setIsInternetNeeded(true);
 					} else {
 						setIsInternetNeeded(false);

src/indexedDb/dbAppSettings.js

@@ -2,6 +2,7 @@ import appDb from './mainDb';
 import backupDb from './backupDb';
 
 export const dbUpdateAppSettings = async (settingValue) => {
+	console.log(settingValue);
 	await appDb.table('app_settings').update(1, {
 		...settingValue,
 	});

src/indexedDb/dbUtility.js

@@ -4,7 +4,7 @@ import download from 'downloadjs';
 import backupDb from './backupDb';
 import appDb from './mainDb';
 
-import { encryptString } from '../utils/sws-cryptr';
+import { encryptString } from '../utils/sws-encryption';
 
 export const initAppDb = async () => {
 	await appDb.open();
@@ -86,7 +86,7 @@ export const dbExportDb = async (passcode) => {
 		};
 
 		const data = await convertBase64();
-		const encryptedData = encryptString(passcode, data);
+		const encryptedData = await encryptString(passcode, data);
 
 		const newBlob = new Blob([encryptedData], { type: 'text/plain' });
 
@@ -108,6 +108,6 @@ export const dbExportJsonDb = async (passcode) => {
 	};
 
 	const data = await convertBase64();
-	const encryptedData = encryptString(passcode, data);
+	const encryptedData = await encryptString(passcode, data);
 	return encryptedData;
 };

src/indexedDb/mainDb.js

@@ -91,6 +91,10 @@ appDb.version(17).stores({
 	app_settings:
 		'++id, cong_number, cong_name, class_count, meeting_day, userMe, isScheduleConverted, isCongVerified',
 });
+appDb.version(18).stores({
+	app_settings:
+		'++id, cong_number, cong_name, class_count, meeting_day, crd, isScheduleConverted, isCongVerified',
+});
 
 appDb.on('populate', function () {
 	appDb.app_settings.add({

src/utils/sws-encryption.js

@@ -0,0 +1,11 @@
+import tinyEnc from 'tiny-enc';
+
+export const encryptString = async (secret, payload) => {
+	const encrypted = await tinyEnc.encrypt(secret, payload);
+	return encrypted;
+};
+
+export const decryptString = async (secret, payload) => {
+	const decrypted = await tinyEnc.decrypt(secret, payload);
+	return decrypted;
+};