Merge remote-tracking branch 'origin/main' into feat/azurePkiConnector

frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx

@@ -11,7 +11,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AllProjectView } from "./components/AllProjectView";
 import { MyProjectView } from "./components/MyProjectView";
-import { ProjectListToggle, ProjectListView } from "./components/ProjectListToggle";
+import { ProjectListView } from "./components/ProjectListToggle";
 
 // const formatDescription = (type: ProjectType) => {
 //   if (type === ProjectType.SecretManager)
@@ -28,7 +28,23 @@ import { ProjectListToggle, ProjectListView } from "./components/ProjectListTogg
 export const ProjectsPage = () => {
   const { t } = useTranslation();
 
-  const [projectListView, setProjectListView] = useState(ProjectListView.MyProjects);
+  const [projectListView, setProjectListView] = useState<ProjectListView>(() => {
+    const storedView = localStorage.getItem("projectListView");
+
+    if (
+      storedView &&
+      (storedView === ProjectListView.AllProjects || storedView === ProjectListView.MyProjects)
+    ) {
+      return storedView;
+    }
+
+    return ProjectListView.MyProjects;
+  });
+
+  const handleSetProjectListView = (value: ProjectListView) => {
+    localStorage.setItem("projectListView", value);
+    setProjectListView(value);
+  };
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
     "addNewWs",
@@ -49,11 +65,7 @@ export const ProjectsPage = () => {
       </Helmet>
       <div className="mb-4 flex flex-col items-start justify-start">
         <PageHeader
-          title={
-            <div className="flex items-center gap-4">
-              <ProjectListToggle value={projectListView} onChange={setProjectListView} />
-            </div>
-          }
+          title="Projects"
           description="Your team's complete security toolkit - organized and ready when you need them."
         />
       </div>
@@ -62,12 +74,16 @@ export const ProjectsPage = () => {
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
+          projectListView={projectListView}
+          onProjectListViewChange={handleSetProjectListView}
         />
       ) : (
         <AllProjectView
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
+          projectListView={projectListView}
+          onProjectListViewChange={handleSetProjectListView}
         />
       )}
       <NewProjectModal

frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx

@@ -49,11 +49,17 @@ import {
   useSearchProjects
 } from "@app/hooks/api";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import {
+  ProjectListToggle,
+  ProjectListView
+} from "@app/pages/organization/ProjectsPage/components/ProjectListToggle";
 
 type Props = {
   onAddNewProject: () => void;
   onUpgradePlan: () => void;
   isAddingProjectsAllowed: boolean;
+  projectListView: ProjectListView;
+  onProjectListViewChange: (value: ProjectListView) => void;
 };
 
 type RequestAccessModalProps = {
@@ -106,7 +112,9 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
 export const AllProjectView = ({
   onAddNewProject,
   onUpgradePlan,
-  isAddingProjectsAllowed
+  isAddingProjectsAllowed,
+  projectListView,
+  onProjectListViewChange
 }: Props) => {
   const navigate = useNavigate();
   const [searchFilter, setSearchFilter] = useState("");
@@ -176,10 +184,10 @@ export const AllProjectView = ({
   return (
     <div>
       <div className="flex w-full flex-row">
-        <div className="flex-grow" />
+        <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-          containerClassName="w-full"
+          containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
@@ -242,7 +250,7 @@ export const AllProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <Tooltip content="Disabled across All Project view.">
             <div className="flex cursor-not-allowed items-center justify-center">
               <IconButton

frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx

@@ -44,11 +44,17 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import {
+  ProjectListToggle,
+  ProjectListView
+} from "@app/pages/organization/ProjectsPage/components/ProjectListToggle";
 
 type Props = {
   onAddNewProject: () => void;
   onUpgradePlan: () => void;
   isAddingProjectsAllowed: boolean;
+  projectListView: ProjectListView;
+  onProjectListViewChange: (value: ProjectListView) => void;
 };
 
 enum ProjectOrderBy {
@@ -63,7 +69,9 @@ enum ProjectsViewMode {
 export const MyProjectView = ({
   onAddNewProject,
   onUpgradePlan,
-  isAddingProjectsAllowed
+  isAddingProjectsAllowed,
+  projectListView,
+  onProjectListViewChange
 }: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
@@ -371,10 +379,10 @@ export const MyProjectView = ({
   return (
     <div>
       <div className="flex w-full flex-row">
-        <div className="flex-grow" />
+        <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-          containerClassName="w-full"
+          containerClassName="w-full ml-2"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
@@ -441,7 +449,7 @@ export const MyProjectView = ({
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
-        <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+        <div className="ml-2 flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <IconButton
             variant="outline_bg"
             onClick={() => {

frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx

@@ -1,7 +1,4 @@
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Select, SelectItem } from "@app/components/v2";
+import { Button } from "@app/components/v2";
 
 export enum ProjectListView {
   MyProjects = "my-projects",
@@ -14,28 +11,32 @@ type Props = {
 };
 
 export const ProjectListToggle = ({ value, onChange }: Props) => {
-  const getDisplayText = (listView: ProjectListView) => {
-    return listView === ProjectListView.MyProjects ? "My Projects" : "All Projects";
-  };
-
   return (
-    <div className="group relative flex cursor-pointer items-center gap-2">
-      <h1 className="text-3xl font-semibold transition-colors group-hover:text-gray-500">
-        {getDisplayText(value)}
-      </h1>
-      <Select
-        value={value}
-        onValueChange={onChange}
-        className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
-        position="popper"
+    <div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+      <Button
+        variant="outline_bg"
+        onClick={() => {
+          onChange(ProjectListView.MyProjects);
+        }}
+        size="xs"
+        className={`${
+          value === ProjectListView.MyProjects ? "bg-mineshaft-500" : "bg-transparent"
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
       >
-        <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
-        <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
-      </Select>
-      <FontAwesomeIcon
-        icon={faChevronDown}
-        className="text-lg transition-colors group-hover:text-gray-500"
-      />
+        My Projects
+      </Button>
+      <Button
+        variant="outline_bg"
+        onClick={() => {
+          onChange(ProjectListView.AllProjects);
+        }}
+        size="xs"
+        className={`${
+          value === ProjectListView.AllProjects ? "bg-mineshaft-500" : "bg-transparent"
+        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
+      >
+        All Projects
+      </Button>
     </div>
   );
 };

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

@@ -1,5 +1,6 @@
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
@@ -14,7 +15,21 @@ import {
 import { useLogoutUser, useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-export const OrgGeneralAuthSection = () => {
+enum EnforceAuthType {
+  SAML = "saml",
+  GOOGLE = "google",
+  OIDC = "oidc"
+}
+
+export const OrgGeneralAuthSection = ({
+  isSamlConfigured,
+  isOidcConfigured,
+  isGoogleConfigured
+}: {
+  isSamlConfigured: boolean;
+  isOidcConfigured: boolean;
+  isGoogleConfigured: boolean;
+}) => {
   const { currentOrg } = useOrganization();
   const { subscription } = useSubscription();
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
@@ -23,27 +38,61 @@ export const OrgGeneralAuthSection = () => {
 
   const logout = useLogoutUser();
 
-  const handleEnforceOrgAuthToggle = async (value: boolean) => {
+  const handleEnforceOrgAuthToggle = async (value: boolean, type: EnforceAuthType) => {
     try {
       if (!currentOrg?.id) return;
-      if (!subscription?.samlSSO) {
-        handlePopUpOpen("upgradePlan");
-        return;
+
+      if (type === EnforceAuthType.SAML) {
+        if (!subscription?.samlSSO) {
+          handlePopUpOpen("upgradePlan");
+          return;
+        }
+
+        await mutateAsync({
+          orgId: currentOrg?.id,
+          authEnforced: value
+        });
+      } else if (type === EnforceAuthType.GOOGLE) {
+        if (!subscription?.enforceGoogleSSO) {
+          handlePopUpOpen("upgradePlan");
+          return;
+        }
+
+        await mutateAsync({
+          orgId: currentOrg?.id,
+          googleSsoAuthEnforced: value
+        });
+      } else if (type === EnforceAuthType.OIDC) {
+        if (!subscription?.oidcSSO) {
+          handlePopUpOpen("upgradePlan");
+          return;
+        }
+
+        await mutateAsync({
+          orgId: currentOrg?.id,
+          authEnforced: value
+        });
+      } else {
+        createNotification({
+          text: `Invalid auth enforcement type ${type}`,
+          type: "error"
+        });
       }
 
-      await mutateAsync({
-        orgId: currentOrg?.id,
-        authEnforced: value
-      });
-
       createNotification({
-        text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
+        text: `Successfully ${value ? "enabled" : "disabled"} org-level auth`,
         type: "success"
       });
 
       if (value) {
         await logout.mutateAsync();
-        window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
+
+        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();
       }
     } catch (err) {
@@ -78,45 +127,91 @@ export const OrgGeneralAuthSection = () => {
   };
 
   return (
-    <>
-      {/* <div className="py-4">
-                <div className="mb-2 flex justify-between">
-                    <h3 className="text-md text-mineshaft-100">Allow users to send invites</h3>
-                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-                        {(isAllowed) => (
-                            <Switch
-                                id="allow-org-invites"
-                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                                isChecked={currentOrg?.authEnforced ?? false}
-                                isDisabled={!isAllowed}
-                            />
-                        )}
-                    </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
-            </div> */}
-      <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">Enforce SAML SSO</span>
-          </div>
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-            {(isAllowed) => (
-              <Switch
-                id="enforce-org-auth"
-                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                isChecked={currentOrg?.authEnforced ?? false}
-                isDisabled={!isAllowed}
-              />
-            )}
-          </OrgPermissionCan>
-        </div>
-        <p className="text-sm text-mineshaft-300">
-          Enforce users to authenticate via SAML to access this organization
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <div>
+        <p className="text-xl font-semibold text-gray-200">SSO Enforcement</p>
+        <p className="mb-2 mt-1 text-gray-400">
+          Manage strict enforcement of specific authentication methods for your organization.
         </p>
       </div>
-      {currentOrg?.authEnforced && (
-        <div className="py-4">
+      <div className="flex flex-col gap-2 py-4">
+        <div className={twMerge("mt-4", !isSamlConfigured && "hidden")}>
+          <div className="mb-2 flex justify-between">
+            <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
+                  id="enforce-saml-auth"
+                  onCheckedChange={(value) =>
+                    handleEnforceOrgAuthToggle(value, EnforceAuthType.SAML)
+                  }
+                  isChecked={currentOrg?.authEnforced ?? false}
+                  isDisabled={!isAllowed || currentOrg?.googleSsoAuthEnforced}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            Enforce users to authenticate via SAML to access this organization.
+            <br />
+            When this is enabled your organization members will only be able to login with SAML.
+          </p>
+        </div>
+
+        <div className={twMerge("mt-4", !isOidcConfigured && "hidden")}>
+          <div className="mb-2 flex justify-between">
+            <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
+                  id="enforce-oidc-auth"
+                  isChecked={currentOrg?.authEnforced ?? false}
+                  onCheckedChange={(value) =>
+                    handleEnforceOrgAuthToggle(value, EnforceAuthType.OIDC)
+                  }
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            Enforce users to authenticate via OIDC to access this organization.
+            <br />
+            When this is enabled your organization members will only be able to login with OIDC.
+          </p>
+        </div>
+
+        <div className={twMerge("mt-2", !isGoogleConfigured && "hidden")}>
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enforce Google SSO</span>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="enforce-google-sso"
+                  onCheckedChange={(value) =>
+                    handleEnforceOrgAuthToggle(value, EnforceAuthType.GOOGLE)
+                  }
+                  isChecked={currentOrg?.googleSsoAuthEnforced ?? false}
+                  isDisabled={!isAllowed || currentOrg?.authEnforced}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            Enforce users to authenticate via Google to access this organization.
+            <br />
+            When this is enabled your organization members will only be able to login with Google.
+          </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">
               <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
@@ -125,8 +220,8 @@ export const OrgGeneralAuthSection = () => {
                 content={
                   <div>
                     <span>
-                      When this is enabled, we strongly recommend enforcing MFA at the organization
-                      level.
+                      When enabling admin SSO bypass, we highly recommend enabling MFA enforcement
+                      at the organization-level for security reasons.
                     </span>
                     <p className="mt-4">
                       In case of a lockout, admins can use the{" "}
@@ -182,6 +277,6 @@ export const OrgGeneralAuthSection = () => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
       />
-    </>
+    </div>
   );
 };

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

@@ -95,43 +95,25 @@ export const OrgLDAPSection = (): JSX.Element => {
   };
 
   return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="mb-4">
       <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">LDAP</h2>
-          <div className="flex">
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
-              {(isAllowed) => (
-                <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
-                  Manage
-                </Button>
-              )}
-            </OrgPermissionCan>
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <p className="text-xl font-semibold text-gray-200">LDAP</p>
+            <p className="mb-2 text-gray-400">Manage LDAP authentication configuration</p>
           </div>
-        </div>
-        <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
-      </div>
-      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">LDAP Group Mappings</h2>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
             {(isAllowed) => (
-              <Button
-                onClick={openLDAPGroupMapModal}
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-              >
+              <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
                 Manage
               </Button>
             )}
           </OrgPermissionCan>
         </div>
-        <p className="text-sm text-mineshaft-300">
-          Manage how LDAP groups are mapped to internal groups in Infisical
-        </p>
       </div>
+
       {data && (
-        <div className="py-4">
+        <div className="pt-4">
           <div className="mb-2 flex items-center justify-between">
             <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
             <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
@@ -152,6 +134,27 @@ export const OrgLDAPSection = (): JSX.Element => {
           </p>
         </div>
       )}
+
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">LDAP Group Mappings</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
+            {(isAllowed) => (
+              <Button
+                onClick={openLDAPGroupMapModal}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
+                Configure
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Manage how LDAP groups are mapped to internal groups in Infisical
+        </p>
+      </div>
+
       <LDAPModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}

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

@@ -11,7 +11,7 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
-import { useGetOIDCConfig, useLogoutUser, useUpdateOrg } from "@app/hooks/api";
+import { useGetOIDCConfig } from "@app/hooks/api";
 import { useUpdateOIDCConfig } from "@app/hooks/api/oidcConfig/mutations";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -23,9 +23,7 @@ export const OrgOIDCSection = (): JSX.Element => {
 
   const { data, isPending } = useGetOIDCConfig(currentOrg?.id ?? "");
   const { mutateAsync } = useUpdateOIDCConfig();
-  const { mutateAsync: updateOrg } = useUpdateOrg();
 
-  const logout = useLogoutUser();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "addOIDC",
     "upgradePlan"
@@ -54,56 +52,6 @@ export const OrgOIDCSection = (): JSX.Element => {
     }
   };
 
-  const handleEnforceOrgAuthToggle = async (value: boolean) => {
-    try {
-      if (!currentOrg?.id) return;
-      if (!subscription?.oidcSSO) {
-        handlePopUpOpen("upgradePlan");
-        return;
-      }
-
-      await updateOrg({
-        orgId: currentOrg?.id,
-        authEnforced: value
-      });
-
-      createNotification({
-        text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
-        type: "success"
-      });
-
-      if (value) {
-        await logout.mutateAsync();
-        window.open(`/api/v1/sso/oidc/login?orgSlug=${currentOrg.slug}`);
-        window.close();
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  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;
@@ -136,25 +84,22 @@ export const OrgOIDCSection = (): JSX.Element => {
   };
 
   return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">OIDC</h2>
-          {!isPending && (
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
-              {(isAllowed) => (
-                <Button
-                  onClick={addOidcButtonClick}
-                  colorSchema="secondary"
-                  isDisabled={!isAllowed}
-                >
-                  Manage
-                </Button>
-              )}
-            </OrgPermissionCan>
-          )}
+    <div className="mb-4 rounded-lg border-mineshaft-600 bg-mineshaft-900">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xl font-semibold text-gray-200">OIDC</p>
+          <p className="mb-2 text-gray-400">Manage OIDC authentication configuration</p>
         </div>
-        <p className="text-sm text-mineshaft-300">Manage OIDC authentication configuration</p>
+
+        {!isPending && (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Button onClick={addOidcButtonClick} colorSchema="secondary" isDisabled={!isAllowed}>
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
       </div>
       {data && (
         <div className="py-4">
@@ -178,88 +123,6 @@ export const OrgOIDCSection = (): JSX.Element => {
           </p>
         </div>
       )}
-      <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">Enforce OIDC SSO</span>
-          </div>
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-            {(isAllowed) => (
-              <Switch
-                id="enforce-org-auth"
-                isChecked={currentOrg?.authEnforced ?? false}
-                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                isDisabled={!isAllowed}
-              />
-            )}
-          </OrgPermissionCan>
-        </div>
-        <p className="text-sm text-mineshaft-300">
-          <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{" "}
-                      <a
-                        target="_blank"
-                        className="underline underline-offset-2 hover:text-mineshaft-300"
-                        href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
-                        rel="noreferrer"
-                      >
-                        Admin Login Portal
-                      </a>{" "}
-                      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">

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

@@ -79,25 +79,24 @@ export const OrgSSOSection = (): JSX.Element => {
   };
 
   return (
-    <>
-      <hr className="border-mineshaft-600" />
-      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">SAML</h2>
-          {!isPending && (
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
-              {(isAllowed) => (
-                <Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
-                  Manage
-                </Button>
-              )}
-            </OrgPermissionCan>
-          )}
+    <div className="space-y-4">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xl font-semibold text-gray-200">SAML</p>
+          <p className="mb-2 text-gray-400">Manage SAML authentication configuration</p>
         </div>
-        <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
+        {!isPending && (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
       </div>
-      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
+      <div>
+        <div className="mb-2 flex items-center justify-between pt-4">
           <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
           {!isPending && (
             <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
@@ -126,6 +125,6 @@ export const OrgSSOSection = (): JSX.Element => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use SAML SSO if you switch to Infisical's Pro plan."
       />
-    </>
+    </div>
   );
 };

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

@@ -49,13 +49,19 @@ export const OrgSsoTab = withPermission(
     );
     const areConfigsLoading = isLoadingOidcConfig || isLoadingSamlConfig || isLoadingLdapConfig;
 
-    const shouldDisplaySection = (method: LoginMethod) =>
-      !enabledLoginMethods || enabledLoginMethods.includes(method);
+    const shouldDisplaySection = (method: LoginMethod[] | LoginMethod) => {
+      if (Array.isArray(method)) {
+        return method.some((m) => !enabledLoginMethods || enabledLoginMethods.includes(m));
+      }
 
-    const isOidcConfigured = oidcConfig && (oidcConfig.discoveryURL || oidcConfig.issuer);
+      return !enabledLoginMethods || enabledLoginMethods.includes(method);
+    };
+
+    const isOidcConfigured = Boolean(oidcConfig && (oidcConfig.discoveryURL || oidcConfig.issuer));
     const isSamlConfigured =
       samlConfig && (samlConfig.entryPoint || samlConfig.issuer || samlConfig.cert);
     const isLdapConfigured = ldapConfig && ldapConfig.url;
+    const isGoogleConfigured = shouldDisplaySection(LoginMethod.GOOGLE);
 
     const shouldShowCreateIdentityProviderView =
       !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
@@ -65,11 +71,14 @@ export const OrgSsoTab = withPermission(
       shouldDisplaySection(LoginMethod.OIDC) ||
       shouldDisplaySection(LoginMethod.LDAP) ? (
         <>
-          <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-            <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
-            <p className="mb-2 mt-1 text-gray-400">
-              Connect your identity provider to simplify user management
-            </p>
+          <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+            <div>
+              <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
+              <p className="mb-2 mt-1 text-gray-400">
+                Connect your identity provider to simplify user management with options like SAML,
+                OIDC, and LDAP.
+              </p>
+            </div>
             {shouldDisplaySection(LoginMethod.SAML) && (
               <div
                 className={twMerge(
@@ -169,20 +178,27 @@ export const OrgSsoTab = withPermission(
 
     return (
       <>
-        {shouldShowCreateIdentityProviderView ? (
-          createIdentityProviderView
-        ) : (
-          <>
-            {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && (
-              <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-                <OrgGeneralAuthSection />
-                <OrgSSOSection />
+        <div className="space-y-4">
+          {shouldDisplaySection([LoginMethod.SAML, LoginMethod.GOOGLE]) && (
+            <OrgGeneralAuthSection
+              isSamlConfigured={isSamlConfigured}
+              isOidcConfigured={isOidcConfigured}
+              isGoogleConfigured={isGoogleConfigured}
+            />
+          )}
+
+          {shouldShowCreateIdentityProviderView ? (
+            createIdentityProviderView
+          ) : (
+            <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+              <div>
+                {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && <OrgSSOSection />}
+                {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
+                {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
               </div>
-            )}
-            {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
-            {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
-          </>
-        )}
+            </div>
+          )}
+        </div>
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}