[Labs] Sign in with QR on new EW using generated QR for MSC4108 v2024 (#33184)

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

* Revert package.json changes

* Prettier

* Fix i18n

* Tidy up

* Remove unused state variable

* Iterate tests

* Partial revert

* Iterate

* Wire up qr_login route

* Iterate UI

* Fix React dev mode double rendering issue

* Fix react key warning

* Hide flow header on login

* Re-roll qr code on channel expiry

* Switch to AbortSignal

* Improve auto-retry QR UX

* Ensure we only show sign in with QR button if enabled

* XXX: enable labs flag on Netlify builds

* Tweak QR code sizing

* Move qr login flow into a dialog to match designs

* Fix null deviceId

* Remove duplicate log

* Iterate

* Fix tests

* Fix types

* Fix tests

* Fix tests

* Make Netlify more useful

* Make Netlify more useful v2

* Update copy

* Refactor QR link flow to use new SDK methods

Requires https://github.com/matrix-org/matrix-js-sdk/pull/5283
For element-hq/wat-internal#188
Split out from https://github.com/element-hq/element-web/pull/33184

* Link to js-sdk branch

* Update tests

* Simplify

* Revert js-sdk linking

* Iterate

* Iterate

* Refactor to handle most of the TODOs

* Remove unused code

* Remove unused code

* Use js-sdk isSignInWithQRAvailable API to simplify code

* Restore app-test.ts

* Improve coverage

* Improve coverage

* Remove unused prop/state

* Iterate

* Fix tests

* Iterate

* Tests

* Handle TODOs

* Docs

* Remove redundant call to crossSignDevice()

* Workaround to remove training slash on the serverName before auto-discovery

* Revert "Workaround to remove training slash on the serverName before auto-discovery"

This reverts commit 0335a8fdd1b8e8d949ab7fca17c76f8fab335b58.

* setLoggedIn not to be used with OIDC flows as it clears storage

as per docs on setLoggedIn we should use restoreSessionFromStorage

* Don't show the security_code_prompt unconditionally(i.e. for the web logging in mobile flow)

* Update LoginWithQRFlow-test.tsx.snap

* Update MatrixChat-test from setLoggedInSpy to restoreSessionSpy

* Add todo for server switch

* Add todo about handling base URL or server name

* Handle server name or base URL being returned

* Format

* Fix loading state height

* Handle the homeserver URL differing during QR code login

* Comments

* Comments

* Register OIDC client ID after homeserver swap

* Make QrLoginDialog async to minimise the impact on bundle size

* Handle unsupported HS earlier in the flow

* Iterate

* Delint

* Fix test

* Discard changes to apps/web/element.io/develop/config.json

---------

Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
Co-authored-by: David Langley <langley.dave@gmail.com>

apps/web/src/utils/oidc/authorize.ts

@@ -76,24 +76,45 @@ const getCodeAndStateFromParams = (
     return { code, state };
 };
 
-type CompleteOidcLoginResponse = {
-    // url of the homeserver selected during login
+/**
+ * Return type for {@link completeOidcLogin}
+ * Contains all the credentials gathered from a successful OIDC login
+ */
+export type CompleteOidcLoginResponse = {
+    /**
+     * URL of the homeserver selected during login
+     */
     homeserverUrl: string;
-    // identity server url as discovered during login
+    /**
+     * Identity server URL as discovered during login
+     */
     identityServerUrl?: string;
-    // accessToken gained from OIDC token issuer
+    /**
+     * Access Token gained from OIDC token issuer
+     */
     accessToken: string;
-    // refreshToken gained from OIDC token issuer, when falsy token cannot be refreshed
+    /**
+     * Refresh Token gained from OIDC token issuer, when falsy token cannot be refreshed
+     */
     refreshToken?: string;
-    // idToken gained from OIDC token issuer
+    /**
+     * ID Token gained from OIDC token issuer
+     */
     idToken?: string;
-    // this client's id as registered with the OIDC issuer
+    /**
+     * This client's ID as registered with the OIDC issuer
+     */
     clientId: string;
-    // issuer used during authentication
+    /**
+     * Issuer used during authentication
+     */
     issuer: string;
-    // claims of the given access token; used during token refresh to validate new tokens
+    /**
+     * Claims of the given access token; used during token refresh to validate new tokens
+     */
     idTokenClaims: IdTokenClaims;
 };
+
 /**
  * Attempt to complete authorization code flow to get an access token
  * @param urlParams the parameters extracted from the app-load URI.