Merge branch 'ENG-3506' into ENG-3506-LDAP

2026-10-21 06:27:13 +00:00 · 2025-08-27 05:10:49 -04:00
parent 598a026482 8d6461b01d
commit cbc1d951ac
193 changed files with 7318 additions and 1356 deletions
@@ -3,6 +3,7 @@ import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faQuestionCircle, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
@@ -25,7 +26,7 @@ import {
  OrgPermissionMachineIdentityAuthTemplateActions,
  OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
-import { durationToSeconds, getObjectFromSeconds } from "@app/helpers/datetime";
+import { getObjectFromSeconds } from "@app/helpers/datetime";
 import {
  MachineIdentityAuthMethod,
  useAddIdentityLdapAuth,
@@ -334,14 +335,9 @@ export const IdentityLdapAuthForm = ({
        lockoutCounterResetUnit
      } = formData;

-      const lockoutDurationSeconds = durationToSeconds(
-        Number(lockoutDurationValue),
-        lockoutDurationUnit
-      );
-      const lockoutCounterResetSeconds = durationToSeconds(
-        Number(lockoutCounterResetValue),
-        lockoutCounterResetUnit
-      );
+      const lockoutDurationSeconds = ms(`${lockoutDurationValue}${lockoutDurationUnit}`) / 1000;
+      const lockoutCounterResetSeconds =
+        ms(`${lockoutCounterResetValue}${lockoutCounterResetUnit}`) / 1000;

      const basePayload = {
        organizationId: orgId,
@@ -3,6 +3,7 @@ import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
@@ -17,7 +18,7 @@ import {
  Tabs
 } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
-import { durationToSeconds, getObjectFromSeconds } from "@app/helpers/datetime";
+import { getObjectFromSeconds } from "@app/helpers/datetime";
 import {
  useAddIdentityUniversalAuth,
  useGetIdentityUniversalAuth,
@@ -222,14 +223,9 @@ export const IdentityUniversalAuthForm = ({
    try {
      if (!identityId) return;

-      const lockoutDurationSeconds = durationToSeconds(
-        Number(lockoutDurationValue),
-        lockoutDurationUnit
-      );
-      const lockoutCounterResetSeconds = durationToSeconds(
-        Number(lockoutCounterResetValue),
-        lockoutCounterResetUnit
-      );
+      const lockoutDurationSeconds = ms(`${lockoutDurationValue}${lockoutDurationUnit}`) / 1000;
+      const lockoutCounterResetSeconds =
+        ms(`${lockoutCounterResetValue}${lockoutCounterResetUnit}`) / 1000;

      if (data) {
        // update universal auth configuration
@@ -1,7 +1,6 @@
+import ms from "ms";
 import { z } from "zod";

-import { durationToSeconds } from "@app/helpers/datetime";
-
 export function superRefineLockout(
  data: {
    lockoutDurationValue: string;
@@ -44,14 +43,9 @@ export function superRefineLockout(
    }

    if (!isAnyParseError) {
-      const lockoutDurationInSeconds = durationToSeconds(
-        parsedLockoutDuration,
-        lockoutDurationUnit
-      );
-      const lockoutCounterResetInSeconds = durationToSeconds(
-        parsedLockoutCounterReset,
-        lockoutCounterResetUnit
-      );
+      const lockoutDurationInSeconds = ms(`${parsedLockoutDuration}${lockoutDurationUnit}`) / 1000;
+      const lockoutCounterResetInSeconds =
+        ms(`${parsedLockoutCounterReset}${lockoutCounterResetUnit}`) / 1000;

      if (lockoutDurationInSeconds > 86400 || lockoutDurationInSeconds < 30) {
        ctx.addIssue({
@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
+import { RoleOption } from "@app/components/roles";
 import {
  Button,
  FilterableSelect,
@@ -45,7 +46,11 @@ const addMemberFormSchema = z.object({
    )
    .default([]),
  projectRoleSlug: z.string().min(1).default(DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG),
-  organizationRole: z.object({ name: z.string(), slug: z.string() })
+  organizationRole: z.object({
+    name: z.string(),
+    slug: z.string(),
+    description: z.string().optional()
+  })
 });

 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
@@ -238,6 +243,7 @@ export const AddOrgMemberModal = ({
                    getOptionLabel={(option) => option.name}
                    value={value}
                    onChange={onChange}
+                    components={{ Option: RoleOption }}
                  />
                </FormControl>
              )}
@@ -36,7 +36,8 @@ type GithubFormData = BaseFormData &
 type GithubRadarFormData = BaseFormData &
  Pick<TGitHubRadarConnection, "name" | "method" | "description">;

-type GitLabFormData = BaseFormData & Pick<TGitLabConnection, "name" | "method" | "description">;
+type GitLabFormData = BaseFormData &
+  Pick<TGitLabConnection, "name" | "method" | "description" | "credentials">;

 type AzureKeyVaultFormData = BaseFormData &
  Pick<TAzureKeyVaultConnection, "name" | "method" | "description"> &
@@ -147,7 +148,7 @@ export const OAuthCallbackPage = () => {

    clearState(AppConnection.GitLab);

-    const { connectionId, name, description, returnUrl, isUpdate } = formData;
+    const { connectionId, name, description, returnUrl, isUpdate, credentials } = formData;

    try {
      if (isUpdate && connectionId) {
@@ -155,7 +156,8 @@ export const OAuthCallbackPage = () => {
          app: AppConnection.GitLab,
          connectionId,
          credentials: {
-            code: code as string
+            code: code as string,
+            instanceUrl: credentials.instanceUrl as string
          }
        });
      } else {
@@ -165,7 +167,8 @@ export const OAuthCallbackPage = () => {
          description,
          method: GitLabConnectionMethod.OAuth,
          credentials: {
-            code: code as string
+            code: code as string,
+            instanceUrl: credentials.instanceUrl as string
          }
        });
      }
@@ -118,6 +118,7 @@ const Page = () => {
        authMethod={popUp.viewAuthMethod.data?.authMethod}
        lockedOut={popUp.viewAuthMethod.data?.lockedOut || false}
        identityId={identityId}
+        onResetAllLockouts={popUp.viewAuthMethod.data?.refetchIdentity}
      />
    </div>
  );
@@ -2,7 +2,7 @@ import { faCog, faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button } from "@app/components/v2";
+import { Button, Tooltip } from "@app/components/v2";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
 import { IdentityAuthMethod, identityAuthToNameMap, useGetIdentityById } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -16,7 +16,7 @@ type Props = {
 };

 export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: Props) => {
-  const { data } = useGetIdentityById(identityId);
+  const { data, refetch } = useGetIdentityById(identityId);

  return data ? (
    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
@@ -31,7 +31,8 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
              onClick={() =>
                handlePopUpOpen("viewAuthMethod", {
                  authMethod,
-                  lockedOut: data.identity.activeLockoutAuthMethods.includes(authMethod)
+                  lockedOut: data.identity.activeLockoutAuthMethods.includes(authMethod),
+                  refetchIdentity: refetch
                })
              }
              type="button"
@@ -40,7 +41,9 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
              <span>{identityAuthToNameMap[authMethod]}</span>
              <div className="flex gap-2">
                {data.identity.activeLockoutAuthMethods.includes(authMethod) && (
-                  <FontAwesomeIcon icon={faLock} size="xs" className="text-red-400/50" />
+                  <Tooltip content="Auth method has active lockouts">
+                    <FontAwesomeIcon icon={faLock} size="xs" className="text-red-400/50" />
+                  </Tooltip>
                )}
                <FontAwesomeIcon icon={faCog} size="xs" className="text-mineshaft-400" />
              </div>
@@ -13,7 +13,8 @@ export const LockoutFields = ({
  clearLockoutsResult,
  lockedOut,
  identityId,
-  data
+  data,
+  onResetAllLockouts
 }: {
  clearLockoutsResult: UseMutationResult<number, object, { identityId: string }, unknown>;
  lockedOut: boolean;
@@ -24,6 +25,7 @@ export const LockoutFields = ({
    lockoutDurationSeconds: number;
    lockoutCounterResetSeconds: number;
  };
+  onResetAllLockouts: () => void;
 }) => {
  const { mutateAsync, isPending } = clearLockoutsResult;

@@ -37,6 +39,7 @@ export const LockoutFields = ({
        type: "success"
      });
      setLockedOutState(false);
+      onResetAllLockouts();
    } catch (error) {
      console.error(error);
      createNotification({
@@ -59,7 +62,7 @@ export const LockoutFields = ({
              isLoading={isPending}
              colorSchema="secondary"
            >
-              Clear All Lockouts
+              Reset All Lockouts
            </Button>
          )}
        </OrgPermissionCan>
@@ -41,6 +41,7 @@ type Props = {
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  onDeleteAuthMethod: () => void;
+  onResetAllLockouts: () => void;
 };

 type TRevokeOptions = {
@@ -52,8 +53,12 @@ export const Content = ({
  identityId,
  authMethod,
  lockedOut,
-  onDeleteAuthMethod
-}: Pick<Props, "authMethod" | "lockedOut" | "identityId" | "onDeleteAuthMethod">) => {
+  onDeleteAuthMethod,
+  onResetAllLockouts
+}: Pick<
+  Props,
+  "authMethod" | "lockedOut" | "identityId" | "onDeleteAuthMethod" | "onResetAllLockouts"
+>) => {
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

@@ -161,6 +166,7 @@ export const Content = ({
      <Component
        identityId={identityId}
        onDelete={handleDelete}
+        onResetAllLockouts={onResetAllLockouts}
        popUp={popUp}
        handlePopUpOpen={handlePopUpOpen}
        handlePopUpToggle={handlePopUpToggle}
@@ -188,7 +194,8 @@ export const ViewIdentityAuthModal = ({
  onOpenChange,
  authMethod,
  identityId,
-  lockedOut
+  lockedOut,
+  onResetAllLockouts
 }: Omit<Props, "onDeleteAuthMethod">) => {
  if (!identityId || !authMethod) return null;

@@ -200,6 +207,7 @@ export const ViewIdentityAuthModal = ({
          authMethod={authMethod}
          lockedOut={lockedOut}
          onDeleteAuthMethod={() => onOpenChange(false)}
+          onResetAllLockouts={() => onResetAllLockouts()}
        />
      </ModalContent>
    </Modal>
@@ -16,7 +16,8 @@ export const ViewIdentityLdapAuthContent = ({
  handlePopUpOpen,
  onDelete,
  popUp,
-  lockedOut
+  lockedOut,
+  onResetAllLockouts
 }: ViewAuthMethodProps) => {
  const { data, isPending } = useGetIdentityLdapAuth(identityId);
  const clearLockoutsResult = useClearIdentityLdapAuthLockouts();
@@ -106,6 +107,7 @@ export const ViewIdentityLdapAuthContent = ({
        lockedOut={lockedOut}
        clearLockoutsResult={clearLockoutsResult}
        data={data}
+        onResetAllLockouts={onResetAllLockouts}
      />
    </ViewIdentityContentWrapper>
  );
@@ -22,7 +22,8 @@ export const ViewIdentityUniversalAuthContent = ({
  handlePopUpOpen,
  onDelete,
  popUp,
-  lockedOut
+  lockedOut,
+  onResetAllLockouts
 }: ViewAuthMethodProps) => {
  const { data, isPending } = useGetIdentityUniversalAuth(identityId);
  const { data: clientSecrets = [], isPending: clientSecretsPending } =
@@ -94,6 +95,7 @@ export const ViewIdentityUniversalAuthContent = ({
        lockedOut={lockedOut}
        clearLockoutsResult={clearLockoutsResult}
        data={data}
+        onResetAllLockouts={onResetAllLockouts}
      />
      <div className="col-span-2 my-3">
        <div className="mb-3 border-b border-mineshaft-500 pb-2">
@@ -10,4 +10,5 @@ export type ViewAuthMethodProps = {
  ) => void;
  popUp: UsePopUpState<["revokeAuthMethod", "upgradePlan", "identityAuthMethod"]>;
  lockedOut: boolean;
+  onResetAllLockouts: () => void;
 };
@@ -1,13 +1,14 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { durationToSeconds, getObjectFromSeconds } from "@app/helpers/datetime";
+import { getObjectFromSeconds } from "@app/helpers/datetime";
 import { useUpdateOrg } from "@app/hooks/api";

 const MAX_SHARED_SECRET_LIFETIME_SECONDS = 30 * 24 * 60 * 60; // 30 days in seconds
@@ -25,7 +26,7 @@ const formSchema = z
  .superRefine((data, ctx) => {
    const { maxLifetimeValue, maxLifetimeUnit } = data;

-    const durationInSeconds = durationToSeconds(maxLifetimeValue, maxLifetimeUnit);
+    const durationInSeconds = ms(`${maxLifetimeValue}${maxLifetimeUnit}`) / 1000;

    if (durationInSeconds > MAX_SHARED_SECRET_LIFETIME_SECONDS) {
      ctx.addIssue({
@@ -90,10 +91,8 @@ export const OrgSecretShareLimitSection = () => {

  const handleFormSubmit = async (formData: TForm) => {
    try {
-      const maxSharedSecretLifetimeSeconds = durationToSeconds(
-        formData.maxLifetimeValue,
-        formData.maxLifetimeUnit
-      );
+      const maxSharedSecretLifetimeSeconds =
+        ms(`${formData.maxLifetimeValue}${formData.maxLifetimeUnit}`) / 1000;

      await mutateAsync({
        orgId: currentOrg.id,
@@ -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>
  );
 };
@@ -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}
@@ -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">
@@ -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>
  );
 };
@@ -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)}