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

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>
+    );
+}