OIDC: Log in

src/Lifecycle.ts

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020, 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.
@@ -65,6 +65,7 @@ import AbstractLocalStorageSettingsHandler from "./settings/handlers/AbstractLoc
 import { OverwriteLoginPayload } from "./dispatcher/payloads/OverwriteLoginPayload";
 import { SdkContextClass } from "./contexts/SDKContext";
 import { messageForLoginError } from "./utils/ErrorUtils";
+import { completeOidcLogin } from "./utils/oidc/authorize";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -182,13 +183,102 @@ export async function getStoredSessionOwner(): Promise<[string, boolean] | [null
 }
 
 /**
+ * If query string includes OIDC authorization code flow parameters attempt to login using oidc flow
+ * Else, we may be returning from SSO - attempt token login
+ *
  * @param {Object} queryParams    string->string map of the
  *     query-parameters extracted from the real query-string of the starting
  *     URI.
  *
  * @param {string} defaultDeviceDisplayName
  * @param {string} fragmentAfterLogin path to go to after a successful login, only used for "Try again"
  *
+ * @returns {Promise} promise which resolves to true if we completed the delegated auth login
+ *      else false
+ */
+export async function attemptDelegatedAuthLogin(
+    queryParams: QueryDict,
+    defaultDeviceDisplayName?: string,
+    fragmentAfterLogin?: string,
+): Promise<boolean> {
+    if (queryParams.code && queryParams.state) {
+        return attemptOidcNativeLogin(queryParams);
+    }
+
+    return attemptTokenLogin(queryParams, defaultDeviceDisplayName, fragmentAfterLogin);
+}
+
+/**
+ * Attempt to login by completing OIDC authorization code flow
+ * @param queryParams string->string map of the query-parameters extracted from the real query-string of the starting URI.
+ * @returns Promise that resolves to true when login succceeded, else false
+ */
+async function attemptOidcNativeLogin(queryParams: QueryDict): Promise<boolean> {
+    try {
+        const { accessToken, homeserverUrl, identityServerUrl } = await completeOidcLogin(queryParams);
+
+        const {
+            user_id: userId,
+            device_id: deviceId,
+            is_guest: isGuest,
+        } = await getUserIdFromAccessToken(accessToken, homeserverUrl, identityServerUrl);
+
+        const credentials = {
+            accessToken,
+            homeserverUrl,
+            identityServerUrl,
+            deviceId,
+            userId,
+            isGuest,
+        };
+
+        logger.debug("Logged in via OIDC native flow");
+        await onSuccessfulDelegatedAuthLogin(credentials);
+        return true;
+    } catch (error) {
+        logger.error("Failed to login via OIDC", error);
+
+        // TODO(kerrya) nice error messages https://github.com/vector-im/element-web/issues/25665
+        await onFailedDelegatedAuthLogin(_t("Something went wrong."));
+        return false;
+    }
+}
+
+/**
+ * Gets information about the owner of a given access token.
+ * @param accessToken
+ * @param homeserverUrl
+ * @param identityServerUrl
+ * @returns Promise that resolves with whoami response
+ * @throws when whoami request fails
+ */
+async function getUserIdFromAccessToken(
+    accessToken: string,
+    homeserverUrl: string,
+    identityServerUrl?: string,
+): Promise<ReturnType<MatrixClient["whoami"]>> {
+    try {
+        const client = createClient({
+            baseUrl: homeserverUrl,
+            accessToken: accessToken,
+            idBaseUrl: identityServerUrl,
+        });
+
+        return await client.whoami();
+    } catch (error) {
+        logger.error("Failed to retrieve userId using accessToken", error);
+        throw new Error("Failed to retrieve userId using accessToken");
+    }
+}
+
+/**
+ * @param {QueryDict} queryParams    string->string map of the
+ *     query-parameters extracted from the real query-string of the starting
+ *     URI.
+ *
+ * @param {string} defaultDeviceDisplayName
+ * @param {string} fragmentAfterLogin path to go to after a successful login, only used for "Try again"
+ *
  * @returns {Promise} promise which resolves to true if we completed the token
  *    login, else false
  */

src/components/structures/MatrixChat.tsx

