Keep the password in the URL

We changed our minds: people do copy the URL from the bar and
give that to people and expect it to work: it doesn't make sense
to prioritise shorter URLs over this. There's no security advantage
unless we think there's a risk someone might steal your key by taking
a photo of your monitor over your shoulder and decrypting the calls
they can't already hear by standing behind you.

src/e2ee/sharedKeyManagement.ts

@@ -19,7 +19,7 @@ import { useEffect, useMemo } from "react";
 import { useEnableE2EE } from "../settings/useSetting";
 import { useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
-import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+import { useUrlParams } from "../UrlParams";
 import { widget } from "../widget";
 
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
@@ -61,25 +61,10 @@ export const useRoomSharedKey = (roomId: string): string | null => {
 };
 
 export const useManageRoomSharedKey = (roomId: string): string | null => {
-  const urlParams = useUrlParams();
-
   const urlPassword = useKeyFromUrl(roomId);
 
   const [e2eeSharedKey] = useInternalRoomSharedKey(roomId);
 
-  useEffect(() => {
-    const hash = location.hash;
-
-    if (!hash.includes("?")) return;
-    if (!hash.includes(PASSWORD_STRING)) return;
-    if (urlParams.password !== e2eeSharedKey) return;
-
-    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const hashEnd = passwordStart.split("&").slice(1).join("&");
-
-    location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [urlParams, e2eeSharedKey]);
-
   return e2eeSharedKey ?? urlPassword;
 };
 

src/home/CallList.tsx

@@ -68,9 +68,11 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) {
   return (
     <div className={styles.callTile}>
       <Link
-        // note we explicitly omit the password here as we don't want it on this link because
+        to={getRelativeRoomUrl(
-        // it's just for the user to navigate around and not for sharing
+          room.roomId,
-        to={getRelativeRoomUrl(room.roomId, room.name)}
+          room.name,
+          roomSharedKey ?? undefined
+        )}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />

src/home/RegisteredView.tsx

@@ -81,14 +81,16 @@ export function RegisteredView({ client }: Props) {
           await createRoom(client, roomName, e2eeEnabled ?? false)
         )[1];
 
+        const roomPassword = randomString(32);
+
         if (e2eeEnabled) {
           setLocalStorageItem(
             getRoomSharedKeyLocalStorageKey(roomId),
-            randomString(32)
+            roomPassword
           );
         }
 
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(getRelativeRoomUrl(roomId, roomName, roomPassword));
       }
 
       submit().catch((error) => {

src/home/UnauthenticatedView.tsx

@@ -88,6 +88,7 @@ export const UnauthenticatedView: FC = () => {
         );
 
         let roomId: string;
+        const roomPassword = randomString(32);
         try {
           roomId = (
             await createRoom(client, roomName, e2eeEnabled ?? false)
@@ -96,7 +97,7 @@ export const UnauthenticatedView: FC = () => {
           if (e2eeEnabled) {
             setLocalStorageItem(
               getRoomSharedKeyLocalStorageKey(roomId),
-              randomString(32)
+              roomPassword
             );
           }
         } catch (error) {
@@ -127,7 +128,7 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(getRelativeRoomUrl(roomId, roomName, roomPassword));
       }
 
       submit().catch((error) => {