PoC Sign in with QR on new EW using generated QR for MSC4108 v2024

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: 196px;
+            width: 196px;
         }
-        height: 1.3em;
-        margin-right: $spacing-8;
-        vertical-align: middle;
     }
 
     .mx_LoginWithQR_confirmationDigits {

apps/web/src/Lifecycle.ts

@@ -302,26 +302,16 @@ async function attemptOidcNativeLogin(
         const { accessToken, refreshToken, homeserverUrl, identityServerUrl, idToken, clientId, issuer } =
             await completeOidcLogin(urlParams, responseMode);
 
-        const {
-            user_id: userId,
-            device_id: deviceId,
-            is_guest: isGuest,
-        } = await getUserIdFromAccessToken(accessToken, homeserverUrl, identityServerUrl);
-
-        const credentials = {
+        await configureFromCompletedOAuthLogin({
             accessToken,
             refreshToken,
             homeserverUrl,
             identityServerUrl,
-            deviceId,
-            userId,
-            isGuest,
-        };
+            clientId,
+            issuer,
+            idToken,
+        });
 
-        logger.debug("Logged in via OIDC native flow");
-        await onSuccessfulDelegatedAuthLogin(credentials);
-        // this needs to happen after success handler which clears storages
-        persistOidcAuthenticatedSettings(clientId, issuer, idToken);
         return true;
     } catch (error) {
         logger.error("Failed to login via OIDC", error);
@@ -331,6 +321,46 @@ async function attemptOidcNativeLogin(
     }
 }
 
+export async function configureFromCompletedOAuthLogin({
+    accessToken,
+    refreshToken,
+    homeserverUrl,
+    identityServerUrl,
+    clientId,
+    issuer,
+    idToken,
+}: {
+    accessToken: string;
+    refreshToken?: string;
+    homeserverUrl: string;
+    identityServerUrl?: string;
+    clientId: string;
+    issuer: string;
+    idToken: string;
+}): Promise<IMatrixClientCreds> {
+    const {
+        user_id: userId,
+        device_id: deviceId,
+        is_guest: isGuest,
+    } = await getUserIdFromAccessToken(accessToken, homeserverUrl, identityServerUrl);
+
+    const credentials = {
+        accessToken,
+        refreshToken,
+        homeserverUrl,
+        identityServerUrl,
+        deviceId,
+        userId,
+        isGuest,
+    };
+
+    logger.debug("Logged in via OIDC native flow");
+    await onSuccessfulDelegatedAuthLogin(credentials);
+    // this needs to happen after success handler which clears storages
+    persistOidcAuthenticatedSettings(clientId, issuer, idToken);
+    return credentials;
+}
+
 /**
  * Gets information about the owner of a given access token.
  * @param accessToken

apps/web/src/Login.ts

@@ -18,6 +18,7 @@ import {
     type ISSOFlow,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { isSignInWithQRAvailable } from "matrix-js-sdk/src/rendezvous";
 
 import { type IMatrixClientCreds } from "./MatrixClientPeg";
 import { ModuleRunner } from "./modules/ModuleRunner";
@@ -31,7 +32,12 @@ import { isUserRegistrationSupported } from "./utils/oidc/isUserRegistrationSupp
  * LoginFlow type use the client API /login endpoint
  * OidcNativeFlow is specific to this client
  */
-export type ClientLoginFlow = LoginFlow | OidcNativeFlow;
+export type ClientLoginFlow = LoginFlow | OidcNativeFlow | LoginWithQrFlow;
+
+export interface LoginWithQrFlow {
+    type: "loginWithQrFlow";
+    clientId: string;
+}
 
 interface ILoginOptions {
     defaultDeviceDisplayName?: string;
@@ -116,7 +122,17 @@ export default class Login {
                     SdkConfig.get().oidc_static_clients,
                     isRegistration,
                 );
-                return [oidcFlow];
+                let possibleQrFlow: LoginWithQrFlow | undefined;
+                try {
+                    // TODO: this seems wasteful
+                    const tempClient = this.createTemporaryClient();
+                    // we reuse the clientId from the oidcFlow for QR login
+                    // it might be that we later find that the homeserver is different and we initialise a new client
+                    possibleQrFlow = await tryInitLoginWithQRFlow(tempClient, oidcFlow.clientId);
+                } catch (e) {
+                    logger.warn("Could not fetch server versions for login with QR support, assuming unsupported", e);
+                }
+                return possibleQrFlow ? [possibleQrFlow, oidcFlow] : [oidcFlow];
             } catch (error) {
                 logger.error("Failed to get oidc native flow", error);
             }
@@ -288,3 +304,20 @@ export async function sendLoginRequest(
 
     return creds;
 }
+
+const tryInitLoginWithQRFlow = async (
+    tempClient: MatrixClient,
+    clientId: string,
+): Promise<LoginWithQrFlow | undefined> => {
+    // This could fail because the server doesn't support the API or it requires authentication
+    const canUseServer = await isSignInWithQRAvailable(tempClient);
+
+    if (!canUseServer) return undefined;
+
+    const flow = {
+        type: "loginWithQrFlow",
+        clientId,
+    } satisfies LoginWithQrFlow;
+
+    return flow;
+};

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",

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,
 

apps/web/src/components/structures/MatrixChat.tsx

@@ -142,11 +142,21 @@ 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";
 
-const AUTH_SCREENS = ["register", "mobile_register", "login", "forgot_password", "start_sso", "start_cas", "welcome"];
+const AUTH_SCREENS = [
+    "register",
+    "mobile_register",
+    "login",
+    "qr_login",
+    "forgot_password",
+    "start_sso",
+    "start_cas",
+    "welcome",
+];
 
 // Actions that are redirected through the onboarding process prior to being
 // re-dispatched. NOTE: some actions are non-trivial and would require
@@ -736,6 +746,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
                 this.viewLogin();
                 break;
+            case "start_qr_login":
+                this.setStateForNewView({
+                    view: Views.QR_LOGIN,
+                });
+                this.notifyNewScreen("qr_login");
+                break;
             case "start_password_recovery":
                 this.setStateForNewView({
                     view: Views.FORGOT_PASSWORD,
@@ -1857,6 +1873,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 params: params,
             });
             PerformanceMonitor.instance.start(PerformanceEntryNames.LOGIN);
+        } else if (screen === "qr_login") {
+            dis.dispatch({
+                action: "start_qr_login",
+                params: params,
+            });
+            PerformanceMonitor.instance.start(PerformanceEntryNames.LOGIN);
         } else if (screen === "forgot_password") {
             dis.dispatch({
                 action: "start_password_recovery",
@@ -2121,9 +2143,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * Note: SSO users (and any others using token login) currently do not pass through
      * this, as they instead jump straight into the app after `attemptTokenLogin`.
      */
-    private onUserCompletedLoginFlow = async (credentials: IMatrixClientCreds): Promise<void> => {
+    private onUserCompletedLoginFlow = async (
+        credentials: IMatrixClientCreds,
+        alreadySignedIn = false,
+    ): Promise<void> => {
         // Create and start the client
-        await Lifecycle.setLoggedIn(credentials);
+        if (!alreadySignedIn) {
+            await Lifecycle.setLoggedIn(credentials);
+        }
         await this.postLoginSetup();
 
         PerformanceMonitor.instance.stop(PerformanceEntryNames.LOGIN);
@@ -2150,7 +2177,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         if (
             initialScreenAfterLogin &&
             // XXX: workaround for https://github.com/vector-im/element-web/issues/11643 causing a login-loop
-            !["welcome", "login", "register", "start_sso", "start_cas"].includes(initialScreenAfterLogin.screen)
+            !["welcome", "login", "qr_login", "register", "start_sso", "start_cas"].includes(
+                initialScreenAfterLogin.screen,
+            )
         ) {
             fragmentAfterLogin = `/${initialScreenAfterLogin.screen}`;
         }
@@ -2219,7 +2248,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 = (
@@ -2262,6 +2291,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