Port remaining login.spec.ts & soft_logout.spec.ts tests from Cypress to Playwright (#11917)

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

playwright/e2e/login/login.spec.ts

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import { test, expect } from "../../element-web-test";
+import { doTokenRegistration } from "./utils";
 
-test.describe("Consent", () => {
+test.describe("Login", () => {
     test.describe("m.login.password", () => {
         test.use({ startHomeserverOpts: "consent" });
 
@@ -75,4 +76,65 @@ test.describe("Consent", () => {
             await expect(page).toHaveURL(/\/#\/home$/);
         });
     });
+
+    // tests for old-style SSO login, in which we exchange tokens with Synapse, and Synapse talks to an auth server
+    test.describe("SSO login", () => {
+        test.use({
+            startHomeserverOpts: ({ oAuthServer }, use) =>
+                use({
+                    template: "default",
+                    oAuthServerPort: oAuthServer.port,
+                }),
+        });
+
+        test("logs in with SSO and lands on the home screen", async ({ page, homeserver }) => {
+            // If this test fails with a screen showing "Timeout connecting to remote server", it is most likely due to
+            // your firewall settings: Synapse is unable to reach the OIDC server.
+            //
+            // If you are using ufw, try something like:
+            //    sudo ufw allow in on docker0
+            //
+            await doTokenRegistration(page, homeserver);
+        });
+    });
+
+    test.describe("logout", () => {
+        test.use({ startHomeserverOpts: "consent" });
+
+        test("should go to login page on logout", async ({ page, user }) => {
+            await page.getByRole("button", { name: "User menu" }).click();
+            await expect(page.getByText(user.displayName, { exact: true })).toBeVisible();
+
+            // Allow the outstanding requests queue to settle before logging out
+            await page.waitForTimeout(2000);
+
+            await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+            await expect(page).toHaveURL(/\/#\/login$/);
+        });
+    });
+
+    test.describe("logout with logout_redirect_url", () => {
+        test.use({
+            startHomeserverOpts: "consent",
+            config: {
+                // We redirect to decoder-ring because it's a predictable page that isn't Element itself.
+                // We could use example.org, matrix.org, or something else, however this puts dependency of external
+                // infrastructure on our tests. In the same vein, we don't really want to figure out how to ship a
+                // `test-landing.html` page when running with an uncontrolled Element (via `yarn start`).
+                // Using the decoder-ring is just as fine, and we can search for strategic names.
+                logout_redirect_url: "/decoder-ring/",
+            },
+        });
+
+        test("should respect logout_redirect_url", async ({ page, user }) => {
+            await page.getByRole("button", { name: "User menu" }).click();
+            await expect(page.getByText(user.displayName, { exact: true })).toBeVisible();
+
+            // give a change for the outstanding requests queue to settle before logging out
+            await page.waitForTimeout(2000);
+
+            await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+            await expect(page).toHaveURL(/\/decoder-ring\/$/);
+        });
+    });
 });

playwright/e2e/login/soft_logout.spec.ts

@@ -0,0 +1,125 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+import { doTokenRegistration } from "./utils";
+import { Credentials } from "../../plugins/utils/homeserver";
+
+test.describe("Soft logout", () => {
+    test.use({
+        displayName: "Alice",
+        startHomeserverOpts: ({ oAuthServer }, use) =>
+            use({
+                template: "default",
+                oAuthServerPort: oAuthServer.port,
+            }),
+    });
+
+    test.describe("with password user", () => {
+        test("shows the soft-logout page when a request fails, and allows a re-login", async ({ page, user }) => {
+            await interceptRequestsWithSoftLogout(page, user);
+            await expect(page.getByText("You're signed out")).toBeVisible();
+            await page.getByPlaceholder("Password").fill(user.password);
+            await page.getByPlaceholder("Password").press("Enter");
+
+            // back to the welcome page
+            await expect(page).toHaveURL(/\/#\/home/);
+            await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+        });
+
+        test("still shows the soft-logout page when the page is reloaded after a soft-logout", async ({
+            page,
+            user,
+        }) => {
+            await interceptRequestsWithSoftLogout(page, user);
+            await expect(page.getByText("You're signed out")).toBeVisible();
+            await page.reload();
+            await expect(page.getByText("You're signed out")).toBeVisible();
+        });
+    });
+
+    test.describe("with SSO user", () => {
+        test.use({
+            user: async ({ page, homeserver }, use) => {
+                const user = await doTokenRegistration(page, homeserver);
+
+                // Eventually, we should end up at the home screen.
+                await expect(page).toHaveURL(/\/#\/home$/);
+                await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+
+                await use(user);
+            },
+        });
+
+        test("shows the soft-logout page when a request fails, and allows a re-login", async ({ page, user }) => {
+            await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+
+            await interceptRequestsWithSoftLogout(page, user);
+
+            await expect(page.getByText("You're signed out")).toBeVisible();
+            await page.getByRole("button", { name: "Continue with OAuth test" }).click();
+
+            // click the submit button
+            await page.getByRole("button", { name: "Submit" }).click();
+
+            // Synapse prompts us to grant permission to Element
+            await expect(page.getByRole("heading", { name: "Continue to your account" })).toBeVisible();
+            await page.getByRole("link", { name: "Continue" }).click();
+
+            // back to the welcome page
+            await expect(page).toHaveURL(/\/#\/home$/);
+            await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+        });
+    });
+});
+
+/**
+ * Intercept calls to /sync and have them fail with a soft-logout
+ *
+ * Any further requests to /sync with the same access token are blocked.
+ */
+async function interceptRequestsWithSoftLogout(page: Page, user: Credentials): Promise<void> {
+    await page.route("**/_matrix/client/*/sync*", async (route, req) => {
+        const accessToken = await req.headerValue("Authorization");
+
+        // now, if the access token on this request matches the expired one, block it
+        if (accessToken === `Bearer ${user.accessToken}`) {
+            console.log("Intercepting request with soft-logged-out access token");
+            await route.fulfill({
+                status: 401,
+                json: {
+                    errcode: "M_UNKNOWN_TOKEN",
+                    error: "Soft logout",
+                    soft_logout: true,
+                },
+            });
+            return;
+        }
+
+        // otherwise, pass through as normal
+        await route.continue();
+    });
+
+    // do something to make the active /sync return: create a new room
+    await page.evaluate(() => {
+        // don't wait for this to complete: it probably won't, because of the broken sync
+        window.mxMatrixClientPeg.get().createRoom({});
+    });
+
+    await page.waitForResponse((resp) => resp.url().includes("/sync") && resp.status() === 401);
+}

playwright/e2e/login/utils.ts

@@ -0,0 +1,68 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Page, expect } from "@playwright/test";
+
+import { Credentials, HomeserverInstance } from "../../plugins/utils/homeserver";
+
+/** Visit the login page, choose to log in with "OAuth test", register a new account, and redirect back to Element
+ */
+export async function doTokenRegistration(
+    page: Page,
+    homeserver: HomeserverInstance,
+): Promise<Credentials & { displayName: string }> {
+    await page.goto("/#/login");
+
+    await page.getByRole("button", { name: "Edit" }).click();
+    await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.config.baseUrl);
+    await page.getByRole("button", { name: "Continue" }).click();
+    // wait for the dialog to go away
+    await expect(page.locator(".mx_ServerPickerDialog")).toHaveCount(0);
+
+    // click on "Continue with OAuth test"
+    await page.getByRole("button", { name: "Continue with OAuth test" }).click();
+
+    // wait for the Test OAuth Page to load
+    await expect(page.getByText("Test OAuth page")).toBeVisible();
+
+    // click the submit button
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    // Synapse prompts us to pick a user ID
+    await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
+    await page.getByRole("textbox", { name: "Username (required)" }).type("alice");
+
+    // wait for username validation to start, and complete
+    await expect(page.locator("#field-username-output")).toHaveText("");
+    await page.getByRole("button", { name: "Continue" }).click();
+
+    // Synapse prompts us to grant permission to Element
+    page.getByRole("heading", { name: "Continue to your account" });
+    await page.getByRole("link", { name: "Continue" }).click();
+
+    // Eventually, we should end up at the home screen.
+    await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
+    await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+
+    return page.evaluate(() => ({
+        accessToken: window.mxMatrixClientPeg.get().getAccessToken(),
+        userId: window.mxMatrixClientPeg.get().getUserId(),
+        deviceId: window.mxMatrixClientPeg.get().getDeviceId(),
+        homeServer: window.mxMatrixClientPeg.get().getHomeserverUrl(),
+        password: null,
+        displayName: "Alice",
+    }));
+}

playwright/element-web-test.ts

@@ -16,12 +16,14 @@ limitations under the License.
 
 import { test as base, expect } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
+import _ from "lodash";
 
 import type mailhog from "mailhog";
 import type { IConfigOptions } from "../src/IConfigOptions";
-import { HomeserverInstance, StartHomeserverOpts } from "./plugins/utils/homeserver";
+import { Credentials, HomeserverInstance, StartHomeserverOpts } from "./plugins/utils/homeserver";
 import { Synapse } from "./plugins/synapse";
 import { Instance } from "./plugins/mailhog";
+import { OAuthServer } from "./plugins/oauth_server";
 
 const CONFIG_JSON: Partial<IConfigOptions> = {
     // This is deliberately quite a minimal config.json, so that we can test that the default settings
@@ -47,9 +49,16 @@ export const test = base.extend<
     TestOptions & {
         axe: AxeBuilder;
         checkA11y: () => Promise<void>;
+        // The contents of the config.json to send
         config: typeof CONFIG_JSON;
+        // The options with which to run the `homeserver` fixture
         startHomeserverOpts: StartHomeserverOpts | string;
         homeserver: HomeserverInstance;
+        oAuthServer: { port: number };
+        user: Credentials & {
+            displayName: string;
+        };
+        displayName?: string;
         mailhog?: { api: mailhog.API; instance: Instance };
     }
 >({
@@ -57,7 +66,7 @@ export const test = base.extend<
     config: CONFIG_JSON,
     page: async ({ context, page, config, crypto }, use) => {
         await context.route(`http://localhost:8080/config.json*`, async (route) => {
-            const json = { ...config };
+            const json = { ...CONFIG_JSON, ...config };
             if (crypto === "rust") {
                 json["features"] = {
                     ...json["features"],
@@ -66,6 +75,7 @@ export const test = base.extend<
             }
             await route.fulfill({ json });
         });
+
         await use(page);
     },
 
@@ -79,6 +89,49 @@ export const test = base.extend<
         await use(await server.start(opts));
         await server.stop();
     },
+    // eslint-disable-next-line no-empty-pattern
+    oAuthServer: async ({}, use) => {
+        const server = new OAuthServer();
+        const port = server.start();
+        await use({ port });
+        server.stop();
+    },
+
+    displayName: undefined,
+    user: async ({ page, homeserver, displayName: testDisplayName }, use) => {
+        const names = ["Alice", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
+        const username = _.uniqueId("user_");
+        const password = _.uniqueId("password_");
+        const displayName = testDisplayName ?? _.sample(names)!;
+
+        const credentials = await homeserver.registerUser(username, password, displayName);
+        console.log(`Registered test user ${username} with displayname ${displayName}`);
+
+        await page.addInitScript(
+            ({ baseUrl, credentials }) => {
+                // Seed the localStorage with the required credentials
+                window.localStorage.setItem("mx_hs_url", baseUrl);
+                window.localStorage.setItem("mx_user_id", credentials.userId);
+                window.localStorage.setItem("mx_access_token", credentials.accessToken);
+                window.localStorage.setItem("mx_device_id", credentials.deviceId);
+                window.localStorage.setItem("mx_is_guest", "false");
+                window.localStorage.setItem("mx_has_pickle_key", "false");
+                window.localStorage.setItem("mx_has_access_token", "true");
+
+                // Ensure the language is set to a consistent value
+                window.localStorage.setItem("mx_local_settings", '{"language":"en"}');
+            },
+            { baseUrl: homeserver.config.baseUrl, credentials },
+        );
+        await page.goto("/");
+
+        await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+
+        await use({
+            ...credentials,
+            displayName,
+        });
+    },
 
     axe: async ({ page }, use) => {
         await use(new AxeBuilder({ page }));
@@ -98,4 +151,4 @@ export const test = base.extend<
 
 test.use({});
 
-export { expect } from "@playwright/test";
+export { expect };

playwright/plugins/oauth_server/README.md

@@ -0,0 +1,24 @@
+# oauth_server
+
+A very simple OAuth identity provider server.
+
+The following endpoints are exposed:
+
+-   `/oauth/auth.html`: An OAuth2 [authorization endpoint](https://openid.net/specs/openid-connect-core-1_0.html#AuthorizationEndpoint).
+    In a proper OAuth2 system, this would prompt the user to log in; we just give a big "Submit" button (and an
+    auth code that can be changed if we want the next step to fail). It redirects back to the calling application
+    with a "code".
+
+-   `/oauth/token`: An OAuth2 [token endpoint](https://openid.net/specs/openid-connect-core-1_0.html#TokenEndpoint).
+    Receives the code issued by "auth.html" and, if it is valid, exchanges it for an OAuth2 access token.
+
+-   `/oauth/userinfo`: An OAuth2 [userinfo endpoint](https://openid.net/specs/openid-connect-core-1_0.html#UserInfo).
+    Returns details about the owner of the offered access token.
+
+To start the server, do:
+
+```javascript
+cy.task("startOAuthServer").then((port) => {
+    // now we can configure Synapse or Element to talk to the OAuth2 server.
+});
+```

playwright/plugins/oauth_server/index.ts

@@ -0,0 +1,72 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import http from "http";
+import express from "express";
+import { AddressInfo } from "net";
+
+export class OAuthServer {
+    private server?: http.Server;
+
+    public start(): number {
+        if (this.server) this.stop();
+
+        const app = express();
+
+        // static files. This includes the "authorization endpoint".
+        app.use(express.static(__dirname + "/res"));
+
+        // token endpoint (see https://openid.net/specs/openid-connect-core-1_0.html#TokenEndpoint)
+        app.use("/oauth/token", express.urlencoded({ extended: true }));
+        app.post("/oauth/token", (req, res) => {
+            // if the code is valid, accept it. Otherwise, return an error.
+            const code = req.body.code;
+            if (code === "valid_auth_code") {
+                res.send({
+                    access_token: "oauth_access_token",
+                    token_type: "Bearer",
+                    expires_in: "3600",
+                });
+            } else {
+                res.send({ error: "bad auth code" });
+            }
+        });
+
+        // userinfo endpoint (see https://openid.net/specs/openid-connect-core-1_0.html#UserInfo)
+        app.get("/oauth/userinfo", (req, res) => {
+            // TODO: validate that the request carries an auth header which matches the access token we issued above
+
+            // return an OAuth2 user info object
+            res.send({
+                sub: "alice",
+                name: "Alice",
+            });
+        });
+
+        this.server = http.createServer(app);
+        this.server.listen();
+        const address = this.server.address() as AddressInfo;
+        console.log(`Started OAuth server at ${address.address}:${address.port}`);
+        return address.port;
+    }
+
+    public stop(): void {
+        console.log("Stopping OAuth server");
+        const address = this.server.address() as AddressInfo;
+        this.server.close();
+        console.log(`Stopped OAuth server at ${address.address}:${address.port}`);
+    }
+}

playwright/plugins/oauth_server/res/oauth/auth.html

@@ -0,0 +1,42 @@
+<!--
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!--
+A dummy OAuth2 authorization endpoint (see https://openid.net/specs/openid-connect-core-1_0.html#AuthorizationEndpoint)
+
+Mostly, it just redirects back to the `redirect_uri` in the query params.
+-->
+
+<html lang="en">
+    <body>
+        <h1>Test OAuth page</h1>
+
+        <form id="auth_form">
+            <input type="hidden" id="state" name="state" />
+            <label for="code">Auth Code:</label>
+            <input type="text" id="code" name="code" value="valid_auth_code" />
+            <input type="submit" value="Submit" />
+        </form>
+
+        <script>
+            // process the query params, and set up the form
+            const urlParams = new URLSearchParams(window.location.search);
+            console.log("Test OAuth page: query params:", new Map(urlParams.entries()));
+            document.getElementById("auth_form").action = urlParams.get("redirect_uri");
+            document.getElementById("state").value = urlParams.get("state");
+        </script>
+    </body>
+</html>

playwright/plugins/utils/homeserver.ts

@@ -53,5 +53,5 @@ export interface Credentials {
     userId: string;
     deviceId: string;
     homeServer: string;
-    password: string;
+    password: string | null; // null for password-less users
 }

playwright/tsconfig.json

@@ -8,5 +8,5 @@
         "moduleResolution": "node",
         "module": "es2022"
     },
-    "include": ["**/*.ts"]
+    "include": ["**/*.ts", "../src/@types/global.d.ts"]
 }