Re-generate QR code if the channel expires before scan

apps/web/res/css/views/auth/_LoginWithQR.pcss

@@ -34,45 +34,45 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-15px;
 }
 
-.mx_UserSettingsDialog .mx_LoginWithQR {
+.mx_LoginWithQR {
+    min-height: 350px;
+    display: flex;
+    flex-direction: column;
     font: var(--cpd-font-body-md-regular);
 
     h1 {
         font-size: $font-24px;
         margin-bottom: 0;
+
+        svg {
+            &.normal {
+                color: $secondary-content;
+            }
+            &.error {
+                color: $alert;
+            }
+            &.success {
+                color: $accent;
+            }
+            height: 1.3em;
+            margin-right: $spacing-8;
+            vertical-align: middle;
+        }
     }
 
     h2 {
         margin-top: $spacing-24;
     }
 
-    .mx_QRCode {
-        margin: $spacing-28 0;
-    }
-
     .mx_LoginWithQR_qrWrapper {
         display: flex;
-    }
-}
+        padding: $spacing-28 0;
 
-.mx_LoginWithQR {
-    min-height: 350px;
-    display: flex;
-    flex-direction: column;
-
-    h1 > svg {
-        &.normal {
-            color: $secondary-content;
-        }
-        &.error {
-            color: $alert;
-        }
-        &.success {
-            color: $accent;
+        .mx_Spinner {
+            /* Match the size of the QR code to prevent jumps */
+            height: 200px;
+            width: 200px;
         }
-        height: 1.3em;
-        margin-right: $spacing-8;
-        vertical-align: middle;
     }
 
     .mx_LoginWithQR_confirmationDigits {

apps/web/src/components/views/auth/LoginWithQR.tsx

@@ -19,6 +19,7 @@
 } from "matrix-js-sdk/src/rendezvous";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { sleep } from "matrix-js-sdk/src/utils";
 
 import { Click, Mode, Phase } from "./LoginWithQR-types";
 import LoginWithQRFlow from "./LoginWithQRFlow";
@@ -32,7 +33,6 @@
 interface IState {
     phase: Phase;
     rendezvous?: MSC4108SignInWithQR;
-    mediaPermissionError?: boolean;
     verificationUri?: string;
     userCode?: string;
     checkCode?: string;
@@ -78,13 +78,15 @@
         }
     }
 
-    private async updateMode(mode: Mode): Promise<void> {
-        this.setState({ phase: Phase.Loading });
+    private async updateMode(mode: Mode, showLoading = true): Promise<void> {
         if (this.state.rendezvous) {
             const rendezvous = this.state.rendezvous;
             rendezvous.onFailure = undefined;
             this.setState({ rendezvous: undefined });
         }
+        if (showLoading) {
+            this.setState({ phase: Phase.Loading });
+        }
         if (mode === Mode.Show) {
             await this.generateAndShowCode();
         }
@@ -187,9 +189,23 @@
         }
     };
 
-    private onFailure = (reason: RendezvousFailureReason): void => {
+    private onFailure = async (reason: RendezvousFailureReason): Promise<void> => {
         if (this.state.phase === Phase.Error) return; // Already in failed state
         logger.info(`Rendezvous failed: ${reason}`);
+
+        // Generate a new rendezvous channel & qr code if we hit expiry whilst still showing the QR code
+        if (reason === ClientRendezvousFailureReason.Expired && this.state.phase === Phase.ShowingQR) {
+            try {
+                this.reset();
+                // Add a sleep to make the UX looks less flickery and more intentional
+                await sleep(1000);
+                await this.updateMode(Mode.Show, false);
+                return;
+            } catch (e) {
+                logger.warn("Failed to re-roll qr code on expiry", e);
+            }
+        }
+
         this.setState({ phase: Phase.Error, failureReason: reason });
     };
 
@@ -200,7 +216,6 @@
             failureReason: undefined,
             userCode: undefined,
             checkCode: undefined,
-            mediaPermissionError: false,
         });
     }
 

apps/web/src/components/views/auth/LoginWithQRFlow.tsx

@@ -226,39 +226,39 @@
                     </>
                 );
                 break;
