Support for login + E2EE set up with QR (#9403)

* Support for login + E2EE set up with QR

* Whitespace

* Padding

* Refactor of fetch

* Whitespace

* CSS whitespace

* Add link to MSC3906

* Handle incorrect typing in MatrixClientPeg.get()

* Use unstable class name

* fix: use unstable class name

* Use default fetch client instead

* Update to revised function name

* Refactor device manager panel and make it work with new sessions manager

* Lint fix

* Add missing interstitials and update wording

* Linting

* i18n

* Lint

* Use sensible sdk config name for fallback server

* Improve error handling for QR code generation

* Refactor feature availability logic

* Hide device manager panel if no options available

* Put sign in with QR behind lab setting

* Reduce scope of PR to just showing code on existing device

* i18n updates

* Handle null features

* Testing for LoginWithQRSection

* Refactor to handle UIA

* Imports

* Reduce diff complexity

* Remove unnecessary change

* Remove unused styles

* Support UIA

* Tidy up

* i18n

* Remove additional unused parts of flow

* Add extra instruction when showing QR code

* Add getVersions to server mocks

* Use proper colours for theme support

* Test cases

* Lint

* Remove obsolete snapshot

* Don't override error if already set

* Remove unused var

* Update src/components/views/settings/devices/LoginWithQRSection.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update res/css/views/auth/_LoginWithQR.pcss

Co-authored-by: Kerry <kerrya@element.io>

* Use spacing variables

* Remove debug

* Style + docs

* preventDefault

* Names of tests

* Fixes for js-sdk refactor

* Update snapshots to match test names

* Refactor labs config to make deployment simpler

* i18n

* Unused imports

* Typo

* Stateless component

* Whitespace

* Use context not MatrixClientPeg

* Add missing context

* Type updates to match js-sdk

* Wrap click handlers in useCallback

* Update src/components/views/settings/DevicesPanel.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Wait for DOM update instead of timeout

* Add missing snapshot update from last commit

* Remove void keyword in favour of then() clauses

* test main paths in LoginWithQR

Co-authored-by: Travis Ralston <travisr@matrix.org>
Co-authored-by: Kerry <kerrya@element.io>

src/components/views/settings/DevicesPanel.tsx

@@ -19,13 +19,14 @@ import classNames from 'classnames';
 import { IMyDevice } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
+import { CryptoEvent } from 'matrix-js-sdk/src/crypto';
 
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import DevicesPanelEntry from "./DevicesPanelEntry";
 import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import { deleteDevicesWithInteractiveAuth } from './devices/deleteDevices';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 
 interface IProps {
     className?: string;
@@ -40,6 +41,8 @@ interface IState {
 }
 
 export default class DevicesPanel extends React.Component<IProps, IState> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
     private unmounted = false;
 
     constructor(props: IProps) {
@@ -52,15 +55,22 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
+        this.context.on(CryptoEvent.DevicesUpdated, this.onDevicesUpdated);
         this.loadDevices();
     }
 
     public componentWillUnmount(): void {
+        this.context.off(CryptoEvent.DevicesUpdated, this.onDevicesUpdated);
         this.unmounted = true;
     }
 
+    private onDevicesUpdated = (users: string[]) => {
+        if (!users.includes(this.context.getUserId())) return;
+        this.loadDevices();
+    };
+
     private loadDevices(): void {
-        const cli = MatrixClientPeg.get();
+        const cli = this.context;
         cli.getDevices().then(
             (resp) => {
                 if (this.unmounted) { return; }
@@ -111,7 +121,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
 
     private isDeviceVerified(device: IMyDevice): boolean | null {
         try {
-            const cli = MatrixClientPeg.get();
+            const cli = this.context;
             const deviceInfo = cli.getStoredDevice(cli.getUserId(), device.device_id);
             return this.state.crossSigningInfo.checkDeviceTrust(
                 this.state.crossSigningInfo,
@@ -184,7 +194,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
 
         try {
             await deleteDevicesWithInteractiveAuth(
-                MatrixClientPeg.get(),
+                this.context,
                 this.state.selectedDevices,
                 (success) => {
                     if (success) {
@@ -208,7 +218,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     };
 
     private renderDevice = (device: IMyDevice): JSX.Element => {
-        const myDeviceId = MatrixClientPeg.get().getDeviceId();
+        const myDeviceId = this.context.getDeviceId();
         const myDevice = this.state.devices.find((device) => (device.device_id === myDeviceId));
 
         const isOwnDevice = device.device_id === myDeviceId;
@@ -246,7 +256,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
             return <Spinner />;
         }
 
-        const myDeviceId = MatrixClientPeg.get().getDeviceId();
+        const myDeviceId = this.context.getDeviceId();
         const myDevice = devices.find((device) => (device.device_id === myDeviceId));
 
         if (!myDevice) {

src/components/views/settings/devices/LoginWithQRSection.tsx

@@ -0,0 +1,63 @@
+/*
+Copyright 2022 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 type { IServerVersions } from 'matrix-js-sdk/src/matrix';
+import { _t } from '../../../../languageHandler';
+import AccessibleButton from '../../elements/AccessibleButton';
+import SettingsSubsection from '../shared/SettingsSubsection';
+import SettingsStore from '../../../../settings/SettingsStore';
+
+interface IProps {
+    onShowQr: () => void;
+    versions: IServerVersions;
+}
+
+export default class LoginWithQRSection extends React.Component<IProps> {
+    public constructor(props: IProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        const msc3882Supported = !!this.props.versions?.unstable_features?.['org.matrix.msc3882'];
+        const msc3886Supported = !!this.props.versions?.unstable_features?.['org.matrix.msc3886'];
+
+        // Needs to be enabled as a feature + server support MSC3886 or have a default rendezvous server configured:
+        const offerShowQr = SettingsStore.getValue("feature_qr_signin_reciprocate_show") &&
+            msc3882Supported && msc3886Supported;  // We don't support configuration of a fallback at the moment so we just check the MSCs
+
+        // don't show anything if no method is available
+        if (!offerShowQr) {
+            return null;
+        }
+
+        return <SettingsSubsection
+            heading={_t('Sign in with QR code')}
+        >
+            <div className="mx_LoginWithQRSection">
+                <p className="mx_SettingsTab_subsectionText">{
+                    _t("You can use this device to sign in a new device with a QR code. You will need to " +
+                    "scan the QR code shown on this device with your device that's signed out.")
+                }</p>
+                <AccessibleButton
+                    onClick={this.props.onShowQr}
+                    kind="primary"
+                >{ _t("Show QR code") }</AccessibleButton>
+            </div>
+        </SettingsSubsection>;
+    }
+}

src/components/views/settings/devices/useOwnDevices.ts

@@ -31,6 +31,7 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque
 import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { _t } from "../../../../languageHandler";
@@ -179,6 +180,12 @@ export const useOwnDevices = (): DevicesState => {
         refreshDevices();
     }, [refreshDevices]);
 
+    useEventEmitter(matrixClient, CryptoEvent.DevicesUpdated, (users: string[]): void => {
+        if (users.includes(userId)) {
+            refreshDevices();
+        }
+    });
+
     useEventEmitter(matrixClient, ClientEvent.AccountData, (event: MatrixEvent): void => {
         const type = event.getType();
         if (type.startsWith(LOCAL_NOTIFICATION_SETTINGS_PREFIX.name)) {

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

@@ -38,6 +38,9 @@ import InlineSpinner from "../../../elements/InlineSpinner";
 import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
 import { showDialog as showAnalyticsLearnMoreDialog } from "../../../dialogs/AnalyticsLearnMoreDialog";
 import { privateShouldBeEncrypted } from "../../../../../utils/rooms";
+import LoginWithQR, { Mode } from '../../../auth/LoginWithQR';
+import LoginWithQRSection from '../../devices/LoginWithQRSection';
+import type { IServerVersions } from 'matrix-js-sdk/src/matrix';
 
 interface IIgnoredUserProps {
     userId: string;
@@ -72,6 +75,8 @@ interface IState {
     waitingUnignored: string[];
     managingInvites: boolean;
     invitedRoomIds: Set<string>;
+    showLoginWithQR: Mode | null;
+    versions?: IServerVersions;
 }
 
 export default class SecurityUserSettingsTab extends React.Component<IProps, IState> {
@@ -88,6 +93,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
             waitingUnignored: [],
             managingInvites: false,
             invitedRoomIds,
+            showLoginWithQR: null,
         };
     }
 
@@ -102,6 +108,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
     public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(RoomEvent.MyMembership, this.onMyMembership);
+        MatrixClientPeg.get().getVersions().then(versions => this.setState({ versions }));
     }
 
     public componentWillUnmount(): void {
@@ -251,6 +258,14 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         );
     }
 
+    private onShowQRClicked = (): void => {
+        this.setState({ showLoginWithQR: Mode.Show });
+    };
+
+    private onLoginWithQRFinished = (): void => {
+        this.setState({ showLoginWithQR: null });
+    };
+
     public render(): JSX.Element {
         const secureBackup = (
             <div className='mx_SettingsTab_section'>
@@ -347,6 +362,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         }
 
         const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
+        const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
         const devicesSection = useNewSessionManager
             ? null
             : <>
@@ -363,8 +379,20 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     </span>
                     <DevicesPanel />
                 </div>
+                { showQrCodeEnabled ?
+                    <LoginWithQRSection onShowQr={this.onShowQRClicked} versions={this.state.versions} />
+                    : null
+                }
             </>;
 
+        const client = MatrixClientPeg.get();
+
+        if (showQrCodeEnabled && this.state.showLoginWithQR) {
+            return <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
+                <LoginWithQR onFinished={this.onLoginWithQRFinished} mode={this.state.showLoginWithQR} client={client} />
+            </div>;
+        }
+
         return (
             <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
                 { warning }

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

@@ -32,6 +32,10 @@ import SecurityRecommendations from '../../devices/SecurityRecommendations';
 import { DeviceSecurityVariation, ExtendedDevice } from '../../devices/types';
 import { deleteDevicesWithInteractiveAuth } from '../../devices/deleteDevices';
 import SettingsTab from '../SettingsTab';
+import LoginWithQRSection from '../../devices/LoginWithQRSection';
+import LoginWithQR, { Mode } from '../../../auth/LoginWithQR';
+import SettingsStore from '../../../../../settings/SettingsStore';
+import { useAsyncMemo } from '../../../../../hooks/useAsyncMemo';
 
 const useSignOut = (
     matrixClient: MatrixClient,
@@ -104,6 +108,7 @@ const SessionManagerTab: React.FC = () => {
     const matrixClient = useContext(MatrixClientContext);
     const userId = matrixClient.getUserId();
     const currentUserMember = userId && matrixClient.getUser(userId) || undefined;
+    const clientVersions = useAsyncMemo(() => matrixClient.getVersions(), [matrixClient]);
 
     const onDeviceExpandToggle = (deviceId: ExtendedDevice['device_id']): void => {
         if (expandedDeviceIds.includes(deviceId)) {
@@ -175,6 +180,26 @@ const SessionManagerTab: React.FC = () => {
         onSignOutOtherDevices(Object.keys(otherDevices));
     }: undefined;
 
+    const [signInWithQrMode, setSignInWithQrMode] = useState<Mode | null>();
+
+    const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
+
+    const onQrFinish = useCallback(() => {
+        setSignInWithQrMode(null);
+    }, [setSignInWithQrMode]);
+
+    const onShowQrClicked = useCallback(() => {
+        setSignInWithQrMode(Mode.Show);
+    }, [setSignInWithQrMode]);
+
+    if (showQrCodeEnabled && signInWithQrMode) {
+        return <LoginWithQR
+            mode={signInWithQrMode}
+            onFinished={onQrFinish}
+            client={matrixClient}
+        />;
+    }
+
     return <SettingsTab heading={_t('Sessions')}>
         <SecurityRecommendations
             devices={devices}
@@ -222,6 +247,10 @@ const SessionManagerTab: React.FC = () => {
                 />
             </SettingsSubsection>
         }
+        { showQrCodeEnabled ?
+            <LoginWithQRSection onShowQr={onShowQrClicked} versions={clientVersions} />
+            : null
+        }
     </SettingsTab>;
 };