OIDC: add friendly errors

src/Lifecycle.ts

@@ -66,6 +66,7 @@ import { OverwriteLoginPayload } from "./dispatcher/payloads/OverwriteLoginPaylo
 import { SdkContextClass } from "./contexts/SDKContext";
 import { messageForLoginError } from "./utils/ErrorUtils";
 import { completeOidcLogin } from "./utils/oidc/authorize";
+import { getErrorMessage } from "./utils/oidc/error";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -238,8 +239,7 @@ async function attemptOidcNativeLogin(queryParams: QueryDict): Promise<boolean>
     } 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."));
+        await onFailedDelegatedAuthLogin(getErrorMessage(error as Error));
         return false;
     }
 }

src/i18n/strings/en_EN.json

@@ -101,7 +101,6 @@
     "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",
@@ -792,6 +791,7 @@
     "Invite to %(spaceName)s": "Invite to %(spaceName)s",
     "Share your public space": "Share your public space",
     "Unknown App": "Unknown App",
+    "Something went wrong during authentication. Go to the sign in page and try again.": "Something went wrong during authentication. Go to the sign in page and try again.",
     "No media permissions": "No media permissions",
     "You may need to manually permit %(brand)s to access your microphone/webcam": "You may need to manually permit %(brand)s to access your microphone/webcam",
     "This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",

src/utils/oidc/authorize.ts

@@ -20,6 +20,8 @@ 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";
 
+import { OidcClientError } from "./error";
+
 /**
  * Start OIDC authorization code flow
  * Generates auth params, stores them in session storage and
@@ -64,7 +66,7 @@ const getCodeAndStateFromQueryParams = (queryParams: QueryDict): { code: string;
     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.");
+        throw new Error(OidcClientError.InvalidQueryParameters);
     }
     return { code, state };
 };

src/utils/oidc/error.ts

@@ -0,0 +1,41 @@
+/*
+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 { ReactNode } from "react";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { OidcError } from "matrix-js-sdk/src/oidc/error";
+
+import { _t } from "../../languageHandler";
+
+export enum OidcClientError {
+    InvalidQueryParameters = "Invalid query parameters for OIDC native login. `code` and `state` are required.",
+}
+
+export const getErrorMessage = (error: Error | MatrixError): string | ReactNode => {
+    switch (error.message) {
+        case OidcError.MissingOrInvalidStoredState:
+            return _t(
+                "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.",
+            );
+        case OidcClientError.InvalidQueryParameters:
+        case OidcError.CodeExchangeFailed:
+        case OidcError.InvalidBearerTokenResponse:
+        case OidcError.InvalidIdToken:
+        default:
+            return _t("Something went wrong during authentication. Go to the sign in page and try again.");
+    }
+};

test/components/structures/MatrixChat-test.tsx

@@ -41,6 +41,7 @@ import {
     mockClientMethodsUser,
 } from "../../test-utils";
 import * as leaveRoomUtils from "../../../src/utils/leave-behaviour";
+import { OidcClientError } from "../../../src/utils/oidc/error";
 
 jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
     completeAuthorizationCodeGrant: jest.fn(),
@@ -762,10 +763,13 @@ describe("<MatrixChat />", () => {
 
         let loginClient!: ReturnType<typeof getMockClientWithEventEmitter>;
 
-        // for now when OIDC fails for any reason we just bump back to welcome
-        // error handling screens in https://github.com/vector-im/element-web/issues/25665
-        const expectOIDCError = async (): Promise<void> => {
+        const expectOIDCError = async (
+            errorMessage = "Something went wrong during authentication. Go to the sign in page and try again.",
+        ): Promise<void> => {
             await flushPromises();
+            const dialog = await screen.findByRole("dialog");
+
+            expect(within(dialog).getByText(errorMessage)).toBeInTheDocument();
             // just check we're back on welcome page
             expect(document.querySelector(".mx_Welcome")!).toBeInTheDocument();
         };
@@ -811,7 +815,7 @@ describe("<MatrixChat />", () => {
 
             expect(logger.error).toHaveBeenCalledWith(
                 "Failed to login via OIDC",
-                new Error("Invalid query parameters for OIDC native login. `code` and `state` are required."),
+                new Error(OidcClientError.InvalidQueryParameters),
             );
 
             await expectOIDCError();
@@ -866,6 +870,24 @@ describe("<MatrixChat />", () => {
                 mocked(completeAuthorizationCodeGrant).mockRejectedValue(new Error(OidcError.CodeExchangeFailed));
             });
 
+            it("should log and return to welcome page with correct error when login state is not found", async () => {
+                mocked(completeAuthorizationCodeGrant).mockRejectedValue(
+                    new Error(OidcError.MissingOrInvalidStoredState),
+                );
+                getComponent({ realQueryParams });
+
+                await flushPromises();
+
+                expect(logger.error).toHaveBeenCalledWith(
+                    "Failed to login via OIDC",
+                    new Error(OidcError.MissingOrInvalidStoredState),
+                );
+
+                await expectOIDCError(
+                    "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.",
+                );
+            });
+
             it("should log and return to welcome page", async () => {
                 getComponent({ realQueryParams });
 

test/utils/oidc/authorize-test.ts

@@ -22,6 +22,7 @@ import { mocked } from "jest-mock";
 
 import { completeOidcLogin, startOidcLogin } from "../../../src/utils/oidc/authorize";
 import { makeDelegatedAuthConfig } from "../../test-utils/oidc";
+import { OidcClientError } from "../../../src/utils/oidc/error";
 
 jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
     ...jest.requireActual("matrix-js-sdk/src/oidc/authorize"),
@@ -114,9 +115,7 @@ describe("OIDC authorization", () => {
         });
 
         it("should throw when query params do not include state and code", async () => {
-            expect(async () => await completeOidcLogin({})).rejects.toThrow(
-                "Invalid query parameters for OIDC native login. `code` and `state` are required.",
-            );
+            expect(async () => await completeOidcLogin({})).rejects.toThrow(OidcClientError.InvalidQueryParameters);
         });
 
         it("should make request complete authorization code grant", async () => {