Merge pull request #1703 from vector-im/dbkr/keep_password_in_url

Keep the password in the URL

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 =>
@@ -60,29 +60,6 @@ export const useRoomSharedKey = (roomId: string): string | null => {
   return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
 };
 
-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;
-};
-
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
   const { client } = useClient();
   const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);

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) => {

src/room/GroupCallView.tsx

@@ -39,10 +39,7 @@ import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
-import {
+import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-  useManageRoomSharedKey,
-  useIsRoomE2EE,
-} from "../e2ee/sharedKeyManagement";
 import { useEnableE2EE } from "../settings/useSetting";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
@@ -75,7 +72,7 @@ export function GroupCallView({
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
 
-  const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
+  const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId);
   const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);
 
   useEffect(() => {