Lock out the first tab if Element is opened in a second tab. (#11425)

* Implement session lock dialogs

* Bump analytics-events package

* clean up resetJsDomAfterEach

* fix types

* update snapshot

* update i18n strings

package.json

@@ -60,7 +60,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/analytics-events": "^0.6.0",
+        "@matrix-org/analytics-events": "^0.7.0",
         "@matrix-org/emojibase-bindings": "^1.1.2",
         "@matrix-org/matrix-wysiwyg": "^2.4.1",
         "@matrix-org/react-sdk-module-api": "^2.1.0",

res/css/_components.pcss

@@ -90,8 +90,10 @@
 @import "./structures/_UserMenu.pcss";
 @import "./structures/_ViewSource.pcss";
 @import "./structures/auth/_CompleteSecurity.pcss";
+@import "./structures/auth/_ConfirmSessionLockTheftView.pcss";
 @import "./structures/auth/_Login.pcss";
 @import "./structures/auth/_Registration.pcss";
+@import "./structures/auth/_SessionLockStolenView.pcss";
 @import "./structures/auth/_SetupEncryptionBody.pcss";
 @import "./views/audio_messages/_AudioPlayer.pcss";
 @import "./views/audio_messages/_PlayPauseButton.pcss";

res/css/structures/auth/_ConfirmSessionLockTheftView.pcss

@@ -0,0 +1,30 @@
+/*
+Copyright 2019-2023 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_ConfirmSessionLockTheftView {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ConfirmSessionLockTheftView_body {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: center;
+}

res/css/structures/auth/_SessionLockStolenView.pcss

@@ -0,0 +1,30 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_SessionLockStolenView {
+    h1 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-32px;
+        text-align: center;
+    }
+
+    h2 {
+        margin: 0;
+        font-weight: 500;
+        font-size: $font-24px;
+        text-align: center;
+    }
+}

src/Lifecycle.ts

@@ -82,6 +82,41 @@ dis.register((payload) => {
     }
 });
 
+/**
+ * This is set to true by {@link #onSessionLockStolen}.
+ *
+ * It is used in various of the async functions to prevent races where we initialise a client after the lock is stolen.
+ */
+let sessionLockStolen = false;
+
+// this is exposed solely for unit tests.
+// ts-prune-ignore-next
+export function setSessionLockNotStolen(): void {
+    sessionLockStolen = false;
+}
+
+/**
+ * Handle the session lock being stolen. Stops any active Matrix Client, and aborts any ongoing client initialisation.
+ */
+export async function onSessionLockStolen(): Promise<void> {
+    sessionLockStolen = true;
+    stopMatrixClient();
+}
+
+/**
+ * Check if we still hold the session lock.
+ *
+ * If not, raises a {@link SessionLockStolenError}.
+ */
+function checkSessionLock(): void {
+    if (sessionLockStolen) {
+        throw new SessionLockStolenError("session lock has been released");
+    }
+}
+
+/** Error type raised by various functions in the Lifecycle workflow if session lock is stolen during execution */
+class SessionLockStolenError extends Error {}
+
 interface ILoadSessionOpts {
     enableGuest?: boolean;
     guestHsUrl?: string;
@@ -153,6 +188,9 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean>
         if (success) {
             return true;
         }
+        if (sessionLockStolen) {
+            return false;
+        }
 
         if (enableGuest && guestHsUrl) {
             return registerAsGuest(guestHsUrl, guestIsUrl, defaultDeviceDisplayName);
@@ -166,6 +204,12 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean>
             // need to show the general failure dialog. Instead, just go back to welcome.
             return false;
         }
+
+        // likewise, if the session lock has been stolen while we've been trying to start
+        if (sessionLockStolen) {
+            return false;
+        }
+
         return handleLoadSessionFailure(e);
     }
 }
