Encryption tab: hide Advanced section when the key storage is out of sync (#29129)

* fix(encryption tab): hide the advanced section when the secrets are not cached locally

The secret verification is now made at the level of `EncryptionUserSettingsTab` instead at the `RecoveryPanel` level. In the `EncryptionUserSettingsTab`, we decide to only display `RecoveryPanelOutOfSync` in case of uncached secrets.

`RecoveryPanelOutOfSync` is simplified version of `RecoveryPanel` handling only the `secrets_not_cached` case.

* refactor(encryption tab): simplify the `RecoveryPanel` without having to handle the missing secrets

* test(encryption tab): move test about cached secrets in `EncryptionUserSettingsTab-test.tsx`

* test(encryption tab): move e2e test which are testing all the encryption tab in `encryption-tab.spec.ts

* refactor(encryption tab): move `RecoveryPanelOutOfSync` in its own file

- fix typos
- call onFinish after accessSecretStorage
- onFinish doesn't need to be asynchronous

* doc(encryption tab): improve documentation when the secrets are not cached locally

* test(encryption tab): improve test documentation and naming

* doc(encryption tab): improve `RecoveryPanelOutOfSync` documentation

playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
+
+import { test, expect } from ".";
+import {
+    checkDeviceIsConnectedKeyBackup,
+    checkDeviceIsCrossSigned,
+    createBot,
+    deleteCachedSecrets,
+    verifySession,
+} from "../../crypto/utils";
+
+test.describe("Encryption tab", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    let recoveryKey: GeneratedSecretStorageKey;
+    let expectedBackupVersion: string;
+
+    test.beforeEach(async ({ page, homeserver, credentials }) => {
+        // The bot bootstraps cross-signing, creates a key backup and sets up a recovery key
+        const res = await createBot(page, homeserver, credentials);
+        recoveryKey = res.recoveryKey;
+        expectedBackupVersion = res.expectedBackupVersion;
+    });
+
+    test(
+        "should show a 'Verify this device' button if the device is unverified",
+        { tag: "@screenshot" },
+        async ({ page, app, util }) => {
+            const dialog = await util.openEncryptionTab();
+            const content = util.getEncryptionTabContent();
+
+            // The user's device is in an unverified state, therefore the only option available to them here is to verify it
+            const verifyButton = dialog.getByRole("button", { name: "Verify this device" });
+            await expect(verifyButton).toBeVisible();
+            await expect(content).toMatchScreenshot("verify-device-encryption-tab.png");
+            await verifyButton.click();
+
+            await util.verifyDevice(recoveryKey);
+
+            await expect(content).toMatchScreenshot("default-tab.png", {
+                mask: [content.getByTestId("deviceId"), content.getByTestId("sessionKey")],
+            });
+
+            // Check that our device is now cross-signed
+            await checkDeviceIsCrossSigned(app);
+
+            // Check that the current device is connected to key backup
+            // The backup decryption key should be in cache also, as we got it directly from the 4S
+            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+        },
+    );
+
+    // Test what happens if the cross-signing secrets are in secret storage but are not cached in the local DB.
+    //
+    // This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
+    // We simulate this case by deleting the cached secrets in the indexedDB.
+    test(
+        "should prompt to enter the recovery key when the secrets are not cached locally",
+        { tag: "@screenshot" },
+        async ({ page, app, util }) => {
+            await verifySession(app, "new passphrase");
+            // We need to delete the cached secrets
+            await deleteCachedSecrets(page);
+
+            await util.openEncryptionTab();
+            // We ask the user to enter the recovery key
+            const dialog = util.getEncryptionTabContent();
+            const enterKeyButton = dialog.getByRole("button", { name: "Enter recovery key" });
+            await expect(enterKeyButton).toBeVisible();
+            await expect(dialog).toMatchScreenshot("out-of-sync-recovery.png");
+            await enterKeyButton.click();
+
+            // Fill the recovery key
+            await util.enterRecoveryKey(recoveryKey);
+            await expect(dialog).toMatchScreenshot("default-tab.png", {
+                mask: [dialog.getByTestId("deviceId"), dialog.getByTestId("sessionKey")],
+            });
+
+            // Check that our device is now cross-signed
+            await checkDeviceIsCrossSigned(app);
+
+            // Check that the current device is connected to key backup
+            // The backup decryption key should be in cache also, as we got it directly from the 4S
+            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+        },
+    );
+});

playwright/e2e/settings/encryption-user-tab/recovery.spec.ts

@@ -5,53 +5,17 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
-
 import { test, expect } from ".";
-import {
-    checkDeviceIsConnectedKeyBackup,
-    checkDeviceIsCrossSigned,
-    createBot,
-    deleteCachedSecrets,
-    verifySession,
-} from "../../crypto/utils";
+import { checkDeviceIsConnectedKeyBackup, createBot, verifySession } from "../../crypto/utils";
 
 test.describe("Recovery section in Encryption tab", () => {
     test.use({
         displayName: "Alice",
     });
 
-    let recoveryKey: GeneratedSecretStorageKey;
-    let expectedBackupVersion: string;
-
     test.beforeEach(async ({ page, homeserver, credentials }) => {
-        const res = await createBot(page, homeserver, credentials);
-        recoveryKey = res.recoveryKey;
-        expectedBackupVersion = res.expectedBackupVersion;
-    });
-
-    test("should verify the device", { tag: "@screenshot" }, async ({ page, app, util }) => {
-        const dialog = await util.openEncryptionTab();
-        const content = util.getEncryptionTabContent();
-
-        // The user's device is in an unverified state, therefore the only option available to them here is to verify it
-        const verifyButton = dialog.getByRole("button", { name: "Verify this device" });
-        await expect(verifyButton).toBeVisible();
-        await expect(content).toMatchScreenshot("verify-device-encryption-tab.png");
-        await verifyButton.click();
-
-        await util.verifyDevice(recoveryKey);
-
-        await expect(content).toMatchScreenshot("default-tab.png", {
-            mask: [content.getByTestId("deviceId"), content.getByTestId("sessionKey")],
-        });
-
-        // Check that our device is now cross-signed
-        await checkDeviceIsCrossSigned(app);
-
-        // Check that the current device is connected to key backup
-        // The backup decryption key should be in cache also, as we got it directly from the 4S
-        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+        // The bot bootstraps cross-signing, creates a key backup and sets up a recovery key
+        await createBot(page, homeserver, credentials);
     });
 
     test(
@@ -121,37 +85,4 @@ test.describe("Recovery section in Encryption tab", () => {
         // Check that the current device is connected to key backup and the backup version is the expected one
         await checkDeviceIsConnectedKeyBackup(app, "1", true);
     });
-
-    // Test what happens if the cross-signing secrets are in secret storage but are not cached in the local DB.
-    //
-    // This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
-    // We simulate this case by deleting the cached secrets in the indexedDB.
-    test(
-        "should enter the recovery key when the secrets are not cached",
-        { tag: "@screenshot" },
-        async ({ page, app, util }) => {
-            await verifySession(app, "new passphrase");
-            // We need to delete the cached secrets
-            await deleteCachedSecrets(page);
-
-            await util.openEncryptionTab();
-            // We ask the user to enter the recovery key
-            const dialog = util.getEncryptionTabContent();
-            const enterKeyButton = dialog.getByRole("button", { name: "Enter recovery key" });
-            await expect(enterKeyButton).toBeVisible();
-            await expect(util.getEncryptionRecoverySection()).toMatchScreenshot("out-of-sync-recovery.png");
-            await enterKeyButton.click();
-
-            // Fill the recovery key
-            await util.enterRecoveryKey(recoveryKey);
-            await expect(util.getEncryptionRecoverySection()).toMatchScreenshot("default-recovery.png");
-
-            // Check that our device is now cross-signed
-            await checkDeviceIsCrossSigned(app);
-
-            // Check that the current device is connected to key backup
-            // The backup decryption key should be in cache also, as we got it directly from the 4S
-            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
-        },
-    );
 });

src/components/views/settings/encryption/RecoveryPanel.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { JSX, useCallback, useEffect, useState } from "react";
+import React, { JSX } from "react";
 import { Button, InlineSpinner } from "@vector-im/compound-web";
 import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
 
@@ -13,18 +13,15 @@ import { SettingsSection } from "../shared/SettingsSection";
 import { _t } from "../../../../languageHandler";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { SettingsHeader } from "../SettingsHeader";
-import { accessSecretStorage } from "../../../../SecurityManager";
-import { SettingsSubheader } from "../SettingsSubheader";
+import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 
 /**
  * The possible states of the recovery panel.
  * - `loading`: We are checking the recovery key and the secrets.
  * - `missing_recovery_key`: The user has no recovery key.
- * - `secrets_not_cached`: The user has a recovery key but the secrets are not cached.
- *                         This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
  * - `good`: The user has a recovery key and the secrets are cached.
  */
-type State = "loading" | "missing_recovery_key" | "secrets_not_cached" | "good";
+type State = "loading" | "missing_recovery_key" | "good";
 
 interface RecoveryPanelProps {
     /**
@@ -40,29 +37,18 @@ interface RecoveryPanelProps {
  * This component allows the user to set up or change their recovery key.
  */
 export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
-    const [state, setState] = useState<State>("loading");
-    const isMissingRecoveryKey = state === "missing_recovery_key";
-
     const matrixClient = useMatrixClientContext();
-
-    const checkEncryption = useCallback(async () => {
-        const crypto = matrixClient.getCrypto()!;
-
-        // Check if the user has a recovery key
-        const hasRecoveryKey = Boolean(await matrixClient.secretStorage.getDefaultKeyId());
-        if (!hasRecoveryKey) return setState("missing_recovery_key");
-
-        // Check if the secrets are cached
-        const cachedSecrets = (await crypto.getCrossSigningStatus()).privateKeysCachedLocally;
-        const secretsOk = cachedSecrets.masterKey && cachedSecrets.selfSigningKey && cachedSecrets.userSigningKey;
-        if (!secretsOk) return setState("secrets_not_cached");
-
-        setState("good");
-    }, [matrixClient]);
-
-    useEffect(() => {
-        checkEncryption();
-    }, [checkEncryption]);
+    const state = useAsyncMemo<State>(
+        async () => {
+            // Check if the user has a recovery key
+            const hasRecoveryKey = Boolean(await matrixClient.secretStorage.getDefaultKeyId());
+            if (hasRecoveryKey) return "good";
+            else return "missing_recovery_key";
+        },
+        [matrixClient],
+        "loading",
+    );
+    const isMissingRecoveryKey = state === "missing_recovery_key";
 
     let content: JSX.Element;
     switch (state) {
@@ -76,18 +62,6 @@ export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps):
                 </Button>
             );
             break;
-        case "secrets_not_cached":
-            content = (
-                <Button
-                    size="sm"
-                    kind="primary"
-                    Icon={KeyIcon}
-                    onClick={async () => await accessSecretStorage(checkEncryption)}
-                >
-                    {_t("settings|encryption|recovery|enter_recovery_key")}
-                </Button>
-            );
-            break;
         case "good":
             content = (
                 <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
@@ -105,33 +79,10 @@ export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps):
                     label={_t("settings|encryption|recovery|title")}
                 />
             }
-            subHeading={<Subheader state={state} />}
+            subHeading={_t("settings|encryption|recovery|description")}
             data-testid="recoveryPanel"
         >
             {content}
         </SettingsSection>
     );
 }
-
-interface SubheaderProps {
-    /**
-     * The state of the recovery panel.
-     */
-    state: State;
-}
-
-/**
- * The subheader for the recovery panel.
- */
-function Subheader({ state }: SubheaderProps): JSX.Element {
-    // If the secrets are not cached, we display a warning message.
-    if (state !== "secrets_not_cached") return <>{_t("settings|encryption|recovery|description")}</>;
-
-    return (
-        <SettingsSubheader
-            label={_t("settings|encryption|recovery|description")}
-            state="error"
-            stateMessage={_t("settings|encryption|recovery|key_storage_warning")}
-        />
-    );
-}

src/components/views/settings/encryption/RecoveryPanelOutOfSync.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { JSX } from "react";
+import { Button } from "@vector-im/compound-web";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
+
+import { SettingsSection } from "../shared/SettingsSection";
+import { _t } from "../../../../languageHandler";
+import { SettingsSubheader } from "../SettingsSubheader";
+import { accessSecretStorage } from "../../../../SecurityManager";
+
+interface RecoveryPanelOutOfSyncProps {
+    /**
+     * Callback for when the user has finished entering their recovery key.
+     */
+    onFinish: () => void;
+}
+
+/**
+ * This component is shown as part of the {@link EncryptionUserSettingsTab}, instead of the
+ * {@link RecoveryPanel}, when some of the user secrets are not cached in the local client.
+ *
+ * It prompts the user to enter their recovery key so that the secrets can be loaded from 4S into
+ * the client.
+ */
+export function RecoveryPanelOutOfSync({ onFinish }: RecoveryPanelOutOfSyncProps): JSX.Element {
+    return (
+        <SettingsSection
+            legacy={false}
+            heading={_t("settings|encryption|recovery|title")}
+            subHeading={
+                <SettingsSubheader
+                    label={_t("settings|encryption|recovery|description")}
+                    state="error"
+                    stateMessage={_t("settings|encryption|recovery|key_storage_warning")}
+                />
+            }
+            data-testid="recoveryPanel"
+        >
+            <Button
+                size="sm"
+                kind="primary"
+                Icon={KeyIcon}
+                onClick={async () => {
+                    await accessSecretStorage();
+                    onFinish();
+                }}
+            >
+                {_t("settings|encryption|recovery|enter_recovery_key")}
+            </Button>
+        </SettingsSection>
+    );
+}

src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -20,6 +20,7 @@ import { SettingsSection } from "../../shared/SettingsSection";
 import { SettingsSubheader } from "../../SettingsSubheader";
 import { AdvancedPanel } from "../../encryption/AdvancedPanel";
 import { ResetIdentityPanel } from "../../encryption/ResetIdentityPanel";
+import { RecoveryPanelOutOfSync } from "../../encryption/RecoveryPanelOutOfSync";
 
 /**
  * The state in the encryption settings tab.
@@ -32,12 +33,22 @@ import { ResetIdentityPanel } from "../../encryption/ResetIdentityPanel";
  *  - "set_recovery_key": The panel to show when the user is setting up their recovery key.
  *                        This happens when the user doesn't have a key a recovery key and the user clicks on "Set up recovery key" button of the RecoveryPanel.
  *  - "reset_identity": The panel to show when the user is resetting their identity.
+ *  - `secrets_not_cached`: The secrets are not cached locally. This can happen if we verified another device and secret-gossiping failed, or the other device itself lacked the secrets.
+ *                          If the "set_up_encryption" and "secrets_not_cached" conditions are both filled, "set_up_encryption" prevails.
+ *
  */
-type State = "loading" | "main" | "set_up_encryption" | "change_recovery_key" | "set_recovery_key" | "reset_identity";
+type State =
+    | "loading"
+    | "main"
+    | "set_up_encryption"
+    | "change_recovery_key"
+    | "set_recovery_key"
+    | "reset_identity"
+    | "secrets_not_cached";
 
 export function EncryptionUserSettingsTab(): JSX.Element {
     const [state, setState] = useState<State>("loading");
-    const setUpEncryptionRequired = useSetUpEncryptionRequired(setState);
+    const checkEncryptionState = useCheckEncryptionState(setState);
 
     let content: JSX.Element;
     switch (state) {
@@ -45,7 +56,10 @@ export function EncryptionUserSettingsTab(): JSX.Element {
             content = <InlineSpinner aria-label={_t("common|loading")} />;
             break;
         case "set_up_encryption":
-            content = <SetUpEncryptionPanel onFinish={setUpEncryptionRequired} />;
+            content = <SetUpEncryptionPanel onFinish={checkEncryptionState} />;
+            break;
+        case "secrets_not_cached":
+            content = <RecoveryPanelOutOfSync onFinish={checkEncryptionState} />;
             break;
         case "main":
             content = (
@@ -83,8 +97,12 @@ export function EncryptionUserSettingsTab(): JSX.Element {
 }
 
 /**
- * Hook to check if the user needs to go through the SetupEncryption flow.
+ * Hook to check if the user needs:
+ * - to go through the SetupEncryption flow.
+ * - to enter their recovery key, if the secrets are not cached locally.
+ *
  * If the user needs to set up the encryption, the state will be set to "set_up_encryption".
+ * If the user secrets are not cached, the state will be set to "secrets_not_cached".
  * Otherwise, the state will be set to "main".
  *
  * The state is set once when the component is first mounted.
@@ -93,23 +111,29 @@ export function EncryptionUserSettingsTab(): JSX.Element {
  * @param setState - callback passed from the EncryptionUserSettingsTab to set the current `State`.
  * @returns a callback function, which will re-run the logic and update the state.
  */
-function useSetUpEncryptionRequired(setState: (state: State) => void): () => Promise<void> {
+function useCheckEncryptionState(setState: (state: State) => void): () => Promise<void> {
     const matrixClient = useMatrixClientContext();
 
-    const setUpEncryptionRequired = useCallback(async () => {
+    const checkEncryptionState = useCallback(async () => {
         const crypto = matrixClient.getCrypto()!;
         const isCrossSigningReady = await crypto.isCrossSigningReady();
-        if (isCrossSigningReady) setState("main");
-        else setState("set_up_encryption");
+
+        // Check if the secrets are cached
+        const cachedSecrets = (await crypto.getCrossSigningStatus()).privateKeysCachedLocally;
+        const secretsOk = cachedSecrets.masterKey && cachedSecrets.selfSigningKey && cachedSecrets.userSigningKey;
+
+        if (isCrossSigningReady && secretsOk) setState("main");
+        else if (!isCrossSigningReady) setState("set_up_encryption");
+        else setState("secrets_not_cached");
     }, [matrixClient, setState]);
 
     // Initialise the state when the component is mounted
     useEffect(() => {
-        setUpEncryptionRequired();
-    }, [setUpEncryptionRequired]);
+        checkEncryptionState();
+    }, [checkEncryptionState]);
 
     // Also return the callback so that the component can re-run the logic.
-    return setUpEncryptionRequired;
+    return checkEncryptionState;
 }
 
 interface SetUpEncryptionPanelProps {

test/unit-tests/components/views/settings/encryption/RecoveryPanel-test.tsx

@@ -10,22 +10,15 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { render, screen } from "jest-matrix-react";
 import { waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import { mocked } from "jest-mock";
 
 import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
 import { RecoveryPanel } from "../../../../../../src/components/views/settings/encryption/RecoveryPanel";
-import { accessSecretStorage } from "../../../../../../src/SecurityManager";
-
-jest.mock("../../../../../../src/SecurityManager", () => ({
-    accessSecretStorage: jest.fn(),
-}));
 
 describe("<RecoveryPanel />", () => {
     let matrixClient: MatrixClient;
 
     beforeEach(() => {
         matrixClient = createTestClient();
-        mocked(accessSecretStorage).mockClear().mockResolvedValue();
     });
 
     function renderRecoverPanel(onChangeRecoveryKeyClick = jest.fn()) {
@@ -56,18 +49,6 @@ describe("<RecoveryPanel />", () => {
         expect(onChangeRecoveryKeyClick).toHaveBeenCalledWith(true);
     });
 
-    it("should ask to enter the recovery key when secrets are not cached", async () => {
-        jest.spyOn(matrixClient.secretStorage, "getDefaultKeyId").mockResolvedValue("default key");
-        const user = userEvent.setup();
-        const { asFragment } = renderRecoverPanel();
-
-        await waitFor(() => screen.getByRole("button", { name: "Enter recovery key" }));
-        expect(asFragment()).toMatchSnapshot();
-
-        await user.click(screen.getByRole("button", { name: "Enter recovery key" }));
-        expect(accessSecretStorage).toHaveBeenCalled();
-    });
-
     it("should allow to change the recovery key when everything is good", async () => {
         jest.spyOn(matrixClient.secretStorage, "getDefaultKeyId").mockResolvedValue("default key");
         jest.spyOn(matrixClient.getCrypto()!, "getCrossSigningStatus").mockResolvedValue({

test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap

@@ -41,67 +41,6 @@ exports[`<RecoveryPanel /> should allow to change the recovery key when everythi
 </DocumentFragment>
 `;
 
-exports[`<RecoveryPanel /> should ask to enter the recovery key when secrets are not cached 1`] = `
-<DocumentFragment>
-  <div
-    class="mx_SettingsSection mx_SettingsSection_newUi"
-    data-testid="recoveryPanel"
-  >
-    <div
-      class="mx_SettingsSection_header"
-    >
-      <h2
-        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 mx_SettingsHeader"
-      >
-        Recovery 
-      </h2>
-      <div
-        class="mx_SettingsSubheader"
-      >
-        Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
-        <span
-          class="mx_SettingsSubheader_error"
-        >
-          <svg
-            fill="currentColor"
-            height="20px"
-            viewBox="0 0 24 24"
-            width="20px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-            />
-          </svg>
-          Your key storage is out of sync. Click the button below to fix the problem.
-        </span>
-      </div>
-    </div>
-    <button
-      class="_button_i91xf_17 _has-icon_i91xf_66"
-      data-kind="primary"
-      data-size="sm"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="20"
-        viewBox="0 0 24 24"
-        width="20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
-        />
-      </svg>
-      Enter recovery key
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`<RecoveryPanel /> should ask to set up a recovery key when there is no recovery key 1`] = `
 <DocumentFragment>
   <div

test/unit-tests/components/views/settings/tabs/user/EncryptionUserSettingsTab-test.tsx

@@ -10,10 +10,16 @@ import { render, screen } from "jest-matrix-react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
 
 import { EncryptionUserSettingsTab } from "../../../../../../../src/components/views/settings/tabs/user/EncryptionUserSettingsTab";
 import { createTestClient, withClientContextRenderOptions } from "../../../../../../test-utils";
 import Modal from "../../../../../../../src/Modal";
+import { accessSecretStorage } from "../../../../../../../src/SecurityManager";
+
+jest.mock("../../../../../../../src/SecurityManager", () => ({
+    accessSecretStorage: jest.fn(),
+}));
 
 describe("<EncryptionUserSettingsTab />", () => {
     let matrixClient: MatrixClient;
@@ -33,6 +39,8 @@ describe("<EncryptionUserSettingsTab />", () => {
                 userSigningKey: true,
             },
         });
+
+        mocked(accessSecretStorage).mockClear().mockResolvedValue();
     });
 
     function renderComponent() {
@@ -68,6 +76,28 @@ describe("<EncryptionUserSettingsTab />", () => {
         await waitFor(() => expect(screen.getByText("Recovery")).toBeInTheDocument());
     });
 
+    it("should ask to enter the recovery key when secrets are not cached", async () => {
+        // Secrets are not cached
+        jest.spyOn(matrixClient.getCrypto()!, "getCrossSigningStatus").mockResolvedValue({
+            privateKeysInSecretStorage: true,
+            publicKeysOnDevice: true,
+            privateKeysCachedLocally: {
+                masterKey: false,
+                selfSigningKey: true,
+                userSigningKey: true,
+            },
+        });
+
+        const user = userEvent.setup();
+        const { asFragment } = renderComponent();
+
+        await waitFor(() => screen.getByRole("button", { name: "Enter recovery key" }));
+        expect(asFragment()).toMatchSnapshot();
+
+        await user.click(screen.getByRole("button", { name: "Enter recovery key" }));
+        expect(accessSecretStorage).toHaveBeenCalled();
+    });
+
     it("should display the change recovery key panel when the user clicks on the change recovery button", async () => {
         const user = userEvent.setup();
 

test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap

@@ -1,5 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<EncryptionUserSettingsTab /> should ask to enter the recovery key when secrets are not cached 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_SettingsTab mx_EncryptionUserSettingsTab"
+    data-testid="encryptionTab"
+  >
+    <div
+      class="mx_SettingsTab_sections"
+    >
+      <div
+        class="mx_SettingsSection mx_SettingsSection_newUi"
+        data-testid="recoveryPanel"
+      >
+        <div
+          class="mx_SettingsSection_header"
+        >
+          <h2
+            class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 mx_SettingsHeader"
+          >
+            Recovery 
+          </h2>
+          <div
+            class="mx_SettingsSubheader"
+          >
+            Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
+            <span
+              class="mx_SettingsSubheader_error"
+            >
+              <svg
+                fill="currentColor"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                />
+              </svg>
+              Your key storage is out of sync. Click the button below to fix the problem.
+            </span>
+          </div>
+        </div>
+        <button
+          class="_button_i91xf_17 _has-icon_i91xf_66"
+          data-kind="primary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
+            />
+          </svg>
+          Enter recovery key
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<EncryptionUserSettingsTab /> should display a verify button when the encryption is not set up 1`] = `
 <DocumentFragment>
   <div