-            case Phase.ShowingQR:
-                if (this.props.code) {
-                    const data = this.props.code;
+            case Phase.ShowingQR: {
+                const steps = [
+                    _t("auth|qr_code_login|open_element_other_device", {
+                        brand: SdkConfig.get().brand,
+                    }),
+                    _t("auth|qr_code_login|select_qr_code", {
+                        scanQRCode: <strong>{_t("auth|qr_code_login|scan_qr_code")}</strong>,
+                    }),
+                    _t("auth|qr_code_login|point_the_camera"),
+                    _t("auth|qr_code_login|follow_remaining_instructions"),
+                ];
 
-                    main = (
-                        <>
-                            <Heading as="h1" size="sm" weight="semibold">
-                                {_t("auth|qr_code_login|scan_code_instruction")}
-                            </Heading>
-                            <div className="mx_LoginWithQR_qrWrapper">
-                                <QRCode data={[{ data, mode: "byte" }]} className="mx_QRCode" />
-                            </div>
-                            <ol>
-                                <li>
-                                    {_t("auth|qr_code_login|open_element_other_device", {
-                                        brand: SdkConfig.get().brand,
-                                    })}
-                                </li>
-                                <li>
-                                    {_t("auth|qr_code_login|select_qr_code", {
-                                        scanQRCode: <strong>{_t("auth|qr_code_login|scan_qr_code")}</strong>,
-                                    })}
-                                </li>
-                                <li>{_t("auth|qr_code_login|point_the_camera")}</li>
-                                <li>{_t("auth|qr_code_login|follow_remaining_instructions")}</li>
-                            </ol>
-                        </>
-                    );
-                } else {
-                    main = this.simpleSpinner();
-                    buttons = this.cancelButton();
-                }
+                main = (
+                    <>
+                        <Heading as="h1" size="sm" weight="semibold">
+                            {_t("auth|qr_code_login|scan_code_instruction")}
+                        </Heading>
+                        <div className="mx_LoginWithQR_qrWrapper">
+                            {this.props.code ? (
+                                <QRCode data={[{ data: this.props.code, mode: "byte" }]} width={200} />
+                            ) : (
+                                <Spinner />
+                            )}
+                        </div>
+                        <ol>
+                            {steps.map((step, i) => (
+                                <li key={i}>{step}</li>
+                            ))}
+                        </ol>
+                    </>
+                );
                 break;
+            }
             case Phase.Loading:
                 main = this.simpleSpinner();
                 break;

apps/web/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx

@@ -17,7 +17,7 @@
 } from "matrix-js-sdk/src/rendezvous";
 import { HTTPError, type MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import LoginWithQR from "../../../../../../src/components/views/auth/LoginWithQR";
+import LoginWithQR, { LoginWithQRFailureReason } from "../../../../../../src/components/views/auth/LoginWithQR";
 import { Click, Mode, Phase } from "../../../../../../src/components/views/auth/LoginWithQR-types";
 
 jest.mock("matrix-js-sdk/src/rendezvous");
@@ -68,6 +68,7 @@
         mockedFlow.mockReset();
         jest.resetAllMocks();
         client = makeClient();
+        jest.useFakeTimers();
     });
 
     afterEach(() => {
@@ -105,6 +106,29 @@
             expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UserCancelled);
         });
 
+        test("should open a new channel if expires before qr scan", async () => {
+            const onFinished = jest.fn();
+            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockReturnValue(unresolvedPromise());
+            render(getComponent({ client, onFinished }));
+
+            await waitFor(() =>
+                expect(mockedFlow).toHaveBeenLastCalledWith({
+                    phase: Phase.ShowingQR,
+                    onClick: expect.any(Function),
+                }),
+            );
+
+            const rendezvous = mocked(MSC4108SignInWithQR).mock.instances[0];
+            expect(rendezvous.generateCode).toHaveBeenCalled();
+            expect(rendezvous.negotiateProtocols).toHaveBeenCalled();
+
+            // Expire the channel
+            const onFailure = mocked(MSC4108SignInWithQR).mock.calls[0][3];
+            onFailure!(ClientRendezvousFailureReason.Expired);
+            await jest.runAllTimersAsync();
+            await waitFor(() => expect(mocked(MSC4108SignInWithQR).mock.instances).toHaveLength(2));
+        });
+
         test("failed to connect", async () => {
             render(getComponent({ client }));
             jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
@@ -115,6 +139,34 @@
             await waitFor(() => expect(fn).toHaveBeenLastCalledWith(ClientRendezvousFailureReason.Unknown));
         });
 
+        test("should show error if check code doesn't match", async () => {
+            jest.spyOn(global.window, "open");
+
+            render(getComponent({ client }));
+            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
+            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
+                verificationUri: "mock-verification-uri",
+            });
+
+            await waitFor(() =>
+                expect(mockedFlow).toHaveBeenLastCalledWith({
+                    phase: Phase.OutOfBandConfirmation,
+                    onClick: expect.any(Function),
+                }),
+            );
+
+            const onClick = mockedFlow.mock.calls[0][0].onClick;
+            await onClick(Click.Approve, "12");
+
+            await waitFor(() =>
+                expect(mockedFlow).toHaveBeenLastCalledWith({
+                    phase: Phase.OutOfBandConfirmation,
+                    failureReason: LoginWithQRFailureReason.CheckCodeMismatch,
+                    onClick: expect.any(Function),
+                }),
+            );
+        });
+
         test("reciprocates login", async () => {
             jest.spyOn(global.window, "open");
 

apps/web/test/unit-tests/components/views/settings/devices/LoginWithQRFlow-test.tsx

@@ -42,10 +42,8 @@ describe("<LoginWithQRFlow />", () => {
 
     it("renders spinner whilst QR generating", async () => {
         const { container } = render(getComponent({ phase: Phase.ShowingQR }));
-        expect(screen.getAllByTestId("cancel-button")).toHaveLength(1);
+        expect(screen.getAllByTestId("spinner")).toHaveLength(1);
         expect(container).toMatchSnapshot();
-        fireEvent.click(screen.getByTestId("cancel-button"));
-        expect(onClick).toHaveBeenCalledWith(Click.Cancel, undefined);
     });
 
     it("renders QR code", async () => {