E2EE for embeded mode

package.json

@@ -59,7 +59,7 @@
     "i18next-http-backend": "^1.4.4",
     "livekit-client": "^1.12.3",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#6836720e1e1c2cb01d49d6e5fcfc01afc14834ca",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#0b72baada1dc9c14fb4ebe1b0595cef0acf4f2c8",
     "matrix-widget-api": "^1.3.1",
     "mermaid": "^9.0.0",
     "normalize.css": "^8.0.1",

src/E2EEBanner.tsx

@@ -19,10 +19,10 @@ import { Trans } from "react-i18next";
 import { Banner } from "./Banner";
 import styles from "./E2EEBanner.module.css";
 import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
-import { useEnableE2EE } from "./settings/useSetting";
+import { useEnableE2EE } from "./e2ee/e2eeHooks";
 
 export const E2EEBanner = () => {
-  const [e2eeEnabled] = useEnableE2EE();
+  const e2eeEnabled = useEnableE2EE();
   if (e2eeEnabled) return null;
 
   return (

src/UrlParams.ts

@@ -92,6 +92,10 @@ interface UrlParams {
    * E2EE password
    */
   password: string | null;
+  /**
+   * Whether we the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
 }
 
 /**
@@ -190,6 +194,7 @@ export const getUrlParams = (
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     analyticsID: getParam("analyticsID"),
     allowIceFallback: hasParam("allowIceFallback"),
+    perParticipantE2EE: hasParam("perParticipantE2EE"),
   };
 };
 

src/e2ee/sharedKeyManagement.ts → src/e2ee/e2eeHooks.ts

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import { useEffect, useMemo } from "react";
+import { isE2EESupported } from "livekit-client";
 
-import { useEnableE2EE } from "../settings/useSetting";
+import { useEnableSPAE2EE } from "../settings/useSetting";
 import { useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
 import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
@@ -28,7 +29,7 @@ export const useInternalRoomSharedKey = (
   roomId: string
 ): [string | null, (value: string) => void] => {
   const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
-  const [e2eeEnabled] = useEnableE2EE();
+  const [e2eeEnabled] = useEnableSPAE2EE();
   const [roomSharedKey, setRoomSharedKey] = useLocalStorage(key);
 
   return [e2eeEnabled ? roomSharedKey : null, setRoomSharedKey];
@@ -67,19 +68,40 @@ export const useManageRoomSharedKey = (roomId: string): string | null => {
 };
 
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
-  const { isEmbedded } = useUrlParams();
+  const { isEmbedded, perParticipantE2EE } = useUrlParams();
   const client = useClient();
   const room = useMemo(
     () => client.client?.getRoom(roomId) ?? null,
     [roomId, client.client]
   );
   const isE2EE = useMemo(() => {
     if (isEmbedded) {
-      return false;
+      return perParticipantE2EE;
     } else {
       return room ? !room?.getCanonicalAlias() : null;
     }
-  }, [isEmbedded, room]);
+  }, [room, isEmbedded, perParticipantE2EE]);
 
   return isE2EE;
 };
+
+export const useEnableEmbeddedE2EE = (): boolean => {
+  const { isEmbedded, perParticipantE2EE } = useUrlParams();
+
+  if (!isEmbedded) return false;
+  if (!isE2EESupported()) return false;
+
+  return perParticipantE2EE;
+};
+
+export const useEnableE2EE = (): boolean => {
+  const [spaE2EEEnabled] = useEnableSPAE2EE();
+  const embeddedE2EEEnabled = useEnableEmbeddedE2EE();
+
+  const e2eeEnabled = useMemo(
+    () => spaE2EEEnabled || embeddedE2EEEnabled,
+    [spaE2EEEnabled, embeddedE2EEEnabled]
+  );
+
+  return e2eeEnabled;
+};

src/e2ee/matrixKeyProvider.ts

@@ -0,0 +1,69 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { BaseKeyProvider, createKeyMaterialFromString } from "livekit-client";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+
+export class MatrixKeyProvider extends BaseKeyProvider {
+  private rtcSession?: MatrixRTCSession;
+
+  public setRTCSession(rtcSession: MatrixRTCSession) {
+    if (this.rtcSession) {
+      this.rtcSession.off(
+        MatrixRTCSessionEvent.EncryptionKeyChanged,
+        this.onEncryptionKeyChanged
+      );
+    }
+
+    this.rtcSession = rtcSession;
+
+    this.rtcSession.on(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      this.onEncryptionKeyChanged
+    );
+
+    // The new session could be aware of keys of which the old session wasn't,
+    // so emit a key changed event.
+    for (const [
+      participant,
+      encryptionKeys,
+    ] of this.rtcSession.getEncryptionKeys()) {
+      for (const [index, encryptionKey] of encryptionKeys.entries()) {
+        this.onEncryptionKeyChanged(encryptionKey, index, participant);
+      }
+    }
+  }
+
+  private onEncryptionKeyChanged = async (
+    encryptionKey: string,
+    encryptionKeyIndex: number,
+    participantId: string
+  ) => {
+    this.onSetEncryptionKey(
+      await createKeyMaterialFromString(encryptionKey),
+      participantId,
+      encryptionKeyIndex
+    );
+
+    console.log(
+      `Embedded-E2EE-LOG onEncryptionKeyChanged participantId=${participantId} encryptionKeyIndex=${encryptionKeyIndex} encryptionKey=${encryptionKey}`,
+      this.getKeys()
+    );
+  };
+}

src/home/CallList.tsx

@@ -24,7 +24,7 @@ import styles from "./CallList.module.css";
 import { getRoomUrl } from "../matrix-utils";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useRoomSharedKey } from "../e2ee/e2eeHooks";
 
 interface CallListProps {
   rooms: GroupCallRoom[];

src/home/RegisteredView.tsx

@@ -38,11 +38,11 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
-import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { useEnableSPAE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2EEBanner } from "../E2EEBanner";
 import { setLocalStorageItem } from "../useLocalStorage";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/e2eeHooks";
 
 interface Props {
   client: MatrixClient;
@@ -57,7 +57,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const history = useHistory();
   const { t } = useTranslation();
   const { modalState, modalProps } = useModalTriggerState();
-  const [e2eeEnabled] = useEnableE2EE();
+  const [e2eeEnabled] = useEnableSPAE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e: FormEvent) => {

src/home/UnauthenticatedView.tsx

@@ -40,10 +40,10 @@ import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
-import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
+import { useEnableSPAE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
 import { E2EEBanner } from "../E2EEBanner";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
+import { getRoomSharedKeyLocalStorageKey } from "../e2ee/e2eeHooks";
 import { setLocalStorageItem } from "../useLocalStorage";
 
 export const UnauthenticatedView: FC = () => {
@@ -60,7 +60,7 @@ export const UnauthenticatedView: FC = () => {
   const history = useHistory();
   const { t } = useTranslation();
 
-  const [e2eeEnabled] = useEnableE2EE();
+  const [e2eeEnabled] = useEnableSPAE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {

src/livekit/useLiveKit.ts

@@ -16,7 +16,6 @@ limitations under the License.
 
 import {
   ConnectionState,
-  E2EEOptions,
   ExternalE2EEKeyProvider,
   Room,
   RoomOptions,
@@ -26,6 +25,7 @@ import { useLiveKitRoom } from "@livekit/components-react";
 import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import { defaultLiveKitOptions } from "./options";
 import { SFUConfig } from "./openIDSFU";
@@ -39,9 +39,16 @@ import {
   ECConnectionState,
   useECConnectionState,
 } from "./useECConnectionState";
+import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
+
+export enum E2EEMode {
+  PerParticipantKey = "per_participant_key",
+  SharedKey = "shared_key",
+}
 
 export type E2EEConfig = {
-  sharedKey: string;
+  mode: E2EEMode;
+  sharedKey?: string;
 };
 
 setLogLevel("debug");
@@ -53,25 +60,38 @@ interface UseLivekitResult {
 
 export function useLiveKit(
   muteStates: MuteStates,
+  rtcSession: MatrixRTCSession,
   sfuConfig?: SFUConfig,
   e2eeConfig?: E2EEConfig
 ): UseLivekitResult {
   const e2eeOptions = useMemo(() => {
-    if (!e2eeConfig?.sharedKey) return undefined;
+    if (!e2eeConfig) return undefined;
 
-    return {
-      keyProvider: new ExternalE2EEKeyProvider(),
-      worker: new E2EEWorker(),
-    } as E2EEOptions;
+    if (e2eeConfig.mode === E2EEMode.PerParticipantKey) {
+      return {
+        keyProvider: new MatrixKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    } else if (e2eeConfig.mode === E2EEMode.SharedKey && e2eeConfig.sharedKey) {
+      return {
+        keyProvider: new ExternalE2EEKeyProvider(),
+        worker: new E2EEWorker(),
+      };
+    }
   }, [e2eeConfig]);
 
   useEffect(() => {
-    if (!e2eeConfig?.sharedKey || !e2eeOptions) return;
-
-    (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
-      e2eeConfig?.sharedKey
-    );
-  }, [e2eeOptions, e2eeConfig?.sharedKey]);
+    if (!e2eeOptions) return;
+    if (!e2eeConfig) return;
+
+    if (e2eeConfig.mode === E2EEMode.PerParticipantKey) {
+      (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
+    } else if (e2eeConfig.mode === E2EEMode.SharedKey && e2eeConfig.sharedKey) {
+      (e2eeOptions.keyProvider as ExternalE2EEKeyProvider).setKey(
+        e2eeConfig.sharedKey
+      );
+    }
+  }, [e2eeOptions, e2eeConfig, rtcSession]);
 
   const initialMuteStates = useRef<MuteStates>(muteStates);
   const devices = useMediaDevices();