diff --git a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index eae102196f..3fac00c1b3 100644
--- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -16,12 +16,11 @@ limitations under the License.
 */
 
 import React from 'react';
+import FileSaver from 'file-saver';
+
 import sdk from '../../../../index';
 import MatrixClientPeg from '../../../../MatrixClientPeg';
 import { scorePassword } from '../../../../utils/PasswordScorer';
-
-import FileSaver from 'file-saver';
-
 import { _t } from '../../../../languageHandler';
 
 const PHASE_PASSPHRASE = 0;
@@ -118,7 +117,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 phase: PHASE_DONE,
             });
         } catch (e) {
-            console.log("Error creating key backup", e);
+            console.error("Error creating key backup", e);
             // TODO: If creating a version succeeds, but backup fails, should we
             // delete the version, disable backup, or do nothing?  If we just
             // disable without deleting, we'll enable on next app reload since
diff --git a/src/components/views/settings/KeyBackupPanel.js b/src/components/views/settings/KeyBackupPanel.js
index c2fb3dc9db..cbbb041228 100644
--- a/src/components/views/settings/KeyBackupPanel.js
+++ b/src/components/views/settings/KeyBackupPanel.js
@@ -21,6 +21,8 @@ import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
+import SettingsStore from '../../../../lib/settings/SettingsStore';
+import { accessSecretStorage } from '../../../CrossSigningManager';
 
 export default class KeyBackupPanel extends React.PureComponent {
     constructor(props) {
@@ -125,6 +127,31 @@ export default class KeyBackupPanel extends React.PureComponent {
         );
     }
 
+    _startNewBackupWithSecureSecretStorage = async () => {
+        const cli = MatrixClientPeg.get();
+        let info;
+        try {
+            await accessSecretStorage(async () => {
+                info = await cli.prepareKeyBackupVersion(
+                    null /* random key */,
+                    { secureSecretStorage: true },
+                );
+                info = await cli.createKeyBackupVersion(info);
+            });
+            await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
+            this._loadBackupStatus();
+        } catch (e) {
+            console.error("Error creating key backup", e);
+            // TODO: If creating a version succeeds, but backup fails, should we
+            // delete the version, disable backup, or do nothing?  If we just
+            // disable without deleting, we'll enable on next app reload since
+            // it is trusted.
+            if (info && info.version) {
+                MatrixClientPeg.get().deleteKeyBackupVersion(info.version);
+            }
+        }
+    }
+
     _deleteBackup = () => {
         const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
         Modal.createTrackedDialog('Delete Backup', '', QuestionDialog, {
@@ -299,6 +326,22 @@ export default class KeyBackupPanel extends React.PureComponent {
                 </div>
             </div>;
         } else {
+            // This is a temporary button for testing the new path which stores
+            // the key backup key in SSSS. Initialising SSSS depends on
+            // cross-signing and is part of the same project, so we only show
+            // this mode when the cross-signing feature is enabled.
+            // TODO: Clean this up when removing the feature flag.
+            let secureSecretStorageKeyBackup;
+            if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                secureSecretStorageKeyBackup = (
+                    <div className="mx_KeyBackupPanel_buttonRow">
+                        <AccessibleButton kind="primary" onClick={this._startNewBackupWithSecureSecretStorage}>
+                            {_t("Start using Key Backup with Secure Secret Storage")}
+                        </AccessibleButton>
+                    </div>
+                );
+            }
+
             return <div>
                 <div>
                     <p>{_t(
@@ -313,6 +356,7 @@ export default class KeyBackupPanel extends React.PureComponent {
                         {_t("Start using Key Backup")}
                     </AccessibleButton>
                 </div>
+                {secureSecretStorageKeyBackup}
             </div>;
         }
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ee973cf485..2425dfcafa 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -540,6 +540,7 @@
     "This backup is trusted because it has been restored on this device": "This backup is trusted because it has been restored on this device",
     "Backup version: ": "Backup version: ",
     "Algorithm: ": "Algorithm: ",
+    "Start using Key Backup with Secure Secret Storage": "Start using Key Backup with Secure Secret Storage",
     "Your keys are <b>not being backed up from this device</b>.": "Your keys are <b>not being backed up from this device</b>.",
     "Back up your keys before signing out to avoid losing them.": "Back up your keys before signing out to avoid losing them.",
     "Start using Key Backup": "Start using Key Backup",