Add support for redirecting to external pages after logout (#7905)

* Add support for redirecting to external pages after logout

This is primarily useful for deployments where the account is managed and needs to be logged out in other places too, like an SSO system.

See docs for more information.

* Add e2e test and fix Windows instructions

* Fix performance gathering stats

* use logger

src/@types/global.d.ts

@@ -52,6 +52,7 @@ import { ConsoleLogger, IndexedDBLogStore } from "../rageshake/rageshake";
 import ActiveWidgetStore from "../stores/ActiveWidgetStore";
 import { Skinner } from "../Skinner";
 import AutoRageshakeStore from "../stores/AutoRageshakeStore";
+import { ConfigOptions } from "../SdkConfig";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -62,6 +63,7 @@ declare global {
         Olm: {
             init: () => Promise<void>;
         };
+        mxReactSdkConfig: ConfigOptions;
 
         // Needed for Safari, unknown to TypeScript
         webkitAudioContext: typeof AudioContext;

src/Lifecycle.ts

@@ -58,6 +58,7 @@ import LazyLoadingDisabledDialog from "./components/views/dialogs/LazyLoadingDis
 import SessionRestoreErrorDialog from "./components/views/dialogs/SessionRestoreErrorDialog";
 import StorageEvictedDialog from "./components/views/dialogs/StorageEvictedDialog";
 import { setSentryUser } from "./sentry";
+import SdkConfig from "./SdkConfig";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -845,6 +846,13 @@ export async function onLoggedOut(): Promise<void> {
     stopMatrixClient();
     await clearStorage({ deleteEverything: true });
     LifecycleCustomisations.onLoggedOutAndStorageCleared?.();
+
+    // Do this last so we can make sure all storage has been cleared and all
+    // customisations got the memo.
+    if (SdkConfig.get().logout_redirect_url) {
+        logger.log("Redirecting to external provider to finish logout");
+        window.location.href = SdkConfig.get().logout_redirect_url;
+    }
 }
 
 /**

src/SdkConfig.ts

@@ -20,13 +20,17 @@ export interface ISsoRedirectOptions {
     on_welcome_page?: boolean; // eslint-disable-line camelcase
 }
 
+/* eslint-disable camelcase */
 export interface ConfigOptions {
     [key: string]: any;
 
+    logout_redirect_url?: string;
+
     // sso_immediate_redirect is deprecated in favour of sso_redirect_options.immediate
-    sso_immediate_redirect?: boolean;  // eslint-disable-line camelcase
+    sso_immediate_redirect?: boolean;
-    sso_redirect_options?: ISsoRedirectOptions; // eslint-disable-line camelcase
+    sso_redirect_options?: ISsoRedirectOptions;
 }
+/* eslint-enable camelcase*/
 
 export const DEFAULTS: ConfigOptions = {
     // Brand name of the app
@@ -56,14 +60,14 @@ export default class SdkConfig {
         SdkConfig.instance = i;
 
         // For debugging purposes
-        (<any>window).mxReactSdkConfig = i;
+        window.mxReactSdkConfig = i;
     }
 
-    static get() {
+    public static get() {
         return SdkConfig.instance || {};
     }
 
-    static put(cfg: ConfigOptions) {
+    public static put(cfg: ConfigOptions) {
         const defaultKeys = Object.keys(DEFAULTS);
         for (let i = 0; i < defaultKeys.length; ++i) {
             if (cfg[defaultKeys[i]] === undefined) {
@@ -73,11 +77,11 @@ export default class SdkConfig {
         SdkConfig.setInstance(cfg);
     }
 
-    static unset() {
+    public static unset() {
         SdkConfig.setInstance({});
     }
 
-    static add(cfg: ConfigOptions) {
+    public static add(cfg: ConfigOptions) {
         const liveConfig = SdkConfig.get();
         const newConfig = Object.assign({}, liveConfig, cfg);
         SdkConfig.put(newConfig);

test/end-to-end-tests/Windows.md

@@ -8,24 +8,29 @@ and start following these steps to get going:
 3. Run `dos2unix ./test/end-to-end-tests/*.sh ./test/end-to-end-tests/synapse/*.sh ./test/end-to-end-tests/element/*.sh`
 4. Install NodeJS for ubuntu:
    ```bash
-   curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+   curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
    sudo apt-get update
    sudo apt-get install nodejs
    ```
-5. Start Element on Windows through `yarn start`
+5. Run `yarn link` and `yarn install` for all layers from WSL if you haven't already. If you want to switch back to
-6. While that builds... Run:
+   your Windows host after your tests then you'll need to re-run `yarn install` (and possibly `yarn link`) there too.
+   Though, do note that you can access `http://localhost:8080` in your Windows-based browser when running webpack in
+   the WSL environment (it does *not* work the other way around, annoyingly).
+6. In WSL, run `yarn start` at the element-web layer to get things going.
+7. While that builds... Run:
    ```bash
    sudo apt-get install x11-apps
    wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    sudo dpkg -i google-chrome-stable_current_amd64.deb
    sudo apt -f install
    ```
-7. Run: 
+8. Get the IP of your host machine out of WSL: `cat /etc/resolv.conf` - use the nameserver IP.
+9. Run:
    ```bash
    cd ./test/end-to-end-tests
    ./synapse/install.sh
    ./install.sh
-   ./run.sh --app-url http://localhost:8080 --no-sandbox
+   ./run.sh --app-url http://localhost:8080 --log-directory ./logs
    ```
 
 Note that using `yarn test:e2e` probably won't work for you. You might also have to use the config.json from the
@@ -38,3 +43,4 @@ could probably fix this with enough effort, or you could run a headless Chrome i
 Reference material that isn't fully represented in the steps above (but snippets have been borrowed):
 * https://virtualizationreview.com/articles/2017/02/08/graphical-programs-on-windows-subsystem-on-linux.aspx
 * https://gist.github.com/drexler/d70ab957f964dbef1153d46bd853c775
+* https://docs.microsoft.com/en-us/windows/wsl/networking#accessing-windows-networking-apps-from-linux-host-ip

test/end-to-end-tests/src/scenario.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2022 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.
@@ -27,6 +28,7 @@ import { spacesScenarios } from './scenarios/spaces';
 import { RestSession } from "./rest/session";
 import { stickerScenarios } from './scenarios/sticker';
 import { userViewScenarios } from "./scenarios/user-view";
+import { ssoCustomisationScenarios } from "./scenarios/sso-customisations";
 
 export async function scenario(createSession: (s: string) => Promise<ElementSession>,
     restCreator: RestSessionCreator): Promise<void> {
@@ -52,7 +54,7 @@ export async function scenario(createSession: (s: string) => Promise<ElementSess
     console.log("create REST users:");
     const charlies = await createRestUsers(restCreator);
     await lazyLoadingScenarios(alice, bob, charlies);
-    // do spaces scenarios last as the rest of the tests may get confused by spaces
+    // do spaces scenarios last as the rest of the alice/bob tests may get confused by spaces
     await spacesScenarios(alice, bob);
 
     // we spawn another session for stickers, partially because it involves injecting
@@ -63,6 +65,12 @@ export async function scenario(createSession: (s: string) => Promise<ElementSess
     // closing them as we go rather than leaving them all open until the end).
     const stickerSession = await createSession("sally");
     await stickerScenarios("sally", "ilikestickers", stickerSession, restCreator);
+
+    // we spawn yet another session for SSO stuff because it involves authentication and
+    // logout, which can/does affect other tests dramatically. See notes above regarding
+    // stickers for the performance loss of doing this.
+    const ssoSession = await createUser("enterprise_erin");
+    await ssoCustomisationScenarios(ssoSession);
 }
 
 async function createRestUsers(restCreator: RestSessionCreator): Promise<RestMultiSession> {

test/end-to-end-tests/src/scenarios/sso-customisations.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2022 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 { strict as assert } from "assert";
+
+import { ElementSession } from "../session";
+import { logout } from "../usecases/logout";
+import { applyConfigChange } from "../util";
+
+export async function ssoCustomisationScenarios(session: ElementSession): Promise<void> {
+    console.log(" injecting logout customisations for SSO scenarios:");
+
+    await session.delay(1000); // wait for dialogs to close
+    await applyConfigChange(session, {
+        // we redirect to config.json 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 `./run.sh --app-url http://localhost:8080`).
+        // Using the config.json is just as fine, and we can search for strategic names.
+        'logout_redirect_url': '/config.json',
+    });
+
+    await logoutCanCauseRedirect(session);
+}
+
+async function logoutCanCauseRedirect(session: ElementSession): Promise<void> {
+    await logout(session, false); // we'll check the login page ourselves, so don't assert
+
+    session.log.step("waits for redirect to config.json (as external page)");
+    const foundLoginUrl = await session.poll(async () => {
+        const url = session.page.url();
+        return url === session.url('/config.json');
+    });
+    assert(foundLoginUrl);
+    session.log.done();
+}

test/end-to-end-tests/src/usecases/logout.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2022 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 { strict as assert } from 'assert';
+
+import { ElementSession } from "../session";
+
+export async function logout(session: ElementSession, assertLoginPage = true): Promise<void> {
+    session.log.startGroup("logs out");
+
+    session.log.step("navigates to user menu");
+    const userButton = await session.query('.mx_UserMenu > div.mx_AccessibleButton');
+    await userButton.click();
+    session.log.done();
+
+    session.log.step("clicks the 'Sign Out' button");
+    const signOutButton = await session.query('.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut');
+    await signOutButton.click();
+    session.log.done();
+
+    if (assertLoginPage) {
+        const foundLoginUrl = await session.poll(async () => {
+            const url = session.page.url();
+            return url === session.url('/#/login');
+        });
+        assert(foundLoginUrl);
+    }
+
+    session.log.endGroup();
+}

test/end-to-end-tests/src/util.ts

@@ -1,6 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2022 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.
@@ -40,3 +40,14 @@ export const measureStop = function(session: ElementSession, name: string): Prom
         window.mxPerformanceMonitor.stop(_name);
     }, name);
 };
+
+// TODO: Proper types on `config` - for some reason won't accept an import of ConfigOptions.
+export async function applyConfigChange(session: ElementSession, config: any): Promise<void> {
+    await session.page.evaluate((_config) => {
+        // note: we can't *set* the object because the window version is effectively a pointer.
+        for (const [k, v] of Object.entries(_config)) {
+            // @ts-ignore - for some reason it's not picking up on global.d.ts types.
+            window.mxReactSdkConfig[k] = v;
+        }
+    }, config);
+}

test/end-to-end-tests/start.ts

@@ -90,6 +90,10 @@ async function runTests() {
         // Collecting all performance monitoring data before closing the session
         const measurements = await session.page.evaluate(() => {
             let measurements;
+
+            // Some tests do redirects away from the app, so don't count those sessions.
+            if (!window.mxPerformanceMonitor) return JSON.stringify([]);
+
             window.mxPerformanceMonitor.addPerformanceDataCallback({
                 entryNames: [
                     window.mxPerformanceEntryNames.REGISTER,
@@ -111,7 +115,7 @@ async function runTests() {
         performanceEntries = JSON.parse(measurements);
         return session.close();
     }));
-    if (performanceEntries) {
+    if (performanceEntries?.length > 0) {
         fs.writeFileSync(`performance-entries.json`, JSON.stringify(performanceEntries));
     }
     if (failure) {