@@ -719,6 +763,7 @@ export async function hydrateSession(credentials: IMatrixClientCreds): Promise<M
  * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
 async function doSetLoggedIn(credentials: IMatrixClientCreds, clearStorageEnabled: boolean): Promise<MatrixClient> {
+    checkSessionLock();
     credentials.guest = Boolean(credentials.guest);
 
     const softLogout = isSoftLogout();
@@ -749,6 +794,8 @@ async function doSetLoggedIn(credentials: IMatrixClientCreds, clearStorageEnable
         await abortLogin();
     }
 
+    // check the session lock just before creating the new client
+    checkSessionLock();
     MatrixClientPeg.replaceUsingCreds(credentials);
     const client = MatrixClientPeg.safeGet();
 
@@ -781,6 +828,7 @@ async function doSetLoggedIn(credentials: IMatrixClientCreds, clearStorageEnable
     } else {
         logger.warn("No local storage available: can't persist session!");
     }
+    checkSessionLock();
 
     dis.fire(Action.OnLoggedIn);
     await startMatrixClient(client, /*startSyncing=*/ !softLogout);
@@ -976,6 +1024,8 @@ async function startMatrixClient(client: MatrixClient, startSyncing = true): Pro
         await MatrixClientPeg.assign();
     }
 
+    checkSessionLock();
+
     // Run the migrations after the MatrixClientPeg has been assigned
     SettingsStore.runMigrations();
 

src/PosthogTrackers.ts

@@ -27,6 +27,7 @@ export type InteractionName = InteractionEvent["name"];
 
 const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
     [Views.LOADING]: "Loading",
+    [Views.CONFIRM_LOCK_THEFT]: "ConfirmStartup",
     [Views.WELCOME]: "Welcome",
     [Views.LOGIN]: "Login",
     [Views.REGISTER]: "Register",
@@ -35,6 +36,7 @@ const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
     [Views.COMPLETE_SECURITY]: "CompleteSecurity",
     [Views.E2E_SETUP]: "E2ESetup",
     [Views.SOFT_LOGOUT]: "SoftLogout",
+    [Views.LOCK_STOLEN]: "SessionLockStolen",
 };
 
 const loggedInPageTypeMap: Record<PageType, ScreenName> = {

src/Views.ts

@@ -20,6 +20,9 @@ enum Views {
     // trying to re-animate a matrix client or register as a guest.
     LOADING,
 
+    // Another tab holds the lock.
+    CONFIRM_LOCK_THEFT,
+
     // we are showing the welcome view
     WELCOME,
 
@@ -48,6 +51,9 @@ enum Views {
     // We are logged out (invalid token) but have our local state again. The user
     // should log back in to rehydrate the client.
     SOFT_LOGOUT,
+
+    // Another instance of the application has started up. We just show an error page.
+    LOCK_STOLEN,
 }
 
 export default Views;

src/components/structures/MatrixChat.tsx

@@ -147,6 +147,9 @@ import { NotificationColor } from "../../stores/notifications/NotificationColor"
 import { UserTab } from "../views/dialogs/UserTab";
 import { shouldSkipSetupEncryption } from "../../utils/crypto/shouldSkipSetupEncryption";
 import { Filter } from "../views/dialogs/spotlight/Filter";
+import { checkSessionLockFree, getSessionLock } from "../../utils/SessionLock";
+import { SessionLockStolenView } from "./auth/SessionLockStolenView";
+import { ConfirmSessionLockTheftView } from "./auth/ConfirmSessionLockTheftView";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -307,11 +310,23 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         initSentry(SdkConfig.get("sentry"));
 
+        if (!checkSessionLockFree()) {
+            // another instance holds the lock; confirm its theft before proceeding
+            setTimeout(() => this.setState({ view: Views.CONFIRM_LOCK_THEFT }), 0);
+        } else {
+            this.startInitSession();
+        }
+    }
+
+    /**
+     * Kick off a call to {@link initSession}, and handle any errors
+     */
+    private startInitSession = (): void => {
         this.initSession().catch((err) => {
             // TODO: show an error screen, rather than a spinner of doom
             logger.error("Error initialising Matrix session", err);
         });
-    }
+    };
 
     /**
      * Do what we can to establish a Matrix session.
@@ -324,6 +339,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      *  * If all else fails, present a login screen.
      */
     private async initSession(): Promise<void> {
+        // The Rust Crypto SDK will break if two Element instances try to use the same datastore at once, so
+        // make sure we are the only Element instance in town (on this browser/domain).
+        if (!(await getSessionLock(() => this.onSessionLockStolen()))) {
+            // we failed to get the lock. onSessionLockStolen should already have been called, so nothing left to do.
+            return;
+        }
+
         // If the user was soft-logged-out, we want to make the SoftLogout component responsible for doing any
         // token auth (rather than Lifecycle.attemptDelegatedAuthLogin), since SoftLogout knows about submitting the
         // device ID and preserving the session.
@@ -378,6 +400,18 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
     }
 
