Merge pull request #961 from wwWallet/offline-sync

kkmanos · web-flow · commit a13e32a325a6 · 2025-12-12T15:45:19.000+02:00
Keystore Offline Synchronization
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -103,16 +103,26 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 	const [cachedUsers] = useLocalStorage<CachedUser[] | null>("cachedUsers", null);
 
 	const [sessionState, setSessionState, clearSessionState] = useSessionStorage<SessionState | null>("sessionState", null);
-	const clearSessionStorage = useClearStorages(clearAppToken, clearSessionState);
-
-	const navigate = useNavigate();
 
 	/**
 	 * Synchronization tag for the encrypted private data. To prevent data loss,
 	 * this MUST be refreshed only when a new version of the private data is
 	 * loaded into the keystore or successfully uploaded to the server.
 	 */
-	const [privateDataEtag, setPrivateDataEtag] = useLocalStorage<string | null>("privateDataEtag", null);
+	const getPrivateDataEtag = useCallback(() => {
+		return jsonParseTaggedBinary(localStorage.getItem('privateDataEtag'));
+	}, []);
+
+	const setPrivateDataEtag = useCallback((v: string) => {
+		localStorage.setItem('privateDataEtag', jsonStringifyTaggedBinary(v));
+	}, []);
+
+	const removePrivateDataEtag = useCallback(() => {
+		localStorage.removeItem('privateDataEtag');
+	}, []);
+
+	const navigate = useNavigate();
+	const clearSessionStorage = useClearStorages(clearAppToken, clearSessionState);
 
 	const getAppToken = useCallback((): string | null => {
 		return appToken;
@@ -151,9 +161,9 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 	): { [header: string]: string } => {
 		return {
 			...buildGetHeaders(headers, options),
-			...(privateDataEtag ? { 'X-Private-Data-If-Match': privateDataEtag } : {}),
+			...(getPrivateDataEtag() ? { 'X-Private-Data-If-Match': getPrivateDataEtag() } : {}),
 		};
-	}, [buildGetHeaders, privateDataEtag]);
+	}, [buildGetHeaders, getPrivateDataEtag]);
 
 	const getWithLocalDbKey = useCallback(async (
 		path: string,
@@ -283,7 +293,10 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 	>> => {
 
 		try {
-			const getPrivateDataResponse = await get('/user/session/private-data', { headers: { 'If-None-Match': privateDataEtag } });
+			if (!isOnline) {
+				return Ok.EMPTY;
+			}
+			const getPrivateDataResponse = await get('/user/session/private-data', { headers: { 'If-None-Match': getPrivateDataEtag() } });
 			if (getPrivateDataResponse.status === 304) {
 				return Ok.EMPTY; // already synced
 			}
@@ -304,7 +317,7 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 			return Err('syncFailed');
 		}
 
-	}, [privateDataEtag, get, navigate]);
+	}, [getPrivateDataEtag, get, navigate, isOnline]);
 
 	const updateShowWelcome = useCallback((showWelcome: boolean): void => {
 		if (sessionState) {
@@ -325,8 +338,9 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 
 	const clearSession = useCallback((): void => {
 		clearSessionStorage();
+		removePrivateDataEtag();
 		events.dispatchEvent(new CustomEvent<ClearSessionEvent>(CLEAR_SESSION_EVENT));
-	}, [clearSessionStorage]);
+	}, [clearSessionStorage, removePrivateDataEtag]);
 
 	const setSession = useCallback(async (
 		response: AxiosResponse,
@@ -354,10 +368,29 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 		options?: { appToken?: string }
 	): Promise<void> => {
 		try {
+			async function writeOnIndexedDB() {
+				if (!userHandle) {
+					return;
+				}
+				const userId = UserId.fromUserHandle(fromBase64Url(userHandle));
+				const userObject = await getItem("users", userId.id);
+				if (!userObject) {
+					throw new Error(`Could not find user with userHandle ${userHandle} on indexedDB 'users' table`);
+				}
+				userObject.privateData = serializePrivateData(newPrivateData);
+				await addItem("users", userId.id, userObject);
+			}
+
+			if (!isOnline) {
+				await writeOnIndexedDB();
+				console.log("Cannot write to remote keystore while offline");
+				return;
+			}
 			const updateResp = updatePrivateDataEtag(
 				await post('/user/session/private-data', serializePrivateData(newPrivateData), options),
 			);
 			if (updateResp.status === 204) {
+				await writeOnIndexedDB();
 				return;
 			} else {
 				console.error("Failed to update private data", updateResp.status, updateResp);
@@ -373,7 +406,7 @@ export function useApi(isOnlineProp: boolean = true): BackendApi {
 			}
 			throw e;
 		}
-	}, [post, updatePrivateDataEtag, cachedUsers, userHandle, syncPrivateData]);
+	}, [post, updatePrivateDataEtag, cachedUsers, userHandle, syncPrivateData, isOnline]);
 
 	const login = useCallback(async (
 		username: string,
diff --git a/src/components/Credentials/CredentialDeleteButton.jsx b/src/components/Credentials/CredentialDeleteButton.jsx
@@ -1,12 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '../Buttons/Button';
-import StatusContext from '@/context/StatusContext';
 import { Trash2 } from 'lucide-react';
 
+
 const CredentialDeleteButton = ({ onDelete }) => {
 	const { t } = useTranslation();
-	const { isOnline } = useContext(StatusContext);
 
 	const handleClick = () => {
 		onDelete();
@@ -17,8 +16,7 @@ const CredentialDeleteButton = ({ onDelete }) => {
 			id="credential-delete-button"
 			onClick={handleClick}
 			variant="delete"
-			disabled={!isOnline}
-			title={!isOnline && t('common.offlineTitle')}
+			title={t('common.offlineTitle')}
 			additionalClassName='xm:w-full'
 		>
 			<Trash2 size={18} /> {t('pageCredentials.delete')}
diff --git a/src/context/SessionContextProvider.tsx b/src/context/SessionContextProvider.tsx
@@ -25,6 +25,8 @@ export const SessionContextProvider = ({ children }: React.PropsWithChildren) =>
 	const [globalTabId] = useLocalStorage<string | null>("globalTabId", null);
 	const [tabId] = useSessionStorage<string | null>("tabId", null);
 
+	const [appToken] = useSessionStorage<string | null>("appToken", null);
+
 	useWalletStateCredentialsMigrationManager(keystore, api, isOnline, isLoggedIn);
 	useWalletStatePresentationsMigrationManager(keystore, api, isOnline, isLoggedIn);
 
@@ -99,6 +101,13 @@ export const SessionContextProvider = ({ children }: React.PropsWithChildren) =>
 		}
 	}, [globalTabId, tabId, clearSession, api, keystore]);
 
+	useEffect(() => {
+		if ((appToken === "" && isLoggedIn === true && isOnline === true) || // is logged-in when offline but now user is online again
+			(appToken !== "" && appToken !== null && isLoggedIn === true && isOnline === false)) { // is logged-in when online but now the user has lost connection
+			logout();
+		}
+
+	}, [appToken, isLoggedIn, isOnline, logout])
 
 	if ((api.isLoggedIn() === true && (keystore.isOpen() === false || !walletStateLoaded))) {
 		return <></>
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
@@ -998,8 +998,6 @@ const Settings = () => {
 											className={`h-10 pl-3 pr-10 bg-lm-gray-200 dark:bg-dm-gray-800 border border-lm-gray-600 dark:border-dm-gray-400 dark:text-white rounded-lg dark:inputDarkModeOverride appearance-none`}
 											defaultValue={userData.settings.openidRefreshTokenMaxAgeInSeconds}
 											onChange={(e) => handleTokenMaxAgeChange(e.target.value)}
-											disabled={!isOnline}
-											title={!isOnline ? t("common.offlineTitle") : undefined}
 										>
 											<option value="0">{t('pageSettings.rememberIssuer.options.none')}</option>
 											<option value="3600">{t('pageSettings.rememberIssuer.options.hour')}</option>
diff --git a/src/services/LocalStorageKeystore.ts b/src/services/LocalStorageKeystore.ts
@@ -3,15 +3,18 @@ import { useNavigate } from 'react-router-dom';
 
 import * as config from "../config";
 import { useClearStorages, useLocalStorage, useSessionStorage } from "../hooks/useStorage";
-import { toBase64Url } from "../util";
+import { fromBase64Url, jsonStringifyTaggedBinary, toBase64Url } from "../util";
 import { useIndexedDb } from "../hooks/useIndexedDb";
 import { useOnUserInactivity } from "../hooks/useOnUserInactivity";
 
 import * as keystore from "./keystore";
 import type { AsymmetricEncryptedContainer, AsymmetricEncryptedContainerKeys, EncryptedContainer, OpenedContainer, PrivateData, UnlockSuccess, WebauthnPrfEncryptionKeyInfo, WebauthnPrfSaltInfo, WrappedKeyInfo } from "./keystore";
 import { MDoc } from "@auth0/mdl";
 import { WalletStateUtils } from "./WalletStateUtils";
-import { addAlterSettingsEvent, addDeleteCredentialEvent, addDeleteCredentialIssuanceSessionEvent, addDeleteKeypairEvent, addNewCredentialEvent, addNewPresentationEvent, addSaveCredentialIssuanceSessionEvent, CurrentSchema, foldOldEventsIntoBaseState } from "./WalletStateSchema";
+import { addAlterSettingsEvent, addDeleteCredentialEvent, addDeleteCredentialIssuanceSessionEvent, addDeleteKeypairEvent, addNewCredentialEvent, addNewPresentationEvent, addSaveCredentialIssuanceSessionEvent, CurrentSchema, foldOldEventsIntoBaseState, foldState, mergeEventHistories } from "./WalletStateSchema";
+import { UserId } from "@/api/types";
+import { getItem } from "@/indexedDB";
+import { WalletStateContainerGeneric } from "./WalletStateSchemaCommon";
 
 type WalletState = CurrentSchema.WalletState;
 type WalletStateCredential = CurrentSchema.WalletStateCredential;
@@ -314,14 +317,73 @@ export function useLocalStorageKeystore(eventTarget: EventTarget): LocalStorageK
 	}, [setPrivateData, setMainKey, assertKeystoreOpen, userHandleB64u, writePrivateDataOnIdb]);
 
 	const finishUnlock = useCallback(async (
-		{ mainKey, privateData }: UnlockSuccess,
+		unlockSuccess: UnlockSuccess,
 		user: CachedUser | UserData | null,
-	): Promise<void> => {
+		credential: PublicKeyCredential | null,
+		promptForPrfRetry: () => Promise<boolean | AbortSignal>,
+	): Promise<keystore.EncryptedContainer> => {
 		if (user) {
 			const userHandleB64u = ("prfKeys" in user
 				? user.userHandleB64u
 				: toBase64Url(user.userHandle)
 			);
+			let newEncryptedContainer: keystore.EncryptedContainer;
+
+			if (privateData) { // keystore is already opened
+				const [localPrivateData, localMainKey] = await assertKeystoreOpen();
+				const [remoteContainer, remoteMainKey,] = await keystore.openPrivateData(unlockSuccess.mainKey, unlockSuccess.privateData);
+				const [localContainer, ,] = await keystore.openPrivateData(localMainKey, localPrivateData);
+				const mergedContainer = await mergeEventHistories(remoteContainer, localContainer);
+				const { newContainer } = await keystore.updateWalletState([
+					keystore.assertAsymmetricEncryptedContainer(unlockSuccess.privateData),
+					remoteMainKey,
+				], mergedContainer as CurrentSchema.WalletStateContainer);
+				const [newPrivateDataEncryptedContainer, newMainKey] = newContainer;
+				await writePrivateDataOnIdb(newPrivateDataEncryptedContainer, userHandleB64u);
+				setPrivateData(newPrivateDataEncryptedContainer);
+				newEncryptedContainer = newPrivateDataEncryptedContainer;
+				setMainKey(await keystore.exportMainKey(newMainKey));
+				const foldedState = foldState(mergedContainer as CurrentSchema.WalletStateContainer);
+				setCalculatedWalletState(foldedState);
+			}
+			else {
+				async function mergeWithLocalEncryptedPrivateData(container: [EncryptedContainer, CryptoKey, WalletStateContainerGeneric]): Promise<[EncryptedContainer, CryptoKey, WalletStateContainerGeneric]> {
+					const userId = UserId.fromUserHandle(fromBase64Url(userHandleB64u));
+					const localUser = await getItem("users", userId.id);
+					if (!localUser) {
+						return container;
+					}
+					const localPrivateData: Uint8Array = localUser.privateData;
+					const parsedLocalEncryptedPrivateData = await keystore.parsePrivateData(localPrivateData);
+					const stringifiedLocalPrivateData = jsonStringifyTaggedBinary(localPrivateData);
+					const stringifiedSerializedNewlyUnlockedPrivateData = jsonStringifyTaggedBinary(keystore.serializePrivateData(unlockSuccess.privateData));
+					if (stringifiedLocalPrivateData !== stringifiedSerializedNewlyUnlockedPrivateData) { // local and remote are different
+						// decryption of local is required
+						const [unlockPrfResult,] = await keystore.unlockPrf(parsedLocalEncryptedPrivateData, credential, promptForPrfRetry);
+						const { privateData, mainKey } = unlockPrfResult;
+						const [localContainer, ,] = await keystore.openPrivateData(mainKey, privateData);
+						const mergedContainer = await mergeEventHistories(unlockedContainer, localContainer);
+						const { newContainer } = await keystore.updateWalletState([
+							keystore.assertAsymmetricEncryptedContainer(unlockSuccess.privateData),
+							unlockSuccess.mainKey,
+						], mergedContainer as CurrentSchema.WalletStateContainer);
+						const [newPrivateDataEncryptedContainer, newMainKey] = newContainer;
+						return [newPrivateDataEncryptedContainer, newMainKey, mergedContainer];
+					}
+					return container;
+				}
+				const { privateData, mainKey } = unlockSuccess;
+				const [unlockedContainer, ,] = await keystore.openPrivateData(mainKey, privateData);
+				const [encryptedContainer, newMainKey, decryptedWalletState] = await mergeWithLocalEncryptedPrivateData([privateData, mainKey, unlockedContainer]);
+				const foldedState = foldState(decryptedWalletState as CurrentSchema.WalletStateContainer);
+				newEncryptedContainer = encryptedContainer;
+				setPrivateData(encryptedContainer);
+				setMainKey(await keystore.exportMainKey(newMainKey));
+				await writePrivateDataOnIdb(encryptedContainer, userHandleB64u);
+				// after private data update, the calculated wallet state must be re-computed
+				setCalculatedWalletState(foldedState);
+			}
+
 			const newUser = ("prfKeys" in user
 				? user
 				: {
@@ -341,20 +403,15 @@ export function useLocalStorageKeystore(eventTarget: EventTarget): LocalStorageK
 			// useEffect updating cachedUsers from corrupting cache entries for other
 			// users logged in in other tabs.
 			setGlobalUserHandleB64u(userHandleB64u);
-			await writePrivateDataOnIdb(privateData, userHandleB64u);
 
 			setCachedUsers((cachedUsers) => {
 				// Move most recently used user to front of list
 				const otherUsers = (cachedUsers || []).filter((cu) => cu.userHandleB64u !== newUser.userHandleB64u);
 				return [newUser, ...otherUsers];
 			});
-		}
 
-		setMainKey(await keystore.exportMainKey(mainKey));
-		setPrivateData(privateData);
-		// after private data update, the calculated wallet state must be re-computed
-		const [, , newCalculatedWalletState] = await keystore.openPrivateData(mainKey, privateData);
-		setCalculatedWalletState(newCalculatedWalletState);
+			return newEncryptedContainer;
+		}
 	}, [
 		setUserHandleB64u,
 		setGlobalUserHandleB64u,
@@ -365,7 +422,9 @@ export function useLocalStorageKeystore(eventTarget: EventTarget): LocalStorageK
 		setTabId,
 		setGlobalTabId,
 		tabId,
-		writePrivateDataOnIdb
+		writePrivateDataOnIdb,
+		assertKeystoreOpen,
+		privateData,
 	]);
 
 
@@ -385,8 +444,7 @@ export function useLocalStorageKeystore(eventTarget: EventTarget): LocalStorageK
 		user: UserData,
 	): Promise<EncryptedContainer> => {
 		const unlocked = await keystore.init(mainKey, keyInfo);
-		await finishUnlock(unlocked, user);
-		const { privateData } = unlocked;
+		const privateData = await finishUnlock(unlocked, user, null);
 		return privateData;
 	},
 		[finishUnlock]
@@ -399,7 +457,7 @@ export function useLocalStorageKeystore(eventTarget: EventTarget): LocalStorageK
 			user: UserData,
 		): Promise<[EncryptedContainer, CommitCallback] | null> => {
 			const [unlockResult, newPrivateData] = await keystore.unlockPassword(privateData, password);
-			await finishUnlock(unlockResult, user);
+			await finishUnlock(unlockResult, user, null);
 			return (
 				newPrivateData
 					?
@@ -492,26 +550,25 @@ export function useLocalStorageKeystore(eventTarget: EventTarget): LocalStorageK
 
 	const unlockPrf = useCallback(
 		async (
-			privateData: EncryptedContainer,
+			encryptedPrivateData: EncryptedContainer,
 			credential: PublicKeyCredential,
 			promptForPrfRetry: () => Promise<boolean | AbortSignal>,
 			user: CachedUser | UserData | null,
 		): Promise<[EncryptedContainer, CommitCallback] | null> => {
-			const [unlockPrfResult, newPrivateData] = await keystore.unlockPrf(privateData, credential, promptForPrfRetry);
-			await finishUnlock(unlockPrfResult, user);
+			const [unlockPrfResult,] = await keystore.unlockPrf(encryptedPrivateData, credential, promptForPrfRetry);
+			const updatedPrivateData = await finishUnlock(unlockPrfResult, user, credential, promptForPrfRetry);
 			return (
-				newPrivateData
+				updatedPrivateData
 					?
-					[newPrivateData,
+					[updatedPrivateData,
 						async () => {
-							await writePrivateDataOnIdb(newPrivateData, userHandleB64u);
-							setPrivateData(newPrivateData);
+
 						},
 					]
 					: null
 			);
 		},
-		[finishUnlock, setPrivateData, writePrivateDataOnIdb, userHandleB64u]
+		[finishUnlock]
 	);
 
 	const getPasswordOrPrfKeyFromSession = useCallback(

Original file line number	Diff line number	Diff line change
`@@ -998,8 +998,6 @@ const Settings = () => {`
`998`	`998`	className={`h-10 pl-3 pr-10 bg-lm-gray-200 dark:bg-dm-gray-800 border border-lm-gray-600 dark:border-dm-gray-400 dark:text-white rounded-lg dark:inputDarkModeOverride appearance-none`}
`999`	`999`	`defaultValue={userData.settings.openidRefreshTokenMaxAgeInSeconds}`
`1000`	`1000`	`onChange={(e) => handleTokenMaxAgeChange(e.target.value)}`
`1001`		`- disabled={!isOnline}`
`1002`		`- title={!isOnline ? t("common.offlineTitle") : undefined}`
`1003`	`1001`	`>`
`1004`	`1002`	`<option value="0">{t('pageSettings.rememberIssuer.options.none')}</option>`
`1005`	`1003`	`<option value="3600">{t('pageSettings.rememberIssuer.options.hour')}</option>`