From 5f5d62a285b0138e9fb5b19f845b52afd19f268e Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:27:51 +0100
Subject: [PATCH] Fix: Selecting SAML enforced organization

---
 .../src/pages/login/select-organization.tsx   | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/login/select-organization.tsx b/frontend/src/pages/login/select-organization.tsx
index d60a06fd3..464cc24a0 100644
--- a/frontend/src/pages/login/select-organization.tsx
+++ b/frontend/src/pages/login/select-organization.tsx
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Spinner } from "@app/components/v2";
 import { useUser } from "@app/context";
 import { useGetOrganizations, useLogoutUser, useSelectOrganization } from "@app/hooks/api";
+import { Organization } from "@app/hooks/api/types";
 import { isLoggedIn } from "@app/reactQuery";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
 
@@ -44,14 +45,20 @@ export default function LoginPage() {
   }, [logout, router]);
 
   const handleSelectOrganization = useCallback(
-    async (orgId: string) => {
-      console.log("Selected organization: ", orgId);
+    async (organization: Organization) => {
+      if (organization.authEnforced) {
+        // org has an org-level auth method enabled (e.g. SAML)
+        // -> logout + redirect to SAML SSO
 
-      const { token } = await selectOrg.mutateAsync({ organizationId: orgId });
+        await logout.mutateAsync();
+        window.open(`/api/v1/sso/redirect/saml2/organizations/${organization.slug}`);
+        window.close();
+        return;
+      }
 
-      console.log("Organization selected successfully", { token });
+      await selectOrg.mutateAsync({ organizationId: organization.id });
 
-      navigateUserToOrg(router, orgId);
+      navigateUserToOrg(router, organization.id);
     },
     [selectOrg]
   );
@@ -106,23 +113,20 @@ export default function LoginPage() {
             {organizations.isLoading ? (
               <Spinner />
             ) : (
-              organizations.data
-                ?.concat(organizations.data)
-                .concat(organizations.data)
-                .map((org) => (
-                  <div
-                    onClick={() => handleSelectOrganization(org.id)}
-                    key={org.id}
-                    className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 capitalize text-gray-200 shadow-md transition-colors hover:bg-mineshaft-600"
-                  >
-                    <p className="transition-colors">{org.name}</p>
+              organizations.data?.map((org) => (
+                <div
+                  onClick={() => handleSelectOrganization(org)}
+                  key={org.id}
+                  className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 capitalize text-gray-200 shadow-md transition-colors hover:bg-mineshaft-600"
+                >
+                  <p className="transition-colors">{org.name}</p>
 
-                    <FontAwesomeIcon
-                      icon={faArrowRight}
-                      className="text-gray-400 transition-colors group-hover:text-primary-500"
-                    />
-                  </div>
-                ))
+                  <FontAwesomeIcon
+                    icon={faArrowRight}
+                    className="text-gray-400 transition-colors group-hover:text-primary-500"
+                  />
+                </div>
+              ))
             )}
           </div>