Gracefully handle rate limit response when attempting to Sign in with QR (#11809)

* Gracefully hand rate limit response when attempting to Sign in with QR

* Don't cancel after rate limit

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

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing import

* Fix mock of error

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/auth/LoginWithQR.tsx

@@ -19,7 +19,7 @@ import { MSC3906Rendezvous, MSC3906RendezvousPayload, RendezvousFailureReason }
 import { MSC3886SimpleHttpRendezvousTransport } from "matrix-js-sdk/src/rendezvous/transports";
 import { MSC3903ECDHPayload, MSC3903ECDHv2RendezvousChannel } from "matrix-js-sdk/src/rendezvous/channels";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { HTTPError, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
 import { wrapRequestWithDialog } from "../../../utils/UserInteractiveAuth";
@@ -63,10 +63,16 @@ interface IState {
     phase: Phase;
     rendezvous?: MSC3906Rendezvous;
     confirmationDigits?: string;
-    failureReason?: RendezvousFailureReason;
+    failureReason?: FailureReason;
     mediaPermissionError?: boolean;
 }
 
+export enum LoginWithQRFailureReason {
+    RateLimited = "rate_limited",
+}
+
+export type FailureReason = RendezvousFailureReason | LoginWithQRFailureReason;
+
 /**
  * A component that allows sign in and E2EE set up with a QR code.
  *
@@ -136,16 +142,27 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
                 // user denied
                 return;
             }
-            if (!this.props.client.crypto) {
+            if (!this.props.client.getCrypto()) {
                 // no E2EE to set up
                 this.props.onFinished(true);
                 return;
             }
             this.setState({ phase: Phase.Verifying });
             await this.state.rendezvous.verifyNewDeviceOnExistingDevice();
+            // clean up our state:
+            try {
+                await this.state.rendezvous.close();
+            } finally {
+                this.setState({ rendezvous: undefined });
+            }
             this.props.onFinished(true);
         } catch (e) {
             logger.error("Error whilst approving sign in", e);
+            if (e instanceof HTTPError && e.httpStatus === 429) {
+                // 429: rate limit
+                this.setState({ phase: Phase.Error, failureReason: LoginWithQRFailureReason.RateLimited });
+                return;
+            }
             this.setState({ phase: Phase.Error, failureReason: RendezvousFailureReason.Unknown });
         }
     };

src/components/views/auth/LoginWithQRFlow.tsx

@@ -25,13 +25,13 @@ import { Icon as BackButtonIcon } from "../../../../res/img/element-icons/back.s
 import { Icon as DevicesIcon } from "../../../../res/img/element-icons/devices.svg";
 import { Icon as WarningBadge } from "../../../../res/img/element-icons/warning-badge.svg";
 import { Icon as InfoIcon } from "../../../../res/img/element-icons/i.svg";
-import { Click, Phase } from "./LoginWithQR";
+import { Click, FailureReason, LoginWithQRFailureReason, Phase } from "./LoginWithQR";
 
 interface IProps {
     phase: Phase;
     code?: string;
     onClick(type: Click): Promise<void>;
-    failureReason?: RendezvousFailureReason;
+    failureReason?: FailureReason;
     confirmationDigits?: string;
 }
 
@@ -102,6 +102,9 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
                     case RendezvousFailureReason.UserCancelled:
                         cancellationMessage = _t("auth|qr_code_login|error_request_cancelled");
                         break;
+                    case LoginWithQRFailureReason.RateLimited:
+                        cancellationMessage = _t("auth|qr_code_login|error_rate_limited");
+                        break;
                     case RendezvousFailureReason.Unknown:
                         cancellationMessage = _t("auth|qr_code_login|error_unexpected");
                         break;

src/i18n/strings/en_EN.json

@@ -256,6 +256,7 @@
             "error_homeserver_lacks_support": "The homeserver doesn't support signing in another device.",
             "error_invalid_scanned_code": "The scanned code is invalid.",
             "error_linking_incomplete": "The linking wasn't completed in the required time.",
+            "error_rate_limited": "Too many attempts in a short time. Wait some time before trying again.",
             "error_request_cancelled": "The request was cancelled.",
             "error_request_declined": "The request was declined on the other device.",
             "error_unexpected": "An unexpected error occurred.",