fix: stores were not cleared properly when switching sso accounts

WeissDev · WeissDev · commit 292dde30a9f1 · 2025-03-24T05:50:30.000+01:00
diff --git a/src/hooks/useSso.ts b/src/hooks/useSso.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 Unomed AG
+ * Copyright 2024-2025 Unomed AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,65 +14,78 @@
  * limitations under the License.
  */
 
-import { createClient } from 'matrix-js-sdk';
 import { useEffect, useState } from 'react';
 import { clearCredentials, getCredentials, storeCredentials } from '../auth/credentials';
+import defaultConfigClient from '../utils/client';
 
-const useSso = (baseUrl: string) => {
+const useSso = (baseUrl: string, loggedInUserId: string | undefined) => {
   const [accessToken, setAccessToken] = useState<string>();
   const [userId, setUserId] = useState<string>();
   const [deviceId, setDeviceId] = useState<string>();
 
   useEffect(() => {
-
     const ssoLogin = async () => {
       const queryParams = new URLSearchParams(window.location.search);
       const loginToken = queryParams.get('loginToken');
+      const baseDomain = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
+
+      if (loginToken) {
+        const mx = defaultConfigClient(baseUrl);
+        // clear any existing stores
+        await mx.clearStores();
+        clearCredentials();
 
-      const [accessToken, userId, deviceId] = getCredentials();
+        try {
+          const payload = await mx.loginWithToken(loginToken);
+          if (payload.access_token) {
+            storeCredentials(payload);
+          }
+        } finally {
+          window.history.replaceState({}, document.title, baseDomain);
+        }
+      }
+
+      const [existingAccessToken, existingUserId, existingDeviceId] = getCredentials();
 
-      let isLoggedIn = false;
       // Check if the existing credentials are valid
-      if (accessToken && userId && deviceId) {
-        const mx = createClient({ baseUrl, accessToken, userId, deviceId });
+      let isLoggedin = false;
+      if (loggedInUserId === existingUserId
+        && existingAccessToken
+        && existingUserId
+        && existingDeviceId
+      ) {
+        const mx = defaultConfigClient(
+          baseUrl,
+          existingAccessToken,
+          existingUserId,
+          existingDeviceId,
+        );
+
         try {
           await mx.whoami();
-          isLoggedIn = true;
-          setAccessToken(accessToken);
-          setUserId(userId);
-          setDeviceId(deviceId);
+          setAccessToken(existingAccessToken);
+          setUserId(existingUserId);
+          setDeviceId(existingDeviceId);
+          isLoggedin = true;
         } catch {
           // credentials are not valid
         }
       }
 
-      if (!isLoggedIn) {
-        const mx = createClient({ baseUrl });
-        const baseDomain = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
-        if (loginToken) {
-          // Clear any existing stores
-          await mx.clearStores();
-
-          const payload = await mx.loginWithToken(loginToken);
-          if (payload.access_token) {
-            storeCredentials(payload);
-            setAccessToken(payload.access_token);
-            setUserId(payload.user_id);
-            setDeviceId(payload.device_id);
-            window.history.replaceState({}, document.title, baseDomain);
-          } else {
-            clearCredentials();
-          }
-        } else {
-          clearCredentials();
-          const url = mx.getSsoLoginUrl(baseDomain, 'sso');
-          window.location.replace(url);
-        }
+      if (!isLoggedin) {
+        const mx = defaultConfigClient(baseUrl);
+        // clear any existing stores
+        await mx.clearStores();
+        clearCredentials();
+        const url = mx.getSsoLoginUrl(baseDomain, 'sso');
+        window.location.replace(url);
       }
     };
 
-    ssoLogin();
-  }, [baseUrl]);
+    if (loggedInUserId) {
+      ssoLogin();
+    }
+  }, [baseUrl, loggedInUserId]);
 
   return {
     accessToken,
diff --git a/src/providers/MatrixClientProvider.tsx b/src/providers/MatrixClientProvider.tsx
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import { ClientEvent, createClient, IndexedDBCryptoStore, IndexedDBStore, MatrixClient, SyncState } from 'matrix-js-sdk';
+import { ClientEvent, MatrixClient, SyncState } from 'matrix-js-sdk';
 import React, { useEffect, useState } from 'react';
 import MatrixClientContext from '../context/MatrixClientContext';
-import { cacheSecretStorageKey, cryptoCallbacks } from '../utils/secretStorageKeys';
+import { cacheSecretStorageKey } from '../utils/secretStorageKeys';
 import { CryptoApi, decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
+import defaultConfigClient from '../utils/client';
 
 
 interface Props {
@@ -55,28 +56,10 @@ const MatrixClientProvider = ({
     // Initialize the client
     if (!accessToken || !userId || !deviceId) return;
 
-    const indexedDBStore = new IndexedDBStore({
-      indexedDB: global.indexedDB,
-      localStorage: global.localStorage,
-      dbName: 'web-sync-store',
-    });
-
-    const client = createClient({
-      baseUrl,
-      accessToken,
-      userId,
-      store: indexedDBStore,
-      cryptoStore: new IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
-      deviceId,
-      timelineSupport: true,
-      cryptoCallbacks,
-      verificationMethods: [
-        'm.sas.v1',
-      ],
-    });
+    const client = defaultConfigClient(baseUrl, accessToken, userId, deviceId);
 
     (async () => {
-      await indexedDBStore.startup();
+      await client.store.startup();
 
       if (enableCrypto) {
         // Setup e2ee
@@ -94,39 +77,21 @@ const MatrixClientProvider = ({
 
       // Start syncing
       await client.startClient({ lazyLoadMembers: true });
-    })();
-
-    const handleStateChange = (state: SyncState) => {
-      // Make the client available after the first sync has completed
-      if (state === SyncState.Prepared) {
-        setMx(client);
-      }
-    };
 
-    client.on(ClientEvent.Sync, handleStateChange);
-    return () => {
-      client.removeListener(ClientEvent.Sync, handleStateChange);
-      // Clean up matrix client on unmount
-      client.stopClient();
-    };
-  }, [baseUrl, enableCrypto, rustCryptoStoreKeyFn, accessToken, userId, deviceId]);
-
-  useEffect(() => {
-    // Add recovery key and enable
-    if (enableKeyBackup && recoveryKeyFn && mx) {
-      (async () => {
+      // Activate Key Backup
+      if (enableCrypto && enableKeyBackup && recoveryKeyFn) {
         const recoveryKey = await recoveryKeyFn?.();
 
         // Validate the recovery key
         let recoveryKeyValid = false;
 
         if (recoveryKey) {
           const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
-          const keyId = await mx?.secretStorage.getDefaultKeyId();
-          const secretStorageKeyTuple = await mx?.secretStorage.getKey(keyId);
+          const keyId = await client.secretStorage.getDefaultKeyId();
+          const secretStorageKeyTuple = await client.secretStorage.getKey(keyId);
           if (keyId && secretStorageKeyTuple) {
             const [, keyInfo] = secretStorageKeyTuple;
-            recoveryKeyValid = await mx.secretStorage.checkKey(decodedRecoveryKey, keyInfo);
+            recoveryKeyValid = await client.secretStorage.checkKey(decodedRecoveryKey, keyInfo);
 
             if (recoveryKeyValid) {
               // cache the recovery key if it's valid
@@ -136,41 +101,63 @@ const MatrixClientProvider = ({
         }
 
         if (recoveryKeyValid) {
-          const hasKeyBackup = (await cryptoApi?.checkKeyBackupAndEnable()) !== null;
+          const crypto = client.getCrypto();
+          const hasKeyBackup = (await crypto?.checkKeyBackupAndEnable()) !== null;
           if (hasKeyBackup) {
-            await cryptoApi?.loadSessionBackupPrivateKeyFromSecretStorage();
+            await crypto?.loadSessionBackupPrivateKeyFromSecretStorage();
           }
         }
-      })();
-    }
-  }, [enableKeyBackup, mx, cryptoApi, recoveryKeyFn]);
+      }
 
-  useEffect(() => {
-    if (enableCrossSigning) {
-      (async () => {
+      // Activate cross-signing
+      if (enableCrypto && enableCrossSigning) {
         // Cache missing cross-signing keys locally, and setup cross-signing
-        await cryptoApi?.userHasCrossSigningKeys(mx?.getUserId() || undefined, true);
-        await cryptoApi?.bootstrapCrossSigning({});
-      })();
-    }
-  }, [enableCrossSigning, mx, cryptoApi]);
+        const crypto = client.getCrypto();
+        await crypto?.userHasCrossSigningKeys(client.getUserId() || undefined, true);
+        await crypto?.bootstrapCrossSigning({});
+      }
 
-  useEffect(() => {
-    if (enableDeviceDehydration) {
-      (async () => {
+      // Activate device dehydration
+      if (enableCrypto && enableKeyBackup && enableCrossSigning && enableDeviceDehydration) {
         // If supported, rehydrate from existing device (if exists) and start regular device dehydration
-        const dehydrationSupported = await cryptoApi?.isDehydrationSupported();
+        const crypto = client.getCrypto();
+        const dehydrationSupported = await crypto?.isDehydrationSupported();
         if (dehydrationSupported) {
           try {
-            await cryptoApi?.startDehydration();
+            await crypto?.startDehydration();
           } catch {
             // create new dehydration key if dehydration fails to start
-            await cryptoApi?.startDehydration(true);
+            await crypto?.startDehydration(true);
           }
         }
-      })();
-    }
-  }, [enableDeviceDehydration, cryptoApi]);
+      }
+    })();
+
+    const handleStateChange = (state: SyncState) => {
+      // Make the client available after the first sync has completed
+      if (state === SyncState.Prepared) {
+        setMx(client);
+      }
+    };
+
+    client.on(ClientEvent.Sync, handleStateChange);
+    return () => {
+      client.removeListener(ClientEvent.Sync, handleStateChange);
+      // Clean up matrix client on unmount
+      client.stopClient();
+    };
+  }, [
+    baseUrl,
+    enableCrypto,
+    enableKeyBackup,
+    enableCrossSigning,
+    enableDeviceDehydration,
+    recoveryKeyFn,
+    rustCryptoStoreKeyFn,
+    accessToken,
+    userId,
+    deviceId
+  ]);
 
   return (
     <MatrixClientContext.Provider value={{
diff --git a/src/providers/SSOAuthMatrixClientProvider.tsx b/src/providers/SSOAuthMatrixClientProvider.tsx
@@ -20,6 +20,7 @@ import MatrixClientProvider from './MatrixClientProvider';
 interface Props {
   children: React.ReactNode;
   baseUrl: string;
+  loggedInUserId?: string;
   enableCrypto?: boolean;
   enableKeyBackup?: boolean;
   enableCrossSigning?: boolean;
@@ -31,14 +32,15 @@ interface Props {
 const SSOAuthMatrixClientProvider = ({
   children,
   baseUrl,
+  loggedInUserId,
   enableCrypto = false,
   enableKeyBackup = false,
   enableCrossSigning = false,
   enableDeviceDehydration = false,
   rustCryptoStoreKeyFn,
   recoveryKeyFn,
 }: Props) => {
-  const { accessToken, userId, deviceId } = useSso(baseUrl);
+  const { accessToken, userId, deviceId } = useSso(baseUrl, loggedInUserId);
 
   return (
     <MatrixClientProvider
diff --git a/src/utils/client.ts b/src/utils/client.ts
@@ -0,0 +1,33 @@
+import { createClient, IndexedDBCryptoStore, IndexedDBStore } from 'matrix-js-sdk';
+import { cryptoCallbacks } from './secretStorageKeys';
+
+
+const defaultConfigClient = (
+  baseUrl: string,
+  accessToken?: string,
+  userId?: string,
+  deviceId?: string,
+) => {
+  const indexedDBStore = new IndexedDBStore({
+    indexedDB: global.indexedDB,
+    localStorage: global.localStorage,
+    dbName: 'web-sync-store',
+  });
+
+  return createClient({
+    baseUrl,
+    accessToken,
+    userId,
+    store: indexedDBStore,
+    cryptoStore: new IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
+    deviceId,
+    timelineSupport: true,
+    cryptoCallbacks,
+    verificationMethods: [
+      'm.sas.v1',
+    ],
+  });
+};
+
+
+export default defaultConfigClient;
