(EXPERIMENTAL) Prototyping with to-device sender key distribution

package.json

@@ -84,7 +84,7 @@
     "livekit-client": "^2.5.7",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#0a29063bc9e61ee70ca43820d4bb91f6a27f1237",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#b0174eccdb0e33f5df5d7b590938daf8ff5c7f7a",
     "matrix-widget-api": "^1.8.2",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",

src/analytics/PosthogEvents.ts

@@ -14,13 +14,30 @@
   PosthogAnalytics,
   RegistrationType,
 } from "./PosthogAnalytics";
+import { E2eeType } from "../e2ee/e2eeType";
 
+type EncryptionScheme = "none" | "shared" | "per_sender";
+
+function mapE2eeType(type: E2eeType): EncryptionScheme {
+  switch (type) {
+    case E2eeType.NONE:
+      return "none";
+    case E2eeType.SHARED_KEY:
+      return "shared";
+    case E2eeType.PER_PARTICIPANT:
+      return "per_sender";
+  }
+}
 interface CallEnded extends IPosthogEvent {
   eventName: "CallEnded";
   callId: string;
   callParticipantsOnLeave: number;
   callParticipantsMax: number;
   callDuration: number;
+  encryption: EncryptionScheme;
+  toDeviceEncryptionKeysSent: number;
+  toDeviceEncryptionKeysReceived: number;
+  toDeviceEncryptionKeysReceivedAverageAge: number;
   roomEventEncryptionKeysSent: number;
   roomEventEncryptionKeysReceived: number;
   roomEventEncryptionKeysReceivedAverageAge: number;
@@ -46,8 +63,10 @@
   public track(
     callId: string,
     callParticipantsNow: number,
+    e2eeType: E2eeType,
+    rtcSession: MatrixRTCSession,
     sendInstantly: boolean,
     rtcSession: MatrixRTCSession,
   ): void {
     PosthogAnalytics.instance.trackEvent<CallEnded>(
       {
@@ -56,6 +75,17 @@
         callParticipantsMax: this.cache.maxParticipantsCount,
         callParticipantsOnLeave: callParticipantsNow,
         callDuration: (Date.now() - this.cache.startTime.getTime()) / 1000,
+        encryption: mapE2eeType(e2eeType),
+        toDeviceEncryptionKeysSent:
+          rtcSession.statistics.counters.toDeviceEncryptionKeysSent,
+        toDeviceEncryptionKeysReceived:
+          rtcSession.statistics.counters.toDeviceEncryptionKeysReceived,
+        toDeviceEncryptionKeysReceivedAverageAge:
+          rtcSession.statistics.counters.toDeviceEncryptionKeysReceived > 0
+            ? rtcSession.statistics.totals
+                .toDeviceEncryptionKeysReceivedTotalAge /
+              rtcSession.statistics.counters.toDeviceEncryptionKeysReceived
+            : 0,
         roomEventEncryptionKeysSent:
           rtcSession.statistics.counters.roomEventEncryptionKeysSent,
         roomEventEncryptionKeysReceived:
@@ -75,13 +105,15 @@
 interface CallStarted extends IPosthogEvent {
   eventName: "CallStarted";
   callId: string;
+  encryption: EncryptionScheme;
 }
 
 export class CallStartedTracker {
-  public track(callId: string): void {
+  public track(callId: string, e2eeType: E2eeType): void {
     PosthogAnalytics.instance.trackEvent<CallStarted>({
       eventName: "CallStarted",
       callId: callId,
+      encryption: mapE2eeType(e2eeType),
     });
   }
 }

src/home/RegisteredView.tsx

@@ -9,7 +9,7 @@ import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
-import { Heading, Text } from "@vector-im/compound-web";
+import { Dropdown, Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
 
@@ -35,6 +35,17 @@ import { useOptInAnalytics } from "../settings/settings";
 interface Props {
   client: MatrixClient;
 }
+const encryptionOptions = {
+  shared: {
+    label: "Shared key",
+    e2eeType: E2eeType.SHARED_KEY,
+  },
+  sender: {
+    label: "Per-participant key",
+    e2eeType: E2eeType.PER_PARTICIPANT,
+  },
+  none: { label: "None", e2eeType: E2eeType.NONE },
+};
 
 export const RegisteredView: FC<Props> = ({ client }) => {
   const [loading, setLoading] = useState(false);
@@ -49,6 +60,9 @@ export const RegisteredView: FC<Props> = ({ client }) => {
     [setJoinExistingCallModalOpen],
   );
 
+  const [encryption, setEncryption] =
+    useState<keyof typeof encryptionOptions>("shared");
+
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
@@ -63,21 +77,13 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         setError(undefined);
         setLoading(true);
 
-        const createRoomResult = await createRoom(
+        const { roomId, encryptionSystem } = await createRoom(
           client,
           roomName,
-          E2eeType.SHARED_KEY,
+          encryptionOptions[encryption].e2eeType,
         );
-        if (!createRoomResult.password)
-          throw new Error("Failed to create room with shared secret");
 
-        history.push(
-          getRelativeRoomUrl(
-            createRoomResult.roomId,
-            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
-            roomName,
-          ),
-        );
+        history.push(getRelativeRoomUrl(roomId, encryptionSystem, roomName));
       }
 
       submit().catch((error) => {
@@ -93,7 +99,7 @@ export const RegisteredView: FC<Props> = ({ client }) => {
         }
       });
     },
-    [client, history, setJoinExistingCallModalOpen],
+    [client, history, setJoinExistingCallModalOpen, encryption],
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -132,6 +138,19 @@ export const RegisteredView: FC<Props> = ({ client }) => {
                 data-testid="home_callName"
               />
 
+              <Dropdown
+                label="Encryption"
+                defaultValue={encryption}
+                onValueChange={(x) =>
+                  setEncryption(x as keyof typeof encryptionOptions)
+                }
+                values={Object.keys(encryptionOptions).map((value) => [
+                  value,
+                  encryptionOptions[value as keyof typeof encryptionOptions]
+                    .label,
+                ])}
+                placeholder=""
+              />
               <Button
                 type="submit"
                 size="lg"

src/home/UnauthenticatedView.tsx

@@ -9,7 +9,7 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
-import { Button, Heading, Text } from "@vector-im/compound-web";
+import { Button, Dropdown, Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
@@ -35,6 +35,18 @@ import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
 import { ExternalLink, Link } from "../button/Link";
 
+const encryptionOptions = {
+  shared: {
+    label: "Shared key",
+    e2eeType: E2eeType.SHARED_KEY,
+  },
+  sender: {
+    label: "Per-participant key",
+    e2eeType: E2eeType.PER_PARTICIPANT,
+  },
+  none: { label: "None", e2eeType: E2eeType.NONE },
+};
+
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
   const [loading, setLoading] = useState(false);
@@ -43,6 +55,9 @@ export const UnauthenticatedView: FC = () => {
   const { recaptchaKey, register } = useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 
+  const [encryption, setEncryption] =
+    useState<keyof typeof encryptionOptions>("shared");
+
   const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
     useState(false);
   const onDismissJoinExistingCallModal = useCallback(
@@ -73,13 +88,16 @@ export const UnauthenticatedView: FC = () => {
           true,
         );
 
-        let createRoomResult;
+        let roomId;
+        let encryptionSystem;
         try {
-          createRoomResult = await createRoom(
+          const res = await createRoom(
             client,
             roomName,
-            E2eeType.SHARED_KEY,
+            encryptionOptions[encryption].e2eeType,
           );
+          roomId = res.roomId;
+          encryptionSystem = res.encryptionSystem;
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -106,17 +124,11 @@ export const UnauthenticatedView: FC = () => {
         if (!setClient) {
           throw new Error("setClient is undefined");
         }
-        if (!createRoomResult.password)
-          throw new Error("Failed to create room with shared secret");
+        // if (!createRoomResult.password)
+        //   throw new Error("Failed to create room with shared secret");
 
         setClient({ client, session });
-        history.push(
-          getRelativeRoomUrl(
-            createRoomResult.roomId,
-            { kind: E2eeType.SHARED_KEY, secret: createRoomResult.password },
-            roomName,
-          ),
-        );
+        history.push(getRelativeRoomUrl(roomId, encryptionSystem, roomName));
       }
 
       submit().catch((error) => {
@@ -133,6 +145,7 @@ export const UnauthenticatedView: FC = () => {
       history,
       setJoinExistingCallModalOpen,
       setClient,
+      encryption,
     ],
   );
 
@@ -195,6 +208,20 @@ export const UnauthenticatedView: FC = () => {
                 <ErrorMessage error={error} />
               </FieldRow>
             )}
+            <Dropdown
+              label="Encryption"
+              defaultValue={encryption}
+              onValueChange={(x) =>
+                setEncryption(x as keyof typeof encryptionOptions)
+              }
+              values={Object.keys(encryptionOptions).map((value) => [
+                value,
+                encryptionOptions[value as keyof typeof encryptionOptions]
+                  .label,
+              ])}
+              placeholder=""
+            />
+
             <Button
               type="submit"
               size="lg"

src/room/GroupCallView.tsx

@@ -97,7 +97,7 @@ export const GroupCallView: FC<Props> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(rtcSession.room);
   const roomAvatar = useRoomAvatar(rtcSession.room);
-  const { perParticipantE2EE, returnToLobby } = useUrlParams();
+  const { returnToLobby } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
 
   const matrixInfo = useMemo((): MatrixInfo => {
@@ -182,7 +182,7 @@ export const GroupCallView: FC<Props> = ({
       const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
         (async (): Promise<void> => {
           await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
-          await enterRTCSession(rtcSession, perParticipantE2EE);
+          await enterRTCSession(rtcSession, e2eeSystem.kind);
           widget!.api.transport.reply(ev.detail, {});
         })().catch((e) => {
           logger.error("Error joining RTC session", e);
@@ -196,12 +196,12 @@ export const GroupCallView: FC<Props> = ({
       // No lobby and no preload: we enter the rtc session right away
       (async (): Promise<void> => {
         await defaultDeviceSetup({ audioInput: null, videoInput: null });
-        await enterRTCSession(rtcSession, perParticipantE2EE);
+        await enterRTCSession(rtcSession, e2eeSystem.kind);
       })().catch((e) => {
         logger.error("Error joining RTC session", e);
       });
     }
-  }, [rtcSession, preload, skipLobby, perParticipantE2EE]);
+  }, [rtcSession, preload, skipLobby, e2eeSystem]);
 
   const [left, setLeft] = useState(false);
   const [leaveError, setLeaveError] = useState<Error | undefined>(undefined);
@@ -218,6 +218,8 @@ export const GroupCallView: FC<Props> = ({
       PosthogAnalytics.instance.eventCallEnded.track(
         rtcSession.room.roomId,
         rtcSession.memberships.length,
+        matrixInfo.e2eeSystem.kind,
+        rtcSession,
         sendInstantly,
         rtcSession,
       );
@@ -237,7 +239,7 @@ export const GroupCallView: FC<Props> = ({
           logger.error("Error leaving RTC session", e);
         });
     },
-    [rtcSession, isPasswordlessUser, confineToRoom, history],
+    [rtcSession, isPasswordlessUser, confineToRoom, history, matrixInfo],
   );
 
   useEffect(() => {
@@ -264,10 +266,10 @@ export const GroupCallView: FC<Props> = ({
   const onReconnect = useCallback(() => {
     setLeft(false);
     setLeaveError(undefined);
-    enterRTCSession(rtcSession, perParticipantE2EE).catch((e) => {
+    enterRTCSession(rtcSession, e2eeSystem.kind).catch((e) => {
       logger.error("Error re-entering RTC session on reconnect", e);
     });
-  }, [rtcSession, perParticipantE2EE]);
+  }, [rtcSession, e2eeSystem]);
 
   const joinRule = useJoinRule(rtcSession.room);
 
@@ -310,7 +312,7 @@ export const GroupCallView: FC<Props> = ({
         client={client}
         matrixInfo={matrixInfo}
         muteStates={muteStates}
-        onEnter={() => void enterRTCSession(rtcSession, perParticipantE2EE)}
+        onEnter={() => void enterRTCSession(rtcSession, e2eeSystem.kind)}
         confineToRoom={confineToRoom}
         hideHeader={hideHeader}
         participantCount={participantCount}

src/rtcSessionHelper.test.ts

@@ -10,6 +10,7 @@ import { expect, test, vi } from "vitest";
 
 import { enterRTCSession } from "../src/rtcSessionHelpers";
 import { Config } from "../src/config/Config";
+import { E2eeType } from "../src/e2ee/e2eeType";
 import { DEFAULT_CONFIG } from "./config/ConfigOptions";
 
 test("It joins the correct Session", async () => {
@@ -52,7 +53,7 @@ test("It joins the correct Session", async () => {
     }),
     joinRoomSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
-  await enterRTCSession(mockedSession, false);
+  await enterRTCSession(mockedSession, E2eeType.NONE);
 
   expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
     [