@@ -316,13 +316,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         // the first thing to do is to try the token params in the query-string
         // if the session isn't soft logged out (ie: is a clean session being logged in)
         if (!Lifecycle.isSoftLogout()) {
-            Lifecycle.attemptTokenLogin(
+            Lifecycle.attemptDelegatedAuthLogin(
                 this.props.realQueryParams,
                 this.props.defaultDeviceDisplayName,
                 this.getFragmentAfterLogin(),
             ).then(async (loggedIn): Promise<boolean | void> => {
-                if (this.props.realQueryParams?.loginToken) {
-                    // remove the loginToken from the URL regardless
+                if (
+                    this.props.realQueryParams?.loginToken ||
+                    this.props.realQueryParams?.code ||
+                    this.props.realQueryParams?.state
+                ) {
+                    // remove the loginToken or auth code from the URL regardless
                     this.props.onTokenLoginCompleted();
                 }
 
@@ -341,7 +345,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 // if the user has followed a login or register link, don't reanimate
                 // the old creds, but rather go straight to the relevant page
                 const firstScreen = this.screenAfterLogin ? this.screenAfterLogin.screen : null;
-
                 const restoreSuccess = await this.loadSession();
                 if (restoreSuccess) {
                     return true;

src/components/structures/auth/Login.tsx

@@ -477,6 +477,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                         this.props.serverConfig.delegatedAuthentication!,
                         flow.clientId,
                         this.props.serverConfig.hsUrl,
+                        this.props.serverConfig.isUrl,
                     );
                 }}
             >

src/i18n/strings/en_EN.json

@@ -101,6 +101,7 @@
     "Failed to transfer call": "Failed to transfer call",
     "Permission Required": "Permission Required",
     "You do not have permission to start a conference call in this room": "You do not have permission to start a conference call in this room",
+    "Something went wrong.": "Something went wrong.",
     "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.": "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.",
     "We couldn't log you in": "We couldn't log you in",
     "Try again": "Try again",

src/utils/oidc/authorize.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { completeAuthorizationCodeGrant } from "matrix-js-sdk/src/oidc/authorize";
+import { QueryDict } from "matrix-js-sdk/src/utils";
 import { OidcClientConfig } from "matrix-js-sdk/src/autodiscovery";
 import { generateOidcAuthorizationUrl } from "matrix-js-sdk/src/oidc/authorize";
 import { randomString } from "matrix-js-sdk/src/randomstring";
@@ -49,3 +51,45 @@ export const startOidcLogin = async (
 
     window.location.href = authorizationUrl;
 };
+
+/**
+ * Gets `code` and `state` query params
+ *
+ * @param queryParams
+ * @returns code and state
+ * @throws when code and state are not valid strings
+ */
+const getCodeAndStateFromQueryParams = (queryParams: QueryDict): { code: string; state: string } => {
+    const code = queryParams["code"];
+    const state = queryParams["state"];
+
+    if (!code || typeof code !== "string" || !state || typeof state !== "string") {
+        throw new Error("Invalid query parameters for OIDC native login. `code` and `state` are required.");
+    }
+    return { code, state };
+};
+
+/**
+ * Attempt to complete authorization code flow to get an access token
+ * @param queryParams the query-parameters extracted from the real query-string of the starting URI.
+ * @returns Promise that resolves with accessToken, identityServerUrl, and homeserverUrl when login was successful
+ * @throws When we failed to get a valid access token
+ */
+export const completeOidcLogin = async (
+    queryParams: QueryDict,
+): Promise<{
+    homeserverUrl: string;
+    identityServerUrl?: string;
+    accessToken: string;
+}> => {
+    const { code, state } = getCodeAndStateFromQueryParams(queryParams);
+    const { homeserverUrl, tokenResponse, identityServerUrl } = await completeAuthorizationCodeGrant(code, state);
+
+    // @TODO(kerrya) do something with the refresh token https://github.com/vector-im/element-web/issues/25444
+
+    return {
+        homeserverUrl: homeserverUrl,
+        identityServerUrl: identityServerUrl,
+        accessToken: tokenResponse.access_token,
+    };
+};