Add Playwright tests for OIDC-aware & OIDC-native (#12252)

* Resolve race condition between opening settings & well-known check in OIDC mode

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add OIDC-aware and OIDC-native tests using MAS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -175,6 +175,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         // the enabled flag value.
         const canChangePassword = !changePasswordCap || changePasswordCap["enabled"] !== false;
 
+        await this.context.oidcClientStore.readyPromise; // wait for the store to be ready
         const externalAccountManagementUrl = this.context.oidcClientStore.accountManagementEndpoint;
         // https://spec.matrix.org/v1.7/client-server-api/#m3pid_changes-capability
         // We support as far back as v1.1 which doesn't have m.3pid_changes

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -173,7 +173,10 @@ const SessionManagerTab: React.FC = () => {
      * delegated auth provider.
      * See https://github.com/matrix-org/matrix-spec-proposals/pull/3824
      */
-    const delegatedAuthAccountUrl = sdkContext.oidcClientStore.accountManagementEndpoint;
+    const delegatedAuthAccountUrl = useAsyncMemo(async () => {
+        await sdkContext.oidcClientStore.readyPromise; // wait for the store to be ready
+        return sdkContext.oidcClientStore.accountManagementEndpoint;
+    }, [sdkContext.oidcClientStore]);
     const disableMultipleSignout = !!delegatedAuthAccountUrl;
 
     const userId = matrixClient?.getUserId();

src/stores/oidc/OidcClientStore.ts

@@ -30,17 +30,25 @@ import PlatformPeg from "../../PlatformPeg";
 export class OidcClientStore {
     private oidcClient?: OidcClient;
     private initialisingOidcClientPromise: Promise<void> | undefined;
-    private authenticatedIssuer?: string;
+    private authenticatedIssuer?: string; // set only in OIDC-native mode
     private _accountManagementEndpoint?: string;
+    /**
+     * Promise which resolves once this store is read to use, which may mean there is no OIDC client if we're in legacy mode,
+     * or we just have the account management endpoint if running in OIDC-aware mode.
+     */
+    public readonly readyPromise: Promise<void>;
 
     public constructor(private readonly matrixClient: MatrixClient) {
+        this.readyPromise = this.init();
+    }
+
+    private async init(): Promise<void> {
         this.authenticatedIssuer = getStoredOidcTokenIssuer();
         if (this.authenticatedIssuer) {
-            this.getOidcClient();
+            await this.getOidcClient();
         } else {
-            matrixClient.waitForClientWellKnown().then((wellKnown) => {
-                this._accountManagementEndpoint = getDelegatedAuthAccountUrl(wellKnown);
-            });
+            const wellKnown = await this.matrixClient.waitForClientWellKnown();
+            this._accountManagementEndpoint = getDelegatedAuthAccountUrl(wellKnown);
         }
     }