+    private async onSessionLockStolen(): Promise<void> {
+        // switch to the LockStolenView. We deliberately do this immediately, rather than going through the dispatcher,
+        // because there can be a substantial queue in the dispatcher, and some of the events in it might require an
+        // active MatrixClient.
+        await new Promise<void>((resolve) => {
+            this.setState({ view: Views.LOCK_STOLEN }, resolve);
+        });
+
+        // now we can tell the Lifecycle routines to abort any active startup, and to stop the active client.
+        await Lifecycle.onSessionLockStolen();
+    }
+
     private async postLoginSetup(): Promise<void> {
         const cli = MatrixClientPeg.safeGet();
         const cryptoEnabled = cli.isCryptoEnabled();
@@ -574,6 +608,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     private onAction = (payload: ActionPayload): void => {
+        // once the session lock has been stolen, don't try to do anything.
+        if (this.state.view === Views.LOCK_STOLEN) {
+            return;
+        }
+
         // Start the onboarding process for certain actions
         if (MatrixClientPeg.get()?.isGuest() && ONBOARDING_FLOW_STARTERS.includes(payload.action)) {
             // This will cause `payload` to be dispatched later, once a
@@ -2051,6 +2090,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     <Spinner />
                 </div>
             );
+        } else if (this.state.view === Views.CONFIRM_LOCK_THEFT) {
+            view = (
+                <ConfirmSessionLockTheftView
+                    onConfirm={() => {
+                        this.setState({ view: Views.LOADING });
+                        this.startInitSession();
+                    }}
+                />
+            );
         } else if (this.state.view === Views.COMPLETE_SECURITY) {
             view = <CompleteSecurity onFinished={this.onCompleteSecurityE2eSetupFinished} />;
         } else if (this.state.view === Views.E2E_SETUP) {
@@ -2157,6 +2205,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             );
         } else if (this.state.view === Views.USE_CASE_SELECTION) {
             view = <UseCaseSelection onFinished={(useCase): Promise<void> => this.onShowPostLoginScreen(useCase)} />;
+        } else if (this.state.view === Views.LOCK_STOLEN) {
+            view = <SessionLockStolenView />;
         } else {
             logger.error(`Unknown view ${this.state.view}`);
             return null;

src/components/structures/auth/ConfirmSessionLockTheftView.tsx

@@ -0,0 +1,51 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+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 React from "react";
+
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+
+interface Props {
+    /** Callback which the view will call if the user confirms they want to use this window */
+    onConfirm: () => void;
+}
+
+/**
+ * Component shown by {@link MatrixChat} when another session is already active in the same browser and we need to
+ * confirm if we should steal its lock
+ */
+export function ConfirmSessionLockTheftView(props: Props): JSX.Element {
+    const brand = SdkConfig.get().brand;
+
+    return (
+        <div className="mx_ConfirmSessionLockTheftView">
+            <div className="mx_ConfirmSessionLockTheftView_body">
+                <p>
+                    {_t(
+                        '%(brand)s is open in another window. Click "%(label)s" to use %(brand)s here and disconnect the other window.',
+                        { brand, label: _t("action|continue") },
+                    )}
+                </p>
+
+                <AccessibleButton kind="primary" onClick={props.onConfirm}>
+                    {_t("action|continue")}
+                </AccessibleButton>
+            </div>
+        </div>
+    );
+}

src/components/structures/auth/SessionLockStolenView.tsx

@@ -0,0 +1,35 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+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 React from "react";
+
+import SplashPage from "../SplashPage";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+
+/**
+ * Component shown by {@link MatrixChat} when another session is started in the same browser.
+ */
+export function SessionLockStolenView(): JSX.Element {
+    const brand = SdkConfig.get().brand;
+
+    return (
+        <SplashPage className="mx_SessionLockStolenView">
+            <h1>{_t("common|error")}</h1>
+            <h2>{_t("%(brand)s has been opened in another tab.", { brand })}</h2>
+        </SplashPage>
+    );
+}

src/i18n/strings/en_EN.json

@@ -3406,6 +3406,7 @@
     "Device verified": "Device verified",
     "Really reset verification keys?": "Really reset verification keys?",
     "Skip verification for now": "Skip verification for now",
+    "%(brand)s is open in another window. Click \"%(label)s\" to use %(brand)s here and disconnect the other window.": "%(brand)s is open in another window. Click \"%(label)s\" to use %(brand)s here and disconnect the other window.",
     "Too many attempts in a short time. Wait some time before trying again.": "Too many attempts in a short time. Wait some time before trying again.",
     "Too many attempts in a short time. Retry after %(timeout)s.": "Too many attempts in a short time. Retry after %(timeout)s.",
     "Signing out your devices will delete the message encryption keys stored on them, making encrypted chat history unreadable.": "Signing out your devices will delete the message encryption keys stored on them, making encrypted chat history unreadable.",
@@ -3448,6 +3449,7 @@
     "Registration Successful": "Registration Successful",
     "Host account on": "Host account on",
     "Decide where your account is hosted": "Decide where your account is hosted",
+    "%(brand)s has been opened in another tab.": "%(brand)s has been opened in another tab.",
     "It looks like you don't have a Security Key or any other devices you can verify against.  This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.": "It looks like you don't have a Security Key or any other devices you can verify against.  This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.",
     "Proceed with reset": "Proceed with reset",
     "Verify with Security Key or Phrase": "Verify with Security Key or Phrase",

src/utils/SessionLock.ts

@@ -177,7 +177,7 @@ export async function getSessionLock(onNewInstance: () => Promise<void>): Promis
 
         // and, once it has done so, stop pinging the lock.
         if (lockServicer !== null) {
-            clearInterval(lockServicer);
+            window.clearInterval(lockServicer);
         }
         window.localStorage.removeItem(SESSION_LOCK_CONSTANTS.STORAGE_ITEM_PING);
         window.localStorage.removeItem(SESSION_LOCK_CONSTANTS.STORAGE_ITEM_OWNER);
@@ -233,7 +233,7 @@ export async function getSessionLock(onNewInstance: () => Promise<void>): Promis
 
     // claim the lock, and kick off a background process to service it every 5 seconds
     serviceLock();
-    lockServicer = setInterval(serviceLock, 5000);
+    lockServicer = window.setInterval(serviceLock, 5000);
 
     // Now add a listener for other claimants to the lock.
     window.addEventListener("storage", onStorageEvent);

test/components/structures/MatrixChat-test.tsx

@@ -25,6 +25,7 @@ import { completeAuthorizationCodeGrant } from "matrix-js-sdk/src/oidc/authorize
 import { logger } from "matrix-js-sdk/src/logger";
 import { OidcError } from "matrix-js-sdk/src/oidc/error";
 import { BearerTokenResponse } from "matrix-js-sdk/src/oidc/validate";
+import { defer, sleep } from "matrix-js-sdk/src/utils";
 
 import MatrixChat from "../../../src/components/structures/MatrixChat";
 import * as StorageManager from "../../../src/utils/StorageManager";
@@ -37,7 +38,9 @@ import {
     flushPromises,
     getMockClientWithEventEmitter,
     mockClientMethodsUser,
+    MockClientWithEventEmitter,
     mockPlatformPeg,
+    resetJsDomAfterEach,
 } from "../../test-utils";
 import * as leaveRoomUtils from "../../../src/utils/leave-behaviour";
 import * as voiceBroadcastUtils from "../../../src/voice-broadcast/utils/cleanUpBroadcasts";
@@ -47,6 +50,7 @@ import { Call } from "../../../src/models/Call";
 import { PosthogAnalytics } from "../../../src/PosthogAnalytics";
 import PlatformPeg from "../../../src/PlatformPeg";
 import EventIndexPeg from "../../../src/indexing/EventIndexPeg";
+import * as Lifecycle from "../../../src/Lifecycle";
 
 jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
     completeAuthorizationCodeGrant: jest.fn(),
@@ -137,7 +141,23 @@ describe("<MatrixChat />", () => {
         render(<MatrixChat {...defaultProps} {...props} />);
 
     // make test results readable
-    filterConsole("Failed to parse localStorage object");
+    filterConsole(
+        "Failed to parse localStorage object",
+        "Sync store cannot be used on this browser",
+        "Crypto store cannot be used on this browser",
+        "Storage consistency checks failed",
+        "LegacyCallHandler: missing <audio",
+    );
+
+    /** populate storage with details of a persisted session */
+    async function populateStorageForSession() {
+        localStorage.setItem("mx_hs_url", serverConfig.hsUrl);
+        localStorage.setItem("mx_is_url", serverConfig.isUrl);
+        // TODO: nowadays the access token lives (encrypted) in indexedDB, and localstorage is only used as a fallback.
+        localStorage.setItem("mx_access_token", accessToken);
+        localStorage.setItem("mx_user_id", userId);
+        localStorage.setItem("mx_device_id", deviceId);
+    }
 
     /**
      * Wait for a bunch of stuff to happen
@@ -184,10 +204,10 @@ describe("<MatrixChat />", () => {
         await clearAllModals();
     });
 
+    resetJsDomAfterEach();
+
     afterEach(() => {
         jest.restoreAllMocks();
-        localStorage.clear();
-        sessionStorage.clear();
 
         // emit a loggedOut event so that all of the Store singletons forget about their references to the mock client
         defaultDispatcher.dispatch({ action: Action.OnLoggedOut });
@@ -206,13 +226,8 @@ describe("<MatrixChat />", () => {
             },
         };
 
-        beforeEach(() => {
-            localStorage.setItem("mx_hs_url", serverConfig.hsUrl);
-            localStorage.setItem("mx_is_url", serverConfig.isUrl);
-            localStorage.setItem("mx_access_token", accessToken);
-            localStorage.setItem("mx_user_id", userId);
-            localStorage.setItem("mx_device_id", deviceId);
-
+        beforeEach(async () => {
+            await populateStorageForSession();
             jest.spyOn(StorageManager, "idbLoad").mockImplementation(async (table, key) => {
                 const safeKey = Array.isArray(key) ? key[0] : key;
                 return mockidb[table]?.[safeKey];
@@ -516,12 +531,8 @@ describe("<MatrixChat />", () => {
     describe("with a soft-logged-out session", () => {
         const mockidb: Record<string, Record<string, string>> = {};
 
-        beforeEach(() => {
-            localStorage.setItem("mx_hs_url", serverConfig.hsUrl);
-            localStorage.setItem("mx_is_url", serverConfig.isUrl);
-            localStorage.setItem("mx_access_token", accessToken);
-            localStorage.setItem("mx_user_id", userId);
-            localStorage.setItem("mx_device_id", deviceId);
+        beforeEach(async () => {
+            await populateStorageForSession();
             localStorage.setItem("mx_soft_logout", "true");
 
             mockClient.loginFlows.mockResolvedValue({ flows: [{ type: "m.login.password" }] });
@@ -742,6 +753,7 @@ describe("<MatrixChat />", () => {
             localStorage.removeItem("mx_sso_hs_url");
             const localStorageGetSpy = jest.spyOn(localStorage.__proto__, "getItem");
             getComponent({ realQueryParams });
+            await flushPromises();
 
             expect(localStorageGetSpy).toHaveBeenCalledWith("mx_sso_hs_url");
             expect(localStorageGetSpy).toHaveBeenCalledWith("mx_sso_is_url");
@@ -759,6 +771,7 @@ describe("<MatrixChat />", () => {
 
         it("should attempt token login", async () => {
             getComponent({ realQueryParams });
+            await flushPromises();
 
             expect(loginClient.login).toHaveBeenCalledWith("m.login.token", {
                 initial_device_display_name: undefined,
@@ -1093,4 +1106,138 @@ describe("<MatrixChat />", () => {
             });
         });
     });
+
+    describe("Multi-tab lockout", () => {
+        afterEach(() => {
+            Lifecycle.setSessionLockNotStolen();
+        });
+
+        it("waits for other tab to stop during startup", async () => {
+            fetchMock.get("/welcome.html", { body: "<h1>Hello</h1>" });
+            jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
+
+            // simulate an active window
+            localStorage.setItem("react_sdk_session_lock_ping", String(Date.now()));
+
+            const rendered = getComponent({});
+            await flushPromises();
+            expect(rendered.container).toMatchSnapshot();
+
+            // user confirms
+            rendered.getByRole("button", { name: "Continue" }).click();
+            await flushPromises();
+
+            // we should have claimed the session, but gone no further
+            expect(Lifecycle.attemptDelegatedAuthLogin).not.toHaveBeenCalled();
+            const sessionId = localStorage.getItem("react_sdk_session_lock_claimant");
+            expect(sessionId).toEqual(expect.stringMatching(/./));
+            expect(rendered.container).toMatchSnapshot();
+
+            // the other tab shuts down
+            localStorage.removeItem("react_sdk_session_lock_ping");
+            // fire the storage event manually, because writes to localStorage from the same javascript context don't
+            // fire it automatically
+            window.dispatchEvent(new StorageEvent("storage", { key: "react_sdk_session_lock_ping" }));
+
+            // startup continues
+            await flushPromises();
+            expect(Lifecycle.attemptDelegatedAuthLogin).toHaveBeenCalled();
+
+            // should just show the welcome screen
+            await rendered.findByText("Hello");
+            expect(rendered.container).toMatchSnapshot();
+        });
+
+        describe("shows the lockout page when a second tab opens", () => {
+            beforeEach(() => {
+                // make sure we start from a clean DOM for each of these tests
+                document.body.replaceChildren();
+            });
+
+            function simulateSessionLockClaim() {
+                localStorage.setItem("react_sdk_session_lock_claimant", "testtest");
+                window.dispatchEvent(new StorageEvent("storage", { key: "react_sdk_session_lock_claimant" }));
+            }
+
+            it("after a session is restored", async () => {
+                await populateStorageForSession();
+
+                const client = getMockClientWithEventEmitter(getMockClientMethods());
+                jest.spyOn(MatrixJs, "createClient").mockReturnValue(client);
+                client.getProfileInfo.mockResolvedValue({ displayname: "Ernie" });
+
+                const rendered = getComponent({});
+                await waitForSyncAndLoad(client, true);
+                rendered.getByText("Welcome Ernie");
+
+                // we're now at the welcome page. Another session wants the lock...
+                simulateSessionLockClaim();
+                await flushPromises();
+                expect(rendered.container).toMatchSnapshot();
+            });
+
+            it("while we were waiting for the lock ourselves", async () => {
+                // simulate there already being one session
+                localStorage.setItem("react_sdk_session_lock_ping", String(Date.now()));
+
+                const rendered = getComponent({});
+                await flushPromises();
+
+                // user confirms continue
+                rendered.getByRole("button", { name: "Continue" }).click();
+                await flushPromises();
+                expect(rendered.getByTestId("spinner")).toBeInTheDocument();
+
+                // now a third session starts
+                simulateSessionLockClaim();
+                await flushPromises();
+                expect(rendered.container).toMatchSnapshot();
+            });
+
+            it("while we are checking the sync store", async () => {
+                const rendered = getComponent({});
+                await flushPromises();
+                expect(rendered.getByTestId("spinner")).toBeInTheDocument();
+
+                // now a third session starts
+                simulateSessionLockClaim();
+                await flushPromises();
+                expect(rendered.container).toMatchSnapshot();
+            });
+
+            it("during crypto init", async () => {
+                await populateStorageForSession();
+
+                const client = new MockClientWithEventEmitter({
+                    initCrypto: jest.fn(),
+                    ...getMockClientMethods(),
+                }) as unknown as Mocked<MatrixClient>;
+                jest.spyOn(MatrixJs, "createClient").mockReturnValue(client);
+
+                // intercept initCrypto and have it block until we complete the deferred
+                const initCryptoCompleteDefer = defer();
+                const initCryptoCalled = new Promise<void>((resolve) => {
+                    client.initCrypto.mockImplementation(() => {
+                        resolve();
+                        return initCryptoCompleteDefer.promise;
+                    });
+                });
+
+                const rendered = getComponent({});
+                await initCryptoCalled;
+                console.log("initCrypto called");
+
+                simulateSessionLockClaim();
+                await flushPromises();
+
+                // now we should see the error page
+                rendered.getByText("Test has been opened in another tab.");
+
+                // let initCrypto complete, and check we don't get a modal
+                initCryptoCompleteDefer.resolve();
+                await sleep(10); // Modals take a few ms to appear
+                expect(document.body).toMatchSnapshot();
+            });
+        });
+    });
 });

test/components/structures/__snapshots__/MatrixChat-test.tsx.snap

@@ -1,5 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens after a session is restored 1`] = `
+<div>
+  <main
+    class="mx_SessionLockStolenView mx_SplashPage"
+  >
+    <h1>
+      Error
+    </h1>
+    <h2>
+      Test has been opened in another tab.
+    </h2>
+  </main>
+</div>
+`;
+
+exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens during crypto init 1`] = `
+<body>
+  <div>
+    <main
+      class="mx_SessionLockStolenView mx_SplashPage"
+    >
+      <h1>
+        Error
+      </h1>
+      <h2>
+        Test has been opened in another tab.
+      </h2>
+    </main>
+  </div>
+</body>
+`;
+
+exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens while we are checking the sync store 1`] = `
+<div>
+  <main
+    class="mx_SessionLockStolenView mx_SplashPage"
+  >
+    <h1>
+      Error
+    </h1>
+    <h2>
+      Test has been opened in another tab.
+    </h2>
+  </main>
+</div>
+`;
+
+exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens while we were waiting for the lock ourselves 1`] = `
+<div>
+  <main
+    class="mx_SessionLockStolenView mx_SplashPage"
+  >
+    <h1>
+      Error
+    </h1>
+    <h2>
+      Test has been opened in another tab.
+    </h2>
+  </main>
+</div>
+`;
+
+exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 1`] = `
+<div>
+  <div
+    class="mx_ConfirmSessionLockTheftView"
+  >
+    <div
+      class="mx_ConfirmSessionLockTheftView_body"
+    >
+      <p>
+        Test is open in another window. Click "Continue" to use Test here and disconnect the other window.
+      </p>
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        role="button"
+        tabindex="0"
+      >
+        Continue
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 2`] = `
+<div>
+  <div
+    class="mx_MatrixChat_splash"
+  >
+    <div
+      class="mx_Spinner"
+    >
+      <div
+        aria-label="Loading…"
+        class="mx_Spinner_icon"
+        data-testid="spinner"
+        role="progressbar"
+        style="width: 32px; height: 32px;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 3`] = `
+<div>
+  <div
+    class="mx_AuthPage"
+  >
+    <div
+      class="mx_AuthPage_modal"
+    >
+      <div
+        class="mx_Welcome"
+      >
+        <div
+          class="mx_WelcomePage mx_WelcomePage_loggedIn"
+        >
+          <div
+            class="mx_WelcomePage_body"
+          >
+            <h1>
+              Hello
+            </h1>
+          </div>
+        </div>
+        <div
+          class="mx_Dropdown mx_LanguageDropdown mx_AuthBody_language"
+        >
+          <div
+            aria-describedby="mx_LanguageDropdown_value"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Language Dropdown"
+            aria-owns="mx_LanguageDropdown_input"
+            class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="mx_Dropdown_option"
+              id="mx_LanguageDropdown_value"
+            >
+              <div>
+                English
+              </div>
+            </div>
+            <span
+              class="mx_Dropdown_arrow"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer
+      class="mx_AuthFooter"
+      role="contentinfo"
+    >
+      <a
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        powered by Matrix
+      </a>
+    </footer>
+  </div>
+</div>
+`;
+
 exports[`<MatrixChat /> should render spinner while app is loading 1`] = `
 <div>
   <div

test/test-utils/utilities.ts

@@ -234,3 +234,63 @@ export function useMockMediaDevices(): void {
         getUserMedia: jest.fn(),
     };
 }
+
+/**
+ * Clean up the JSDOM after each test.
+ *
+ * Registers `beforeEach` and `afterEach` functions which will deregister any event listeners and timers from the
+ * `window` and `document` objects.
+ *
+ * Also clears out `localStorage` and `sessionStorage`.
+ */
+export function resetJsDomAfterEach(): void {
+    // list of calls to run in afterEach
+    const resetCalls: (() => void)[] = [];
+
+    beforeEach(() => {
+        // intercept `window.addEventListener` and `document.addEventListener`, and register 'removeEventListener' calls
+        // for `afterEach`.
+        for (const obj of [window, document]) {
+            const originalFn = obj.addEventListener;
+            obj.addEventListener = (...args: Parameters<Window["addEventListener"]>) => {
+                originalFn.apply(obj, args);
+                resetCalls.push(() => obj.removeEventListener(...args));
+            };
+
+            // also reset the intercept after the test
+            resetCalls.push(() => {
+                obj.addEventListener = originalFn;
+            });
+        }
+
+        // intercept setTimeout and setInterval, and clear them at the end.
+        //
+        // *Don't* use jest.spyOn for this because it makes the DOM testing library think we are using fake timers.
+        //
+        ["setTimeout", "setInterval"].forEach((name) => {
+            const originalFn = window[name as keyof Window];
+            // @ts-ignore assignment to read-only property
+            window[name] = (...args) => {
+                const result = originalFn.apply(window, args);
+                resetCalls.push(() => window.clearTimeout(result));
+                return result;
+            };
+            resetCalls.push(() => {
+                // @ts-ignore assignment to read-only property
+                window[name] = originalFn;
+            });
+        });
+    });
+
+    afterEach(() => {
+        // clean up event listeners, timers, etc.
+        for (const call of resetCalls) {
+            call();
+        }
+        resetCalls.splice(0);
+
+        // other cleanup
+        localStorage.clear();
+        sessionStorage.clear();
+    });
+}

test/utils/SessionLock-test.ts

@@ -15,46 +15,23 @@ limitations under the License.
 */
 
 import { checkSessionLockFree, getSessionLock, SESSION_LOCK_CONSTANTS } from "../../src/utils/SessionLock";
+import { resetJsDomAfterEach } from "../test-utils";
 
 describe("SessionLock", () => {
     const otherWindows: Array<Window> = [];
-    let windowEventListeners: Array<[string, any]>;
-    let documentEventListeners: Array<[string, any]>;
 
     beforeEach(() => {
         jest.useFakeTimers({ now: 1000 });
-
-        // keep track of the registered event listeners, so that we can unregister them in `afterEach`
-        windowEventListeners = [];
-        const realWindowAddEventListener = window.addEventListener.bind(window);
-        jest.spyOn(window, "addEventListener").mockImplementation((type, listener, options) => {
-            const res = realWindowAddEventListener(type, listener, options);
-            windowEventListeners.push([type, listener]);
-            return res;
-        });
-
-        documentEventListeners = [];
-        const realDocumentAddEventListener = document.addEventListener.bind(document);
-        jest.spyOn(document, "addEventListener").mockImplementation((type, listener, options) => {
-            const res = realDocumentAddEventListener(type, listener, options);
-            documentEventListeners.push([type, listener]);
-            return res;
-        });
     });
 
     afterEach(() => {
         // shut down other windows created by `createWindow`
         otherWindows.forEach((window) => window.close());
         otherWindows.splice(0);
-
-        // remove listeners on our own window
-        windowEventListeners.forEach(([type, listener]) => window.removeEventListener(type, listener));
-        documentEventListeners.forEach(([type, listener]) => document.removeEventListener(type, listener));
-
-        localStorage.clear();
-        jest.restoreAllMocks();
     });
 
+    resetJsDomAfterEach();
+
     it("A single instance starts up normally", async () => {
         const onNewInstance = jest.fn();
         const result = await getSessionLock(onNewInstance);

yarn.lock

@@ -1848,10 +1848,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
-"@matrix-org/analytics-events@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.6.0.tgz#6552882f94d026f13da25d49e2a208287521c275"
-  integrity sha512-bTvNpp8LkC/2sItHABd1vGHdB8iclAcdlIYrL0Cn6qT+aohpdjb1wZ0dhUcx3NK5Q98IduI43RVH33V4Li/X0A==
+"@matrix-org/analytics-events@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.7.0.tgz#a9ea47209473d1075704db4eabb6d94c8d99be25"
+  integrity sha512-9M1ESpFbXaU0v8Kzm0N61eAiVymv0tlXP5FfqCUH+BDP7DmW/tqyIpDs9ooUxXoFg1bBEQaRy/xOyO15ZykCAg==
 
 "@matrix-org/emojibase-bindings@^1.1.2":
   version "1.1.2"