feat: multiple auth methods for identities

frontend/src/components/v2/Badge/Badge.tsx

@@ -15,7 +15,8 @@ const badgeVariants = cva(
       variant: {
         primary: "bg-yellow/20 text-yellow",
         danger: "bg-red/20 text-red",
-        success: "bg-green/20 text-green"
+        success: "bg-green/20 text-green",
+        info: "bg-blue-500/20 text-blue-500"
       }
     }
   }

frontend/src/components/v2/Select/Select.tsx

@@ -127,8 +127,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
           cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2
           pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
           isSelected && "bg-primary",
-          isDisabled &&
-            "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
+          isDisabled && "cursor-not-allowed  text-gray-600 opacity-80 hover:!bg-transparent",
           className
         )}
         ref={forwardedRef}

frontend/src/hooks/api/identities/mutations.tsx

@@ -137,6 +137,7 @@ export const useUpdateIdentityUniversalAuth = () => {
   return useMutation<IdentityUniversalAuth, {}, UpdateIdentityUniversalAuthDTO>({
     mutationFn: async ({
       identityId,
+
       clientSecretTrustedIps,
       accessTokenTTL,
       accessTokenMaxTTL,

frontend/src/hooks/api/identities/types.ts

@@ -12,7 +12,7 @@ export type IdentityTrustedIp = {
 export type Identity = {
   id: string;
   name: string;
-  authMethod?: IdentityAuthMethod;
+  authMethods: IdentityAuthMethod[];
   createdAt: string;
   updatedAt: string;
 };

frontend/src/views/Org/IdentityPage/IdentityPage.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useState } from "react";
 import { useRouter } from "next/router";
 import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -19,12 +20,15 @@ import {
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { withPermission } from "@app/hoc";
 import {
+  IdentityAuthMethod,
   useDeleteIdentity,
   useGetIdentityById,
   useRevokeIdentityTokenAuthToken,
-  useRevokeIdentityUniversalAuthClientSecret} from "@app/hooks/api";
+  useRevokeIdentityUniversalAuthClientSecret
+} from "@app/hooks/api";
+import { Identity } from "@app/hooks/api/identities/types";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from"@app/views/Org/Types";
+import { TabSections } from "@app/views/Org/Types";
 
 import { IdentityAuthMethodModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal";
 import { IdentityModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal";
@@ -49,6 +53,10 @@ export const IdentityPage = withPermission(
     const { mutateAsync: revokeToken } = useRevokeIdentityTokenAuthToken();
     const { mutateAsync: revokeClientSecret } = useRevokeIdentityUniversalAuthClientSecret();
 
+    const [selectedAuthMethod, setSelectedAuthMethod] = useState<
+      Identity["authMethods"][number] | null
+    >(null);
+
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "identity",
       "deleteIdentity",
@@ -124,7 +132,7 @@ export const IdentityPage = withPermission(
 
     const onDeleteClientSecretSubmit = async ({ clientSecretId }: { clientSecretId: string }) => {
       try {
-        if (!data?.identity.id) return;
+        if (!data?.identity.id || selectedAuthMethod !== IdentityAuthMethod.UNIVERSAL_AUTH) return;
 
         await revokeClientSecret({
           identityId: data?.identity.id,
@@ -208,12 +216,13 @@ export const IdentityPage = withPermission(
                           handlePopUpOpen("identityAuthMethod", {
                             identityId,
                             name: data.identity.name,
-                            authMethod: data.identity.authMethod
+                            authMethod: selectedAuthMethod,
+                            allAuthMethods: data.identity.authMethods
                           });
                         }}
                         disabled={!isAllowed}
                       >
-                        {`${data.identity.authMethod ? "Edit" : "Configure"} Auth Method`}
+                        {`${data.identity.authMethods?.[0] ? "Edit" : "Configure"} Auth Method`}
                       </DropdownMenuItem>
                     )}
                   </OrgPermissionCan>
@@ -247,6 +256,8 @@ export const IdentityPage = withPermission(
               <div className="mr-4 w-96">
                 <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
                 <IdentityAuthenticationSection
+                  selectedAuthMethod={selectedAuthMethod}
+                  setSelectedAuthMethod={setSelectedAuthMethod}
                   identityId={identityId}
                   handlePopUpOpen={handlePopUpOpen}
                 />

frontend/src/views/Org/IdentityPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx

@@ -1,15 +1,13 @@
-import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import { useEffect } from "react";
+import { faPencil, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  IconButton,
-  // Button,
-  Tooltip
-} from "@app/components/v2";
+import { IconButton, Select, SelectItem, Tooltip } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useGetIdentityById } from "@app/hooks/api";
 import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
+import { Identity } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityClientSecrets } from "./IdentityClientSecrets";
@@ -17,6 +15,8 @@ import { IdentityTokens } from "./IdentityTokens";
 
 type Props = {
   identityId: string;
+  setSelectedAuthMethod: (authMethod: Identity["authMethods"][number] | null) => void;
+  selectedAuthMethod: Identity["authMethods"][number] | null;
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
       [
@@ -33,16 +33,34 @@ type Props = {
   ) => void;
 };
 
-export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: Props) => {
+export const IdentityAuthenticationSection = ({
+  identityId,
+  setSelectedAuthMethod,
+  selectedAuthMethod,
+  handlePopUpOpen
+}: Props) => {
   const { data } = useGetIdentityById(identityId);
+
+  useEffect(() => {
+    if (!data?.identity) return;
+
+    if (data.identity.authMethods?.length) {
+      setSelectedAuthMethod(data.identity.authMethods[0]);
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => setSelectedAuthMethod(null);
+  }, [data?.identity]);
+
   return data ? (
     <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">Authentication</h3>
+
         <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
           {(isAllowed) => {
             return (
-              <Tooltip content={`${data.identity.authMethod ? "Edit" : "Configure"} Auth Method`}>
+              <Tooltip content="Add new auth method">
                 <IconButton
                   isDisabled={!isAllowed}
                   ariaLabel="copy icon"
@@ -52,31 +70,68 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
                     handlePopUpOpen("identityAuthMethod", {
                       identityId,
                       name: data.identity.name,
-                      authMethod: data.identity.authMethod
+                      // authMethod: IdentityAuthMethod.UNIVERSAL_AUTH,
+                      allAuthMethods: data.identity.authMethods
                     })
                   }
                 >
-                  <FontAwesomeIcon icon={faPencil} />
+                  <FontAwesomeIcon icon={faPlus} />
                 </IconButton>
               </Tooltip>
             );
           }}
         </OrgPermissionCan>
       </div>
+      <div className="flex w-full items-center gap-2 pt-2">
+        {data.identity.authMethods.length > 0 && (
+          <>
+            <div className="w-full">
+              <Select
+                className="w-full"
+                value={selectedAuthMethod as string}
+                onValueChange={(value) => setSelectedAuthMethod(value as IdentityAuthMethod)}
+              >
+                {(data.identity?.authMethods || []).map((authMethod) => (
+                  <SelectItem key={authMethod || authMethod} value={authMethod}>
+                    {identityAuthToNameMap[authMethod]}
+                  </SelectItem>
+                ))}
+              </Select>
+            </div>
+            <div>
+              <Tooltip content="Edit auth method">
+                <IconButton
+                  onClick={() => {
+                    handlePopUpOpen("identityAuthMethod", {
+                      identityId,
+                      name: data.identity.name,
+                      authMethod: selectedAuthMethod,
+                      allAuthMethods: data.identity.authMethods
+                    });
+                  }}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>{" "}
+            </div>
+          </>
+        )}
+      </div>
       <div className="py-4">
         <div className="flex justify-between">
           <p className="text-sm font-semibold text-mineshaft-300">Auth Method</p>
         </div>
         <p className="text-sm text-mineshaft-300">
-          {data.identity.authMethod
-            ? identityAuthToNameMap[data.identity.authMethod]
-            : "Not configured"}
+          {selectedAuthMethod ? identityAuthToNameMap[selectedAuthMethod] : "Not configured"}
         </p>
       </div>
-      {data.identity.authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
+      {selectedAuthMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
         <IdentityClientSecrets identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
       )}
-      {data.identity.authMethod === IdentityAuthMethod.TOKEN_AUTH && (
+      {selectedAuthMethod === IdentityAuthMethod.TOKEN_AUTH && (
         <IdentityTokens identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
       )}
     </div>

frontend/src/views/Org/IdentityPage/components/IdentityClientSecretModal.tsx

@@ -62,6 +62,8 @@ export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) =
     identityId: string;
   };
 
+  console.log(popUpData);
+
   const onFormSubmit = async ({ description, ttl, numUsesLimit }: FormData) => {
     try {
       const { clientSecret } = await createClientSecret({

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -5,12 +5,14 @@ import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
 import {
+  Badge,
   DeleteActionModal,
   FormControl,
   Modal,
   ModalContent,
   Select,
   SelectItem,
+  Tooltip,
   UpgradePlanModal
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
@@ -43,6 +45,16 @@ type Props = {
   ) => void;
 };
 
+type TRevokeOptions = {
+  identityId: string;
+  organizationId: string;
+};
+
+type TRevokeMethods = {
+  revokeMethod: (revokeOptions: TRevokeOptions) => Promise<any>;
+  render: () => JSX.Element;
+};
+
 const identityAuthMethods = [
   { label: "Token Auth", value: IdentityAuthMethod.TOKEN_AUTH },
   { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH },
@@ -86,187 +98,123 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
   });
 
   useEffect(() => {
-    // reset form on open
-    if (popUp.identityAuthMethod.isOpen)
+    if (popUp.identityAuthMethod.isOpen) {
       reset({ authMethod: popUp?.identityAuthMethod?.data?.authMethod });
+    }
   }, [popUp.identityAuthMethod.isOpen]);
 
+  const watchedAuthMethod = watch("authMethod");
+
   const identityAuthMethodData = {
     identityId: popUp?.identityAuthMethod.data?.identityId,
     name: popUp?.identityAuthMethod?.data?.name,
-    authMethod: watch("authMethod")
+    authMethod: watch("authMethod"),
+    configuredAuthMethods: popUp?.identityAuthMethod?.data?.allAuthMethods
   } as {
     identityId: string;
     name: string;
     authMethod?: IdentityAuthMethod;
+    configuredAuthMethods?: IdentityAuthMethod[];
   };
 
+  const isSelectedAuthAlreadyConfigured =
+    identityAuthMethodData?.configuredAuthMethods?.includes(watchedAuthMethod);
+
   useEffect(() => {
-    if (identityAuthMethodData?.authMethod) {
-      setValue("authMethod", identityAuthMethodData.authMethod);
-      return;
-    }
+    if (popUp?.identityAuthMethod?.data?.authMethod) {
+      setValue("authMethod", popUp?.identityAuthMethod?.data?.authMethod);
+    } else {
+      const firstAuthMethodNotConfiguredAuthMethod = identityAuthMethods.find(
+        ({ value }) => !identityAuthMethodData?.configuredAuthMethods?.includes(value)
+      );
 
-    setValue("authMethod", IdentityAuthMethod.UNIVERSAL_AUTH);
-  }, [identityAuthMethodData?.authMethod]);
-
-  const onRevokeAuthMethodSubmit = async (authMethod: IdentityAuthMethod) => {
-    if (!orgId || !authMethod) return;
-    try {
-      switch (authMethod) {
-        case IdentityAuthMethod.UNIVERSAL_AUTH: {
-          await revokeUniversalAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        case IdentityAuthMethod.TOKEN_AUTH: {
-          await revokeTokenAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        case IdentityAuthMethod.KUBERNETES_AUTH: {
-          await revokeKubernetesAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        case IdentityAuthMethod.GCP_AUTH: {
-          await revokeGcpAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        case IdentityAuthMethod.AWS_AUTH: {
-          await revokeAwsAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        case IdentityAuthMethod.AZURE_AUTH: {
-          await revokeAzureAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        case IdentityAuthMethod.OIDC_AUTH: {
-          await revokeOidcAuth({
-            identityId: identityAuthMethodData.identityId,
-            organizationId: orgId
-          });
-          break;
-        }
-        default:
-          break;
+      if (firstAuthMethodNotConfiguredAuthMethod) {
+        setValue("authMethod", firstAuthMethodNotConfiguredAuthMethod.value);
       }
+    }
+  }, [popUp.identityAuthMethod.isOpen]);
 
-      createNotification({
-        text: `Successfully removed ${identityAuthToNameMap[authMethod]} on ${identityAuthMethodData.name}`,
-        type: "success"
-      });
+  const methodMap: Record<IdentityAuthMethod, TRevokeMethods | undefined> = {
+    [IdentityAuthMethod.UNIVERSAL_AUTH]: {
+      revokeMethod: revokeUniversalAuth,
+      render: () => (
+        <IdentityUniversalAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
 
-      handlePopUpToggle("revokeAuthMethod", false);
-      handlePopUpToggle("identityAuthMethod", false);
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: `Failed to remove ${identityAuthToNameMap[authMethod]} on ${identityAuthMethodData.name}`,
-        type: "error"
-      });
-    }
-  };
-  const renderIdentityAuthForm = () => {
-    switch (identityAuthMethodData.authMethod) {
-      case IdentityAuthMethod.AWS_AUTH: {
-        return (
-          <IdentityAwsAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      case IdentityAuthMethod.KUBERNETES_AUTH: {
-        return (
-          <IdentityKubernetesAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      case IdentityAuthMethod.GCP_AUTH: {
-        return (
-          <IdentityGcpAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      case IdentityAuthMethod.AZURE_AUTH: {
-        return (
-          <IdentityAzureAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      case IdentityAuthMethod.UNIVERSAL_AUTH: {
-        return (
-          <IdentityUniversalAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      case IdentityAuthMethod.OIDC_AUTH: {
-        return (
-          <IdentityOidcAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      case IdentityAuthMethod.TOKEN_AUTH: {
-        return (
-          <IdentityTokenAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-            initialAuthMethod={initialAuthMethod!}
-            revokeAuth={onRevokeAuthMethodSubmit}
-          />
-        );
-      }
-      default: {
-        return <div />;
-      }
+    [IdentityAuthMethod.OIDC_AUTH]: {
+      revokeMethod: revokeOidcAuth,
+      render: () => (
+        <IdentityOidcAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
+
+    [IdentityAuthMethod.TOKEN_AUTH]: {
+      revokeMethod: revokeTokenAuth,
+      render: () => (
+        <IdentityTokenAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
+
+    [IdentityAuthMethod.AZURE_AUTH]: {
+      revokeMethod: revokeAzureAuth,
+      render: () => (
+        <IdentityAzureAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
+
+    [IdentityAuthMethod.GCP_AUTH]: {
+      revokeMethod: revokeGcpAuth,
+      render: () => (
+        <IdentityGcpAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
+
+    [IdentityAuthMethod.KUBERNETES_AUTH]: {
+      revokeMethod: revokeKubernetesAuth,
+      render: () => (
+        <IdentityKubernetesAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
+
+    [IdentityAuthMethod.AWS_AUTH]: {
+      revokeMethod: revokeAwsAuth,
+      render: () => (
+        <IdentityAwsAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
     }
   };
 
+  const selectedMethodItem = methodMap[identityAuthMethodData.authMethod!];
+
   return (
     <Modal
       isOpen={popUp?.identityAuthMethod?.isOpen}
@@ -275,11 +223,11 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
       }}
     >
       <ModalContent
-        title={`${
-          identityAuthMethodData.authMethod === initialAuthMethod ? "Update" : "Configure"
-        } Identity Auth Method for ${
-          identityAuthToNameMap[identityAuthMethodData.authMethod!] ?? ""
-        }`}
+        title={
+          isSelectedAuthAlreadyConfigured
+            ? `Edit ${identityAuthToNameMap[identityAuthMethodData.authMethod!] ?? ""}`
+            : `Create new ${identityAuthToNameMap[identityAuthMethodData.authMethod!] ?? ""}`
+        }
       >
         <Controller
           control={control}
@@ -288,23 +236,46 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
           render={({ field: { onChange, ...field }, fieldState: { error } }) => (
             <FormControl label="Auth Method" errorText={error?.message} isError={Boolean(error)}>
               <Select
+                isDisabled={isSelectedAuthAlreadyConfigured}
                 defaultValue={field.value}
                 {...field}
                 onValueChange={(e) => {
-                  onChange(e);
+                  const alreadyConfigured =
+                    popUp?.identityAuthMethod?.data?.allAuthMethods?.includes(e);
+
+                  if (!alreadyConfigured) {
+                    onChange(e);
+                  }
                 }}
                 className="w-full"
               >
-                {identityAuthMethods.map(({ label, value }) => (
-                  <SelectItem value={String(value || "")} key={label}>
-                    {label}
-                  </SelectItem>
-                ))}
+                {identityAuthMethods.map(({ label, value }) => {
+                  const alreadyConfigured =
+                    popUp?.identityAuthMethod?.data?.allAuthMethods?.includes(value);
+                  return (
+                    <Tooltip
+                      key={`auth-method-${value}`}
+                      content="Authentication method already configured"
+                      isDisabled={!alreadyConfigured}
+                    >
+                      <SelectItem
+                        isDisabled={alreadyConfigured}
+                        value={String(value || "")}
+                        key={label}
+                      >
+                        {label}{" "}
+                        {alreadyConfigured && !isSelectedAuthAlreadyConfigured && (
+                          <Badge variant="info">Configured</Badge>
+                        )}
+                      </SelectItem>
+                    </Tooltip>
+                  );
+                })}
               </Select>
             </FormControl>
           )}
         />
-        {renderIdentityAuthForm()}
+        {selectedMethodItem?.render ? selectedMethodItem.render() : <div />}
         <UpgradePlanModal
           isOpen={popUp?.upgradePlan?.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
@@ -320,7 +291,37 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
           onChange={(isOpen) => handlePopUpToggle("revokeAuthMethod", isOpen)}
           deleteKey="confirm"
           buttonText="Remove"
-          onDeleteApproved={() => onRevokeAuthMethodSubmit(identityAuthMethodData.authMethod!)}
+          onDeleteApproved={async () => {
+            if (!identityAuthMethodData.authMethod || !orgId) {
+              return;
+            }
+
+            const selectedRevoke = methodMap[identityAuthMethodData.authMethod];
+
+            if (!selectedRevoke) {
+              return;
+            }
+
+            try {
+              await selectedRevoke.revokeMethod({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              createNotification({
+                text: "Successfully removed auth method",
+                type: "success"
+              });
+
+              handlePopUpToggle("revokeAuthMethod", false);
+              handlePopUpToggle("identityAuthMethod", false);
+            } catch (err) {
+              createNotification({
+                text: "Failed to remove auth method",
+                type: "error"
+              });
+            }
+          }}
         />
       </ModalContent>
     </Modal>

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm.tsx

@@ -6,7 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAwsAuth,
@@ -15,7 +15,7 @@ import {
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
@@ -62,18 +62,15 @@ type Props = {
   identityAuthMethodData: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityAwsAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  initialAuthMethod,
-  revokeAuth
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -82,13 +79,13 @@ export const IdentityAwsAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityAwsAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityAwsAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
   const { data } = useGetIdentityAwsAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
 
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
-
   const {
     control,
     handleSubmit,
@@ -184,230 +181,204 @@ export const IdentityAwsAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
         type: "error"
       });
     }
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="allowedPrincipalArns"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Principal ARNs"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                placeholder="arn:aws:iam::123456789012:role/MyRoleName, arn:aws:iam::123456789012:user/MyUserName..."
-                type="text"
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="allowedAccountIds"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Account IDs"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="123456789012, ..." />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="https://sts.amazonaws.com/"
-          name="stsEndpoint"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl label="STS Endpoint" isError={Boolean(error)} errorText={error?.message}>
-              <Input {...field} placeholder="https://sts.amazonaws.com/" type="text" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
-
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="allowedPrincipalArns"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Principal ARNs"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input
+              {...field}
+              placeholder="arn:aws:iam::123456789012:role/MyRoleName, arn:aws:iam::123456789012:user/MyUserName..."
+              type="text"
             />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="allowedAccountIds"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Account IDs"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="123456789012, ..." />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="https://sts.amazonaws.com/"
+        name="stsEndpoint"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="STS Endpoint" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} placeholder="https://sts.amazonaws.com/" type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
 
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
             onClick={() => {
               if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
+                removeAccessTokenTrustedIp(index);
                 return;
               }
 
               handlePopUpOpen("upgradePlan");
             }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
           >
-            Add IP Address
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {!isUpdate ? "Create" : "Edit"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
           </Button>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Overwrite"
-        onDeleteApproved={async () => {
-          await revokeAuth(initialAuthMethod);
-          handleSubmit(onFormSubmit)();
-        }}
-      />
-    </>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAzureAuth,
@@ -15,7 +15,7 @@ import {
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
@@ -50,18 +50,15 @@ type Props = {
   identityAuthMethodData: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityAzureAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  initialAuthMethod,
-  revokeAuth
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -70,18 +67,18 @@ export const IdentityAzureAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityAzureAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityAzureAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
   const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
 
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
-
   const {
     control,
     handleSubmit,
     reset,
-    trigger,
+
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -173,239 +170,204 @@ export const IdentityAzureAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
         type: "error"
       });
     }
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="tenantId"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Tenant ID"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              isRequired
-            >
-              <Input {...field} placeholder="00000000-0000-0000-0000-000000000000" type="text" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="resource"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Resource / Audience"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="https://management.azure.com/" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="allowedServicePrincipalIds"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Service Principal IDs"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="00000000-0000-0000-0000-000000000000, ..." />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="tenantId"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Tenant ID"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="00000000-0000-0000-0000-000000000000" type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="resource"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Resource / Audience"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="https://management.azure.com/" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="allowedServicePrincipalIds"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Service Principal IDs"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="00000000-0000-0000-0000-000000000000, ..." />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
 
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
-
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
             onClick={() => {
               if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
+                removeAccessTokenTrustedIp(index);
                 return;
               }
 
               handlePopUpOpen("upgradePlan");
             }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
           >
-            Add IP Address
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {!isUpdate ? "Create" : "Edit"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
           </Button>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Overwrite"
-        onDeleteApproved={async () => {
-          const result = await trigger();
-          if (result) {
-            await revokeAuth(initialAuthMethod);
-            handleSubmit(onFormSubmit)();
-          } else {
-            createNotification({
-              text: "Please fill in all required fields",
-              type: "error"
-            });
-            internalPopUpState.handlePopUpToggle("overwriteAuthMethod", false);
-          }
-        }}
-      />
-    </>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm.tsx

@@ -6,15 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DeleteActionModal,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityGcpAuth,
@@ -23,7 +15,7 @@ import {
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
@@ -59,18 +51,15 @@ type Props = {
   identityAuthMethodData: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityGcpAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  revokeAuth,
-  initialAuthMethod
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -79,11 +68,12 @@ export const IdentityGcpAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityGcpAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityGcpAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
   const { data } = useGetIdentityGcpAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
 
   const {
     control,
@@ -189,258 +179,228 @@ export const IdentityGcpAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
         type: "error"
       });
     }
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          name="type"
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-            <FormControl label="Type" isError={Boolean(error)} errorText={error?.message}>
-              <Select
-                defaultValue={field.value}
-                {...field}
-                onValueChange={(e) => onChange(e)}
-                className="w-full"
-              >
-                <SelectItem value="gce" key="gce">
-                  GCP ID Token Auth (Recommended)
-                </SelectItem>
-                <SelectItem value="iam" key="iam">
-                  GCP IAM Auth
-                </SelectItem>
-              </Select>
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="allowedServiceAccounts"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Service Account Emails"
-              isError={Boolean(error)}
-              errorText={error?.message}
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="type"
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Type" isError={Boolean(error)} errorText={error?.message}>
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full"
             >
-              <Input
-                {...field}
-                placeholder="[email protected], [email protected]"
-                type="text"
-              />
-            </FormControl>
-          )}
-        />
-        {watchedType === "gce" && (
-          <Controller
-            control={control}
-            name="allowedProjects"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Allowed Projects"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="my-gcp-project, ..." />
-              </FormControl>
-            )}
-          />
+              <SelectItem value="gce" key="gce">
+                GCP ID Token Auth (Recommended)
+              </SelectItem>
+              <SelectItem value="iam" key="iam">
+                GCP IAM Auth
+              </SelectItem>
+            </Select>
+          </FormControl>
         )}
-        {watchedType === "gce" && (
-          <Controller
-            control={control}
-            name="allowedZones"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Allowed Zones"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="us-west2-a, us-central1-a, ..." />
-              </FormControl>
-            )}
-          />
-        )}
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
-
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="allowedServiceAccounts"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Service Account Emails"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input
+              {...field}
+              placeholder="[email protected], [email protected]"
+              type="text"
             />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
-
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
+          </FormControl>
+        )}
+      />
+      {watchedType === "gce" && (
+        <Controller
+          control={control}
+          name="allowedProjects"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Allowed Projects"
+              isError={Boolean(error)}
+              errorText={error?.message}
             >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
+              <Input {...field} placeholder="my-gcp-project, ..." />
+            </FormControl>
+          )}
+        />
+      )}
+      {watchedType === "gce" && (
+        <Controller
+          control={control}
+          name="allowedZones"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl label="Allowed Zones" isError={Boolean(error)} errorText={error?.message}>
+              <Input {...field} placeholder="us-west2-a, us-central1-a, ..." />
+            </FormControl>
+          )}
+        />
+      )}
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
             onClick={() => {
               if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
+                removeAccessTokenTrustedIp(index);
                 return;
               }
 
               handlePopUpOpen("upgradePlan");
             }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
           >
-            Add IP Address
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {!isUpdate ? "Create" : "Edit"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
           </Button>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        buttonText="Overwrite"
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        onDeleteApproved={async () => {
-          await revokeAuth(initialAuthMethod);
-          handleSubmit(onFormSubmit)();
-        }}
-      />
-    </>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -6,14 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DeleteActionModal,
-  FormControl,
-  IconButton,
-  Input,
-  TextArea
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input, TextArea } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityKubernetesAuth,
@@ -22,7 +15,7 @@ import {
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
@@ -60,18 +53,15 @@ type Props = {
   identityAuthMethodData: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityKubernetesAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  initialAuthMethod,
-  revokeAuth
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -80,17 +70,18 @@ export const IdentityKubernetesAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityKubernetesAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
   const { data } = useGetIdentityKubernetesAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
 
   const {
     control,
     handleSubmit,
     reset,
-    trigger,
+
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -200,291 +191,256 @@ export const IdentityKubernetesAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
         type: "error"
       });
     }
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="kubernetesHost"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Kubernetes Host / Base Kubernetes API URL "
-              isError={Boolean(error)}
-              errorText={error?.message}
-              tooltipText="The host string, host:port pair, or URL to the base of the Kubernetes API server. This can usually be obtained by running 'kubectl cluster-info'"
-              isRequired
-            >
-              <Input {...field} placeholder="https://my-example-k8s-api-host.com" type="text" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="tokenReviewerJwt"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Token Reviewer JWT"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              tooltipText="A long-lived service account JWT token for Infisical to access the TokenReview API to validate other service account JWT tokens submitted by applications/pods."
-              isRequired
-            >
-              <Input {...field} placeholder="" type="password" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="allowedNames"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Service Account Names"
-              isError={Boolean(error)}
-              tooltipText="An optional comma-separated list of trusted service account names that are allowed to authenticate with Infisical. Leave empty to allow any service account."
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="service-account-1-name, service-account-1-name" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue=""
-          name="allowedNamespaces"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Namespaces"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              tooltipText="A comma-separated list of trusted namespaces that service accounts must belong to authenticate with Infisical."
-            >
-              <Input {...field} placeholder="namespaceA, namespaceB" type="text" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue=""
-          name="allowedAudience"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Audience"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              tooltipText="An optional audience claim that the service account JWT token must have to authenticate with Infisical. Leave empty to allow any audience claim."
-            >
-              <Input {...field} placeholder="" type="text" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="caCert"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="CA Certificate"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              tooltipText="An optional PEM-encoded CA cert for the Kubernetes API server. This is used by the TLS client for secure communication with the Kubernetes API server."
-            >
-              <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              tooltipText="The lifetime for an acccess token in seconds. This value will be referenced at renewal time."
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                    tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="kubernetesHost"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Kubernetes Host / Base Kubernetes API URL "
+            isError={Boolean(error)}
+            errorText={error?.message}
+            tooltipText="The host string, host:port pair, or URL to the base of the Kubernetes API server. This can usually be obtained by running 'kubectl cluster-info'"
+            isRequired
+          >
+            <Input {...field} placeholder="https://my-example-k8s-api-host.com" type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="tokenReviewerJwt"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Token Reviewer JWT"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            tooltipText="A long-lived service account JWT token for Infisical to access the TokenReview API to validate other service account JWT tokens submitted by applications/pods."
+            isRequired
+          >
+            <Input {...field} placeholder="" type="password" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="allowedNames"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Service Account Names"
+            isError={Boolean(error)}
+            tooltipText="An optional comma-separated list of trusted service account names that are allowed to authenticate with Infisical. Leave empty to allow any service account."
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="service-account-1-name, service-account-1-name" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue=""
+        name="allowedNamespaces"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Namespaces"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            tooltipText="A comma-separated list of trusted namespaces that service accounts must belong to authenticate with Infisical."
+          >
+            <Input {...field} placeholder="namespaceA, namespaceB" type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue=""
+        name="allowedAudience"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Audience"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            tooltipText="An optional audience claim that the service account JWT token must have to authenticate with Infisical. Leave empty to allow any audience claim."
+          >
+            <Input {...field} placeholder="" type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="caCert"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="CA Certificate"
+            errorText={error?.message}
+            isError={Boolean(error)}
+            tooltipText="An optional PEM-encoded CA cert for the Kubernetes API server. This is used by the TLS client for secure communication with the Kubernetes API server."
+          >
+            <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            tooltipText="The lifetime for an acccess token in seconds. This value will be referenced at renewal time."
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
 
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
-
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
             onClick={() => {
               if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
+                removeAccessTokenTrustedIp(index);
                 return;
               }
 
               handlePopUpOpen("upgradePlan");
             }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
           >
-            Add IP Address
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {isUpdate ? "Update" : "Create"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
           </Button>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Overwrite"
-        onDeleteApproved={async () => {
-          const result = await trigger();
-          if (result) {
-            await revokeAuth(initialAuthMethod);
-            handleSubmit(onFormSubmit)();
-          } else {
-            createNotification({
-              text: "Please fill in all required fields",
-              type: "error"
-            });
-            internalPopUpState.handlePopUpToggle("overwriteAuthMethod", false);
-          }
-        }}
-      />
-    </>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -154,12 +154,6 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
 
         handlePopUpToggle("identity", false);
         router.push(`/org/${orgId}/identities/${createdId}`);
-
-        // handlePopUpOpen("identityAuthMethod", {
-        //   identityId: createdId,
-        //   name: createdName,
-        //   authMethod
-        // });
       }
 
       createNotification({

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -7,21 +7,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DeleteActionModal,
-  FormControl,
-  IconButton,
-  Input,
-  TextArea,
-  Tooltip
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input, TextArea, Tooltip } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import { useAddIdentityOidcAuth, useUpdateIdentityOidcAuth } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { useGetIdentityOidcAuth } from "@app/hooks/api/identities/queries";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z.object({
   accessTokenTrustedIps: z
@@ -62,18 +54,15 @@ type Props = {
   identityAuthMethodData: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityOidcAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  initialAuthMethod,
-  revokeAuth
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -82,17 +71,17 @@ export const IdentityOidcAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityOidcAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityOidcAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
   const { data } = useGetIdentityOidcAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
 
   const {
     control,
     handleSubmit,
     reset,
-    trigger,
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -210,364 +199,329 @@ export const IdentityOidcAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
         type: "error"
       });
     }
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          name="oidcDiscoveryUrl"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              isRequired
-              label="OIDC Discovery URL"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                placeholder="https://token.actions.githubusercontent.com"
-                type="text"
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="boundIssuer"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              isRequired
-              label="Issuer"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                type="text"
-                placeholder="https://token.actions.githubusercontent.com"
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="caCert"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl label="CA Certificate" errorText={error?.message} isError={Boolean(error)}>
-              <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="boundSubject"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Subject"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              icon={
-                <Tooltip
-                  className="text-center"
-                  content={<span>This field supports glob patterns</span>}
-                >
-                  <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                </Tooltip>
-              }
-            >
-              <Input {...field} type="text" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          name="boundAudiences"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Audiences"
-              isError={Boolean(error)}
-              errorText={error?.message}
-              icon={
-                <Tooltip
-                  className="text-center"
-                  content={<span>This field supports glob patterns</span>}
-                >
-                  <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                </Tooltip>
-              }
-            >
-              <Input {...field} type="text" placeholder="service1, service2" />
-            </FormControl>
-          )}
-        />
-        {boundClaimsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`boundClaims.${index}.key`}
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Claims" : undefined}
-                    icon={
-                      index === 0 ? (
-                        <Tooltip
-                          className="text-center"
-                          content={<span>This field supports glob patterns</span>}
-                        >
-                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                        </Tooltip>
-                      ) : undefined
-                    }
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => field.onChange(e)}
-                      placeholder="property"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-            <Controller
-              control={control}
-              name={`boundClaims.${index}.value`}
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => field.onChange(e)}
-                      placeholder="value1, value2"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-
-            <IconButton
-              onClick={() => removeBoundClaimField(index)}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
-            onClick={() =>
-              appendBoundClaimField({
-                key: "",
-                value: ""
-              })
-            }
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="oidcDiscoveryUrl"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isRequired
+            label="OIDC Discovery URL"
+            isError={Boolean(error)}
+            errorText={error?.message}
           >
-            Add Claims
-          </Button>
-        </div>
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
-
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
+            <Input
+              {...field}
+              placeholder="https://token.actions.githubusercontent.com"
+              type="text"
             />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundIssuer"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isRequired
+            label="Issuer"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input
+              {...field}
+              type="text"
+              placeholder="https://token.actions.githubusercontent.com"
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="caCert"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="CA Certificate" errorText={error?.message} isError={Boolean(error)}>
+            <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundSubject"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Subject"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            icon={
+              <Tooltip
+                className="text-center"
+                content={<span>This field supports glob patterns</span>}
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+              </Tooltip>
+            }
+          >
+            <Input {...field} type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundAudiences"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Audiences"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            icon={
+              <Tooltip
+                className="text-center"
+                content={<span>This field supports glob patterns</span>}
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+              </Tooltip>
+            }
+          >
+            <Input {...field} type="text" placeholder="service1, service2" />
+          </FormControl>
+        )}
+      />
+      {boundClaimsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`boundClaims.${index}.key`}
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Claims" : undefined}
+                  icon={
+                    index === 0 ? (
+                      <Tooltip
+                        className="text-center"
+                        content={<span>This field supports glob patterns</span>}
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                      </Tooltip>
+                    ) : undefined
+                  }
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => field.onChange(e)}
+                    placeholder="property"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name={`boundClaims.${index}.value`}
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => field.onChange(e)}
+                    placeholder="value1, value2"
+                  />
+                </FormControl>
+              );
+            }}
+          />
 
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
+          <IconButton
+            onClick={() => removeBoundClaimField(index)}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() =>
+            appendBoundClaimField({
+              key: "",
+              value: ""
+            })
+          }
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add Claims
+        </Button>
+      </div>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
             onClick={() => {
               if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
+                removeAccessTokenTrustedIp(index);
                 return;
               }
 
               handlePopUpOpen("upgradePlan");
             }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
           >
-            Add IP Address
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {isUpdate ? "Update" : "Create"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
           </Button>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Overwrite"
-        onDeleteApproved={async () => {
-          const result = await trigger();
-          if (result) {
-            await revokeAuth(initialAuthMethod);
-            handleSubmit(onFormSubmit)();
-          } else {
-            createNotification({
-              text: "Please fill in all required fields",
-              type: "error"
-            });
-            internalPopUpState.handlePopUpToggle("overwriteAuthMethod", false);
-          }
-        }}
-      />
-    </>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm.tsx

@@ -5,7 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityTokenAuth,
@@ -13,7 +13,7 @@ import {
   useUpdateIdentityTokenAuth
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
@@ -42,21 +42,18 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityAuthMethodData?: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityTokenAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  initialAuthMethod,
-  revokeAuth
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -65,11 +62,13 @@ export const IdentityTokenAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityTokenAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+
   const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
 
   const {
     control,
@@ -124,189 +123,163 @@ export const IdentityTokenAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${isCurrentAuthMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
         type: "error"
       });
     }
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
 
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
-
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
             onClick={() => {
               if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
+                removeAccessTokenTrustedIp(index);
                 return;
               }
 
               handlePopUpOpen("upgradePlan");
             }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
           >
-            Add IP Address
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {isUpdate ? "Update" : "Create"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
           </Button>
         </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Overwrite"
-        onDeleteApproved={async () => {
-          await revokeAuth(initialAuthMethod);
-          handleSubmit(onFormSubmit)();
-        }}
-      />
-    </>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -6,7 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityUniversalAuth,
@@ -15,7 +15,7 @@ import {
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
-import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
@@ -65,21 +65,18 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityAuthMethodData?: {
     identityId: string;
     name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
     authMethod?: IdentityAuthMethod;
   };
-  initialAuthMethod: IdentityAuthMethod;
-  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityUniversalAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData,
-  initialAuthMethod,
-  revokeAuth
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -87,11 +84,13 @@ export const IdentityUniversalAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
 
-  const isCurrentAuthMethod = identityAuthMethodData?.authMethod === initialAuthMethod;
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+
   const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "", {
-    enabled: isCurrentAuthMethod
+    enabled: isUpdate
   });
-  const internalPopUpState = usePopUp(["overwriteAuthMethod"] as const);
 
   const {
     control,
@@ -190,7 +189,7 @@ export const IdentityUniversalAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${isCurrentAuthMethod ? "updated" : "configured"} auth method`,
+        text: `Successfully ${isUpdate ? "updated" : "created"} auth method`,
         type: "success"
       });
 
@@ -199,8 +198,7 @@ export const IdentityUniversalAuthForm = ({
       console.error(err);
       const error = err as any;
       const text =
-        error?.response?.data?.message ??
-        `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`;
+        error?.response?.data?.message ?? `Failed to ${isUpdate ? "update" : "configure"} identity`;
 
       createNotification({
         text,
@@ -210,243 +208,216 @@ export const IdentityUniversalAuthForm = ({
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="2592000"
-          name="accessTokenMaxTTL"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max TTL (seconds)"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue="0"
-          name="accessTokenNumUsesLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Access Token Max Number of Uses"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="0" type="number" min="0" step="1" />
-            </FormControl>
-          )}
-        />
-        {clientSecretTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`clientSecretTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Client Secret Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
-
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeClientSecretTrustedIp(index);
-                  return;
-                }
-
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
-            onClick={() => {
-              if (subscription?.ipAllowlisting) {
-                appendClientSecretTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
-                return;
-              }
-
-              handlePopUpOpen("upgradePlan");
-            }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
           >
-            Add IP Address
-          </Button>
-        </div>
-        {accessTokenTrustedIpsFields.map(({ id }, index) => (
-          <div className="mb-3 flex items-end space-x-2" key={id}>
-            <Controller
-              control={control}
-              name={`accessTokenTrustedIps.${index}.ipAddress`}
-              defaultValue="0.0.0.0/0"
-              render={({ field, fieldState: { error } }) => {
-                return (
-                  <FormControl
-                    className="mb-0 flex-grow"
-                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input
-                      value={field.value}
-                      onChange={(e) => {
-                        if (subscription?.ipAllowlisting) {
-                          field.onChange(e);
-                          return;
-                        }
-
-                        handlePopUpOpen("upgradePlan");
-                      }}
-                      placeholder="123.456.789.0"
-                    />
-                  </FormControl>
-                );
-              }}
-            />
-            <IconButton
-              onClick={() => {
-                if (subscription?.ipAllowlisting) {
-                  removeAccessTokenTrustedIp(index);
-                  return;
-                }
-
-                handlePopUpOpen("upgradePlan");
-              }}
-              size="lg"
-              colorSchema="danger"
-              variant="plain"
-              ariaLabel="update"
-              className="p-3"
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </IconButton>
-          </div>
-        ))}
-        <div className="my-4 ml-1">
-          <Button
-            variant="outline_bg"
-            onClick={() => {
-              if (subscription?.ipAllowlisting) {
-                appendAccessTokenTrustedIp({
-                  ipAddress: "0.0.0.0/0"
-                });
-                return;
-              }
-
-              handlePopUpOpen("upgradePlan");
-            }}
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            size="xs"
-          >
-            Add IP Address
-          </Button>
-        </div>
-        <div className="flex justify-between">
-          <div className="flex items-center">
-            {initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod ? (
-              <Button
-                className="mr-4"
-                size="sm"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-                onClick={() => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", true)}
-              >
-                Overwrite
-              </Button>
-            ) : (
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Submit
-              </Button>
-            )}
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-            >
-              Cancel
-            </Button>
-          </div>
-          {isCurrentAuthMethod && (
-            <Button
-              size="sm"
-              colorSchema="danger"
-              isLoading={isSubmitting}
-              isDisabled={isSubmitting}
-              onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
-            >
-              Remove Auth Method
-            </Button>
-          )}
-        </div>
-      </form>
-      <DeleteActionModal
-        isOpen={internalPopUpState.popUp.overwriteAuthMethod?.isOpen}
-        title={`Are you sure want to overwrite ${initialAuthMethod || "the auth method"} on ${
-          identityAuthMethodData?.name ?? ""
-        }?`}
-        onChange={(isOpen) => internalPopUpState.handlePopUpToggle("overwriteAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Overwrite"
-        onDeleteApproved={async () => {
-          await revokeAuth(initialAuthMethod);
-          handleSubmit(onFormSubmit)();
-        }}
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
       />
-    </>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {clientSecretTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`clientSecretTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Client Secret Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeClientSecretTrustedIp(index);
+                return;
+              }
+
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendClientSecretTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeAccessTokenTrustedIp(index);
+                return;
+              }
+
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {isUpdate ? "Edit" : "Create"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Delete Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
   );
 };