Iterate

t3chguy · t3chguy · commit 3249b082ddff · 2026-04-23T09:52:38.000+01:00
diff --git a/apps/web/src/PosthogTrackers.ts b/apps/web/src/PosthogTrackers.ts
@@ -28,6 +28,7 @@ const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
     [Views.CONFIRM_LOCK_THEFT]: "ConfirmStartup",
     [Views.WELCOME]: "Welcome",
     [Views.LOGIN]: "Login",
+    [Views.QR_LOGIN]: "Login", // XXX: we should get a new analytics identifier for this
     [Views.REGISTER]: "Register",
     [Views.FORGOT_PASSWORD]: "ForgotPassword",
     [Views.COMPLETE_SECURITY]: "CompleteSecurity",
diff --git a/apps/web/src/Views.ts b/apps/web/src/Views.ts
@@ -100,6 +100,9 @@ enum Views {
     // we are showing the login view
     LOGIN,
 
+    // we are showing the login with QR code view
+    QR_LOGIN,
+
     // we are showing the registration view
     REGISTER,
 
diff --git a/apps/web/src/components/structures/MatrixChat.tsx b/apps/web/src/components/structures/MatrixChat.tsx
@@ -142,6 +142,7 @@ import { isOnlyAdmin } from "../../utils/membership";
 import { ModuleApi } from "../../modules/Api.ts";
 import { type IScreen } from "../../vector/routing.ts";
 import { type URLParams } from "../../vector/url_utils.ts";
+import QrLogin from "./auth/QrLogin.tsx";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -2224,7 +2225,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 );
             }
         } else if (this.state.view === Views.WELCOME) {
-            view = <Welcome />;
+            view = <Welcome {...this.getServerProperties()} />;
         } else if (this.state.view === Views.REGISTER && SettingsStore.getValue(UIFeature.Registration)) {
             const email = ThreepidInviteStore.instance.pickBestInvite()?.toEmail;
             view = (
@@ -2267,6 +2268,16 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     {...this.getServerProperties()}
                 />
             );
+        } else if (this.state.view === Views.QR_LOGIN && SettingsStore.getValue("feature_login_with_qr")) {
+            view = (
+                <QrLogin
+                    isSyncing={this.state.pendingInitialSync}
+                    onLoggedIn={this.onUserCompletedLoginFlow}
+                    defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
+                    fragmentAfterLogin={fragmentAfterLogin}
+                    {...this.getServerProperties()}
+                />
+            );
         } else if (this.state.view === Views.SOFT_LOGOUT) {
             view = (
                 <SoftLogout
diff --git a/apps/web/src/components/structures/auth/Login.tsx b/apps/web/src/components/structures/auth/Login.tsx
@@ -9,14 +9,11 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, memo, type ReactNode } from "react";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type SSOFlow, type MatrixClient, SSOAction } from "matrix-js-sdk/src/matrix";
+import { type SSOFlow, SSOAction } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";
-import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { secureRandomString } from "matrix-js-sdk/src/randomstring";
-import { RendezvousIntent } from "matrix-js-sdk/src/rendezvous";
 
 import { _t, UserFriendlyError } from "../../../languageHandler";
-import Login, { type LoginWithQrFlow, type ClientLoginFlow, type OidcNativeFlow } from "../../../Login";
+import Login, { type ClientLoginFlow, type OidcNativeFlow } from "../../../Login";
 import { messageForConnectionError, messageForLoginError } from "../../../utils/ErrorUtils";
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import AuthPage from "../../views/auth/AuthPage";
@@ -36,9 +33,6 @@ import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig
 import { filterBoolean } from "../../../utils/arrays";
 import { startOidcLogin } from "../../../utils/oidc/authorize";
 import { ModuleApi } from "../../../modules/Api.ts";
