Merge pull request #3424 from Infisical/misc/allow-org-admins-to-bypass-sso-enforcement

misc: allow org admins to bypass sso enforcement

frontend/src/pages/auth/AdminLoginPage/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { LoginPage } from "../LoginPage/LoginPage";
+
+export const Route = createFileRoute("/_restrict-login-signup/login/admin")({
+  component: () => <LoginPage isAdmin />
+});

frontend/src/pages/auth/LoginPage/Login.utils.tsx

@@ -33,14 +33,21 @@ export const useNavigateToSelectOrganization = () => {
   const { config } = useServerConfig();
   const navigate = useNavigate();
 
-  const navigateToSelectOrganization = async (cliCallbackPort?: string) => {
+  const navigateToSelectOrganization = async (
+    cliCallbackPort?: string,
+    isFromAdminLogin?: boolean
+  ) => {
     if (!config.defaultAuthOrgId) {
       queryClient.invalidateQueries({ queryKey: userKeys.getUser });
     }
 
     navigate({
       to: "/login/select-organization",
-      search: { callback_port: cliCallbackPort, org_id: config.defaultAuthOrgId }
+      search: {
+        callback_port: cliCallbackPort,
+        org_id: config.defaultAuthOrgId,
+        is_admin_login: isFromAdminLogin
+      }
     });
   };
 

frontend/src/pages/auth/LoginPage/LoginPage.tsx

@@ -8,7 +8,7 @@ import { isLoggedIn } from "@app/hooks/api/reactQuery";
 import { InitialStep, SSOStep } from "./components";
 import { useNavigateToSelectOrganization } from "./Login.utils";
 
-export const LoginPage = () => {
+export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
   const { t } = useTranslation();
   const [step, setStep] = useState(0);
   const [email, setEmail] = useState("");
@@ -44,6 +44,7 @@ export const LoginPage = () => {
       case 0:
         return (
           <InitialStep
+            isAdmin={isAdmin}
             setStep={setStep}
             email={email}
             setEmail={setEmail}

frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx

@@ -26,9 +26,17 @@ type Props = {
   setEmail: (email: string) => void;
   password: string;
   setPassword: (email: string) => void;
+  isAdmin?: boolean;
 };
 
-export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
+export const InitialStep = ({
+  setStep,
+  email,
+  setEmail,
+  password,
+  setPassword,
+  isAdmin
+}: Props) => {
   const navigate = useNavigate();
 
   const { t } = useTranslation();
@@ -62,7 +70,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   };
 
   useEffect(() => {
-    if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    if (serverDetails?.samlDefaultOrgSlug && !isAdmin) {
+      redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    }
   }, [serverDetails?.samlDefaultOrgSlug]);
 
   const handleSaml = () => {
@@ -82,7 +92,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   };
 
   const shouldDisplayLoginMethod = (method: LoginMethod) =>
-    !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
+    isAdmin || !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -120,7 +130,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
 
         if (isLoginSuccessful && isLoginSuccessful.success) {
           // case: login was successful
-          navigateToSelectOrganization();
+          navigateToSelectOrganization(undefined, isAdmin);
           createNotification({
             text: "Successfully logged in",
             type: "success"
@@ -160,7 +170,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
     setIsLoading(false);
   };
 
-  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod) {
+  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod && !isAdmin) {
     return (
       <form
         onSubmit={handleLogin}

frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx

@@ -14,6 +14,7 @@ import { IsCliLoginSuccessful } from "@app/components/utilities/attemptCliLogin"
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Button, Spinner } from "@app/components/v2";
 import { SessionStorageKeys } from "@app/const";
+import { OrgMembershipRole } from "@app/helpers/roles";
 import { useToggle } from "@app/hooks";
 import {
   useGetOrganizations,
@@ -53,6 +54,7 @@ export const SelectOrganizationPage = () => {
   const queryParams = new URLSearchParams(window.location.search);
   const orgId = queryParams.get("org_id");
   const callbackPort = queryParams.get("callback_port");
+  const isAdminLogin = queryParams.get("is_admin_login") === "true";
   const defaultSelectedOrg = organizations.data?.find((org) => org.id === orgId);
 
   const logout = useLogoutUser(true);
@@ -68,7 +70,12 @@ export const SelectOrganizationPage = () => {
 
   const handleSelectOrganization = useCallback(
     async (organization: Organization) => {
-      if (organization.authEnforced) {
+      const canBypassOrgAuth =
+        organization.bypassOrgAuthEnabled &&
+        organization.userRole === OrgMembershipRole.Admin &&
+        isAdminLogin;
+
+      if (organization.authEnforced && !canBypassOrgAuth) {
         // org has an org-level auth method enabled (e.g. SAML)
         // -> logout + redirect to SAML SSO
         await logout.mutateAsync();

frontend/src/pages/auth/SelectOrgPage/route.tsx

@@ -6,13 +6,16 @@ import { SelectOrganizationPage } from "./SelectOrgPage";
 
 export const SelectOrganizationPageQueryParams = z.object({
   org_id: z.string().optional().catch(""),
-  callback_port: z.coerce.number().optional().catch(undefined)
+  callback_port: z.coerce.number().optional().catch(undefined),
+  is_admin_login: z.boolean().optional().catch(false)
 });
 
 export const Route = createFileRoute("/_restrict-login-signup/login/select-organization")({
   component: SelectOrganizationPage,
   validateSearch: zodValidator(SelectOrganizationPageQueryParams),
   search: {
-    middlewares: [stripSearchParams({ org_id: "", callback_port: undefined })]
+    middlewares: [
+      stripSearchParams({ org_id: "", callback_port: undefined, is_admin_login: false })
+    ]
   }
 });

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

@@ -1,7 +1,10 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch } from "@app/components/v2";
+import { Switch, Tooltip } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -52,6 +55,28 @@ export const OrgGeneralAuthSection = () => {
     }
   };
 
+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
     <>
       {/* <div className="py-4">
@@ -72,7 +97,9 @@ export const OrgGeneralAuthSection = () => {
             </div> */}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce SAML SSO</span>
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
               <Switch
@@ -85,9 +112,62 @@ export const OrgGeneralAuthSection = () => {
           </OrgPermissionCan>
         </div>
         <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via SAML to access this organization
+          Enforce users to authenticate via SAML to access this organization
         </p>
       </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass SAML enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx

@@ -82,6 +82,28 @@ export const OrgOIDCSection = (): JSX.Element => {
     }
   };
 
+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.oidcSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await updateOrg({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   const handleOIDCGroupManagement = async (value: boolean) => {
     try {
       if (!currentOrg?.id) return;
@@ -158,7 +180,9 @@ export const OrgOIDCSection = (): JSX.Element => {
       )}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce OIDC SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce OIDC SSO</span>
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
               <Switch
@@ -171,9 +195,62 @@ export const OrgOIDCSection = (): JSX.Element => {
           </OrgPermissionCan>
         </div>
         <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via OIDC to access this organization
+          <span>Enforce users to authenticate via OIDC to access this organization.</span>
         </p>
       </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass OIDC enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
           <div className="text-md flex items-center text-mineshaft-100">