Merge pull request #5062 from Infisical/feat/ENG-4293

feature: allow SSO bypass to be enabled before enabling SSO enforcement

frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -5,7 +6,8 @@ import { twMerge } from "tailwind-merge";
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch, Tooltip } from "@app/components/v2";
+import { Button, Modal, ModalClose, ModalContent, Switch, Tooltip } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -38,11 +40,71 @@ export const OrgGeneralAuthSection = ({
 }) => {
   const { currentOrg } = useOrganization();
   const { subscription } = useSubscription();
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "upgradePlan",
+    "enforceSamlSsoConfirmation"
+  ] as const);
 
   const { mutateAsync } = useUpdateOrg();
 
   const logout = useLogoutUser();
+  const [bypassEnabledInModal, setBypassEnabledInModal] = useState(false);
+  const [enforcementTypeInModal, setEnforcementTypeInModal] = useState<EnforceAuthType | null>(
+    null
+  );
+
+  const handleEnforceSsoConfirm = async () => {
+    if (!currentOrg?.id || !enforcementTypeInModal) return;
+
+    try {
+      if (bypassEnabledInModal && !currentOrg?.bypassOrgAuthEnabled) {
+        await mutateAsync({
+          orgId: currentOrg?.id,
+          bypassOrgAuthEnabled: true
+        });
+      }
+
+      if (enforcementTypeInModal === EnforceAuthType.SAML) {
+        await mutateAsync({
+          orgId: currentOrg?.id,
+          authEnforced: true
+        });
+
+        createNotification({
+          text: "Successfully enabled org-level SAML SSO enforcement",
+          type: "success"
+        });
+
+        handlePopUpToggle("enforceSamlSsoConfirmation", false);
+        setBypassEnabledInModal(false);
+        setEnforcementTypeInModal(null);
+
+        await logout.mutateAsync();
+        window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
+        window.close();
+      } else if (enforcementTypeInModal === EnforceAuthType.GOOGLE) {
+        await mutateAsync({
+          orgId: currentOrg?.id,
+          googleSsoAuthEnforced: true
+        });
+
+        createNotification({
+          text: "Successfully enabled org-level Google SSO enforcement",
+          type: "success"
+        });
+
+        handlePopUpToggle("enforceSamlSsoConfirmation", false);
+        setBypassEnabledInModal(false);
+        setEnforcementTypeInModal(null);
+
+        await logout.mutateAsync();
+        window.open(`/api/v1/sso/redirect/google?org_slug=${currentOrg.slug}`);
+        window.close();
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
   const handleEnforceOrgAuthToggle = async (value: boolean, type: EnforceAuthType) => {
     if (!currentOrg?.id) return;
@@ -53,20 +115,47 @@ export const OrgGeneralAuthSection = ({
         return;
       }
 
+      if (value) {
+        setBypassEnabledInModal(currentOrg?.bypassOrgAuthEnabled ?? false);
+        setEnforcementTypeInModal(EnforceAuthType.SAML);
+        handlePopUpOpen("enforceSamlSsoConfirmation");
+        return;
+      }
+
       await mutateAsync({
         orgId: currentOrg?.id,
         authEnforced: value
       });
-    } else if (type === EnforceAuthType.GOOGLE) {
+
+      createNotification({
+        text: "Successfully disabled org-level SAML SSO enforcement",
+        type: "success"
+      });
+      return;
+    }
+
+    if (type === EnforceAuthType.GOOGLE) {
       if (!subscription?.enforceGoogleSSO) {
         handlePopUpOpen("upgradePlan");
         return;
       }
 
+      if (value) {
+        setBypassEnabledInModal(currentOrg?.bypassOrgAuthEnabled ?? false);
+        setEnforcementTypeInModal(EnforceAuthType.GOOGLE);
+        handlePopUpOpen("enforceSamlSsoConfirmation");
+        return;
+      }
+
       await mutateAsync({
         orgId: currentOrg?.id,
         googleSsoAuthEnforced: value
       });
+
+      createNotification({
+        text: "Successfully disabled org-level Google SSO enforcement",
+        type: "success"
+      });
     } else if (type === EnforceAuthType.OIDC) {
       if (!subscription?.oidcSSO) {
         handlePopUpOpen("upgradePlan");
@@ -77,29 +166,22 @@ export const OrgGeneralAuthSection = ({
         orgId: currentOrg?.id,
         authEnforced: value
       });
-    } else {
-      createNotification({
-        text: `Invalid auth enforcement type ${type}`,
-        type: "error"
-      });
-    }
 
       createNotification({
-      text: `Successfully ${value ? "enabled" : "disabled"} org-level auth`,
+        text: `Successfully ${value ? "enabled" : "disabled"} org-level OIDC SSO enforcement`,
         type: "success"
       });
 
       if (value) {
         await logout.mutateAsync();
-
-      if (type === EnforceAuthType.SAML) {
-        window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
-      } else if (type === EnforceAuthType.GOOGLE) {
-        window.open(`/api/v1/sso/redirect/google?org_slug=${currentOrg.slug}`);
-      }
-
         window.close();
       }
+    } else {
+      createNotification({
+        text: `Invalid auth enforcement type ${type}`,
+        type: "error"
+      });
+    }
   };
 
   const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
@@ -239,7 +321,6 @@ export const OrgGeneralAuthSection = ({
           </p>
         </div>
       </div>
-      {(currentOrg?.authEnforced || currentOrg?.googleSsoAuthEnforced) && (
       <div className="mt-4 py-4">
         <div className="mb-2 flex justify-between">
           <div className="flex items-center gap-1">
@@ -249,15 +330,15 @@ export const OrgGeneralAuthSection = ({
               content={
                 <div>
                   <span>
-                      When enabling admin SSO bypass, we highly recommend enabling MFA enforcement
+                    When enabling admin SSO bypass, we highly recommend enabling MFA enforcement at
-                      at the organization-level for security reasons.
+                    the organization-level for security reasons.
                   </span>
                   <p className="mt-4">
                     In case of a lockout, admins can use the{" "}
                     <a
                       target="_blank"
                       className="underline underline-offset-2 hover:text-mineshaft-300"
-                        href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
+                      href="https://infisical.com/docs/documentation/platform/sso/overview#sso-break-glass"
                       rel="noreferrer"
                     >
                       Admin Login Portal
@@ -300,12 +381,83 @@ export const OrgGeneralAuthSection = ({
           </span>
         </p>
       </div>
-      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="Your current plan does not include access to enforce SAML SSO. To unlock this feature, please upgrade to Infisical Pro plan."
       />
+      <Modal
+        isOpen={popUp.enforceSamlSsoConfirmation.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("enforceSamlSsoConfirmation", isOpen);
+          setBypassEnabledInModal(currentOrg?.bypassOrgAuthEnabled ?? false);
+          if (!isOpen) {
+            setEnforcementTypeInModal(null);
+          }
+        }}
+      >
+        <ModalContent
+          className="max-w-2xl"
+          title={`Enforce ${enforcementTypeInModal === EnforceAuthType.SAML ? "SAML" : "Google"} SSO`}
+        >
+          <NoticeBannerV2
+            title={`Warning: This action will enforce ${enforcementTypeInModal === EnforceAuthType.SAML ? "SAML" : "Google"} SSO authentication`}
+          >
+            <p className="my-2 text-sm text-mineshaft-300">
+              All users will be required to authenticate via{" "}
+              {enforcementTypeInModal === EnforceAuthType.SAML ? "SAML" : "Google"} SSO to access
+              this organization. Other authentication methods will be disabled.
+            </p>
+            <p className="text-sm font-medium text-mineshaft-200">
+              Before proceeding, ensure your{" "}
+              {enforcementTypeInModal === EnforceAuthType.SAML ? "SAML" : "Google"} provider is
+              available and properly configured to avoid access issues.
+            </p>
+          </NoticeBannerV2>
+
+          {!currentOrg?.bypassOrgAuthEnabled && (
+            <div className="mt-4 flex items-center justify-between rounded-md bg-mineshaft-800/50 py-3 pr-1 pl-2">
+              <div className="flex-1 pr-3">
+                <p className="text-sm font-medium text-gray-200">Enable Admin SSO Bypass</p>
+                <p className="mt-1 text-sm text-gray-400">
+                  Allow organization admins to bypass SSO login enforcement if they experience any
+                  issues with their{" "}
+                  {enforcementTypeInModal === EnforceAuthType.SAML ? "SAML" : "Google"} provider
+                </p>
+              </div>
+              <Switch
+                id="bypass-enabled-modal"
+                isChecked={bypassEnabledInModal}
+                onCheckedChange={setBypassEnabledInModal}
+              />
+            </div>
+          )}
+
+          <div className="mt-6 flex gap-2">
+            <Button
+              onClick={handleEnforceSsoConfirm}
+              className="mr-4"
+              size="sm"
+              colorSchema="primary"
+            >
+              Enable Enforcement
+            </Button>
+            <ModalClose asChild>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => {
+                  handlePopUpToggle("enforceSamlSsoConfirmation", false);
+                  setBypassEnabledInModal(currentOrg?.bypassOrgAuthEnabled ?? false);
+                  setEnforcementTypeInModal(null);
+                }}
+              >
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        </ModalContent>
+      </Modal>
     </div>
   );
 };