-import LoginWithQR from "../../views/auth/LoginWithQR.tsx";
-import { Mode } from "../../views/auth/LoginWithQR-types.ts";
-import createMatrixClient from "../../../utils/createMatrixClient.ts";
 
 interface IProps {
     serverConfig: ValidatedServerConfig;
@@ -57,8 +51,7 @@ interface IProps {
 
     // Called when the user has logged in. Params:
     // - The object returned by the login API
-    // - alreadySignedIn: true if the user was already signed in (e.g. QR login) and only the post login setup is needed
-    onLoggedIn(data: IMatrixClientCreds, alreadySignedIn?: boolean): void;
+    onLoggedIn(data: IMatrixClientCreds): void;
 
     // login shouldn't know or care how registration, password recovery, etc is done.
     onRegisterClick?(): void;
@@ -86,9 +79,6 @@ interface IState {
     serverIsAlive: boolean;
     serverErrorIsFatal: boolean;
     serverDeadError?: ReactNode;
-
-    loginWithQrInProgress: boolean;
-    loginWithQrClient?: MatrixClient;
 }
 
 type OnPasswordLogin = {
@@ -120,8 +110,6 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             serverIsAlive: true,
             serverErrorIsFatal: false,
             serverDeadError: "",
-
-            loginWithQrInProgress: false,
         };
 
         // map from login step type to a function which will render a control
@@ -135,7 +123,6 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             "m.login.sso": () => this.renderSsoStep("sso"),
             "oidcNativeFlow": () => this.renderOidcNativeStep(),
-            "loginWithQrFlow": () => this.renderLoginWithQRStep(),
         };
     }
 
@@ -415,7 +402,7 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
         if (!this.state.flows) return null;
 
         // this is the ideal order we want to show the flows in
-        const order = ["loginWithQrFlow", "oidcNativeFlow", "m.login.password", "m.login.sso"];
+        const order = ["oidcNativeFlow", "m.login.password", "m.login.sso"];
 
         const flows = filterBoolean(order.map((type) => this.state.flows?.find((flow) => flow.type === type)));
         return (
@@ -485,42 +472,6 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
         );
     };
 
