feature: oidc group membership mapping

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

@@ -1,7 +1,10 @@
+import { faInfoCircle, faWarning } 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 { Button, Switch } from "@app/components/v2";
+import { Button, Switch, Tooltip } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -79,6 +82,29 @@ export const OrgOIDCSection = (): JSX.Element => {
     }
   };
 
+  const handleOIDCGroupManagement = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+
+      if (!subscription?.oidcSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgSlug: currentOrg?.slug,
+        manageGroupMemberships: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} OIDC group membership mapping`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   const addOidcButtonClick = async () => {
     if (subscription?.oidcSSO && currentOrg) {
       handlePopUpOpen("addOIDC");
@@ -148,6 +174,63 @@ export const OrgOIDCSection = (): JSX.Element => {
           Enforce members to authenticate via OIDC to access this organization
         </p>
       </div>
+      <div className="py-4">
+        <div className="mb-2 flex justify-between">
+          <div className="text-md flex items-center text-mineshaft-100">
+            <span>OIDC Group Membership Mapping</span>
+            <Tooltip
+              className="max-w-lg"
+              content={
+                <>
+                  <p>
+                    When this feature is enabled, Infisical will automatically sync group
+                    memberships between the OIDC provider and Infisical. Users will be added to
+                    Infisical groups that match their OIDC group names, and removed from any
+                    Infisical groups not present in their groups claim. When enabled, manual
+                    management of Infisical group memberships will be disabled.
+                  </p>
+                  <p className="mt-4">
+                    To use this feature you must include group claims in the OIDC token.
+                  </p>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline underline-offset-2 hover:text-mineshaft-300"
+                    href="https://infisical.com/docs/documentation/platform/sso/overview"
+                  >
+                    See your OIDC provider docs for details.
+                  </a>
+                  <p className="mt-4 text-yellow">
+                    <FontAwesomeIcon className="mr-1" icon={faWarning} />
+                    Group membership changes in the OIDC provider only sync with Infisical when a
+                    user logs in. For example, if you remove a user from a group in the OIDC
+                    provider, this change will not be reflected in Infisical until their next login.
+                  </p>
+                </>
+              }
+            >
+              <FontAwesomeIcon
+                icon={faInfoCircle}
+                size="sm"
+                className="ml-1 mt-0.5 inline-block text-mineshaft-400"
+              />
+            </Tooltip>
+          </div>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Switch
+                id="enforce-org-auth"
+                isChecked={data?.manageGroupMemberships ?? false}
+                onCheckedChange={(value) => handleOIDCGroupManagement(value)}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Infisical will manage user group memberships based on the OIDC provider
+        </p>
+      </div>
       <OIDCModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}