Fix crash on null idp for SSO buttons (#8650) (#8653)

* Add test case for null identity_providers for SSO

* Fix typing for identity_providers

* Make null idp explicit and handle in analytics

* chore: whitespace fix

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
(cherry picked from commit 60cd740b66)

Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>

src/Login.ts

@@ -51,7 +51,7 @@ export interface IIdentityProvider {
 export interface ISSOFlow {
     type: "m.login.sso" | "m.login.cas";
     // eslint-disable-next-line camelcase
-    identity_providers: IIdentityProvider[];
+    identity_providers?: IIdentityProvider[];
 }
 
 export type LoginFlow = ISSOFlow | IPasswordFlow;

src/components/views/elements/SSOButtons.tsx

@@ -29,7 +29,7 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
 
 interface ISSOButtonProps extends Omit<IProps, "flow"> {
-    idp: IIdentityProvider;
+    idp?: IIdentityProvider;
     mini?: boolean;
 }
 
@@ -84,7 +84,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
     const label = idp ? _t("Continue with %(provider)s", { provider: idp.name }) : _t("Sign in with single sign-on");
 
     const onClick = () => {
-        const authenticationType = getAuthenticationType(idp.brand);
+        const authenticationType = getAuthenticationType(idp?.brand ?? "");
         PosthogAnalytics.instance.setAuthenticationType(authenticationType);
         PlatformPeg.get().startSingleSignOn(matrixClient, loginType, fragmentAfterLogin, idp?.id);
     };

test/components/structures/auth/Login-test.tsx

@@ -146,4 +146,19 @@ describe('Login', function() {
         const ssoButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(root, "mx_SSOButton");
         expect(ssoButtons.length).toBe(3);
     });
+
+    it("should show single SSO button if identity_providers is null", async () => {
+        mockClient.loginFlows.mockResolvedValue({
+            flows: [{
+                "type": "m.login.sso",
+            }],
+        });
+
+        const root = render();
+
+        await flushPromises();
+
+        const ssoButtons = ReactTestUtils.scryRenderedDOMComponentsWithClass(root, "mx_SSOButton");
+        expect(ssoButtons.length).toBe(1);
+    });
 });