-    private startLoginWithQR = (): void => {
-        if (this.state.loginWithQrInProgress) return;
-        // pick our device ID
-        const deviceId = secureRandomString(10);
-        const loginWithQrClient = createMatrixClient({
-            baseUrl: this.loginLogic.getHomeserverUrl(),
-            idBaseUrl: this.loginLogic.getIdentityServerUrl(),
-            deviceId,
-        });
-        this.setState({ loginWithQrInProgress: true, loginWithQrClient });
-    };
-
-    private renderLoginWithQRStep = (): JSX.Element => {
-        return (
-            <>
-                <Button className="mx_Login_fullWidthButton" kind="primary" size="sm" onClick={this.startLoginWithQR}>
-                    <QrCodeIcon />
-                    {_t("auth|sign_in_with_qr")}
-                </Button>
-            </>
-        );
-    };
-
-    private onLoginWithQRFinished = (success: boolean, credentials?: IMatrixClientCreds): void => {
-        if (credentials) {
-            this.props.onLoggedIn(credentials, true);
-        } else if (!success) {
-            this.state.loginWithQrClient?.stopClient();
-            this.setState({ loginWithQrInProgress: false, loginWithQrClient: undefined });
-        }
-    };
-
-    private get qrClientId(): string {
-        return (this.state.flows?.find((flow) => flow.type === "loginWithQrFlow") as LoginWithQrFlow).clientId ?? "";
-    }
-
     public render(): React.ReactNode {
         const loader =
             this.isBusy() && !this.state.busyLoggingIn ? (
@@ -581,35 +532,20 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             <AuthPage>
                 <AuthHeader disableLanguageSelector={this.props.isSyncing || this.state.busyLoggingIn} />
                 <AuthBody>
-                    {this.state.loginWithQrInProgress ? (
-                        <>
-                            <LoginWithQR
-                                onFinished={this.onLoginWithQRFinished}
-                                mode={Mode.Show}
-                                intent={RendezvousIntent.LOGIN_ON_NEW_DEVICE}
-                                client={this.state.loginWithQrClient!}
-                                clientId={this.qrClientId}
-                            />
-                        </>
-                    ) : (
-                        <>
-                            {" "}
-                            <h1>
-                                {_t("action|sign_in")}
-                                {loader}
-                            </h1>
-                            {errorTextSection}
-                            {serverDeadSection}
-                            <ServerPicker
-                                serverConfig={this.props.serverConfig}
-                                onServerConfigChange={this.props.onServerConfigChange}
-                                disabled={this.isBusy()}
-                            />
-                            {this.renderLoginComponentForFlows()}
-                            {this.props.children}
-                            {footer}
-                        </>
-                    )}
+                    <h1>
+                        {_t("action|sign_in")}
+                        {loader}
+                    </h1>
+                    {errorTextSection}
+                    {serverDeadSection}
+                    <ServerPicker
+                        serverConfig={this.props.serverConfig}
+                        onServerConfigChange={this.props.onServerConfigChange}
+                        disabled={this.isBusy()}
+                    />
+                    {this.renderLoginComponentForFlows()}
+                    {this.props.children}
+                    {footer}
                 </AuthBody>
             </AuthPage>
         );
diff --git a/apps/web/src/components/structures/auth/QrLogin.tsx b/apps/web/src/components/structures/auth/QrLogin.tsx
@@ -0,0 +1,72 @@
+/*
+Copyright 2026 Element Creations 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, { type FC, type JSX, useCallback, useMemo } from "react";
+import { RendezvousIntent } from "matrix-js-sdk/src/rendezvous";
+import { createClient } from "matrix-js-sdk/src/matrix";
+
+import AuthPage from "../../views/auth/AuthPage";
+import AuthHeader from "../../views/auth/AuthHeader";
+import AuthBody from "../../views/auth/AuthBody";
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
+import type { IMatrixClientCreds } from "../../../MatrixClientPeg.ts";
+import LoginWithQR from "../../views/auth/LoginWithQR.tsx";
+import { Mode } from "../../views/auth/LoginWithQR-types.ts";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo.ts";
+import { getOidcClientId } from "../../../utils/oidc/registerClient.ts";
+import SdkConfig from "../../../SdkConfig.ts";
+import Spinner from "../../views/elements/Spinner.tsx";
+
+interface Props {
+    serverConfig: ValidatedServerConfig;
+    isSyncing?: boolean;
+    fragmentAfterLogin: string;
+    defaultDeviceDisplayName?: string; // TODO is this useful?
+    onLoggedIn(this: void, credentials: IMatrixClientCreds, alreadySignedIn: boolean): void;
+}
+
+const QrLogin: FC<Props> = ({ serverConfig, onLoggedIn }) => {
+    const tempClient = useMemo(() => createClient({ baseUrl: serverConfig.hsUrl }), [serverConfig]);
+    const onFinished = useCallback(
+        (success: boolean, credentials?: IMatrixClientCreds) => {
+            if (success) {
+                onLoggedIn(credentials!, true);
+            } else {
+                // TODO handle
+            }
+        },
+        [onLoggedIn],
+    );
+    const clientId = useAsyncMemo(
+        () => getOidcClientId(serverConfig.delegatedAuthentication!, SdkConfig.get().oidc_static_clients),
+        [serverConfig],
+    );
+
+    let body: JSX.Element;
+    if (clientId === undefined) {
+        body = <Spinner />;
+    } else {
+        body = (
+            <LoginWithQR
+                intent={RendezvousIntent.LOGIN_ON_NEW_DEVICE}
+                client={tempClient}
+                onFinished={onFinished}
+                mode={Mode.Show}
+                clientId={clientId}
+            />
+        );
+    }
+
+    // TODO className
+    return (
+        <AuthPage>
+            <AuthHeader />
+            <AuthBody className="mx_AuthBody_forgot-password">{body}</AuthBody>
+        </AuthPage>
+    );
+};
+
+export default QrLogin;
diff --git a/apps/web/src/components/views/auth/DefaultWelcome.tsx b/apps/web/src/components/views/auth/DefaultWelcome.tsx
@@ -5,35 +5,56 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { Button, Heading, Text } from "@vector-im/compound-web";
+import { isSignInWithQRAvailable } from "matrix-js-sdk/src/rendezvous";
+import { createClient } from "matrix-js-sdk/src/matrix";
+import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig.ts";
 import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
 import { isElementBranded } from "../../../branding.ts";
+import { useFeatureEnabled } from "../../../hooks/useSettings.ts";
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig.ts";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo.ts";
+import Spinner from "../elements/Spinner.tsx";
 
-const DefaultWelcome: React.FC = () => {
+interface Props {
+    serverConfig: ValidatedServerConfig;
+}
+
+const DefaultWelcome: React.FC<Props> = ({ serverConfig }) => {
     const brand = SdkConfig.get("brand");
     const branding = SdkConfig.getObject("branding");
     const logoUrl = branding.get("auth_header_logo_url");
 
     const showGuestFunctions = !!MatrixClientPeg.get();
     const isElement = isElementBranded();
 
-    return (
-        <div className="mx_DefaultWelcome">
-            <a href={branding.get("logo_link_url")} target="_blank" rel="noopener" className="mx_DefaultWelcome_logo">
-                <img src={logoUrl} alt={brand} />
-            </a>
-            <Heading as="h1" weight="semibold">
-                {isElement ? _t("welcome|title_element") : _t("welcome|title_generic", { brand })}
-            </Heading>
-            {isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
+    const isQrLoginEnabled = useFeatureEnabled("feature_login_with_qr");
+    const showQrButton = useAsyncMemo(() => {
+        const tempClient = createClient({
+            baseUrl: serverConfig.hsUrl,
+        });
+        return isSignInWithQRAvailable(tempClient);
+    }, [serverConfig]);
+
+    const loading = isQrLoginEnabled && showQrButton === undefined;
 
+    let body: JSX.Element;
+    if (loading) {
+        body = <Spinner />;
+    } else {
+        body = (
             <div className="mx_DefaultWelcome_buttons">
+                {showQrButton && (
+                    <Button as="a" href="#/qr_login" kind="primary" size="sm" Icon={QrCodeIcon}>
+                        {_t("auth|sign_in_with_qr")}
+                    </Button>
+                )}
                 <Button as="a" href="#/login" kind="primary" size="sm">
-                    {_t("action|sign_in")}
+                    {showQrButton ? _t("auth|sign_in_manually") : _t("action|sign_in")}
                 </Button>
                 <Button as="a" href="#/register" kind="secondary" size="sm">
                     {_t("action|create_account")}
@@ -44,6 +65,20 @@ const DefaultWelcome: React.FC = () => {
                     </Button>
                 )}
             </div>
+        );
+    }
+
+    return (
+        <div className="mx_DefaultWelcome">
+            <a href={branding.get("logo_link_url")} target="_blank" rel="noopener" className="mx_DefaultWelcome_logo">
+                <img src={logoUrl} alt={brand} />
+            </a>
+            <Heading as="h1" weight="semibold">
+                {isElement ? _t("welcome|title_element") : _t("welcome|title_generic", { brand })}
+            </Heading>
+            {isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
+
+            {body}
         </div>
     );
 };
diff --git a/apps/web/src/components/views/auth/Welcome.tsx b/apps/web/src/components/views/auth/Welcome.tsx
diff --git a/apps/web/src/i18n/strings/en_EN.json b/apps/web/src/i18n/strings/en_EN.json
diff --git a/apps/web/src/settings/Settings.tsx b/apps/web/src/settings/Settings.tsx
