OIDC: navigate to authorization endpoint (#11096)

* add delegatedauthentication to validated server config

* dynamic client registration functions

* test OP registration functions

* add stubbed nativeOidc flow setup in Login

* cover more error cases in Login

* tidy

* test dynamic client registration in Login

* comment oidc_static_clients

* register oidc inside Login.getFlows

* strict fixes

* remove unused code

* and imports

* comments

* comments 2

* util functions to get static client id

* check static client ids in login flow

* remove dead code

* OidcRegistrationClientMetadata type

* navigate to oidc authorize url

* navigate to oidc authorize url

* test

* adjust for js-sdk code

* update test for response_mode query

* use new types

* strict

* tidy

src/components/structures/auth/Login.tsx

@@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { ISSOFlow, SSOAction } from "matrix-js-sdk/src/@types/auth";
 
 import { _t, _td, UserFriendlyError } from "../../../languageHandler";
-import Login, { ClientLoginFlow } from "../../../Login";
+import Login, { ClientLoginFlow, OidcNativeFlow } from "../../../Login";
 import { messageForConnectionError, messageForLoginError } from "../../../utils/ErrorUtils";
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import AuthPage from "../../views/auth/AuthPage";
@@ -39,6 +39,7 @@ import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleBu
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import { filterBoolean } from "../../../utils/arrays";
 import { Features } from "../../../settings/Settings";
+import { startOidcLogin } from "../../../utils/oidc/authorize";
 
 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
@@ -146,6 +147,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             "m.login.cas": () => this.renderSsoStep("cas"),
             // eslint-disable-next-line @typescript-eslint/naming-convention
             "m.login.sso": () => this.renderSsoStep("sso"),
+            "oidcNativeFlow": () => this.renderOidcNativeStep(),
         };
     }
 
@@ -433,7 +435,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         if (!this.state.flows) return null;
 
         // this is the ideal order we want to show the flows in
-        const order = ["m.login.password", "m.login.sso"];
+        const order = ["oidcNativeFlow", "m.login.password", "m.login.sso"];
 
         const flows = filterBoolean(order.map((type) => this.state.flows?.find((flow) => flow.type === type)));
         return (
@@ -466,6 +468,25 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         );
     };
 
+    private renderOidcNativeStep = (): React.ReactNode => {
+        const flow = this.state.flows!.find((flow) => flow.type === "oidcNativeFlow")! as OidcNativeFlow;
+        return (
+            <AccessibleButton
+                className="mx_Login_fullWidthButton"
+                kind="primary"
+                onClick={async () => {
+                    await startOidcLogin(
+                        this.props.serverConfig.delegatedAuthentication!,
+                        flow.clientId,
+                        this.props.serverConfig.hsUrl,
+                    );
+                }}
+            >
+                {_t("Continue")}
+            </AccessibleButton>
+        );
+    };
+
     private renderSsoStep = (loginType: "cas" | "sso"): JSX.Element => {
         const flow = this.state.flows?.find((flow) => flow.type === "m.login." + loginType) as ISSOFlow;
 

src/utils/oidc/authorize.ts

@@ -0,0 +1,73 @@
+/*
+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 {
+    AuthorizationParams,
+    generateAuthorizationParams,
+    generateAuthorizationUrl,
+} from "matrix-js-sdk/src/oidc/authorize";
+
+import { ValidatedDelegatedAuthConfig } from "../ValidatedServerConfig";
+
+/**
+ * Store authorization params for retrieval when returning from OIDC OP
+ * @param authorizationParams from `generateAuthorizationParams`
+ * @param delegatedAuthConfig used for future interactions with OP
+ * @param clientId this client's id as registered with configured issuer
+ * @param homeserver target homeserver
+ */
+const storeAuthorizationParams = (
+    { redirectUri, state, nonce, codeVerifier }: AuthorizationParams,
+    { issuer }: ValidatedDelegatedAuthConfig,
+    clientId: string,
+    homeserver: string,
+): void => {
+    window.sessionStorage.setItem(`oidc_${state}_nonce`, nonce);
+    window.sessionStorage.setItem(`oidc_${state}_redirectUri`, redirectUri);
+    window.sessionStorage.setItem(`oidc_${state}_codeVerifier`, codeVerifier);
+    window.sessionStorage.setItem(`oidc_${state}_clientId`, clientId);
+    window.sessionStorage.setItem(`oidc_${state}_issuer`, issuer);
+    window.sessionStorage.setItem(`oidc_${state}_homeserver`, homeserver);
+};
+
+/**
+ * Start OIDC authorization code flow
+ * Generates auth params, stores them in session storage and
+ * Navigates to configured authorization endpoint
+ * @param delegatedAuthConfig from discovery
+ * @param clientId this client's id as registered with configured issuer
+ * @param homeserver target homeserver
+ * @returns Promise that resolves after we have navigated to auth endpoint
+ */
+export const startOidcLogin = async (
+    delegatedAuthConfig: ValidatedDelegatedAuthConfig,
+    clientId: string,
+    homeserver: string,
+): Promise<void> => {
+    // TODO(kerrya) afterloginfragment https://github.com/vector-im/element-web/issues/25656
+    const redirectUri = window.location.origin;
+    const authParams = generateAuthorizationParams({ redirectUri });
+
+    storeAuthorizationParams(authParams, delegatedAuthConfig, clientId, homeserver);
+
+    const authorizationUrl = await generateAuthorizationUrl(
+        delegatedAuthConfig.authorizationEndpoint,
+        clientId,
+        authParams,
+    );
+
+    window.location.href = authorizationUrl;
+};

src/utils/oidc/registerClient.ts

@@ -44,7 +44,6 @@ const getStaticOidcClientId = (issuer: string, staticOidcClients?: Record<string
  */
 export const getOidcClientId = async (
     delegatedAuthConfig: ValidatedDelegatedAuthConfig,
-    // these are used in the following PR
     clientName: string,
     baseUrl: string,
     staticOidcClients?: Record<string, string>,