Fix test

When we set up cross signing, so the key backup key will be stored locally along with the cross signing keys until the user sets up recovery (4s). This will mean that a user can restore their backup if they log in on a new device as long as they verify with the one they registered on.

Replaces https://github.com/element-hq/element-web/pull/28267

src/@types/global.d.ts

@@ -44,6 +44,7 @@ import { IConfigOptions } from "../IConfigOptions";
 import { MatrixDispatcher } from "../dispatcher/dispatcher";
 import { DeepReadonly } from "./common";
 import MatrixChat from "../components/structures/MatrixChat";
+import { InitialCryptoSetupStore } from "../stores/InitialCryptoSetupStore";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -117,6 +118,7 @@ declare global {
         mxPerformanceEntryNames: any;
         mxUIStore: UIStore;
         mxSetupEncryptionStore?: SetupEncryptionStore;
+        mxInitialCryptoStore?: InitialCryptoSetupStore;
         mxRoomScrollStateStore?: RoomScrollStateStore;
         mxActiveWidgetStore?: ActiveWidgetStore;
         mxOnRecaptchaLoaded?: () => void;

src/CreateCrossSigning.ts

@@ -23,11 +23,11 @@ import InteractiveAuthDialog from "./components/views/dialogs/InteractiveAuthDia
 async function canUploadKeysWithPasswordOnly(cli: MatrixClient): Promise<boolean> {
     try {
         await cli.uploadDeviceSigningKeys(undefined, {} as CrossSigningKeys);
-        // We should never get here: the server should always require
-        // UI auth to upload device signing keys. If we do, we upload
-        // no keys which would be a no-op.
+        // If we get here, it's because the server is allowing us to upload keys without
+        // auth the first time due to MSC3967. Therefore, yes, we can upload keys
+        // (with or without password, technically, but that's fine).
         logger.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
-        return false;
+        return true;
     } catch (error) {
         if (!(error instanceof MatrixError) || !error.data || !error.data.flows) {
             logger.log("uploadDeviceSigningKeys advertised no flows!");

src/DeviceListener.ts

@@ -295,21 +295,29 @@ export default class DeviceListener {
             await crypto.getUserDeviceInfo([cli.getSafeUserId()]);
 
             // cross signing isn't enabled - nag to enable it
-            // There are 2 different toasts for:
+            // There are 3 different toasts for:
             if (!(await crypto.getCrossSigningKeyId()) && (await crypto.userHasCrossSigningKeys())) {
-                // Cross-signing on account but this device doesn't trust the master key (verify this session)
+                // Toast 1. Cross-signing on account but this device doesn't trust the master key (verify this session)
                 showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
                 this.checkKeyBackupStatus();
             } else {
-                // No cross-signing or key backup on account (set up encryption)
-                await cli.waitForClientWellKnown();
-                if (isSecureBackupRequired(cli) && isLoggedIn()) {
-                    // If we're meant to set up, and Secure Backup is required,
-                    // trigger the flow directly without a toast once logged in.
-                    hideSetupEncryptionToast();
-                    accessSecretStorage();
+                const backupInfo = await this.getKeyBackupInfo();
+                if (backupInfo) {
+                    // Toast 2: Key backup is enabled but recovery (4S) is not set up: prompt user to set up recovery.
+                    // Since we now enable key backup at registration time, this will be the common case for
+                    // new users.
+                    showSetupEncryptionToast(SetupKind.SET_UP_RECOVERY);
                 } else {
-                    showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
+                    // Toast 3: No cross-signing or key backup on account (set up encryption)
+                    await cli.waitForClientWellKnown();
+                    if (isSecureBackupRequired(cli) && isLoggedIn()) {
+                        // If we're meant to set up, and Secure Backup is required,
+                        // trigger the flow directly without a toast once logged in.
+                        hideSetupEncryptionToast();
+                        accessSecretStorage();
+                    } else {
+                        showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
+                    }
                 }
             }
         }

src/components/structures/MatrixChat.tsx

@@ -132,6 +132,7 @@ import { SessionLockStolenView } from "./auth/SessionLockStolenView";
 import { ConfirmSessionLockTheftView } from "./auth/ConfirmSessionLockTheftView";
 import { LoginSplashView } from "./auth/LoginSplashView";
 import { cleanUpDraftsIfRequired } from "../../DraftCleaner";
+import { InitialCryptoSetupStore } from "../../stores/InitialCryptoSetupStore";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -428,6 +429,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             !(await shouldSkipSetupEncryption(cli))
         ) {
             // if cross-signing is not yet set up, do so now if possible.
+            InitialCryptoSetupStore.sharedInstance().startInitialCryptoSetup(
+                cli,
+                Boolean(this.tokenLogin),
+                this.stores,
+                this.onCompleteSecurityE2eSetupFinished,
+            );
             this.setStateForNewView({ view: Views.E2E_SETUP });
         } else {
             this.onLoggedIn();
@@ -2073,14 +2080,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         } else if (this.state.view === Views.COMPLETE_SECURITY) {
             view = <CompleteSecurity onFinished={this.onCompleteSecurityE2eSetupFinished} />;
         } else if (this.state.view === Views.E2E_SETUP) {
-            view = (
-                <E2eSetup
-                    matrixClient={MatrixClientPeg.safeGet()}
-                    onFinished={this.onCompleteSecurityE2eSetupFinished}
-                    accountPassword={this.stores.accountPasswordStore.getPassword()}
-                    tokenLogin={!!this.tokenLogin}
-                />
-            );
+            view = <E2eSetup onFinished={this.onCompleteSecurityE2eSetupFinished} />;
         } else if (this.state.view === Views.LOGGED_IN) {
             // `ready` and `view==LOGGED_IN` may be set before `page_type` (because the
             // latter is set via the dispatcher). If we don't yet have a `page_type`,

src/components/structures/auth/E2eSetup.tsx

@@ -7,17 +7,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import AuthPage from "../../views/auth/AuthPage";
 import CompleteSecurityBody from "../../views/auth/CompleteSecurityBody";
 import { InitialCryptoSetupDialog } from "../../views/dialogs/security/InitialCryptoSetupDialog";
 
 interface IProps {
-    matrixClient: MatrixClient;
     onFinished: () => void;
-    accountPassword?: string;
-    tokenLogin: boolean;
 }
 
 export default class E2eSetup extends React.Component<IProps> {
@@ -25,12 +21,7 @@ export default class E2eSetup extends React.Component<IProps> {
         return (
             <AuthPage>
                 <CompleteSecurityBody>
-                    <InitialCryptoSetupDialog
-                        matrixClient={this.props.matrixClient}
-                        onFinished={this.props.onFinished}
-                        accountPassword={this.props.accountPassword}
-                        tokenLogin={this.props.tokenLogin}
-                    />
+                    <InitialCryptoSetupDialog onFinished={this.props.onFinished} />
                 </CompleteSecurityBody>
             </AuthPage>
         );

src/components/views/dialogs/LogoutDialog.tsx

@@ -38,6 +38,9 @@ enum BackupStatus {
     /** there is a backup on the server but we are not backing up to it */
     SERVER_BACKUP_BUT_DISABLED,
 
+    /** Key backup is set up but recovery (4s) is not */
+    BACKUP_NO_RECOVERY,
+
     /** backup is not set up locally and there is no backup on the server */
     NO_BACKUP,
 
@@ -104,7 +107,11 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
         }
 
         if ((await crypto.getActiveSessionBackupVersion()) !== null) {
-            this.setState({ backupStatus: BackupStatus.BACKUP_ACTIVE });
+            if (await crypto.isSecretStorageReady()) {
+                this.setState({ backupStatus: BackupStatus.BACKUP_ACTIVE });
+            } else {
+                this.setState({ backupStatus: BackupStatus.BACKUP_NO_RECOVERY });
+            }
             return;
         }
 
@@ -254,6 +261,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
             case BackupStatus.NO_BACKUP:
             case BackupStatus.SERVER_BACKUP_BUT_DISABLED:
             case BackupStatus.ERROR:
+            case BackupStatus.BACKUP_NO_RECOVERY:
                 return this.renderSetupBackupDialog();
         }
     }

src/components/views/dialogs/security/InitialCryptoSetupDialog.tsx

@@ -7,20 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback, useEffect, useState } from "react";
-import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import React, { useCallback } from "react";
 
 import { _t } from "../../../../languageHandler";
 import DialogButtons from "../../elements/DialogButtons";
 import BaseDialog from "../BaseDialog";
 import Spinner from "../../elements/Spinner";
-import { createCrossSigning } from "../../../../CreateCrossSigning";
+import { InitialCryptoSetupStore, useInitialCryptoSetupStatus } from "../../../../stores/InitialCryptoSetupStore";
 
 interface Props {
-    matrixClient: MatrixClient;
-    accountPassword?: string;
-    tokenLogin: boolean;
     onFinished: (success?: boolean) => void;
 }
 
@@ -29,54 +24,27 @@ interface Props {
  * In most cases, only a spinner is shown, but for more
  * complex auth like SSO, the user may need to complete some steps to proceed.
  */
-export const InitialCryptoSetupDialog: React.FC<Props> = ({
-    matrixClient,
-    accountPassword,
-    tokenLogin,
-    onFinished,
-}) => {
-    const [error, setError] = useState(false);
+export const InitialCryptoSetupDialog: React.FC<Props> = ({ onFinished }) => {
+    const onRetryClick = useCallback(() => {
+        InitialCryptoSetupStore.sharedInstance().retry();
+    }, []);
 
-    const doSetup = useCallback(async () => {
-        const cryptoApi = matrixClient.getCrypto();
-        if (!cryptoApi) return;
-
-        setError(false);
-
-        try {
-            await createCrossSigning(matrixClient, tokenLogin, accountPassword);
-
-            onFinished(true);
-        } catch (e) {
-            if (tokenLogin) {
-                // ignore any failures, we are relying on grace period here
-                onFinished(false);
-                return;
-            }
-
-            setError(true);
-            logger.error("Error bootstrapping cross-signing", e);
-        }
-    }, [matrixClient, tokenLogin, accountPassword, onFinished]);
-
-    const onCancel = useCallback(() => {
+    const onCancelClick = useCallback(() => {
         onFinished(false);
     }, [onFinished]);
 
-    useEffect(() => {
-        doSetup();
-    }, [doSetup]);
+    const status = useInitialCryptoSetupStatus(InitialCryptoSetupStore.sharedInstance());
 
     let content;
-    if (error) {
+    if (status === "error") {
         content = (
             <div>
                 <p>{_t("encryption|unable_to_setup_keys_error")}</p>
                 <div className="mx_Dialog_buttons">
                     <DialogButtons
                         primaryButton={_t("action|retry")}
-                        onPrimaryButtonClick={doSetup}
-                        onCancel={onCancel}
+                        onPrimaryButtonClick={onRetryClick}
+                        onCancel={onCancelClick}
                     />
                 </div>
             </div>

src/i18n/strings/en_EN.json

@@ -914,6 +914,9 @@
             "warning": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings."
         },
         "reset_all_button": "Forgotten or lost all recovery methods? <a>Reset all</a>",
+        "set_up_recovery": "Set up recovery",
+        "set_up_recovery_later": "Not now",
+        "set_up_recovery_toast_description": "Generate a recovery key that can be used to restore your encrypted message history in case you lose access to your devices.",
         "set_up_toast_description": "Safeguard against losing access to encrypted messages & data",
         "set_up_toast_title": "Set up Secure Backup",
         "setup_secure_backup": {

src/stores/InitialCryptoSetupStore.ts

@@ -0,0 +1,145 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import EventEmitter from "events";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import { useEffect, useState } from "react";
+
+import { createCrossSigning } from "../CreateCrossSigning";
+import { SdkContextClass } from "../contexts/SDKContext";
+
+type Status = "in_progress" | "complete" | "error" | undefined;
+
+export const useInitialCryptoSetupStatus = (store: InitialCryptoSetupStore): Status => {
+    const [status, setStatus] = useState<Status>(store.getStatus());
+
+    useEffect(() => {
+        const update = (): void => {
+            setStatus(store.getStatus());
+        };
+
+        store.on("update", update);
+
+        return () => {
+            store.off("update", update);
+        };
+    }, [store]);
+
+    return status;
+};
+
+/**
+ * Logic for setting up crypto state that's done immediately after
+ * a user registers. Should be transparent to the user, not requiring
+ * interaction in most cases.
+ * As distinct from SetupEncryptionStore which is for setting up
+ * 4S or verifying the device, will always require interaction
+ * from the user in some form.
+ */
+export class InitialCryptoSetupStore extends EventEmitter {
+    private status: Status = undefined;
+
+    private client?: MatrixClient;
+    private isTokenLogin?: boolean;
+    private stores?: SdkContextClass;
+    private onFinished?: (success: boolean) => void;
+
+    public static sharedInstance(): InitialCryptoSetupStore {
+        if (!window.mxInitialCryptoStore) window.mxInitialCryptoStore = new InitialCryptoSetupStore();
+        return window.mxInitialCryptoStore;
+    }
+
+    public getStatus(): Status {
+        return this.status;
+    }
+
+    /**
+     * Start the initial crypto setup process.
+     *
+     * @param {MatrixClient} client The client to use for the setup
+     * @param {boolean} isTokenLogin True if the user logged in via a token login, otherwise false
+     * @param {SdkContextClass} stores The stores to use for the setup
+     */
+    public startInitialCryptoSetup(
+        client: MatrixClient,
+        isTokenLogin: boolean,
+        stores: SdkContextClass,
+        onFinished: (success: boolean) => void,
+    ): void {
+        this.client = client;
+        this.isTokenLogin = isTokenLogin;
+        this.stores = stores;
+        this.onFinished = onFinished;
+
+        // We just start this process: it's progress is tracked by the events rather
+        // than returning a promise, so we don't bother.
+        this.doSetup().catch(() => logger.error("Initial crypto setup failed"));
+    }
+
+    /**
+     * Retry the initial crypto setup process.
+     *
+     * If no crypto setup is currently in process, this will return false.
+     *
+     * @returns {boolean} True if a retry was initiated, otherwise false
+     */
+    public retry(): boolean {
+        if (this.client === undefined || this.isTokenLogin === undefined || this.stores == undefined) return false;
+
+        this.doSetup().catch(() => logger.error("Initial crypto setup failed"));
+
+        return true;
+    }
+
+    private reset(): void {
+        this.client = undefined;
+        this.isTokenLogin = undefined;
+        this.stores = undefined;
+    }
+
+    private async doSetup(): Promise<void> {
+        if (this.client === undefined || this.isTokenLogin === undefined || this.stores == undefined) {
+            throw new Error("No setup is in progress");
+        }
+
+        const cryptoApi = this.client.getCrypto();
+        if (!cryptoApi) throw new Error("No crypto module found!");
+
+        this.status = "in_progress";
+        this.emit("update");
+
+        try {
+            await createCrossSigning(this.client, this.isTokenLogin, this.stores.accountPasswordStore.getPassword());
+
+            const backupInfo = await cryptoApi.getKeyBackupInfo();
+            if (backupInfo === null) {
+                await cryptoApi.resetKeyBackup();
+            }
+
+            this.reset();
+
+            this.status = "complete";
+            this.emit("update");
+            this.onFinished?.(true);
+        } catch (e) {
+            if (this.isTokenLogin) {
+                // ignore any failures, we are relying on grace period here
+                this.reset();
+
+                this.status = "complete";
+                this.emit("update");
+                this.onFinished?.(true);
+
+                return;
+            }
+            logger.error("Error bootstrapping cross-signing", e);
+            this.status = "error";
+            this.emit("update");
+        }
+    }
+}

src/stores/SetupEncryptionStore.ts

@@ -33,6 +33,11 @@ export enum Phase {
     ConfirmReset = 6,
 }
 
+/**
+ * Logic for setting up 4S and/or verifying the user's device: a process requiring
+ * ongoing interaction with the user, as distinct from InitialCryptoSetupStore which
+ * a (usually) non-interactive process that happens immediately after registration.
+ */
 export class SetupEncryptionStore extends EventEmitter {
     private started?: boolean;
     public phase?: Phase;

src/toasts/SetupEncryptionToast.ts

@@ -23,15 +23,19 @@ const getTitle = (kind: Kind): string => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
             return _t("encryption|set_up_toast_title");
+        case Kind.SET_UP_RECOVERY:
+            return _t("encryption|set_up_recovery");
         case Kind.VERIFY_THIS_SESSION:
             return _t("encryption|verify_toast_title");
     }
 };
 
-const getIcon = (kind: Kind): string => {
+const getIcon = (kind: Kind): string | undefined => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
             return "secure_backup";
+        case Kind.SET_UP_RECOVERY:
+            return undefined;
         case Kind.VERIFY_THIS_SESSION:
             return "verification_warning";
     }
@@ -41,15 +45,29 @@ const getSetupCaption = (kind: Kind): string => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
             return _t("action|continue");
+        case Kind.SET_UP_RECOVERY:
+            return _t("action|continue");
         case Kind.VERIFY_THIS_SESSION:
             return _t("action|verify");
     }
 };
 
+const getSecondaryButtonLabel = (kind: Kind): string => {
+    switch (kind) {
+        case Kind.SET_UP_RECOVERY:
+            return _t("encryption|set_up_recovery_later");
+        case Kind.SET_UP_ENCRYPTION:
+        case Kind.VERIFY_THIS_SESSION:
+            return _t("encryption|verification|unverified_sessions_toast_reject");
+    }
+};
+
 const getDescription = (kind: Kind): string => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
             return _t("encryption|set_up_toast_description");
+        case Kind.SET_UP_RECOVERY:
+            return _t("encryption|set_up_recovery_toast_description");
         case Kind.VERIFY_THIS_SESSION:
             return _t("encryption|verify_toast_description");
     }
@@ -57,6 +75,7 @@ const getDescription = (kind: Kind): string => {
 
 export enum Kind {
     SET_UP_ENCRYPTION = "set_up_encryption",
+    SET_UP_RECOVERY = "set_up_recovery",
     VERIFY_THIS_SESSION = "verify_this_session",
 }
 
@@ -101,9 +120,8 @@ export const showToast = (kind: Kind): void => {
             description: getDescription(kind),
             primaryLabel: getSetupCaption(kind),
             onPrimaryClick: onAccept,
-            secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
+            secondaryLabel: getSecondaryButtonLabel(kind),
             onSecondaryClick: onReject,
-            destructive: "secondary",
         },
         component: GenericToast,
         priority: kind === Kind.VERIFY_THIS_SESSION ? 95 : 40,

test/components/views/dialogs/security/InitialCryptoSetupDialog-test.tsx

@@ -7,31 +7,22 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen, waitFor } from "jest-matrix-react";
-import { mocked } from "jest-mock";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { render, screen } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
 
-import { createCrossSigning } from "../../../../../src/CreateCrossSigning";
 import { InitialCryptoSetupDialog } from "../../../../../src/components/views/dialogs/security/InitialCryptoSetupDialog";
-import { createTestClient } from "../../../../test-utils";
-
-jest.mock("../../../../../src/CreateCrossSigning", () => ({
-    createCrossSigning: jest.fn(),
-}));
+import { InitialCryptoSetupStore } from "../../../../../src/stores/InitialCryptoSetupStore";
 
 describe("InitialCryptoSetupDialog", () => {
-    let client: MatrixClient;
-    let createCrossSigningResolve: () => void;
-    let createCrossSigningReject: (e: Error) => void;
+    const storeMock = {
+        getStatus: jest.fn(),
+        retry: jest.fn(),
+        on: jest.fn(),
+        off: jest.fn(),
+    };
 
     beforeEach(() => {
-        client = createTestClient();
-        mocked(createCrossSigning).mockImplementation(() => {
-            return new Promise((resolve, reject) => {
-                createCrossSigningResolve = resolve;
-                createCrossSigningReject = reject;
-            });
-        });
+        jest.spyOn(InitialCryptoSetupStore, "sharedInstance").mockReturnValue(storeMock as any);
     });
 
     afterEach(() => {
@@ -39,93 +30,32 @@ describe("InitialCryptoSetupDialog", () => {
         jest.restoreAllMocks();
     });
 
-    it("should call createCrossSigning and show a spinner while it runs", async () => {
+    it("should show a spinner while the setup is in progress", async () => {
         const onFinished = jest.fn();
 
-        render(
-            <InitialCryptoSetupDialog
-                matrixClient={client}
-                accountPassword="hunter2"
-                tokenLogin={false}
-                onFinished={onFinished}
-            />,
-        );
+        storeMock.getStatus.mockReturnValue("in_progress");
+
+        render(<InitialCryptoSetupDialog onFinished={onFinished} />);
 
-        expect(createCrossSigning).toHaveBeenCalledWith(client, false, "hunter2");
         expect(screen.getByTestId("spinner")).toBeInTheDocument();
-
-        createCrossSigningResolve!();
-
-        await waitFor(() => expect(onFinished).toHaveBeenCalledWith(true));
     });
 
-    it("should display an error if createCrossSigning fails", async () => {
-        render(
-            <InitialCryptoSetupDialog
-                matrixClient={client}
-                accountPassword="hunter2"
-                tokenLogin={false}
-                onFinished={jest.fn()}
-            />,
-        );
+    it("should display an error if setup has failed", async () => {
+        storeMock.getStatus.mockReturnValue("error");
 
-        createCrossSigningReject!(new Error("generic error message"));
+        render(<InitialCryptoSetupDialog onFinished={jest.fn()} />);
 
         await expect(await screen.findByRole("button", { name: "Retry" })).toBeInTheDocument();
     });
 
-    it("ignores failures when tokenLogin is true", async () => {
+    it("calls retry when retry button pressed", async () => {
         const onFinished = jest.fn();
+        storeMock.getStatus.mockReturnValue("error");
 
-        render(
-            <InitialCryptoSetupDialog
-                matrixClient={client}
-                accountPassword="hunter2"
-                tokenLogin={true}
-                onFinished={onFinished}
-            />,
-        );
+        render(<InitialCryptoSetupDialog onFinished={onFinished} />);
 
-        createCrossSigningReject!(new Error("generic error message"));
+        await userEvent.click(await screen.findByRole("button", { name: "Retry" }));
 
-        await waitFor(() => expect(onFinished).toHaveBeenCalledWith(false));
-    });
-
-    it("cancels the dialog when the cancel button is clicked", async () => {
-        const onFinished = jest.fn();
-
-        render(
-            <InitialCryptoSetupDialog
-                matrixClient={client}
-                accountPassword="hunter2"
-                tokenLogin={false}
-                onFinished={onFinished}
-            />,
-        );
-
-        createCrossSigningReject!(new Error("generic error message"));
-
-        const cancelButton = await screen.findByRole("button", { name: "Cancel" });
-        cancelButton.click();
-
-        expect(onFinished).toHaveBeenCalledWith(false);
-    });
-
-    it("should retry when the retry button is clicked", async () => {
-        render(
-            <InitialCryptoSetupDialog
-                matrixClient={client}
-                accountPassword="hunter2"
-                tokenLogin={false}
-                onFinished={jest.fn()}
-            />,
-        );
-
-        createCrossSigningReject!(new Error("generic error message"));
-
-        const retryButton = await screen.findByRole("button", { name: "Retry" });
-        retryButton.click();
-
-        expect(createCrossSigning).toHaveBeenCalledTimes(2);
+        expect(storeMock.retry).toHaveBeenCalled();
     });
 });

test/unit-tests/DeviceListener-test.ts

@@ -352,13 +352,13 @@ describe("DeviceListener", () => {
                     mockCrypto!.getCrossSigningKeyId.mockResolvedValue("abc");
                 });
 
-                it("shows set up encryption toast when user has a key backup available", async () => {
+                it("shows set up recovery toast when user has a key backup available", async () => {
                     // non falsy response
                     mockCrypto.getKeyBackupInfo.mockResolvedValue({} as unknown as KeyBackupInfo);
                     await createAndStart();
 
                     expect(SetupEncryptionToast.showToast).toHaveBeenCalledWith(
-                        SetupEncryptionToast.Kind.SET_UP_ENCRYPTION,
+                        SetupEncryptionToast.Kind.SET_UP_RECOVERY,
                     );
                 });
             });

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -1003,7 +1003,9 @@ describe("<MatrixChat />", () => {
                     userHasCrossSigningKeys: jest.fn().mockResolvedValue(false),
                     // This needs to not finish immediately because we need to test the screen appears
                     bootstrapCrossSigning: jest.fn().mockImplementation(() => bootstrapDeferred.promise),
+                    resetKeyBackup: jest.fn(),
                     isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
+                    getKeyBackupInfo: jest.fn().mockResolvedValue(null),
                 };
                 loginClient.getCrypto.mockReturnValue(mockCrypto as any);
             });

test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx

@@ -42,12 +42,20 @@ describe("LogoutDialog", () => {
         expect(rendered.container).toMatchSnapshot();
     });
 
-    it("shows a regular dialog if backups are working", async () => {
+    it("shows a regular dialog if backups and recovery are working", async () => {
         mockCrypto.getActiveSessionBackupVersion.mockResolvedValue("1");
+        mockCrypto.isSecretStorageReady.mockResolvedValue(true);
         const rendered = renderComponent();
         await rendered.findByText("Are you sure you want to sign out?");
     });
 
+    it("prompts user to set up recovery if backups are enabled but recovery isn't", async () => {
+        mockCrypto.getActiveSessionBackupVersion.mockResolvedValue("1");
+        mockCrypto.isSecretStorageReady.mockResolvedValue(false);
+        const rendered = renderComponent();
+        await rendered.findByText("You'll lose access to your encrypted messages");
+    });
+
     it("Prompts user to connect backup if there is a backup on the server", async () => {
         mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
         const rendered = renderComponent();

test/unit-tests/stores/InitialCryptoSetupStore-test.ts

@@ -0,0 +1,85 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { mocked } from "jest-mock";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { waitFor } from "jest-matrix-react";
+
+import { createCrossSigning } from "../../../src/CreateCrossSigning";
+import { InitialCryptoSetupStore } from "../../../src/stores/InitialCryptoSetupStore";
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { createTestClient } from "../../test-utils";
+import { AccountPasswordStore } from "../../../src/stores/AccountPasswordStore";
+
+jest.mock("../../../src/CreateCrossSigning", () => ({
+    createCrossSigning: jest.fn(),
+}));
+
+describe("InitialCryptoSetupStore", () => {
+    let testStore: InitialCryptoSetupStore;
+    let client: MatrixClient;
+    let stores: SdkContextClass;
+
+    let createCrossSigningResolve: () => void;
+    let createCrossSigningReject: (e: Error) => void;
+
+    beforeEach(() => {
+        testStore = new InitialCryptoSetupStore();
+        client = createTestClient();
+        stores = {
+            accountPasswordStore: {
+                getPassword: jest.fn(),
+            } as unknown as AccountPasswordStore,
+        } as unknown as SdkContextClass;
+
+        mocked(createCrossSigning).mockImplementation(() => {
+            return new Promise<void>((resolve, reject) => {
+                createCrossSigningResolve = resolve;
+                createCrossSigningReject = reject;
+            });
+        });
+    });
+
+    it("should call createCrossSigning when startInitialCryptoSetup is called", async () => {
+        testStore.startInitialCryptoSetup(client, false, stores, jest.fn());
+
+        await waitFor(() => expect(createCrossSigning).toHaveBeenCalled());
+    });
+
+    it("emits an update event when createCrossSigning resolves", async () => {
+        const updateSpy = jest.fn();
+        testStore.on("update", updateSpy);
+
+        testStore.startInitialCryptoSetup(client, false, stores, jest.fn());
+        createCrossSigningResolve();
+
+        await waitFor(() => expect(updateSpy).toHaveBeenCalled());
+        expect(testStore.getStatus()).toBe("complete");
+    });
+
+    it("emits an update event when createCrossSigning rejects", async () => {
+        const updateSpy = jest.fn();
+        testStore.on("update", updateSpy);
+
+        testStore.startInitialCryptoSetup(client, false, stores, jest.fn());
+        createCrossSigningReject(new Error("Test error"));
+
+        await waitFor(() => expect(updateSpy).toHaveBeenCalled());
+        expect(testStore.getStatus()).toBe("error");
+    });
+
+    it("should ignore failures if tokenLogin is true", async () => {
+        const updateSpy = jest.fn();
+        testStore.on("update", updateSpy);
+
+        testStore.startInitialCryptoSetup(client, true, stores, jest.fn());
+        createCrossSigningReject(new Error("Test error"));
+
+        await waitFor(() => expect(updateSpy).toHaveBeenCalled());
+        expect(testStore.getStatus()).toBe("complete");
+    });
+});

test/unit-tests/toasts/SetupEncryptionToast-test.tsx

@@ -0,0 +1,24 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render, screen } from "jest-matrix-react";
+
+import ToastContainer from "../../../src/components/structures/ToastContainer";
+import { Kind, showToast } from "../../../src/toasts/SetupEncryptionToast";
+
+describe("SetupEncryptionToast", () => {
+    beforeEach(() => {
+        render(<ToastContainer />);
+    });
+
+    it("should render the se up recovery toast", async () => {
+        showToast(Kind.SET_UP_RECOVERY);
+
+        await expect(screen.findByText("Set up recovery")).resolves.toBeInTheDocument();
+    });
+});