Merge pull request #2987 from Infisical/daniel/k8s-multi-managed-secrets

feat(k8-operator/infisicalsecret-crd): multiple secret references

backend/src/services/app-connection/aws/aws-connection-fns.ts

@@ -81,11 +81,14 @@ export const getAwsConnectionConfig = async (appConnection: TAwsConnectionConfig
 };
 
 export const validateAwsConnectionCredentials = async (appConnection: TAwsConnectionConfig) => {
-  const awsConfig = await getAwsConnectionConfig(appConnection);
-  const sts = new AWS.STS(awsConfig);
-  let resp: Awaited<ReturnType<ReturnType<typeof sts.getCallerIdentity>["promise"]>>;
+  let resp: AWS.STS.GetCallerIdentityResponse & {
+    $response: AWS.Response<AWS.STS.GetCallerIdentityResponse, AWS.AWSError>;
+  };
 
   try {
+    const awsConfig = await getAwsConnectionConfig(appConnection);
+    const sts = new AWS.STS(awsConfig);
+
     resp = await sts.getCallerIdentity().promise();
   } catch (e: unknown) {
     throw new BadRequestError({
@@ -93,7 +96,7 @@ export const validateAwsConnectionCredentials = async (appConnection: TAwsConnec
     });
   }
 
-  if (resp.$response.httpResponse.statusCode !== 200)
+  if (resp?.$response.httpResponse.statusCode !== 200)
     throw new InternalServerError({
       message: `Unable to validate credentials: ${
         resp.$response.error?.message ??

docs/documentation/guides/python.mdx

@@ -5,7 +5,7 @@ title: "Python"
 This guide demonstrates how to use Infisical to manage secrets for your Python stack from local development to production. It uses:
 
 - Infisical (you can use [Infisical Cloud](https://app.infisical.com) or a [self-hosted instance of Infisical](https://infisical.com/docs/self-hosting/overview)) to store your secrets.
-- The [infisical-python](https://pypi.org/project/infisical-python/) Python client SDK to fetch secrets back to your Python application on demand.
+- The [infisicalsdk](https://pypi.org/project/infisicalsdk/) Python client SDK to fetch secrets back to your Python application on demand.
 
 ## Project Setup
 
@@ -36,40 +36,38 @@ python3 -m venv env
 source env/bin/activate
 ```
 
-Install Flask and [infisical-python](https://pypi.org/project/infisical-python/), the client Python SDK for Infisical.
+Install Flask and [infisicalsdk](https://pypi.org/project/infisicalsdk/), the client Python SDK for Infisical.
 
 ```console
-pip install flask infisical-python
+pip install flask infisicalsdk
 ```
 
 Finally, create an `app.py` file containing the application code.
 
 ```py
 from flask import Flask
-from infisical_client import ClientSettings, InfisicalClient, GetSecretOptions, AuthenticationOptions, UniversalAuthMethod
+from infisical_sdk import InfisicalSDKClient
 
 app = Flask(__name__)
 
-client = InfisicalClient(ClientSettings(
-    auth=AuthenticationOptions(
-      universal_auth=UniversalAuthMethod(
-        client_id="CLIENT_ID",
-        client_secret="CLIENT_SECRET",
-      )
-    )
-))
+client = InfisicalSDKClient(host="https://app.infisical.com") # host is optional, defaults to https://app.infisical.com
+
+client.auth.universal_auth.login(
+  "<machine-identity-client-id>",
+  "<machine-identity-client-secret>"
+)
 
 @app.route("/")
 def hello_world():
     # access value
+     name = client.secrets.get_secret_by_name(
+      secret_name="NAME",
+      project_id="<project-id>",
+      environment_slug="dev",
+      secret_path="/"
+     )
 
-    name = client.getSecret(options=GetSecretOptions(
-       environment="dev",
-       project_id="PROJECT_ID",
-       secret_name="NAME"
-    ))
-
-    return f"Hello! My name is: {name.secret_value}"
+    return f"Hello! My name is: {name.secretValue}"
 ```
 
 Here, we initialized a `client` instance of the Infisical Python SDK with the Infisical Token
@@ -89,15 +87,6 @@ At this stage, you know how to fetch secrets from Infisical back to your Python
 ## FAQ
 
 <AccordionGroup>
-    <Accordion title="Isn't it inefficient if my app makes a request every time it needs a secret?">
-        The client SDK caches every secret and implements a 5-minute waiting period before
-        re-requesting it. The waiting period can be controlled by setting the `cacheTTL` parameter at
-        the time of initializing the client.
-    </Accordion>
-    <Accordion title="What if a request for a secret fails?">
-        The SDK caches every secret and falls back to the cached value if a request fails. If no cached
-        value ever-existed, the SDK falls back to whatever value is on `process.env`.
-    </Accordion>
     <Accordion title="What's the point if I still have to manage a token for the SDK?">
         The token enables the SDK to authenticate with Infisical to fetch back your secrets.
         Although the SDK requires you to pass in a token, it enables greater efficiency and security
@@ -114,6 +103,6 @@ At this stage, you know how to fetch secrets from Infisical back to your Python
 
 See also:
 
-- Explore the [Python SDK](https://github.com/Infisical/sdk/tree/main/crates/infisical-py)
+- Explore the [Python SDK](https://github.com/Infisical/python-sdk-official)
 
 

docs/documentation/platform/access-controls/role-based-access-controls.mdx

@@ -3,7 +3,7 @@ title: "Role-based Access Controls"
 description: "Learn how to use RBAC to manage user permissions."
 ---
 
-Infisical's Role-based Access Controls (RBAC) enable the usage of predefined and custom roles that imply a set of permissions for user and machine identities. Such roles male it possible to restrict access to resources and the range of actions that can be performed.
+Infisical's Role-based Access Controls (RBAC) enable the usage of predefined and custom roles that imply a set of permissions for user and machine identities. Such roles make it possible to restrict access to resources and the range of actions that can be performed.
 
 In general, access controls can be split up across [projects](/documentation/platform/project) and [organizations](/documentation/platform/organization).
 

docs/documentation/platform/sso/azure.mdx

@@ -48,7 +48,7 @@ description: "Learn how to configure Microsoft Entra ID for Infisical SSO."
 
       Back in the **Set up Single Sign-On with SAML** screen, select **Edit** in the **Attributes & Claims** section and configure the following map:
 
-      - `email -> user.userprinciplename`
+      - `email -> user.userprincipalname`
       - `firstName -> user.givenname`
       - `lastName -> user.surname`
 

docs/integrations/app-connections/aws.mdx

@@ -9,10 +9,6 @@ Infisical supports two methods for connecting to AWS.
     <Tab title="Assume Role (Recommended)">
         Infisical will assume the provided role in your AWS account securely, without the need to share any credentials.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Accordion title="Self-Hosted Instance">
             To connect your self-hosted Infisical instance with AWS, you need to set up an AWS IAM User account that can assume the configured AWS IAM Role.
 
@@ -47,8 +43,8 @@ Infisical supports two methods for connecting to AWS.
                     ![Access Key Step 3](/images/integrations/aws/integrations-aws-access-key-3.png)
                 </Step>
                 <Step title="Set Up Connection Keys">
-                    1. Set the access key as **INF_APP_CONNECTION_AWS_CLIENT_ID**.
-                    2. Set the secret key as **INF_APP_CONNECTION_AWS_CLIENT_SECRET**.
+                    1. Set the access key as **INF_APP_CONNECTION_AWS_ACCESS_KEY_ID**.
+                    2. Set the secret key as **INF_APP_CONNECTION_AWS_SECRET_ACCESS_KEY**.
                 </Step>
             </Steps>
         </Accordion>
@@ -63,7 +59,11 @@ Infisical supports two methods for connecting to AWS.
                 4. Optionally, enable **Require external ID** and enter your **Organization ID** to further enhance security.
             </Step>
 
-            <Step title="Add Required Permissions for the IAM Role">
+            <Step title="Add Required Permissions to the IAM Role">
+                Navigate to your IAM role permissions and click **Create Inline Policy**.
+
+                ![IAM Role Create Policy](/images/app-connections/aws/assume-role-create-policy.png)
+
                 Depending on your use case, add one or more of the following policies to your IAM Role:
 
                 <Tabs>
@@ -199,22 +199,13 @@ Infisical supports two methods for connecting to AWS.
     <Tab title="Access Key">
         Infisical will use the provided **Access Key ID** and **Secret Key** to connect to your AWS instance.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Steps>
-            <Step title="Create the Managing User IAM Role for Infisical">
-                1. Navigate to the [Create IAM Role](https://console.aws.amazon.com/iamv2/home#/roles/create?step=selectEntities) page in your AWS Console.
-                ![IAM Role Creation](/images/integrations/aws/integration-aws-iam-assume-role.png)
+            <Step title="Add Required Permissions to the IAM User">
+                Navigate to your IAM user permissions and click **Create Inline Policy**.
 
-                2. Select **AWS Account** as the **Trusted Entity Type**.
-                3. Choose **Another AWS Account** and enter **381492033652** (Infisical AWS Account ID). This restricts the role to be assumed only by Infisical. If self-hosting, provide your AWS account number instead.
-                4. Optionally, enable **Require external ID** and enter your **Organization ID** to further enhance security.
-            </Step>
+                ![User IAM Create Policy](/images/app-connections/aws/access-key-create-policy.png)
 
-            <Step title="Add Required Permissions for the IAM Role">
-                Depending on your use case, add one or more of the following policies to your IAM Role:
+                Depending on your use case, add one or more of the following policies to your user:
 
                 <Tabs>
                     <Tab title="Secret Sync">

docs/integrations/app-connections/github.mdx

@@ -9,10 +9,6 @@ Infisical supports two methods for connecting to GitHub.
     <Tab title="GitHub App (Recommended)">
         Infisical will use a GitHub App with finely grained permissions to connect to GitHub.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Accordion title="Self-Hosted Instance">
             Using the GitHub integration with app authentication on a self-hosted instance of Infisical requires configuring an application on GitHub
             and registering your instance with it.
@@ -61,9 +57,9 @@ Infisical supports two methods for connecting to GitHub.
 
                     - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_ID`: The **Client ID** of your GitHub application.
                     - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_SECRET`: The **Client Secret** of your GitHub application.
-                    - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_SLUG`: The **Slug** of your GitHub application. This is the one found in the URL.
-                    - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_APP_ID`: The **App ID** of your GitHub application.
-                    - `INF_APP_CONNECTION_GITHUB_APP_CLIENT_PRIVATE_KEY`: The **Private Key** of your GitHub application.
+                    - `INF_APP_CONNECTION_GITHUB_APP_SLUG`: The **Slug** of your GitHub application. This is the one found in the URL.
+                    - `INF_APP_CONNECTION_GITHUB_APP_ID`: The **App ID** of your GitHub application.
+                    - `INF_APP_CONNECTION_GITHUB_APP_PRIVATE_KEY`: The **Private Key** of your GitHub application.
 
                     Once added, restart your Infisical instance and use the GitHub integration via app authentication.
                 </Step>
@@ -100,10 +96,6 @@ Infisical supports two methods for connecting to GitHub.
     <Tab title="OAuth">
         Infisical will use an OAuth App to connect to GitHub.
 
-        **Prerequisites:**
-
-        - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
-
         <Accordion title="Self-Hosted Instance">
             Using the GitHub integration on a self-hosted instance of Infisical requires configuring an OAuth application in GitHub
             and registering your instance with it.

docs/integrations/platforms/kubernetes/infisical-secret-crd.mdx

@@ -26,15 +26,15 @@ spec:
         name: <service-account-name>
         namespace: <service-account-namespace>
 
-  managedSecretReference:
-    secretName: managed-secret
-    secretNamespace: default
-    creationPolicy: "Orphan"
-    template:
-      includeAllSecrets: true
-      data:
-        NEW_KEY_NAME: "{{ .KEY.SecretPath }} {{ .KEY.Value }}"
-        KEY_WITH_BINARY_VALUE: "{{ .KEY.SecretPath }} {{ .KEY.Value }}"
+  managedKubeSecretReferences:
+    - secretName: managed-secret
+      secretNamespace: default
+      creationPolicy: "Orphan"
+      template:
+        includeAllSecrets: true
+        data:
+          NEW_KEY_NAME: "{{ .KEY.SecretPath }} {{ .KEY.Value }}"
+          KEY_WITH_BINARY_VALUE: "{{ .KEY.SecretPath }} {{ .KEY.Value }}"
 ```
 
 ## CRD properties
@@ -541,18 +541,32 @@ The managed secret properties specify where to store the secrets retrieved from
 This includes defining the name and namespace of the Kubernetes secret that will hold these secrets.
 The Infisical operator will automatically create the Kubernetes secret in the specified name/namespace and ensure it stays up-to-date.
 
-<Accordion title="managedSecretReference">
+<Note>
+
+The `managedSecretReference` field is deprecated and will be removed in a future release.
+Replace it with `managedKubeSecretReferences`, which now accepts an array of references to support multiple managed secrets in a single InfisicalSecret CRD.
+
+Example:
+```yaml
+  managedKubeSecretReferences:
+    - secretName: managed-secret
+      secretNamespace: default
+      creationPolicy: "Orphan"
+```
+</Note>
+
+<Accordion title="managedKubeSecretReferences">
 </Accordion>
-<Accordion title="managedSecretReference.secretName">
+<Accordion title="managedKubeSecretReferences[].secretName">
 The name of the managed Kubernetes secret to be created
 </Accordion>
-<Accordion title="managedSecretReference.secretNamespace">
+<Accordion title="managedKubeSecretReferences[].secretNamespace">
 The namespace of the managed Kubernetes secret to be created. 
 </Accordion>
-<Accordion title="managedSecretReference.secretType">
+<Accordion title="managedKubeSecretReferences[].secretType">
 Override the default Opaque type for managed secrets with this field. Useful for creating kubernetes.io/dockerconfigjson secrets.
 </Accordion>
-<Accordion title="managedSecretReference.creationPolicy">
+<Accordion title="managedKubeSecretReferences[].creationPolicy">
 Creation polices allow you to control whether or not owner references should be added to the managed Kubernetes secret that is generated by the Infisical operator. 
 This is useful for tools such as ArgoCD, where every resource requires an owner reference; otherwise, it will be pruned automatically.
 
@@ -573,18 +587,18 @@ This is useful for tools such as ArgoCD, where every resource requires an owner
 Fetching secrets from Infisical as is via the operator may not be enough. This is where templating functionality may be helpful.
 Using Go templates, you can format, combine, and create new key-value pairs from secrets fetched from Infisical before storing them as Kubernetes Secrets.
 
-<Accordion title="managedSecretReference.template">
+<Accordion title="managedKubeSecretReferences[].template">
 </Accordion>
-<Accordion title="managedSecretReference.template.includeAllSecrets">
+<Accordion title="managedKubeSecretReferences[].template.includeAllSecrets">
   This property controls what secrets are included in your managed secret when using templates. 
   When set to `true`, all secrets fetched from your Infisical project will be added into your managed Kubernetes secret resource. 
   **Use this option when you would like to sync all secrets from Infisical to Kubernetes but want to template a subset of them.**
 
-When set to `false`, only secrets defined in the `managedSecretReference.template.data` field of the template will be included in the managed secret.
+When set to `false`, only secrets defined in the `managedKubeSecretReferences[].template.data` field of the template will be included in the managed secret.
 Use this option when you would like to sync **only** a subset of secrets from Infisical to Kubernetes.
 
 </Accordion>
-<Accordion title="managedSecretReference.template.data">
+<Accordion title="managedKubeSecretReferences[].template.data">
 Define secret keys and their corresponding templates. 
 Each data value uses a Golang template with access to all secrets retrieved from the specified scope.
 
@@ -600,16 +614,16 @@ type TemplateSecret struct {
 #### Example template configuration:
 
 ```yaml
-managedSecretReference:
-  secretName: managed-secret
-  secretNamespace: default
-  template:
-    includeAllSecrets: true
-    data:
-      # Create new secret key that doesn't exist in your Infisical project using values of other secrets
-      NEW_KEY: "{{ .DB_PASSWORD.Value }}"
-      # Override an existing secret key in Infisical project with a new value using values of other secrets
-      API_URL: "https://api.{{.COMPANY_NAME.Value}}.{{.REGION.Value}}.com"
+managedKubeSecretReferences:
+  - secretName: managed-secret
+    secretNamespace: default
+    template:
+      includeAllSecrets: true
+      data:
+        # Create new secret key that doesn't exist in your Infisical project using values of other secrets
+        NEW_KEY: "{{ .DB_PASSWORD.Value }}"
+        # Override an existing secret key in Infisical project with a new value using values of other secrets
+        API_URL: "https://api.{{.COMPANY_NAME.Value}}.{{.REGION.Value}}.com"
 ```
 
 For this example, let's assume the following secrets exist in your Infisical project:
@@ -652,13 +666,13 @@ The example below assumes that the `BINARY_KEY_BASE64` secret is stored as a bas
 The resulting managed secret will contain the decoded value of `BINARY_KEY_BASE64`.
 
 ```yaml
-managedSecretReference:
-secretName: managed-secret
-secretNamespace: default
-template:
-  includeAllSecrets: true
-  data:
-    BINARY_KEY: "{{ decodeBase64ToBytes .BINARY_KEY_BASE64.Value }}"
+  managedKubeSecretReferences:
+  secretName: managed-secret
+  secretNamespace: default
+  template:
+    includeAllSecrets: true
+    data:
+      BINARY_KEY: "{{ decodeBase64ToBytes .BINARY_KEY_BASE64.Value }}"
 ```
 
 </Accordion>
@@ -913,7 +927,7 @@ spec:
   ..
   authentication:
     ...
-  managedSecretReference:
+  managedKubeSecretReferences:
     ...
 ```
 
@@ -934,4 +948,4 @@ metadata:
 type: Opaque
 ```
 
-</Accordion>
+</Accordion>

docs/mint.json

@@ -347,16 +347,26 @@
       "group": "App Connections",
       "pages": [
         "integrations/app-connections/overview",
-        "integrations/app-connections/aws",
-        "integrations/app-connections/github"
+        {
+          "group": "Connections",
+          "pages": [
+            "integrations/app-connections/aws",
+            "integrations/app-connections/github"
+          ]
+        }
       ]
     },
     {
       "group": "Secret Syncs",
       "pages": [
         "integrations/secret-syncs/overview",
-        "integrations/secret-syncs/aws-parameter-store",
-        "integrations/secret-syncs/github"
+        {
+          "group": "Syncs",
+          "pages": [
+            "integrations/secret-syncs/aws-parameter-store",
+            "integrations/secret-syncs/github"
+          ]
+        }
       ]
     },
     {

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

@@ -923,7 +923,7 @@ export const useAddIdentityTokenAuth = () => {
       });
       queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
       queryClient.invalidateQueries({
-        queryKey: identitiesKeys.getIdentityTokenAuth(identityId)
+        queryKey: identitiesKeys.getIdentityUniversalAuth(identityId)
       });
     }
   });
@@ -959,7 +959,7 @@ export const useUpdateIdentityTokenAuth = () => {
       });
       queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
       queryClient.invalidateQueries({
-        queryKey: identitiesKeys.getIdentityTokenAuth(identityId)
+        queryKey: identitiesKeys.getIdentityUniversalAuth(identityId)
       });
     }
   });

frontend/src/hooks/api/reactQuery.tsx

@@ -182,7 +182,7 @@ export const queryClient = new QueryClient({
         createNotification({
           title: "Bad Request",
           type: "error",
-          text: `${serverResponse.message}${serverResponse.message?.endsWith(".") ? "" : "."}`,
+          text: `${serverResponse.message}${serverResponse.message.endsWith(".") ? "" : "."}`,
           copyActions: [
             {
               value: serverResponse.reqId,

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -7,10 +7,10 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 import { IdentityAuthMethodModalContent } from "./IdentityAuthMethodModalContent";
 
 type Props = {
-  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan", "revokeAuthMethod"]>;
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
 };
@@ -34,7 +34,7 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
         title={
           isSelectedAuthAlreadyConfigured
             ? `Edit ${identityAuthToNameMap[selectedAuthMethod!] ?? ""}`
-            : `Add ${identityAuthToNameMap[selectedAuthMethod!] ?? ""}`
+            : `Create new ${identityAuthToNameMap[selectedAuthMethod!] ?? ""}`
         }
       >
         <IdentityAuthMethodModalContent

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx

@@ -4,8 +4,30 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { Badge, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { createNotification } from "@app/components/notifications";
+import {
+  Badge,
+  DeleteActionModal,
+  FormControl,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+  useDeleteIdentityAwsAuth,
+  useDeleteIdentityAzureAuth,
+  useDeleteIdentityGcpAuth,
+  useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityOidcAuth,
+  useDeleteIdentityTokenAuth,
+  useDeleteIdentityUniversalAuth
+} from "@app/hooks/api";
+import {
+  IdentityAuthMethod,
+  identityAuthToNameMap,
+  useDeleteIdentityJwtAuth
+} from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityAwsAuthForm } from "./IdentityAwsAuthForm";
@@ -18,10 +40,10 @@ import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
 type Props = {
-  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan", "revokeAuthMethod"]>;
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
 
@@ -34,7 +56,13 @@ type Props = {
   setSelectedAuthMethod: (authMethod: IdentityAuthMethod) => void;
 };
 
+type TRevokeOptions = {
+  identityId: string;
+  organizationId: string;
+};
+
 type TRevokeMethods = {
+  revokeMethod: (revokeOptions: TRevokeOptions) => Promise<any>;
   render: () => JSX.Element;
 };
 
@@ -68,6 +96,18 @@ export const IdentityAuthMethodModalContent = ({
   initialAuthMethod,
   setSelectedAuthMethod
 }: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { mutateAsync: revokeUniversalAuth } = useDeleteIdentityUniversalAuth();
+  const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
+  const { mutateAsync: revokeKubernetesAuth } = useDeleteIdentityKubernetesAuth();
+  const { mutateAsync: revokeGcpAuth } = useDeleteIdentityGcpAuth();
+  const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
+  const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
+  const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
+  const { mutateAsync: revokeJwtAuth } = useDeleteIdentityJwtAuth();
+
   const { control, watch } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: async () => {
@@ -109,9 +149,10 @@ export const IdentityAuthMethodModalContent = ({
 
   const methodMap: Record<IdentityAuthMethod, TRevokeMethods | undefined> = {
     [IdentityAuthMethod.UNIVERSAL_AUTH]: {
+      revokeMethod: revokeUniversalAuth,
       render: () => (
         <IdentityUniversalAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -119,9 +160,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.OIDC_AUTH]: {
+      revokeMethod: revokeOidcAuth,
       render: () => (
         <IdentityOidcAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -129,9 +171,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.TOKEN_AUTH]: {
+      revokeMethod: revokeTokenAuth,
       render: () => (
         <IdentityTokenAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -139,9 +182,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.AZURE_AUTH]: {
+      revokeMethod: revokeAzureAuth,
       render: () => (
         <IdentityAzureAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -149,9 +193,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.GCP_AUTH]: {
+      revokeMethod: revokeGcpAuth,
       render: () => (
         <IdentityGcpAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -159,9 +204,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.KUBERNETES_AUTH]: {
+      revokeMethod: revokeKubernetesAuth,
       render: () => (
         <IdentityKubernetesAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -169,9 +215,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.AWS_AUTH]: {
+      revokeMethod: revokeAwsAuth,
       render: () => (
         <IdentityAwsAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -179,9 +226,10 @@ export const IdentityAuthMethodModalContent = ({
     },
 
     [IdentityAuthMethod.JWT_AUTH]: {
+      revokeMethod: revokeJwtAuth,
       render: () => (
         <IdentityJwtAuthForm
-          identityId={identityAuthMethodData.identityId}
+          identityAuthMethodData={identityAuthMethodData}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -246,6 +294,42 @@ export const IdentityAuthMethodModalContent = ({
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use IP allowlisting if you switch to Infisical's Pro plan."
       />
+      <DeleteActionModal
+        isOpen={popUp?.revokeAuthMethod?.isOpen}
+        title={`Are you sure want to remove ${
+          identityAuthMethodData?.authMethod
+            ? identityAuthToNameMap[identityAuthMethodData.authMethod]
+            : "the auth method"
+        } on ${identityAuthMethodData?.name ?? ""}?`}
+        onChange={(isOpen) => handlePopUpToggle("revokeAuthMethod", isOpen)}
+        deleteKey="confirm"
+        buttonText="Remove"
+        onDeleteApproved={async () => {
+          if (!identityAuthMethodData.authMethod || !orgId || !selectedMethodItem) {
+            return;
+          }
+
+          try {
+            await selectedMethodItem.revokeMethod({
+              identityId: identityAuthMethodData.identityId,
+              organizationId: orgId
+            });
+
+            createNotification({
+              text: "Successfully removed auth method",
+              type: "success"
+            });
+
+            handlePopUpToggle("revokeAuthMethod", false);
+            handlePopUpToggle("identityAuthMethod", false);
+          } catch {
+            createNotification({
+              text: "Failed to remove auth method",
+              type: "error"
+            });
+          }
+        }}
+      />
     </>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,27 +6,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAwsAuth,
   useGetIdentityAwsAuth,
   useUpdateIdentityAwsAuth
 } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z
   .object({
     stsEndpoint: z.string(),
@@ -59,18 +49,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityAwsAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -78,9 +71,11 @@ export const IdentityAwsAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityAwsAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityAwsAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityAwsAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityAwsAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -148,7 +143,7 @@ export const IdentityAwsAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityId) return;
+      if (!identityAuthMethodData) return;
 
       if (data) {
         await updateMutateAsync({
@@ -156,7 +151,7 @@ export const IdentityAwsAuthForm = ({
           stsEndpoint,
           allowedPrincipalArns,
           allowedAccountIds,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -165,7 +160,7 @@ export const IdentityAwsAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           stsEndpoint: stsEndpoint || "",
           allowedPrincipalArns: allowedPrincipalArns || "",
           allowedAccountIds: allowedAccountIds || "",
@@ -193,195 +188,190 @@ export const IdentityAwsAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
+    <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}
-            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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          {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;
-                          }
+            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");
+                    }}
+                    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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+              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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
 
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,27 +6,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAzureAuth,
   useGetIdentityAzureAuth,
   useUpdateIdentityAzureAuth
 } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z
   .object({
     tenantId: z.string().min(1),
@@ -54,18 +44,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityAzureAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -73,9 +66,11 @@ export const IdentityAzureAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityAzureAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityAzureAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityAzureAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -144,12 +139,12 @@ export const IdentityAzureAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityId) return;
+      if (!identityAuthMethodData) return;
 
       if (data) {
         await updateMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           tenantId,
           resource,
           allowedServicePrincipalIds,
@@ -161,7 +156,7 @@ export const IdentityAzureAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           tenantId: tenantId || "",
           resource: resource || "",
           allowedServicePrincipalIds: allowedServicePrincipalIds || "",
@@ -189,195 +184,190 @@ export const IdentityAzureAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
+    <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}
-            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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          {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;
-                          }
+            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");
+                    }}
+                    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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+              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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
 
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,29 +6,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityGcpAuth,
   useGetIdentityGcpAuth,
   useUpdateIdentityGcpAuth
 } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z
   .object({
     type: z.enum(["iam", "gce"]),
@@ -57,18 +45,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityGcpAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -76,9 +67,11 @@ export const IdentityGcpAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityGcpAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityGcpAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityGcpAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityGcpAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -153,11 +146,11 @@ export const IdentityGcpAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityId) return;
+      if (!identityAuthMethodData) return;
 
       if (data) {
         await updateMutateAsync({
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           organizationId: orgId,
           type,
           allowedServiceAccounts,
@@ -170,7 +163,7 @@ export const IdentityGcpAuthForm = ({
         });
       } else {
         await addMutateAsync({
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           organizationId: orgId,
           type,
           allowedServiceAccounts: allowedServiceAccounts || "",
@@ -200,223 +193,214 @@ export const IdentityGcpAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
-          <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}
-              >
-                <Input
-                  {...field}
-                  placeholder="test@project.iam.gserviceaccount.com, 12345-compute@developer.gserviceaccount.com"
-                  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>
-              )}
-            />
-          )}
-          {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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          {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"
+    <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"
             >
-              Add IP Address
-            </Button>
-          </div>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
+              <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}
+          >
+            <Input
+              {...field}
+              placeholder="test@project.iam.gserviceaccount.com, 12345-compute@developer.gserviceaccount.com"
+              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>
+          )}
+        />
+      )}
+      {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) {
+                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
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityJwtAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -14,22 +14,17 @@ import {
   Input,
   Select,
   SelectItem,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
   TextArea,
   Tooltip
 } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import { useAddIdentityJwtAuth, useUpdateIdentityJwtAuth } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityJwtConfigurationType } from "@app/hooks/api/identities/enums";
 import { useGetIdentityJwtAuth } from "@app/hooks/api/identities/queries";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const commonSchema = z.object({
   accessTokenTrustedIps: z
     .array(
@@ -90,18 +85,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityJwtAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -109,9 +107,11 @@ export const IdentityJwtAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityJwtAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityJwtAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityJwtAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityJwtAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -218,13 +218,13 @@ export const IdentityJwtAuthForm = ({
     boundSubject
   }: FormData) => {
     try {
-      if (!identityId) {
+      if (!identityAuthMethodData) {
         return;
       }
 
       if (data) {
         await updateMutateAsync({
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           organizationId: orgId,
           configurationType,
           jwksUrl,
@@ -241,7 +241,7 @@ export const IdentityJwtAuthForm = ({
         });
       } else {
         await addMutateAsync({
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           configurationType,
           jwksUrl,
           jwksCaCert,
@@ -275,179 +275,56 @@ export const IdentityJwtAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
-          <Controller
-            control={control}
-            name="configurationType"
-            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl
-                label="Configuration Type"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  defaultValue={field.value}
-                  {...field}
-                  onValueChange={(e) => {
-                    if (e === IdentityJwtConfigurationType.JWKS) {
-                      setValue("publicKeys", []);
-                    } else {
-                      setValue("publicKeys", [
-                        {
-                          value: ""
-                        }
-                      ]);
-                      setValue("jwksUrl", "");
-                      setValue("jwksCaCert", "");
-                    }
-                    onChange(e);
-                  }}
-                  className="w-full"
-                >
-                  <SelectItem value={IdentityJwtConfigurationType.JWKS} key="jwks">
-                    JWKS
-                  </SelectItem>
-                  <SelectItem value={IdentityJwtConfigurationType.STATIC} key="static">
-                    Static
-                  </SelectItem>
-                </Select>
-              </FormControl>
-            )}
-          />
-          {selectedConfigurationType === IdentityJwtConfigurationType.JWKS && (
-            <>
-              <Controller
-                control={control}
-                name="jwksUrl"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isRequired
-                    label="JWKS URL"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <Input {...field} type="text" />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="jwksCaCert"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="JWKS CA Certificate"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-                  </FormControl>
-                )}
-              />
-            </>
-          )}
-          {selectedConfigurationType === IdentityJwtConfigurationType.STATIC && (
-            <>
-              {publicKeyFields.map(({ id }, index) => (
-                <div key={id} className="flex gap-2">
-                  <Controller
-                    control={control}
-                    name={`publicKeys.${index}.value`}
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        className="flex-grow"
-                        label={`Public Key ${index + 1}`}
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                        icon={
-                          <Tooltip
-                            className="text-center"
-                            content={<span>This field only accepts PEM-formatted public keys</span>}
-                          >
-                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                          </Tooltip>
-                        }
-                      >
-                        <TextArea {...field} placeholder="-----BEGIN PUBLIC KEY----- ..." />
-                      </FormControl>
-                    )}
-                  />
-                  <IconButton
-                    onClick={() => {
-                      if (publicKeyFields.length === 1) {
-                        createNotification({
-                          type: "error",
-                          text: "A public key is required for static configurations"
-                        });
-                        return;
-                      }
-
-                      removePublicKeyFields(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={() =>
-                    appendPublicKeyFields({
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="configurationType"
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl
+            label="Configuration Type"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => {
+                if (e === IdentityJwtConfigurationType.JWKS) {
+                  setValue("publicKeys", []);
+                } else {
+                  setValue("publicKeys", [
+                    {
                       value: ""
-                    })
-                  }
-                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                  size="xs"
-                >
-                  Add Public Key
-                </Button>
-              </div>
-            </>
-          )}
+                    }
+                  ]);
+                  setValue("jwksUrl", "");
+                  setValue("jwksCaCert", "");
+                }
+                onChange(e);
+              }}
+              className="w-full"
+            >
+              <SelectItem value={IdentityJwtConfigurationType.JWKS} key="jwks">
+                JWKS
+              </SelectItem>
+              <SelectItem value={IdentityJwtConfigurationType.STATIC} key="static">
+                Static
+              </SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+      {selectedConfigurationType === IdentityJwtConfigurationType.JWKS && (
+        <>
           <Controller
             control={control}
-            name="boundIssuer"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Issuer" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} type="text" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="boundSubject"
+            name="jwksUrl"
             render={({ field, fieldState: { error } }) => (
               <FormControl
-                label="Subject"
+                isRequired
+                label="JWKS URL"
                 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>
@@ -455,79 +332,58 @@ export const IdentityJwtAuthForm = ({
           />
           <Controller
             control={control}
-            name="boundAudiences"
+            name="jwksCaCert"
             render={({ field, fieldState: { error } }) => (
               <FormControl
-                label="Audiences"
-                isError={Boolean(error)}
+                label="JWKS CA Certificate"
                 errorText={error?.message}
-                icon={
-                  <Tooltip
-                    className="text-center"
-                    content={<span>This field supports glob patterns</span>}
-                  >
-                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                  </Tooltip>
-                }
+                isError={Boolean(error)}
               >
-                <Input {...field} type="text" placeholder="service1, service2" />
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
               </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>
-                  );
-                }}
-              />
+        </>
+      )}
 
+      {selectedConfigurationType === IdentityJwtConfigurationType.STATIC && (
+        <>
+          {publicKeyFields.map(({ id }, index) => (
+            <div key={id} className="flex gap-2">
+              <Controller
+                control={control}
+                name={`publicKeys.${index}.value`}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    className="flex-grow"
+                    label={`Public Key ${index + 1}`}
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    icon={
+                      <Tooltip
+                        className="text-center"
+                        content={<span>This field only accepts PEM-formatted public keys</span>}
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                      </Tooltip>
+                    }
+                  >
+                    <TextArea {...field} placeholder="-----BEGIN PUBLIC KEY----- ..." />
+                  </FormControl>
+                )}
+              />
               <IconButton
-                onClick={() => removeBoundClaimField(index)}
+                onClick={() => {
+                  if (publicKeyFields.length === 1) {
+                    createNotification({
+                      type: "error",
+                      text: "A public key is required for static configurations"
+                    });
+                    return;
+                  }
+
+                  removePublicKeyFields(index);
+                }}
                 size="lg"
                 colorSchema="danger"
                 variant="plain"
@@ -542,150 +398,291 @@ export const IdentityJwtAuthForm = ({
             <Button
               variant="outline_bg"
               onClick={() =>
-                appendBoundClaimField({
-                  key: "",
+                appendPublicKeyFields({
                   value: ""
                 })
               }
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               size="xs"
             >
-              Add Claims
+              Add Public Key
             </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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          {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;
+      <Controller
+        control={control}
+        name="boundIssuer"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Issuer" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} type="text" />
+          </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"
-              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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+          <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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
+          variant="outline_bg"
+          onClick={() =>
+            appendBoundClaimField({
+              key: "",
+              value: ""
+            })
+          }
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          {isUpdate ? "Update" : "Create"}
+          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) {
+                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
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,28 +6,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  TextArea
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input, TextArea } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityKubernetesAuth,
   useGetIdentityKubernetesAuth,
   useUpdateIdentityKubernetesAuth
 } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z
   .object({
     kubernetesHost: z.string().min(1),
@@ -58,18 +47,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityKubernetesAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -77,9 +69,11 @@ export const IdentityKubernetesAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityKubernetesAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityKubernetesAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityKubernetesAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -160,7 +154,7 @@ export const IdentityKubernetesAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityId) return;
+      if (!identityAuthMethodData) return;
 
       if (data) {
         await updateMutateAsync({
@@ -171,7 +165,7 @@ export const IdentityKubernetesAuthForm = ({
           allowedNamespaces,
           allowedAudience,
           caCert,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -180,7 +174,7 @@ export const IdentityKubernetesAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           kubernetesHost: kubernetesHost || "",
           tokenReviewerJwt,
           allowedNames: allowedNames || "",
@@ -211,255 +205,242 @@ export const IdentityKubernetesAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          [
-            "kubernetesHost",
-            "tokenReviewerJwt",
-            "accessTokenTTL",
-            "accessTokenMaxTTL",
-            "accessTokenNumUsesLimit",
-            "allowedNames",
-            "allowedNamespaces"
-          ].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Configuration
-            : IdentityFormTab.Advanced
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
+    <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}
-            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}
-            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}
-            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="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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          <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>
-            )}
-          />
-          {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;
-                          }
+            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");
+                    }}
+                    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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+              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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
 
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -7,26 +7,14 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  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 { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z.object({
   accessTokenTrustedIps: z
     .array(
@@ -60,18 +48,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityOidcAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -79,9 +70,11 @@ export const IdentityOidcAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityOidcAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityOidcAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityOidcAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityOidcAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -167,13 +160,13 @@ export const IdentityOidcAuthForm = ({
     boundSubject
   }: FormData) => {
     try {
-      if (!identityId) {
+      if (!identityAuthMethodData) {
         return;
       }
 
       if (data) {
         await updateMutateAsync({
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           organizationId: orgId,
           oidcDiscoveryUrl,
           caCert,
@@ -188,7 +181,7 @@ export const IdentityOidcAuthForm = ({
         });
       } else {
         await addMutateAsync({
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           oidcDiscoveryUrl,
           caCert,
           boundIssuer,
@@ -220,324 +213,315 @@ export const IdentityOidcAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps", "caCert", "boundClaims"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
+    <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="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="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>
-            )}
-          />
-          <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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          <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>
-            )}
-          />
-          {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"
-            >
-              Add Claims
-            </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;
+            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"
-              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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+          <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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
+          variant="outline_bg"
+          onClick={() =>
+            appendBoundClaimField({
+              key: "",
+              value: ""
+            })
+          }
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          {isUpdate ? "Update" : "Add"}
+          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) {
+                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
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,27 +5,16 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityTokenAuth,
   useGetIdentityTokenAuth,
   useUpdateIdentityTokenAuth
 } from "@app/hooks/api";
-import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z
   .object({
     accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
@@ -51,18 +39,21 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData?: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityTokenAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -70,9 +61,12 @@ export const IdentityTokenAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityTokenAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityTokenAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+
+  const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -97,30 +91,6 @@ export const IdentityTokenAuthForm = ({
     remove: removeAccessTokenTrustedIp
   } = useFieldArray({ control, name: "accessTokenTrustedIps" });
 
-  useEffect(() => {
-    if (data) {
-      reset({
-        accessTokenTTL: String(data.accessTokenTTL),
-        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
-        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
-        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
-          ({ ipAddress, prefix }: IdentityTrustedIp) => {
-            return {
-              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
-            };
-          }
-        )
-      });
-    } else {
-      reset({
-        accessTokenTTL: "2592000",
-        accessTokenMaxTTL: "2592000",
-        accessTokenNumUsesLimit: "0",
-        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
-      });
-    }
-  }, [data]);
-
   const onFormSubmit = async ({
     accessTokenTTL,
     accessTokenMaxTTL,
@@ -128,12 +98,12 @@ export const IdentityTokenAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityId) return;
+      if (!identityAuthMethodData) return;
 
       if (data) {
         await updateMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -142,7 +112,7 @@ export const IdentityTokenAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -167,154 +137,149 @@ export const IdentityTokenAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
+    <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}
-            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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          {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;
-                          }
+            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");
+                    }}
+                    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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+              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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
 
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx

@@ -0,0 +1,344 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck, faCopy, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  // DeleteActionModal,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import {
+  useCreateIdentityUniversalAuthClientSecret,
+  useGetIdentityUniversalAuth,
+  useGetIdentityUniversalAuthClientSecrets
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  description: z.string(),
+  ttl: z
+    .string()
+    .refine((value) => Number(value) <= 315360000, "TTL cannot be greater than 315360000"),
+  numUsesLimit: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["revokeClientSecret"]>,
+    data?: {
+      clientSecretPrefix: string;
+      clientSecretId: string;
+    }
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const IdentityUniversalAuthClientSecretModal = ({
+  popUp,
+  handlePopUpOpen,
+  handlePopUpToggle
+}: Props) => {
+  const { t } = useTranslation();
+
+  const [token, setToken] = useState("");
+  const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
+  const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
+
+  const popUpData = popUp?.universalAuthClientSecret?.data as {
+    identityId?: string;
+    name?: string;
+  };
+
+  const { data, isPending } = useGetIdentityUniversalAuthClientSecrets(popUpData?.identityId ?? "");
+  const { data: identityUniversalAuth } = useGetIdentityUniversalAuth(popUpData?.identityId ?? "");
+
+  const { mutateAsync: createClientSecretMutateAsync } =
+    useCreateIdentityUniversalAuthClientSecret();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      description: "",
+      ttl: "",
+      numUsesLimit: ""
+    }
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isClientSecretCopied) {
+      timer = setTimeout(() => setIsClientSecretCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isClientSecretCopied]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isClientIdCopied) {
+      timer = setTimeout(() => setIsClientIdCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isClientIdCopied]);
+
+  const onFormSubmit = async ({ description, ttl, numUsesLimit }: FormData) => {
+    try {
+      if (!popUpData?.identityId) return;
+
+      const { clientSecret } = await createClientSecretMutateAsync({
+        identityId: popUpData.identityId,
+        description,
+        ttl: Number(ttl),
+        numUsesLimit: Number(numUsesLimit)
+      });
+
+      setToken(clientSecret);
+
+      createNotification({
+        text: "Successfully created client secret",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create client secret",
+        type: "error"
+      });
+    }
+  };
+
+  const hasToken = Boolean(token);
+
+  return (
+    <Modal
+      isOpen={popUp?.universalAuthClientSecret?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("universalAuthClientSecret", isOpen);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent title={`Manage Client ID/Secrets for ${popUpData?.name ?? ""}`}>
+        <h2 className="mb-4">Client ID</h2>
+        <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <p className="mr-4 break-all">{identityUniversalAuth?.clientId ?? ""}</p>
+          <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => {
+              navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "");
+              setIsClientIdCopied.on();
+            }}
+          >
+            <FontAwesomeIcon icon={isClientIdCopied ? faCheck : faCopy} />
+            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+              {t("common.click-to-copy")}
+            </span>
+          </IconButton>
+        </div>
+        <h2 className="mb-4">New Client Secret</h2>
+        {hasToken ? (
+          <div>
+            <div className="mb-4 flex items-center justify-between">
+              <p>We will only show this secret once</p>
+              <Button
+                colorSchema="secondary"
+                type="submit"
+                onClick={() => {
+                  reset();
+                  setToken("");
+                }}
+              >
+                Got it
+              </Button>
+            </div>
+            <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+              <p className="mr-4 break-all">{token}</p>
+              <IconButton
+                ariaLabel="copy icon"
+                colorSchema="secondary"
+                className="group relative"
+                onClick={() => {
+                  navigator.clipboard.writeText(token);
+                  setIsClientSecretCopied.on();
+                }}
+              >
+                <FontAwesomeIcon icon={isClientSecretCopied ? faCheck : faCopy} />
+                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                  {t("common.click-to-copy")}
+                </span>
+              </IconButton>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="description"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Description (optional)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="Description" />
+                </FormControl>
+              )}
+            />
+            <div className="flex">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="ttl"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="TTL (seconds - optional)"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <div className="flex">
+                      <Input {...field} placeholder="0" type="number" min="0" step="1" />
+                    </div>
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                defaultValue="0"
+                name="numUsesLimit"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Max Number of Uses"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    className="ml-4"
+                  >
+                    <div className="flex">
+                      <Input {...field} placeholder="0" type="number" min="0" step="1" />
+                      <Button
+                        className="ml-4"
+                        size="sm"
+                        type="submit"
+                        isLoading={isSubmitting}
+                        isDisabled={isSubmitting}
+                      >
+                        Create
+                      </Button>
+                    </div>
+                  </FormControl>
+                )}
+              />
+            </div>
+          </form>
+        )}
+        <h2 className="mb-4">Client Secrets</h2>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Description</Th>
+                <Th>Num Uses</Th>
+                <Th>Expires At</Th>
+                <Th>Client Secret</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={5} innerKey="org-identities-client-secrets" />}
+              {!isPending &&
+                data &&
+                data.length > 0 &&
+                data.map(
+                  ({
+                    id,
+                    description,
+                    clientSecretTTL,
+                    clientSecretPrefix,
+                    clientSecretNumUses,
+                    clientSecretNumUsesLimit,
+                    createdAt
+                  }) => {
+                    let expiresAt;
+                    if (clientSecretTTL > 0) {
+                      expiresAt = new Date(new Date(createdAt).getTime() + clientSecretTTL * 1000);
+                    }
+
+                    return (
+                      <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
+                        <Td>{description === "" ? "-" : description}</Td>
+                        <Td>{`${clientSecretNumUses}${
+                          clientSecretNumUsesLimit ? `/${clientSecretNumUsesLimit}` : ""
+                        }`}</Td>
+                        <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd") : "-"}</Td>
+                        <Td>{`${clientSecretPrefix}****`}</Td>
+                        <Td>
+                          <IconButton
+                            onClick={() => {
+                              handlePopUpOpen("revokeClientSecret", {
+                                clientSecretPrefix,
+                                clientSecretId: id
+                              });
+                            }}
+                            size="lg"
+                            colorSchema="primary"
+                            variant="plain"
+                            ariaLabel="update"
+                          >
+                            <FontAwesomeIcon icon={faXmark} />
+                          </IconButton>
+                        </Td>
+                      </Tr>
+                    );
+                  }
+                )}
+              {!isPending && data && data?.length === 0 && (
+                <Tr>
+                  <Td colSpan={5}>
+                    <EmptyState
+                      title="No client secrets have been created for this identity yet"
+                      icon={faKey}
+                    />
+                  </Td>
+                </Tr>
+              )}
+            </TBody>
+          </Table>
+        </TableContainer>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,27 +6,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs
-} from "@app/components/v2";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityUniversalAuth,
   useGetIdentityUniversalAuth,
   useUpdateIdentityUniversalAuth
 } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-import { IdentityFormTab } from "./types";
-
 const schema = z
   .object({
     accessTokenTTL: z
@@ -62,27 +52,33 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityId?: string;
-  isUpdate?: boolean;
+  identityAuthMethodData?: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
 };
 
 export const IdentityUniversalAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityId,
-  isUpdate
+  identityAuthMethodData
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { subscription } = useSubscription();
   const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
-  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const { data } = useGetIdentityUniversalAuth(identityId ?? "", {
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+
+  const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -153,13 +149,13 @@ export const IdentityUniversalAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityId) return;
+      if (!identityAuthMethodData) return;
 
       if (data) {
         // update universal auth configuration
         await updateMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           clientSecretTrustedIps,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -171,7 +167,7 @@ export const IdentityUniversalAuthForm = ({
 
         await addMutateAsync({
           organizationId: orgId,
-          identityId,
+          identityId: identityAuthMethodData.identityId,
           clientSecretTrustedIps,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -199,221 +195,216 @@ export const IdentityUniversalAuthForm = ({
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        setTabValue(
-          ["accessTokenTrustedIps", "clientSecretTrustedIps"].includes(Object.keys(fields)[0])
-            ? IdentityFormTab.Advanced
-            : IdentityFormTab.Configuration
-        );
-      })}
-    >
-      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-        <TabList>
-          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        </TabList>
-        <TabPanel value={IdentityFormTab.Configuration}>
+    <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="0" 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}
-            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>
-            )}
+            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>
+              );
+            }}
           />
-          <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="0" 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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          {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;
-                          }
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeClientSecretTrustedIp(index);
+                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>
-        </TabPanel>
-      </Tabs>
-      <div className="flex items-center">
+              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
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendClientSecretTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          {isUpdate ? "Update" : "Add"}
+          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
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
         >
-          Cancel
+          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>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/types/index.ts

@@ -1,4 +0,0 @@
-export enum IdentityFormTab {
-  Advanced = "advanced",
-  Configuration = "configuration"
-}

frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -1,24 +1,45 @@
+import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { DeleteActionModal, PageHeader } from "@app/components/v2";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  PageHeader,
+  Tooltip
+} from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useDeleteIdentity, useGetIdentityById } from "@app/hooks/api";
+import {
+  IdentityAuthMethod,
+  useDeleteIdentity,
+  useGetIdentityById,
+  useRevokeIdentityTokenAuthToken,
+  useRevokeIdentityUniversalAuthClientSecret
+} from "@app/hooks/api";
+import { Identity } from "@app/hooks/api/identities/types";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { ViewIdentityAuthModal } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
 import { IdentityAuthMethodModal } from "../AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal";
 import { IdentityModal } from "../AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal";
+import { IdentityUniversalAuthClientSecretModal } from "../AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal";
 import {
   IdentityAuthenticationSection,
+  IdentityClientSecretModal,
   IdentityDetailsSection,
-  IdentityProjectsSection
+  IdentityProjectsSection,
+  IdentityTokenListModal,
+  IdentityTokenModal
 } from "./components";
 
 const Page = () => {
@@ -31,13 +52,25 @@ const Page = () => {
   const orgId = currentOrg?.id || "";
   const { data } = useGetIdentityById(identityId);
   const { mutateAsync: deleteIdentity } = useDeleteIdentity();
+  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",
     "identityAuthMethod",
-    "upgradePlan",
-    "viewAuthMethod"
+    "revokeAuthMethod",
+    "token",
+    "tokenList",
+    "revokeToken",
+    "clientSecret",
+    "revokeClientSecret",
+    "universalAuthClientSecret", // list of client secrets
+    "upgradePlan"
   ] as const);
 
   const onDeleteIdentitySubmit = async (id: string) => {
@@ -71,15 +104,148 @@ const Page = () => {
     }
   };
 
+  const onRevokeTokenSubmit = async ({
+    identityId: parentIdentityId,
+    tokenId,
+    name
+  }: {
+    identityId: string;
+    tokenId: string;
+    name: string;
+  }) => {
+    try {
+      await revokeToken({
+        identityId: parentIdentityId,
+        tokenId
+      });
+
+      handlePopUpClose("revokeToken");
+
+      createNotification({
+        text: `Successfully revoked token ${name ?? ""}`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to delete identity";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  const onDeleteClientSecretSubmit = async ({ clientSecretId }: { clientSecretId: string }) => {
+    try {
+      if (!data?.identity.id || selectedAuthMethod !== IdentityAuthMethod.UNIVERSAL_AUTH) return;
+
+      await revokeClientSecret({
+        identityId: data?.identity.id,
+        clientSecretId
+      });
+
+      handlePopUpToggle("revokeClientSecret", false);
+
+      createNotification({
+        text: "Successfully deleted client secret",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete client secret",
+        type: "error"
+      });
+    }
+  };
+
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.identity.name} />
+          <PageHeader title={data.identity.name}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild className="rounded-lg">
+                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                  <Tooltip content="More options">
+                    <Button variant="outline_bg">More</Button>
+                  </Tooltip>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="p-1">
+                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={async () => {
+                        handlePopUpOpen("identity", {
+                          identityId,
+                          name: data.identity.name,
+                          role: data.role,
+                          customRole: data.customRole
+                        });
+                      }}
+                      disabled={!isAllowed}
+                    >
+                      Edit Identity
+                    </DropdownMenuItem>
+                  )}
+                </OrgPermissionCan>
+                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={async () => {
+                        handlePopUpOpen("identityAuthMethod", {
+                          identityId,
+                          name: data.identity.name,
+                          allAuthMethods: data.identity.authMethods
+                        });
+                      }}
+                      disabled={!isAllowed}
+                    >
+                      Add new auth method
+                    </DropdownMenuItem>
+                  )}
+                </OrgPermissionCan>
+                <OrgPermissionCan
+                  I={OrgPermissionActions.Delete}
+                  a={OrgPermissionSubjects.Identity}
+                >
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        isAllowed
+                          ? "hover:!bg-red-500 hover:!text-white"
+                          : "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={async () => {
+                        handlePopUpOpen("deleteIdentity", {
+                          identityId,
+                          name: data.identity.name
+                        });
+                      }}
+                      disabled={!isAllowed}
+                    >
+                      Delete Identity
+                    </DropdownMenuItem>
+                  )}
+                </OrgPermissionCan>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </PageHeader>
           <div className="flex">
             <div className="mr-4 w-96">
               <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
               <IdentityAuthenticationSection
+                selectedAuthMethod={selectedAuthMethod}
+                setSelectedAuthMethod={setSelectedAuthMethod}
                 identityId={identityId}
                 handlePopUpOpen={handlePopUpOpen}
               />
@@ -94,6 +260,18 @@ const Page = () => {
         handlePopUpOpen={handlePopUpOpen}
         handlePopUpToggle={handlePopUpToggle}
       />
+      <IdentityTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <IdentityTokenListModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <IdentityClientSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <IdentityUniversalAuthClientSecretModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
@@ -112,11 +290,41 @@ const Page = () => {
           )
         }
       />
-      <ViewIdentityAuthModal
-        isOpen={popUp.viewAuthMethod.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("viewAuthMethod", isOpen)}
-        authMethod={popUp.viewAuthMethod.data}
-        identityId={identityId}
+      <DeleteActionModal
+        isOpen={popUp.revokeToken.isOpen}
+        title={`Are you sure want to revoke ${
+          (popUp?.revokeToken?.data as { name: string })?.name || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("revokeToken", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const revokeTokenData = popUp?.revokeToken?.data as {
+            identityId: string;
+            tokenId: string;
+            name: string;
+          };
+
+          return onRevokeTokenSubmit(revokeTokenData);
+        }}
+      />
+      <DeleteActionModal
+        isOpen={popUp.revokeClientSecret.isOpen}
+        title={`Are you sure want to delete the client secret ${
+          (popUp?.revokeClientSecret?.data as { clientSecretPrefix: string })?.clientSecretPrefix ||
+          ""
+        }************?`}
+        onChange={(isOpen) => handlePopUpToggle("revokeClientSecret", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const deleteClientSecretData = popUp?.revokeClientSecret?.data as {
+            clientSecretId: string;
+            clientSecretPrefix: string;
+          };
+
+          return onDeleteClientSecretSubmit({
+            clientSecretId: deleteClientSecretData.clientSecretId
+          });
+        }}
       />
     </div>
   );

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx

@@ -1,73 +1,155 @@
-import { faCog, faPlus } 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 { Button } from "@app/components/v2";
+import { Button, IconButton, Select, SelectItem, Tooltip } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { IdentityAuthMethod, identityAuthToNameMap, useGetIdentityById } from "@app/hooks/api";
+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";
+import { IdentityTokens } from "./IdentityTokens";
+
 type Props = {
   identityId: string;
+  setSelectedAuthMethod: (authMethod: Identity["authMethods"][number] | null) => void;
+  selectedAuthMethod: Identity["authMethods"][number] | null;
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod", "viewAuthMethod"]>,
-    data?: object | IdentityAuthMethod
+    popUpName: keyof UsePopUpState<
+      [
+        "clientSecret",
+        "identityAuthMethod",
+        "revokeClientSecret",
+        "token",
+        "revokeToken",
+        "universalAuthClientSecret",
+        "tokenList"
+      ]
+    >,
+    data?: object
   ) => 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="Add new auth method">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() =>
+                    handlePopUpOpen("identityAuthMethod", {
+                      identityId,
+                      name: data.identity.name,
+                      allAuthMethods: data.identity.authMethods
+                    })
+                  }
+                >
+                  <FontAwesomeIcon icon={faPlus} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
       </div>
       {data.identity.authMethods.length > 0 ? (
-        <div className="flex flex-col divide-y divide-mineshaft-400/50">
-          {data.identity.authMethods.map((authMethod) => (
-            <button
-              key={authMethod}
-              onClick={() => handlePopUpOpen("viewAuthMethod", authMethod)}
-              type="button"
-              className="flex w-full items-center justify-between bg-mineshaft-900 px-4 py-2 text-sm hover:bg-mineshaft-700 data-[state=open]:bg-mineshaft-600"
-            >
-              <span>{identityAuthToNameMap[authMethod]}</span>
-              <FontAwesomeIcon icon={faCog} size="xs" className="text-mineshaft-400" />
-            </button>
-          ))}
-        </div>
+        <>
+          <div className="py-4">
+            <div className="flex justify-between">
+              <p className="mb-0.5 ml-px text-sm font-semibold text-mineshaft-300">Auth Method</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <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>
+          {selectedAuthMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
+            <IdentityClientSecrets identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+          )}
+          {selectedAuthMethod === IdentityAuthMethod.TOKEN_AUTH && (
+            <IdentityTokens identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+          )}
+        </>
       ) : (
         <div className="w-full space-y-2 pt-2">
           <p className="text-sm text-mineshaft-300">
             No authentication methods configured. Get started by creating a new auth method.
           </p>
+          <Button
+            onClick={() => {
+              handlePopUpOpen("identityAuthMethod", {
+                identityId,
+                name: data.identity.name,
+                allAuthMethods: data.identity.authMethods
+              });
+            }}
+            variant="outline_bg"
+            className="w-full"
+            size="xs"
+          >
+            Create Auth Method
+          </Button>
         </div>
       )}
-      {!Object.values(IdentityAuthMethod).every((method) =>
-        data.identity.authMethods.includes(method)
-      ) && (
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-          {(isAllowed) => (
-            <Button
-              isDisabled={!isAllowed}
-              onClick={() => {
-                handlePopUpOpen("identityAuthMethod", {
-                  identityId,
-                  name: data.identity.name,
-                  allAuthMethods: data.identity.authMethods
-                });
-              }}
-              variant="outline_bg"
-              className="mt-3 w-full"
-              size="xs"
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            >
-              {data.identity.authMethods.length ? "Add" : "Create"} Auth Method
-            </Button>
-          )}
-        </OrgPermissionCan>
-      )}
     </div>
   ) : (
     <div />

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityTokens.tsx

@@ -1,4 +1,4 @@
-import { faEllipsisVertical, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
@@ -8,7 +8,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  IconButton,
   Tooltip
 } from "@app/components/v2";
 import { useGetIdentityById, useGetIdentityTokensTokenAuth } from "@app/hooks/api";
@@ -28,13 +27,10 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
   return (
     <div>
       {tokens?.length ? (
-        <div className="flex items-center justify-between border-b border-bunker-400 pb-1">
-          <p className="text-sm font-medium text-bunker-300">{`Access Tokens (${tokens.length})`}</p>
+        <div className="flex justify-between">
+          <p className="text-sm font-semibold text-mineshaft-300">{`Access Tokens (${tokens.length})`}</p>
           <Button
-            size="xs"
-            className="underline"
-            variant="plain"
-            colorSchema="secondary"
+            variant="link"
             onClick={() => {
               handlePopUpOpen("tokenList", {
                 identityId,
@@ -54,16 +50,16 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
         );
         return (
           <div
-            className="group flex items-center justify-between border-b border-mineshaft-500 px-2 py-2 last:pb-0"
+            className="group flex items-center justify-between py-2 last:pb-0"
             key={`identity-token-${token.id}`}
           >
             <div className="flex items-center">
-              <FontAwesomeIcon size="xs" className="text-mineshaft-400" icon={faKey} />
-              <div className="ml-3">
-                <p className="text-sm font-medium text-mineshaft-300">
+              <FontAwesomeIcon size="1x" icon={faKey} />
+              <div className="ml-4">
+                <p className="text-sm font-semibold text-mineshaft-300">
                   {token.name ? token.name : "-"}
                 </p>
-                <p className="text-xs text-mineshaft-400">
+                <p className="text-sm text-mineshaft-300">
                   {token.isAccessTokenRevoked
                     ? "Revoked"
                     : `Expires on ${format(expiresAt, "yyyy-MM-dd")}`}
@@ -71,19 +67,14 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
               </div>
             </div>
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Tooltip side="right" content="More options">
-                  <IconButton
-                    colorSchema="secondary"
-                    variant="plain"
-                    size="xs"
-                    ariaLabel="More options"
-                  >
-                    <FontAwesomeIcon icon={faEllipsisVertical} />
-                  </IconButton>
-                </Tooltip>
+              <DropdownMenuTrigger asChild className="rounded-lg">
+                <div className="opacity-0 transition-opacity duration-300 hover:text-primary-400 group-hover:opacity-100 data-[state=open]:text-primary-400">
+                  <Tooltip content="More options">
+                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                  </Tooltip>
+                </div>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="z-[101] p-1">
+              <DropdownMenuContent align="start" className="p-1">
                 <DropdownMenuItem
                   onClick={async () => {
                     handlePopUpOpen("token", {
@@ -115,9 +106,8 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
       })}
       <Button
         className="mr-4 mt-4 w-full"
-        colorSchema="secondary"
+        colorSchema="primary"
         type="submit"
-        size="xs"
         onClick={() => {
           handlePopUpOpen("token", {
             identityId

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -1,25 +1,8 @@
-import {
-  faCheck,
-  faChevronDown,
-  faCopy,
-  faEdit,
-  faKey,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faKey, faPencil } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  IconButton,
-  Tag,
-  Tooltip
-} from "@app/components/v2";
+import { IconButton, Tag, Tooltip } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useTimedReset } from "@app/hooks";
 import { useGetIdentityById } from "@app/hooks/api";
@@ -28,7 +11,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 type Props = {
   identityId: string;
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identity", "identityAuthMethod", "deleteIdentity"]>,
+    popUpName: keyof UsePopUpState<["identity", "identityAuthMethod", "token", "clientSecret"]>,
     data?: object
   ) => void;
 };
@@ -43,61 +26,31 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
     <div className="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">Identity Details</h3>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="xs"
-              rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
-              colorSchema="secondary"
-            >
-              Options
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="min-w-[120px]" align="end">
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-              {(isAllowed) => (
-                <DropdownMenuItem
-                  className={twMerge(
-                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                  )}
-                  icon={<FontAwesomeIcon icon={faEdit} />}
-                  onClick={async () => {
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit Identity">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() => {
                     handlePopUpOpen("identity", {
                       identityId,
                       name: data.identity.name,
                       role: data.role,
-                      customRole: data.customRole
+                      customRole: data.customRole,
+                      metadata: data.metadata
                     });
                   }}
-                  disabled={!isAllowed}
                 >
-                  Edit Identity
-                </DropdownMenuItem>
-              )}
-            </OrgPermissionCan>
-            <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Identity}>
-              {(isAllowed) => (
-                <DropdownMenuItem
-                  className={twMerge(
-                    isAllowed
-                      ? "hover:!bg-red-500 hover:!text-white"
-                      : "pointer-events-none cursor-not-allowed opacity-50"
-                  )}
-                  onClick={async () => {
-                    handlePopUpOpen("deleteIdentity", {
-                      identityId,
-                      name: data.identity.name
-                    });
-                  }}
-                  icon={<FontAwesomeIcon icon={faTrash} />}
-                  disabled={!isAllowed}
-                >
-                  Delete Identity
-                </DropdownMenuItem>
-              )}
-            </OrgPermissionCan>
-          </DropdownMenuContent>
-        </DropdownMenu>
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
       </div>
       <div className="pt-4">
         <div className="mb-4">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityTokenListModal.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck, faCopy, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import {
+  useCreateTokenIdentityTokenAuth,
+  useGetIdentityTokensTokenAuth,
+  useGetIdentityUniversalAuthClientSecrets
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  name: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["tokenList", "revokeToken"]>;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["revokeToken"]>, data?: object) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["tokenList", "revokeToken"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const IdentityTokenListModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const { t } = useTranslation();
+
+  const [token, setToken] = useState("");
+  const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
+  const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
+
+  const popUpData = popUp?.tokenList?.data as {
+    identityId: string;
+    name: string;
+  };
+
+  const { data: tokens } = useGetIdentityTokensTokenAuth(popUpData?.identityId ?? "");
+  const { data, isPending } = useGetIdentityUniversalAuthClientSecrets(popUpData?.identityId ?? "");
+
+  const { mutateAsync: createToken } = useCreateTokenIdentityTokenAuth();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: ""
+    }
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isClientSecretCopied) {
+      timer = setTimeout(() => setIsClientSecretCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isClientSecretCopied]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isClientIdCopied) {
+      timer = setTimeout(() => setIsClientIdCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isClientIdCopied]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (!popUpData?.identityId) return;
+
+      const newTokenData = await createToken({
+        identityId: popUpData.identityId,
+        name
+      });
+
+      setToken(newTokenData.accessToken);
+
+      createNotification({
+        text: "Successfully created token",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create token",
+        type: "error"
+      });
+    }
+  };
+
+  const hasToken = Boolean(token);
+
+  return (
+    <Modal
+      isOpen={popUp?.tokenList?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("tokenList", isOpen);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent title={`Manage Access Tokens for ${popUpData?.name ?? ""}`}>
+        <h2 className="mb-4">New Token</h2>
+        {hasToken ? (
+          <div>
+            <div className="mb-4 flex items-center justify-between">
+              <p>We will only show this token once</p>
+              <Button
+                colorSchema="secondary"
+                type="submit"
+                onClick={() => {
+                  reset();
+                  setToken("");
+                }}
+              >
+                Got it
+              </Button>
+            </div>
+            <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+              <p className="mr-4 break-all">{token}</p>
+              <IconButton
+                ariaLabel="copy icon"
+                colorSchema="secondary"
+                className="group relative"
+                onClick={() => {
+                  navigator.clipboard.writeText(token);
+                  setIsClientSecretCopied.on();
+                }}
+              >
+                <FontAwesomeIcon icon={isClientSecretCopied ? faCheck : faCopy} />
+                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                  {t("common.click-to-copy")}
+                </span>
+              </IconButton>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
+            <Controller
+              control={control}
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                  <div className="flex">
+                    <Input {...field} placeholder="My Token" />
+                    <Button
+                      className="ml-4"
+                      size="sm"
+                      type="submit"
+                      isLoading={isSubmitting}
+                      isDisabled={isSubmitting}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </FormControl>
+              )}
+            />
+          </form>
+        )}
+        <h2 className="mb-4">Tokens</h2>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>name</Th>
+                <Th>Num Uses</Th>
+                <Th>Created At</Th>
+                <Th>Max Expires At</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={5} innerKey="identities-tokens" />}
+              {!isPending &&
+                tokens?.map(
+                  ({
+                    id,
+                    createdAt,
+                    name,
+                    accessTokenNumUses,
+                    accessTokenNumUsesLimit,
+                    accessTokenMaxTTL,
+                    isAccessTokenRevoked
+                  }) => {
+                    const expiresAt = new Date(
+                      new Date(createdAt).getTime() + accessTokenMaxTTL * 1000
+                    );
+
+                    return (
+                      <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
+                        <Td>{name === "" ? "-" : name}</Td>
+                        <Td>{`${accessTokenNumUses}${
+                          accessTokenNumUsesLimit ? `/${accessTokenNumUsesLimit}` : ""
+                        }`}</Td>
+                        <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                        <Td>
+                          {isAccessTokenRevoked ? "Revoked" : `${format(expiresAt, "yyyy-MM-dd")}`}
+                        </Td>
+                        <Td>
+                          {!isAccessTokenRevoked && (
+                            <IconButton
+                              onClick={() => {
+                                handlePopUpOpen("revokeToken", {
+                                  identityId: popUpData?.identityId,
+                                  tokenId: id,
+                                  name
+                                });
+                              }}
+                              size="lg"
+                              colorSchema="primary"
+                              variant="plain"
+                              ariaLabel="update"
+                            >
+                              <FontAwesomeIcon icon={faXmark} />
+                            </IconButton>
+                          )}
+                        </Td>
+                      </Tr>
+                    );
+                  }
+                )}
+              {!isPending && data && data?.length === 0 && (
+                <Tr>
+                  <Td colSpan={5}>
+                    <EmptyState
+                      title="No tokens have been created for this identity yet"
+                      icon={faKey}
+                    />
+                  </Td>
+                </Tr>
+              )}
+            </TBody>
+          </Table>
+        </TableContainer>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthFieldDisplay.tsx

@@ -1,20 +0,0 @@
-import { ReactNode } from "react";
-
-type Props = {
-  label: string;
-  children: ReactNode;
-  className?: string;
-};
-
-export const IdentityAuthFieldDisplay = ({ label, children, className }: Props) => {
-  return (
-    <div className={className}>
-      <span className="text-sm text-mineshaft-400">{label}</span>
-      {children ? (
-        <p className="break-words text-base leading-4">{children}</p>
-      ) : (
-        <p className="text-base italic leading-4 text-bunker-400">Not set</p>
-      )}
-    </div>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx

@@ -1,239 +0,0 @@
-import { useState } from "react";
-import { faBan, faEdit, faKey, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  IconButton,
-  Pagination,
-  Table,
-  TableContainer,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { useRevokeIdentityTokenAuthToken } from "@app/hooks/api";
-import { IdentityAccessToken } from "@app/hooks/api/identities/types";
-import { IdentityTokenModal } from "@app/pages/organization/IdentityDetailsByIDPage/components";
-
-type Props = {
-  tokens: IdentityAccessToken[];
-  identityId: string;
-};
-
-export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
-  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    "token",
-    "revokeToken"
-  ] as const);
-
-  const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(5);
-
-  const { mutateAsync: revokeToken } = useRevokeIdentityTokenAuthToken();
-
-  const onRevokeTokenSubmit = async ({
-    identityId: parentIdentityId,
-    tokenId,
-    name
-  }: {
-    identityId: string;
-    tokenId: string;
-    name: string;
-  }) => {
-    try {
-      await revokeToken({
-        identityId: parentIdentityId,
-        tokenId
-      });
-
-      handlePopUpClose("revokeToken");
-
-      createNotification({
-        text: `Successfully revoked token ${name ?? ""}`,
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to revoke token";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <div className="col-span-2 mt-3">
-      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
-        <span className="text-bunker-300">Access Tokens</span>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-          {(isAllowed) => (
-            <Button
-              size="xs"
-              isDisabled={!isAllowed}
-              onClick={() => {
-                handlePopUpOpen("token", {
-                  identityId
-                });
-              }}
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              colorSchema="secondary"
-            >
-              Add Token
-            </Button>
-          )}
-        </OrgPermissionCan>
-      </div>
-      <TableContainer className="mt-4 rounded-none border-none">
-        <Table>
-          {Boolean(tokens?.length) && (
-            <THead>
-              <Tr className="text-xs font-medium">
-                <Th className="py-1 font-normal">Name</Th>
-                <Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
-                <Th className="py-1 font-normal">Expires</Th>
-                <Th className="w-5 py-1 font-normal" />
-              </Tr>
-            </THead>
-          )}
-          <TBody>
-            {tokens
-              .slice((page - 1) * perPage, perPage * page)
-              .map(
-                ({
-                  createdAt,
-                  isAccessTokenRevoked,
-                  name,
-                  accessTokenTTL,
-                  accessTokenNumUsesLimit,
-                  accessTokenNumUses,
-                  id
-                }) => {
-                  let expiresAt;
-                  if (accessTokenTTL > 0) {
-                    expiresAt = new Date(new Date(createdAt).getTime() + accessTokenTTL * 1000);
-                  }
-
-                  return (
-                    <Tr className="text-xs hover:bg-mineshaft-700" key={id}>
-                      <Td>{name || "-"}</Td>
-                      <Td>
-                        {`${accessTokenNumUses}${accessTokenNumUsesLimit ? `/${accessTokenNumUsesLimit}` : ""}`}
-                      </Td>
-                      <Td className="whitespace-nowrap">
-                        {/* eslint-disable-next-line no-nested-ternary */}
-                        {isAccessTokenRevoked
-                          ? "Revoked"
-                          : expiresAt
-                            ? format(expiresAt, "yyyy-MM-dd")
-                            : "-"}
-                      </Td>
-                      <Td>
-                        <div className="flex items-center gap-2">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <Tooltip content={isAllowed ? "Edit Token" : "Access Restricted"}>
-                                <IconButton
-                                  isDisabled={!isAllowed}
-                                  onClick={() => {
-                                    handlePopUpOpen("token", {
-                                      identityId,
-                                      tokenId: id,
-                                      name
-                                    });
-                                  }}
-                                  size="xs"
-                                  variant="plain"
-                                  ariaLabel="Edit token"
-                                >
-                                  <FontAwesomeIcon icon={faEdit} />
-                                </IconButton>
-                              </Tooltip>
-                            )}
-                          </OrgPermissionCan>
-                          {!isAccessTokenRevoked && (
-                            <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
-                              a={OrgPermissionSubjects.Identity}
-                            >
-                              {(isAllowed) => (
-                                <Tooltip content={isAllowed ? "Revoke Token" : "Access Restricted"}>
-                                  <IconButton
-                                    isDisabled={!isAllowed}
-                                    onClick={() => {
-                                      handlePopUpOpen("revokeToken", {
-                                        identityId,
-                                        tokenId: id,
-                                        name
-                                      });
-                                    }}
-                                    size="xs"
-                                    colorSchema="danger"
-                                    variant="plain"
-                                    ariaLabel="Revoke token"
-                                  >
-                                    <FontAwesomeIcon icon={faBan} />
-                                  </IconButton>
-                                </Tooltip>
-                              )}
-                            </OrgPermissionCan>
-                          )}
-                        </div>
-                      </Td>
-                    </Tr>
-                  );
-                }
-              )}
-          </TBody>
-        </Table>
-        {!tokens?.length && (
-          <EmptyState iconSize="1x" title="No access tokens have been generated" icon={faKey} />
-        )}
-        {tokens.length > 0 && (
-          <Pagination
-            count={tokens.length}
-            page={page}
-            perPage={perPage}
-            perPageList={[5]}
-            onChangePage={(newPage) => setPage(newPage)}
-            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
-          />
-        )}
-      </TableContainer>
-      <DeleteActionModal
-        isOpen={popUp.revokeToken.isOpen}
-        title={`Are you sure want to revoke ${
-          (popUp?.revokeToken?.data as { name: string })?.name || ""
-        }?`}
-        onChange={(isOpen) => handlePopUpToggle("revokeToken", isOpen)}
-        deleteKey="confirm"
-        onDeleteApproved={() => {
-          const revokeTokenData = popUp?.revokeToken?.data as {
-            identityId: string;
-            tokenId: string;
-            name: string;
-          };
-
-          return onRevokeTokenSubmit(revokeTokenData);
-        }}
-      />
-      <IdentityTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-    </div>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx

@@ -1,196 +0,0 @@
-import { useState } from "react";
-import { faKey, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  IconButton,
-  Pagination,
-  Table,
-  TableContainer,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { useRevokeIdentityUniversalAuthClientSecret } from "@app/hooks/api";
-import { ClientSecretData } from "@app/hooks/api/identities/types";
-import { IdentityClientSecretModal } from "@app/pages/organization/IdentityDetailsByIDPage/components";
-
-type Props = {
-  clientSecrets: ClientSecretData[];
-  identityId: string;
-};
-
-export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identityId }: Props) => {
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-    "revokeClientSecret",
-    "clientSecret"
-  ] as const);
-
-  const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(5);
-
-  const { mutateAsync: revokeClientSecret } = useRevokeIdentityUniversalAuthClientSecret();
-
-  const onDeleteClientSecretSubmit = async (clientSecretId: string) => {
-    try {
-      await revokeClientSecret({
-        identityId,
-        clientSecretId
-      });
-
-      handlePopUpToggle("revokeClientSecret", false);
-
-      createNotification({
-        text: "Successfully deleted client secret",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete client secret",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <div className="col-span-2">
-      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
-        <span className="text-bunker-300">Client Secrets</span>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-          {(isAllowed) => (
-            <Button
-              isDisabled={!isAllowed}
-              size="xs"
-              onClick={() => {
-                handlePopUpOpen("clientSecret", {
-                  identityId
-                });
-              }}
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              colorSchema="secondary"
-            >
-              Add Client Secret
-            </Button>
-          )}
-        </OrgPermissionCan>
-      </div>
-      <TableContainer className="mt-4 rounded-none border-none">
-        <Table>
-          {Boolean(clientSecrets?.length) && (
-            <THead>
-              <Tr className="text-xs font-medium">
-                <Th className="py-1 font-normal">Secret</Th>
-                <Th className="py-1 font-normal">Description</Th>
-                <Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
-                <Th className="py-1 font-normal">Expires</Th>
-                <Th className="w-5 py-1 font-normal" />
-              </Tr>
-            </THead>
-          )}
-          <TBody>
-            {clientSecrets
-              .slice((page - 1) * perPage, perPage * page)
-              .map(
-                ({
-                  createdAt,
-                  clientSecretTTL,
-                  description,
-                  clientSecretNumUses,
-                  clientSecretPrefix,
-                  clientSecretNumUsesLimit,
-                  id
-                }) => {
-                  let expiresAt;
-                  if (clientSecretTTL > 0) {
-                    expiresAt = new Date(new Date(createdAt).getTime() + clientSecretTTL * 1000);
-                  }
-
-                  return (
-                    <Tr className="text-xs hover:bg-mineshaft-700" key={id}>
-                      <Td>{clientSecretPrefix}***</Td>
-                      <Td>{description || "-"}</Td>
-                      <Td>
-                        {`${clientSecretNumUses}${clientSecretNumUsesLimit ? `/${clientSecretNumUsesLimit}` : ""}`}
-                      </Td>
-                      <Td className="whitespace-nowrap">
-                        {expiresAt ? format(expiresAt, "yyyy-MM-dd") : "-"}
-                      </Td>
-                      <Td>
-                        <OrgPermissionCan
-                          I={OrgPermissionActions.Edit}
-                          a={OrgPermissionSubjects.Identity}
-                        >
-                          {(isAllowed) => (
-                            <Tooltip content={isAllowed ? "Delete Secret" : "Access Restricted"}>
-                              <IconButton
-                                isDisabled={!isAllowed}
-                                onClick={() => {
-                                  handlePopUpOpen("revokeClientSecret", {
-                                    clientSecretPrefix,
-                                    clientSecretId: id
-                                  });
-                                }}
-                                size="xs"
-                                colorSchema="danger"
-                                variant="plain"
-                                ariaLabel="Delete secret"
-                              >
-                                <FontAwesomeIcon icon={faTrash} />
-                              </IconButton>
-                            </Tooltip>
-                          )}
-                        </OrgPermissionCan>
-                      </Td>
-                    </Tr>
-                  );
-                }
-              )}
-          </TBody>
-        </Table>
-        {!clientSecrets?.length && (
-          <EmptyState iconSize="1x" title="No client secrets have been generated" icon={faKey} />
-        )}
-        {clientSecrets.length > 0 && (
-          <Pagination
-            count={clientSecrets.length}
-            page={page}
-            perPage={perPage}
-            perPageList={[5]}
-            onChangePage={(newPage) => setPage(newPage)}
-            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
-          />
-        )}
-      </TableContainer>
-      <DeleteActionModal
-        isOpen={popUp.revokeClientSecret.isOpen}
-        title={`Are you sure want to delete the client secret ${
-          (popUp?.revokeClientSecret?.data as { clientSecretPrefix: string })?.clientSecretPrefix ||
-          ""
-        }************?`}
-        onChange={(isOpen) => handlePopUpToggle("revokeClientSecret", isOpen)}
-        deleteKey="confirm"
-        onDeleteApproved={() => {
-          const deleteClientSecretData = popUp?.revokeClientSecret?.data as {
-            clientSecretId: string;
-            clientSecretPrefix: string;
-          };
-
-          return onDeleteClientSecretSubmit(deleteClientSecretData.clientSecretId);
-        }}
-      />
-      <IdentityClientSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-    </div>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal.tsx

@@ -1,174 +0,0 @@
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { createNotification } from "@app/components/notifications";
-import { DeleteActionModal, Modal, ModalContent } from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import {
-  IdentityAuthMethod,
-  identityAuthToNameMap,
-  useDeleteIdentityAwsAuth,
-  useDeleteIdentityAzureAuth,
-  useDeleteIdentityGcpAuth,
-  useDeleteIdentityJwtAuth,
-  useDeleteIdentityKubernetesAuth,
-  useDeleteIdentityOidcAuth,
-  useDeleteIdentityTokenAuth,
-  useDeleteIdentityUniversalAuth
-} from "@app/hooks/api";
-
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityAwsAuthContent } from "./ViewIdentityAwsAuthContent";
-import { ViewIdentityAzureAuthContent } from "./ViewIdentityAzureAuthContent";
-import { ViewIdentityGcpAuthContent } from "./ViewIdentityGcpAuthContent";
-import { ViewIdentityJwtAuthContent } from "./ViewIdentityJwtAuthContent";
-import { ViewIdentityKubernetesAuthContent } from "./ViewIdentityKubernetesAuthContent";
-import { ViewIdentityOidcAuthContent } from "./ViewIdentityOidcAuthContent";
-import { ViewIdentityTokenAuthContent } from "./ViewIdentityTokenAuthContent";
-import { ViewIdentityUniversalAuthContent } from "./ViewIdentityUniversalAuthContent";
-
-type Props = {
-  identityId: string;
-  authMethod?: IdentityAuthMethod;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onDeleteAuthMethod: () => void;
-};
-
-type TRevokeOptions = {
-  identityId: string;
-  organizationId: string;
-};
-
-export const Content = ({
-  identityId,
-  authMethod,
-  onDeleteAuthMethod
-}: Pick<Props, "authMethod" | "identityId" | "onDeleteAuthMethod">) => {
-  const { currentOrg } = useOrganization();
-  const orgId = currentOrg?.id || "";
-
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-    "revokeAuthMethod",
-    "upgradePlan",
-    "identityAuthMethod"
-  ] as const);
-
-  const { mutateAsync: revokeUniversalAuth } = useDeleteIdentityUniversalAuth();
-  const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
-  const { mutateAsync: revokeKubernetesAuth } = useDeleteIdentityKubernetesAuth();
-  const { mutateAsync: revokeGcpAuth } = useDeleteIdentityGcpAuth();
-  const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
-  const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
-  const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
-  const { mutateAsync: revokeJwtAuth } = useDeleteIdentityJwtAuth();
-
-  let Component: (props: ViewAuthMethodProps) => JSX.Element;
-  let revokeMethod: (revokeOptions: TRevokeOptions) => Promise<any>;
-
-  const handleDelete = () => handlePopUpOpen("revokeAuthMethod");
-
-  switch (authMethod) {
-    case IdentityAuthMethod.UNIVERSAL_AUTH:
-      revokeMethod = revokeUniversalAuth;
-      Component = ViewIdentityUniversalAuthContent;
-      break;
-    case IdentityAuthMethod.TOKEN_AUTH:
-      revokeMethod = revokeTokenAuth;
-      Component = ViewIdentityTokenAuthContent;
-      break;
-    case IdentityAuthMethod.KUBERNETES_AUTH:
-      revokeMethod = revokeKubernetesAuth;
-      Component = ViewIdentityKubernetesAuthContent;
-      break;
-    case IdentityAuthMethod.GCP_AUTH:
-      revokeMethod = revokeGcpAuth;
-      Component = ViewIdentityGcpAuthContent;
-      break;
-    case IdentityAuthMethod.AWS_AUTH:
-      revokeMethod = revokeAwsAuth;
-      Component = ViewIdentityAwsAuthContent;
-      break;
-    case IdentityAuthMethod.AZURE_AUTH:
-      revokeMethod = revokeAzureAuth;
-      Component = ViewIdentityAzureAuthContent;
-      break;
-    case IdentityAuthMethod.OIDC_AUTH:
-      revokeMethod = revokeOidcAuth;
-      Component = ViewIdentityOidcAuthContent;
-      break;
-    case IdentityAuthMethod.JWT_AUTH:
-      revokeMethod = revokeJwtAuth;
-      Component = ViewIdentityJwtAuthContent;
-      break;
-    default:
-      throw new Error(`Unhandled Auth Method: ${authMethod}`);
-  }
-
-  const handleDeleteAuthMethod = async () => {
-    try {
-      await revokeMethod({
-        identityId,
-        organizationId: orgId
-      });
-
-      createNotification({
-        text: "Successfully removed auth method",
-        type: "success"
-      });
-
-      handlePopUpToggle("revokeAuthMethod", false);
-      onDeleteAuthMethod();
-    } catch {
-      createNotification({
-        text: "Failed to remove auth method",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <>
-      <Component
-        identityId={identityId}
-        onDelete={handleDelete}
-        popUp={popUp}
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <DeleteActionModal
-        isOpen={popUp?.revokeAuthMethod?.isOpen}
-        title={`Are you sure want to remove ${identityAuthToNameMap[authMethod]} on this identity?`}
-        onChange={(isOpen) => handlePopUpToggle("revokeAuthMethod", isOpen)}
-        deleteKey="confirm"
-        buttonText="Remove"
-        onDeleteApproved={handleDeleteAuthMethod}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text={(popUp.upgradePlan?.data as { description: string })?.description}
-      />
-    </>
-  );
-};
-
-export const ViewIdentityAuthModal = ({
-  isOpen,
-  onOpenChange,
-  authMethod,
-  identityId
-}: Omit<Props, "onDeleteAuthMethod">) => {
-  if (!identityId || !authMethod) return null;
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent className="max-w-2xl" title={identityAuthToNameMap[authMethod]}>
-        <Content
-          identityId={identityId}
-          authMethod={authMethod}
-          onDeleteAuthMethod={() => onOpenChange(false)}
-        />
-      </ModalContent>
-    </Modal>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAwsAuthContent.tsx

@@ -1,79 +0,0 @@
-import { faBan } from "@fortawesome/free-solid-svg-icons";
-
-import { EmptyState, Spinner } from "@app/components/v2";
-import { useGetIdentityAwsAuth } from "@app/hooks/api";
-import { IdentityAwsAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
-
-export const ViewIdentityAwsAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityAwsAuth(identityId);
-
-  if (isPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState icon={faBan} title="Could not find AWS Auth associated with this Identity." />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityAwsAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Principal ARNs">
-        {data.allowedPrincipalArns
-          ?.split(",")
-          .map((arn) => arn.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Account IDs">
-        {data.allowedAccountIds
-          ?.split(",")
-          .map((id) => id.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="STS Endpoint">
-        {data.stsEndpoint}
-      </IdentityAuthFieldDisplay>
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAzureAuthContent.tsx

@@ -1,76 +0,0 @@
-import { faBan } from "@fortawesome/free-solid-svg-icons";
-
-import { EmptyState, Spinner } from "@app/components/v2";
-import { useGetIdentityAzureAuth } from "@app/hooks/api";
-import { IdentityAzureAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
-
-export const ViewIdentityAzureAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityAzureAuth(identityId);
-
-  if (isPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState icon={faBan} title="Could not find Azure Auth associated with this Identity." />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityAzureAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Tenant ID">
-        {data.tenantId}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Resource / Audience">
-        {data.resource}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Principal IDs">
-        {data.allowedServicePrincipalIds
-          ?.split(",")
-          .map((id) => id.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx

@@ -1,69 +0,0 @@
-import { ReactNode } from "react";
-import { faChevronDown, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-
-type Props = {
-  children: ReactNode;
-  onEdit: VoidFunction;
-  onDelete: VoidFunction;
-};
-
-export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props) => {
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
-          <span className="text-bunker-300">Details</span>
-          <div className="flex items-center gap-2">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  size="xs"
-                  rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
-                  colorSchema="secondary"
-                >
-                  Options
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="min-w-[120px]" align="end">
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-                  {(isAllowed) => (
-                    <DropdownMenuItem
-                      isDisabled={!isAllowed}
-                      onClick={onEdit}
-                      icon={<FontAwesomeIcon icon={faEdit} />}
-                    >
-                      Edit
-                    </DropdownMenuItem>
-                  )}
-                </OrgPermissionCan>
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-                  {(isAllowed) => (
-                    <DropdownMenuItem
-                      isDisabled={!isAllowed}
-                      onClick={onDelete}
-                      icon={<FontAwesomeIcon icon={faTrash} />}
-                    >
-                      Delete
-                    </DropdownMenuItem>
-                  )}
-                </OrgPermissionCan>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
-        <div className="mt-3 grid grid-cols-2 gap-3">{children}</div>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityGcpAuthContent.tsx

@@ -1,89 +0,0 @@
-import { faBan } from "@fortawesome/free-solid-svg-icons";
-
-import { EmptyState, Spinner } from "@app/components/v2";
-import { useGetIdentityGcpAuth } from "@app/hooks/api";
-import { IdentityGcpAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
-
-export const ViewIdentityGcpAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityGcpAuth(identityId);
-
-  if (isPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState icon={faBan} title="Could not find GCP Auth associated with this Identity." />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityGcpAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Type">
-        {data.type === "gce" ? "GCP ID Token Auth" : "GCP IAM Auth"}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Account Emails">
-        {data.allowedServiceAccounts
-          ?.split(",")
-          .map((account) => account.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      {data.type === "gce" && (
-        <>
-          <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Projects">
-            {data.allowedProjects
-              ?.split(",")
-              .map((project) => project.trim())
-              .join(", ")}
-          </IdentityAuthFieldDisplay>
-          <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Zones">
-            {data.allowedZones
-              ?.split(",")
-              .map((zone) => zone.trim())
-              .join(", ")}
-          </IdentityAuthFieldDisplay>
-        </>
-      )}
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx

@@ -1,152 +0,0 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
-import { useGetIdentityJwtAuth } from "@app/hooks/api";
-import { IdentityJwtConfigurationType } from "@app/hooks/api/identities/enums";
-import { IdentityJwtAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityJwtAuthForm";
-import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { ViewAuthMethodProps } from "./types";
-
-export const ViewIdentityJwtAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityJwtAuth(identityId);
-
-  if (isPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState icon={faBan} title="Could not find JWT Auth associated with this Identity." />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityJwtAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Configuration Type">
-        {data.configurationType === IdentityJwtConfigurationType.JWKS ? "JWKS" : "Static"}
-      </IdentityAuthFieldDisplay>
-      {data.configurationType === IdentityJwtConfigurationType.JWKS ? (
-        <>
-          <IdentityAuthFieldDisplay className="col-span-2" label="JWKS URL">
-            {data.jwksUrl}
-          </IdentityAuthFieldDisplay>
-          <IdentityAuthFieldDisplay className="col-span-2" label="JWKS CA Certificate">
-            {data.jwksCaCert && (
-              <Tooltip
-                side="right"
-                className="max-w-xl p-2"
-                content={
-                  <p className="break-words rounded bg-mineshaft-600 p-2">{data.jwksCaCert}</p>
-                }
-              >
-                <div className="w-min">
-                  <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                    <FontAwesomeIcon icon={faEye} />
-                    <span>Reveal</span>
-                  </Badge>
-                </div>
-              </Tooltip>
-            )}
-          </IdentityAuthFieldDisplay>
-        </>
-      ) : (
-        <IdentityAuthFieldDisplay className="col-span-2" label="Public Keys">
-          {data.publicKeys.length && (
-            <div className="flex flex-wrap gap-1">
-              {data.publicKeys.map((key, index) => (
-                <Tooltip
-                  side="right"
-                  className="max-w-xl p-2"
-                  key={key}
-                  content={
-                    <p className="whitespace-normal break-words rounded bg-mineshaft-600 p-2">
-                      {key}
-                    </p>
-                  }
-                >
-                  <div className="inline-block w-min">
-                    <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                      <FontAwesomeIcon icon={faEye} />
-                      <span>Key {index + 1}</span>
-                    </Badge>
-                  </div>
-                </Tooltip>
-              ))}
-            </div>
-          )}
-        </IdentityAuthFieldDisplay>
-      )}
-      <IdentityAuthFieldDisplay className="col-span-2" label="Issuer">
-        {data.boundIssuer}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Subject">
-        {data.boundSubject}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Audiences">
-        {data.boundAudiences
-          ?.split(",")
-          .map((name) => name.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Claims">
-        {Object.keys(data.boundClaims).length && (
-          <Tooltip
-            side="right"
-            className="max-w-xl p-2"
-            content={
-              <pre className="whitespace-pre-wrap rounded bg-mineshaft-600 p-2">
-                {JSON.stringify(data.boundClaims, null, 2)}
-              </pre>
-            }
-          >
-            <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
-          </Tooltip>
-        )}
-      </IdentityAuthFieldDisplay>
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx

@@ -1,121 +0,0 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
-import { useGetIdentityKubernetesAuth } from "@app/hooks/api";
-import { IdentityKubernetesAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
-
-export const ViewIdentityKubernetesAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityKubernetesAuth(identityId);
-
-  if (isPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState
-        icon={faBan}
-        title="Could not find Kubernetes Auth associated with this Identity."
-      />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityKubernetesAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay
-        className="col-span-2"
-        label="Kubernetes Host / Base Kubernetes API URL"
-      >
-        {data.kubernetesHost}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Token Reviewer JWT">
-        <Tooltip
-          side="right"
-          className="max-w-xl p-2"
-          content={
-            <p className="break-words rounded bg-mineshaft-600 p-2">{data.tokenReviewerJwt}</p>
-          }
-        >
-          <div className="w-min">
-            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-              <FontAwesomeIcon icon={faEye} />
-              <span>Reveal</span>
-            </Badge>
-          </div>
-        </Tooltip>
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Account Names">
-        {data.allowedNames
-          ?.split(",")
-          .map((name) => name.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Namespaces">
-        {data.allowedNamespaces
-          ?.split(",")
-          .map((namespace) => namespace.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Audience">
-        {data.allowedAudience}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
-        {data.caCert && (
-          <Tooltip
-            side="right"
-            className="max-w-xl p-2"
-            content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
-          >
-            <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
-          </Tooltip>
-        )}
-      </IdentityAuthFieldDisplay>
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx

@@ -1,116 +0,0 @@
-import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
-import { useGetIdentityOidcAuth } from "@app/hooks/api";
-import { IdentityOidcAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm";
-import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { ViewAuthMethodProps } from "./types";
-
-export const ViewIdentityOidcAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityOidcAuth(identityId);
-
-  if (isPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState icon={faBan} title="Could not find OIDC Auth associated with this Identity." />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityOidcAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="OIDC Discovery URL">
-        {data.oidcDiscoveryUrl}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Issuer">
-        {data.boundIssuer}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
-        {data.caCert && (
-          <Tooltip
-            side="right"
-            className="max-w-xl p-2"
-            content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
-          >
-            <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
-          </Tooltip>
-        )}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Subject">
-        {data.boundSubject}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Audiences">
-        {data.boundAudiences
-          ?.split(",")
-          .map((name) => name.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Claims">
-        {Object.keys(data.boundClaims).length && (
-          <Tooltip
-            side="right"
-            className="max-w-xl p-2"
-            content={
-              <pre className="whitespace-pre-wrap rounded bg-mineshaft-600 p-2">
-                {JSON.stringify(data.boundClaims, null, 2)}
-              </pre>
-            }
-          >
-            <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>Reveal</span>
-              </Badge>
-            </div>
-          </Tooltip>
-        )}
-      </IdentityAuthFieldDisplay>
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTokenAuthContent.tsx

@@ -1,68 +0,0 @@
-import { faBan } from "@fortawesome/free-solid-svg-icons";
-
-import { EmptyState, Spinner } from "@app/components/v2";
-import { useGetIdentityTokenAuth, useGetIdentityTokensTokenAuth } from "@app/hooks/api";
-import { IdentityTokenAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { IdentityTokenAuthTokensTable } from "./IdentityTokenAuthTokensTable";
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
-
-export const ViewIdentityTokenAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityTokenAuth(identityId);
-  const { data: tokens = [], isPending: clientSecretsPending } =
-    useGetIdentityTokensTokenAuth(identityId);
-
-  if (isPending || clientSecretsPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState icon={faBan} title="Could not find Token Auth associated with this Identity." />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityTokenAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityTokenAuthTokensTable tokens={tokens} identityId={identityId} />
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx

@@ -1,106 +0,0 @@
-import { faBan, faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { EmptyState, IconButton, Spinner, Tooltip } from "@app/components/v2";
-import { useTimedReset } from "@app/hooks";
-import {
-  useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets
-} from "@app/hooks/api";
-import { IdentityUniversalAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm";
-
-import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
-import { IdentityUniversalAuthClientSecretsTable } from "./IdentityUniversalAuthClientSecretsTable";
-import { ViewAuthMethodProps } from "./types";
-import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
-
-export const ViewIdentityUniversalAuthContent = ({
-  identityId,
-  handlePopUpToggle,
-  handlePopUpOpen,
-  onDelete,
-  popUp
-}: ViewAuthMethodProps) => {
-  const { data, isPending } = useGetIdentityUniversalAuth(identityId);
-  const { data: clientSecrets = [], isPending: clientSecretsPending } =
-    useGetIdentityUniversalAuthClientSecrets(identityId);
-
-  const [copyTextClientId, isCopyingClientId, setCopyTextClientId] = useTimedReset<string>({
-    initialState: "Copy Client ID to clipboard"
-  });
-
-  if (isPending || clientSecretsPending) {
-    return (
-      <div className="flex w-full items-center justify-center">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <EmptyState
-        icon={faBan}
-        title="Could not find Universal Auth associated with this Identity."
-      />
-    );
-  }
-
-  if (popUp.identityAuthMethod.isOpen) {
-    return (
-      <IdentityUniversalAuthForm
-        identityId={identityId}
-        isUpdate
-        handlePopUpOpen={handlePopUpOpen}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-    );
-  }
-
-  return (
-    <ViewIdentityContentWrapper
-      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-      onDelete={onDelete}
-    >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Client Secret Trusted IPs">
-        {data.clientSecretTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
-      <div className="col-span-2 my-3">
-        <div className="mb-3 border-b border-mineshaft-500 pb-2">
-          <span className="text-bunker-300">Client ID</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="text-sm">{data.clientId}</span>
-          <Tooltip content={copyTextClientId}>
-            <IconButton
-              ariaLabel="copy icon"
-              variant="plain"
-              onClick={() => {
-                navigator.clipboard.writeText(data.clientId);
-                setCopyTextClientId("Copied");
-              }}
-            >
-              <FontAwesomeIcon icon={isCopyingClientId ? faCheck : faCopy} />
-            </IconButton>
-          </Tooltip>
-        </div>
-      </div>
-      <IdentityUniversalAuthClientSecretsTable
-        clientSecrets={clientSecrets}
-        identityId={identityId}
-      />
-    </ViewIdentityContentWrapper>
-  );
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/index.ts

@@ -1 +0,0 @@
-export * from "./ViewIdentityAuthModal";

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/types/index.ts

@@ -1,12 +0,0 @@
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-export type ViewAuthMethodProps = {
-  identityId: string;
-  onDelete: () => void;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan", "identityAuthMethod"]>) => void;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-    state?: boolean
-  ) => void;
-  popUp: UsePopUpState<["revokeAuthMethod", "upgradePlan", "identityAuthMethod"]>;
-};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/index.tsx

@@ -2,4 +2,5 @@ export { IdentityAuthenticationSection } from "./IdentityAuthenticationSection/I
 export { IdentityClientSecretModal } from "./IdentityClientSecretModal";
 export { IdentityDetailsSection } from "./IdentityDetailsSection";
 export { IdentityProjectsSection } from "./IdentityProjectsSection/IdentityProjectsSection";
+export { IdentityTokenListModal } from "./IdentityTokenListModal";
 export { IdentityTokenModal } from "./IdentityTokenModal";

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx

@@ -289,34 +289,36 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
           </DropdownMenuTrigger>
           <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
             <DropdownMenuLabel>Status</DropdownMenuLabel>
-            {Object.values(SecretSyncStatus).map((status) => (
-              <DropdownMenuItem
-                onClick={(e) => {
-                  e.preventDefault();
-                  setFilters((prev) => ({
-                    ...prev,
-                    status: prev.status.includes(status)
-                      ? prev.status.filter((s) => s !== status)
-                      : [...prev.status, status]
-                  }));
-                }}
-                key={status}
-                icon={
-                  filters.status.includes(status) && (
-                    <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                  )
-                }
-                iconPos="right"
-              >
-                <div className="flex items-center gap-2">
-                  <FontAwesomeIcon
-                    icon={STATUS_ICON_MAP[status].icon}
-                    className={STATUS_ICON_MAP[status].className}
-                  />
-                  <span className="capitalize">{STATUS_ICON_MAP[status].name}</span>
-                </div>
-              </DropdownMenuItem>
-            ))}
+            {[SecretSyncStatus.Running, SecretSyncStatus.Succeeded, SecretSyncStatus.Failed].map(
+              (status) => (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setFilters((prev) => ({
+                      ...prev,
+                      status: prev.status.includes(status)
+                        ? prev.status.filter((s) => s !== status)
+                        : [...prev.status, status]
+                    }));
+                  }}
+                  key={status}
+                  icon={
+                    filters.status.includes(status) && (
+                      <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                    )
+                  }
+                  iconPos="right"
+                >
+                  <div className="flex items-center gap-2">
+                    <FontAwesomeIcon
+                      icon={STATUS_ICON_MAP[status].icon}
+                      className={STATUS_ICON_MAP[status].className}
+                    />
+                    <span className="capitalize">{STATUS_ICON_MAP[status].name}</span>
+                  </div>
+                </DropdownMenuItem>
+              )
+            )}
             <DropdownMenuLabel>Service</DropdownMenuLabel>
             {secretSyncs.length ? (
               [...new Set(secretSyncs.map(({ destination }) => destination))].map((destination) => {

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -57,6 +57,11 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
         <div className="space-y-3">
           <SecretSyncLabel label="Name">{name}</SecretSyncLabel>
           <SecretSyncLabel label="Description">{description}</SecretSyncLabel>
+          {syncStatus && (
+            <SecretSyncLabel label="Status">
+              <SecretSyncStatusBadge status={syncStatus} />
+            </SecretSyncLabel>
+          )}
           {lastSyncedAt && (
             <SecretSyncLabel label="Last Synced">
               {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

@@ -19,7 +19,7 @@ const schema = z.object({
   environmentName: z
     .string()
     .min(1, { message: "Environment Name field must be at least 1 character" }),
-  environmentSlug: slugSchema()
+  environmentSlug: slugSchema({ max: 64 })
 });
 
 export type FormData = z.infer<typeof schema>;

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 const schema = z.object({
   name: z.string(),
-  slug: slugSchema({ min: 1 })
+  slug: slugSchema({ min: 1, max: 64 })
 });
 
 export type FormData = z.infer<typeof schema>;

frontend/src/pages/secret-manager/integrations/TeamcityConfigurePage/TeamcityConfigurePage.tsx

@@ -99,15 +99,10 @@ export const TeamcityConfigurePage = () => {
     }
   };
 
-  const filteredBuildConfigs = targetBuildConfigs?.concat({
-    name: "",
-    buildConfigId: ""
-  });
-
   return integrationAuth &&
     selectedSourceEnvironment &&
     integrationAuthApps &&
-    filteredBuildConfigs &&
+    targetBuildConfigs &&
     targetAppId ? (
     <div className="flex h-full w-full items-center justify-center">
       <Helmet>
@@ -185,7 +180,7 @@ export const TeamcityConfigurePage = () => {
               ))
             ) : (
               <SelectItem value="none" key="target-app-none">
-                No project found
+                No projects found
               </SelectItem>
             )}
           </Select>
@@ -195,15 +190,22 @@ export const TeamcityConfigurePage = () => {
             value={targetBuildConfigId}
             onValueChange={(val) => setTargetBuildConfigId(val)}
             className="w-full border border-mineshaft-500"
+            isDisabled={targetBuildConfigs.length === 0}
           >
-            {filteredBuildConfigs.map((buildConfig: any) => (
-              <SelectItem
-                value={buildConfig.buildConfigId}
-                key={`target-build-config-${buildConfig.buildConfigId}`}
-              >
-                {buildConfig.name}
+            {targetBuildConfigs.length ? (
+              targetBuildConfigs.map((buildConfig: any) => (
+                <SelectItem
+                  value={buildConfig.buildConfigId}
+                  key={`target-build-config-${buildConfig.buildConfigId}`}
+                >
+                  {buildConfig.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No build configs found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button

frontend/src/routeTree.gen.ts

@@ -5462,4 +5462,4 @@ export const routeTree = rootRoute
     }
   }
 }
-ROUTE_MANIFEST_END */
+ROUTE_MANIFEST_END */

helm-charts/secrets-operator/Chart.yaml

@@ -13,9 +13,9 @@ type: application
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: v0.8.5
+version: v0.8.6
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-appVersion: "v0.8.5"
+appVersion: "v0.8.6"

helm-charts/secrets-operator/templates/infisicalsecret-crd.yaml

@@ -1,4 +1,3 @@
-{{- if .Values.installCRDs }}
 apiVersion: apiextensions.k8s.io/v1
 kind: CustomResourceDefinition
 metadata:
@@ -262,6 +261,48 @@ spec:
               hostAPI:
                 description: Infisical host to pull secrets from
                 type: string
+              managedKubeSecretReferences:
+                items:
+                  properties:
+                    creationPolicy:
+                      default: Orphan
+                      description: 'The Kubernetes Secret creation policy. Enum with
+                        values: ''Owner'', ''Orphan''. Owner creates the secret and
+                        sets .metadata.ownerReferences of the InfisicalSecret CRD that
+                        created it. Orphan will not set the secret owner. This will
+                        result in the secret being orphaned and not deleted when the
+                        resource is deleted.'
+                      type: string
+                    secretName:
+                      description: The name of the Kubernetes Secret
+                      type: string
+                    secretNamespace:
+                      description: The name space where the Kubernetes Secret is located
+                      type: string
+                    secretType:
+                      default: Opaque
+                      description: 'The Kubernetes Secret type (experimental feature).
+                        More info: https://kubernetes.io/docs/concepts/configuration/secret/#secret-types'
+                      type: string
+                    template:
+                      description: The template to transform the secret data
+                      properties:
+                        data:
+                          additionalProperties:
+                            type: string
+                          description: The template key values
+                          type: object
+                        includeAllSecrets:
+                          description: This injects all retrieved secrets into the top
+                            level of your template. Secrets defined in the template
+                            will take precedence over the injected ones.
+                          type: boolean
+                      type: object
+                  required:
+                  - secretName
+                  - secretNamespace
+                  type: object
+                type: array
               managedSecretReference:
                 properties:
                   creationPolicy:
@@ -338,7 +379,6 @@ spec:
                 - secretNamespace
                 type: object
             required:
-            - managedSecretReference
             - resyncInterval
             type: object
           status:
@@ -425,5 +465,4 @@ status:
     kind: ""
     plural: ""
   conditions: []
-  storedVersions: []
-{{- end }}
+  storedVersions: []

helm-charts/secrets-operator/values.yaml

@@ -32,7 +32,7 @@ controllerManager:
           - ALL
     image:
       repository: infisical/kubernetes-operator
-      tag: v0.8.5
+      tag: v0.8.6
     resources:
       limits:
         cpu: 500m

k8-operator/api/v1alpha1/infisicalsecret_types.go

@@ -134,9 +134,12 @@ type InfisicalSecretSpec struct {
 	// +kubebuilder:validation:Optional
 	Authentication Authentication `json:"authentication"`
 
-	// +kubebuilder:validation:Required
+	// +kubebuilder:validation:Optional
 	ManagedSecretReference ManagedKubeSecretConfig `json:"managedSecretReference"`
 
+	// +kubebuilder:validation:Optional
+	ManagedKubeSecretReferences []ManagedKubeSecretConfig `json:"managedKubeSecretReferences"`
+
 	// +kubebuilder:default:=60
 	ResyncInterval int `json:"resyncInterval"`
 

k8-operator/api/v1alpha1/zz_generated.deepcopy.go

@@ -565,6 +565,13 @@ func (in *InfisicalSecretSpec) DeepCopyInto(out *InfisicalSecretSpec) {
 	out.TokenSecretReference = in.TokenSecretReference
 	out.Authentication = in.Authentication
 	in.ManagedSecretReference.DeepCopyInto(&out.ManagedSecretReference)
+	if in.ManagedKubeSecretReferences != nil {
+		in, out := &in.ManagedKubeSecretReferences, &out.ManagedKubeSecretReferences
+		*out = make([]ManagedKubeSecretConfig, len(*in))
+		for i := range *in {
+			(*in)[i].DeepCopyInto(&(*out)[i])
+		}
+	}
 	out.TLS = in.TLS
 }
 

k8-operator/config/crd/bases/secrets.infisical.com_infisicalsecrets.yaml

@@ -261,6 +261,48 @@ spec:
               hostAPI:
                 description: Infisical host to pull secrets from
                 type: string
+              managedKubeSecretReferences:
+                items:
+                  properties:
+                    creationPolicy:
+                      default: Orphan
+                      description: 'The Kubernetes Secret creation policy. Enum with
+                        values: ''Owner'', ''Orphan''. Owner creates the secret and
+                        sets .metadata.ownerReferences of the InfisicalSecret CRD
+                        that created it. Orphan will not set the secret owner. This
+                        will result in the secret being orphaned and not deleted when
+                        the resource is deleted.'
+                      type: string
+                    secretName:
+                      description: The name of the Kubernetes Secret
+                      type: string
+                    secretNamespace:
+                      description: The name space where the Kubernetes Secret is located
+                      type: string
+                    secretType:
+                      default: Opaque
+                      description: 'The Kubernetes Secret type (experimental feature).
+                        More info: https://kubernetes.io/docs/concepts/configuration/secret/#secret-types'
+                      type: string
+                    template:
+                      description: The template to transform the secret data
+                      properties:
+                        data:
+                          additionalProperties:
+                            type: string
+                          description: The template key values
+                          type: object
+                        includeAllSecrets:
+                          description: This injects all retrieved secrets into the
+                            top level of your template. Secrets defined in the template
+                            will take precedence over the injected ones.
+                          type: boolean
+                      type: object
+                  required:
+                  - secretName
+                  - secretNamespace
+                  type: object
+                type: array
               managedSecretReference:
                 properties:
                   creationPolicy:
@@ -339,7 +381,6 @@ spec:
                 - secretNamespace
                 type: object
             required:
-            - managedSecretReference
             - resyncInterval
             type: object
           status:

k8-operator/config/samples/crd/infisicalsecret/infisicalSecretCrd.yaml

@@ -97,11 +97,11 @@ spec:
         secretsPath: "/path"
         recursive: true
 
-  managedSecretReference:
-    secretName: managed-secret
-    secretNamespace: default
-    creationPolicy: "Orphan" ## Owner | Orphan
-    # secretType: kubernetes.io/dockerconfigjson
+  managedSecretReferences:
+    - secretName: managed-secret
+      secretNamespace: default
+      creationPolicy: "Orphan" ## Owner | Orphan
+      # secretType: kubernetes.io/dockerconfigjson
 
   # # To be depreciated soon
   # tokenSecretReference:

k8-operator/controllers/infisicalsecret/auto_redeployment.go

@@ -1,108 +0,0 @@
-package controllers
-
-import (
-	"context"
-	"fmt"
-	"sync"
-
-	"github.com/Infisical/infisical/k8-operator/api/v1alpha1"
-	"github.com/Infisical/infisical/k8-operator/packages/constants"
-	"github.com/go-logr/logr"
-	v1 "k8s.io/api/apps/v1"
-	corev1 "k8s.io/api/core/v1"
-	"k8s.io/apimachinery/pkg/types"
-	"sigs.k8s.io/controller-runtime/pkg/client"
-)
-
-const DEPLOYMENT_SECRET_NAME_ANNOTATION_PREFIX = "secrets.infisical.com/managed-secret"
-const AUTO_RELOAD_DEPLOYMENT_ANNOTATION = "secrets.infisical.com/auto-reload" // needs to be set to true for a deployment to start auto redeploying
-
-func (r *InfisicalSecretReconciler) ReconcileDeploymentsWithManagedSecrets(ctx context.Context, logger logr.Logger, infisicalSecret v1alpha1.InfisicalSecret) (int, error) {
-	listOfDeployments := &v1.DeploymentList{}
-	err := r.Client.List(ctx, listOfDeployments, &client.ListOptions{Namespace: infisicalSecret.Spec.ManagedSecretReference.SecretNamespace})
-	if err != nil {
-		return 0, fmt.Errorf("unable to get deployments in the [namespace=%v] [err=%v]", infisicalSecret.Spec.ManagedSecretReference.SecretNamespace, err)
-	}
-
-	managedKubeSecretNameAndNamespace := types.NamespacedName{
-		Namespace: infisicalSecret.Spec.ManagedSecretReference.SecretNamespace,
-		Name:      infisicalSecret.Spec.ManagedSecretReference.SecretName,
-	}
-
-	managedKubeSecret := &corev1.Secret{}
-	err = r.Client.Get(ctx, managedKubeSecretNameAndNamespace, managedKubeSecret)
-	if err != nil {
-		return 0, fmt.Errorf("unable to fetch Kubernetes secret to update deployment: %v", err)
-	}
-
-	var wg sync.WaitGroup
-	// Iterate over the deployments and check if they use the managed secret
-	for _, deployment := range listOfDeployments.Items {
-		deployment := deployment
-		if deployment.Annotations[AUTO_RELOAD_DEPLOYMENT_ANNOTATION] == "true" && r.IsDeploymentUsingManagedSecret(deployment, infisicalSecret) {
-			// Start a goroutine to reconcile the deployment
-			wg.Add(1)
-			go func(d v1.Deployment, s corev1.Secret) {
-				defer wg.Done()
-				if err := r.ReconcileDeployment(ctx, logger, d, s); err != nil {
-					logger.Error(err, fmt.Sprintf("unable to reconcile deployment with [name=%v]. Will try next requeue", deployment.ObjectMeta.Name))
-				}
-			}(deployment, *managedKubeSecret)
-		}
-	}
-
-	wg.Wait()
-
-	return 0, nil
-}
-
-// Check if the deployment uses managed secrets
-func (r *InfisicalSecretReconciler) IsDeploymentUsingManagedSecret(deployment v1.Deployment, infisicalSecret v1alpha1.InfisicalSecret) bool {
-	managedSecretName := infisicalSecret.Spec.ManagedSecretReference.SecretName
-	for _, container := range deployment.Spec.Template.Spec.Containers {
-		for _, envFrom := range container.EnvFrom {
-			if envFrom.SecretRef != nil && envFrom.SecretRef.LocalObjectReference.Name == managedSecretName {
-				return true
-			}
-		}
-		for _, env := range container.Env {
-			if env.ValueFrom != nil && env.ValueFrom.SecretKeyRef != nil && env.ValueFrom.SecretKeyRef.LocalObjectReference.Name == managedSecretName {
-				return true
-			}
-		}
-	}
-	for _, volume := range deployment.Spec.Template.Spec.Volumes {
-		if volume.Secret != nil && volume.Secret.SecretName == managedSecretName {
-			return true
-		}
-	}
-
-	return false
-}
-
-// This function ensures that a deployment is in sync with a Kubernetes secret by comparing their versions.
-// If the version of the secret is different from the version annotation on the deployment, the annotation is updated to trigger a restart of the deployment.
-func (r *InfisicalSecretReconciler) ReconcileDeployment(ctx context.Context, logger logr.Logger, deployment v1.Deployment, secret corev1.Secret) error {
-	annotationKey := fmt.Sprintf("%s.%s", DEPLOYMENT_SECRET_NAME_ANNOTATION_PREFIX, secret.Name)
-	annotationValue := secret.Annotations[constants.SECRET_VERSION_ANNOTATION]
-
-	if deployment.Annotations[annotationKey] == annotationValue &&
-		deployment.Spec.Template.Annotations[annotationKey] == annotationValue {
-		logger.Info(fmt.Sprintf("The [deploymentName=%v] is already using the most up to date managed secrets. No action required.", deployment.ObjectMeta.Name))
-		return nil
-	}
-
-	logger.Info(fmt.Sprintf("Deployment is using outdated managed secret. Starting re-deployment [deploymentName=%v]", deployment.ObjectMeta.Name))
-
-	if deployment.Spec.Template.Annotations == nil {
-		deployment.Spec.Template.Annotations = make(map[string]string)
-	}
-
-	deployment.Annotations[annotationKey] = annotationValue
-	deployment.Spec.Template.Annotations[annotationKey] = annotationValue
-
-	if err := r.Client.Update(ctx, &deployment); err != nil {
-		return fmt.Errorf("failed to update deployment annotation: %v", err)
-	}
-	return nil
-}

k8-operator/controllers/infisicalsecret/infisicalsecret_controller.go

@@ -13,6 +13,8 @@ import (
 	"sigs.k8s.io/controller-runtime/pkg/event"
 	"sigs.k8s.io/controller-runtime/pkg/predicate"
 
+	defaultErrors "errors"
+
 	secretsv1alpha1 "github.com/Infisical/infisical/k8-operator/api/v1alpha1"
 	"github.com/Infisical/infisical/k8-operator/packages/api"
 	controllerhelpers "github.com/Infisical/infisical/k8-operator/packages/controllerhelpers"
@@ -35,8 +37,6 @@ func (r *InfisicalSecretReconciler) GetLogger(req ctrl.Request) logr.Logger {
 	return r.BaseLogger.WithValues("infisicalsecret", req.NamespacedName)
 }
 
-var resourceVariablesMap map[string]util.ResourceVariables = make(map[string]util.ResourceVariables)
-
 //+kubebuilder:rbac:groups=secrets.infisical.com,resources=infisicalsecrets,verbs=get;list;watch;create;update;patch;delete
 //+kubebuilder:rbac:groups=secrets.infisical.com,resources=infisicalsecrets/status,verbs=get;update;patch
 //+kubebuilder:rbac:groups=secrets.infisical.com,resources=infisicalsecrets/finalizers,verbs=update
@@ -71,6 +71,30 @@ func (r *InfisicalSecretReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 		}
 	}
 
+	// It's important we don't directly modify the CRD object, so we create a copy of it and move existing data into it.
+	managedKubeSecretReferences := infisicalSecretCRD.Spec.ManagedKubeSecretReferences
+
+	if infisicalSecretCRD.Spec.ManagedSecretReference.SecretName != "" && managedKubeSecretReferences != nil && len(managedKubeSecretReferences) > 0 {
+		errMessage := "InfisicalSecret CRD cannot have both managedSecretReference and managedKubeSecretReferences"
+		logger.Error(defaultErrors.New(errMessage), errMessage)
+		return ctrl.Result{}, defaultErrors.New(errMessage)
+	}
+
+	if infisicalSecretCRD.Spec.ManagedSecretReference.SecretName != "" {
+		logger.Info("\n\n\nThe field `managedSecretReference` will be deprecated in the near future, please use `managedKubeSecretReferences` instead.\n\nRefer to the documentation for more information: https://infisical.com/docs/integrations/platforms/kubernetes/infisical-secret-crd\n\n\n")
+
+		if managedKubeSecretReferences == nil {
+			managedKubeSecretReferences = []secretsv1alpha1.ManagedKubeSecretConfig{}
+		}
+		managedKubeSecretReferences = append(managedKubeSecretReferences, infisicalSecretCRD.Spec.ManagedSecretReference)
+	}
+
+	if len(managedKubeSecretReferences) == 0 {
+		errMessage := "InfisicalSecret CRD must have at least one managed secret reference set in the `managedKubeSecretReferences` field"
+		logger.Error(defaultErrors.New(errMessage), errMessage)
+		return ctrl.Result{}, defaultErrors.New(errMessage)
+	}
+
 	// Remove finalizers if they exist. This is to support previous InfisicalSecret CRD's that have finalizers on them.
 	// In order to delete secrets with finalizers, we first remove the finalizers so we can use the simplified and improved deletion process
 	if !infisicalSecretCRD.ObjectMeta.DeletionTimestamp.IsZero() && len(infisicalSecretCRD.ObjectMeta.Finalizers) > 0 {
@@ -127,7 +151,7 @@ func (r *InfisicalSecretReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 		api.API_CA_CERTIFICATE = ""
 	}
 
-	err = r.ReconcileInfisicalSecret(ctx, logger, infisicalSecretCRD)
+	err = r.ReconcileInfisicalSecret(ctx, logger, infisicalSecretCRD, managedKubeSecretReferences)
 	r.SetReadyToSyncSecretsConditions(ctx, &infisicalSecretCRD, err)
 
 	if err != nil {
@@ -138,7 +162,7 @@ func (r *InfisicalSecretReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 		}, nil
 	}
 
-	numDeployments, err := controllerhelpers.ReconcileDeploymentsWithManagedSecrets(ctx, r.Client, logger, infisicalSecretCRD.Spec.ManagedSecretReference)
+	numDeployments, err := controllerhelpers.ReconcileDeploymentsWithMultipleManagedSecrets(ctx, r.Client, logger, managedKubeSecretReferences)
 	r.SetInfisicalAutoRedeploymentReady(ctx, logger, &infisicalSecretCRD, numDeployments, err)
 	if err != nil {
 		logger.Error(err, fmt.Sprintf("unable to reconcile auto redeployment. Will requeue after [requeueTime=%v]", requeueTime))

k8-operator/controllers/infisicalsecret/infisicalsecret_helper.go

@@ -165,10 +165,10 @@ var infisicalSecretTemplateFunctions = template.FuncMap{
 	},
 }
 
-func (r *InfisicalSecretReconciler) createInfisicalManagedKubeSecret(ctx context.Context, logger logr.Logger, infisicalSecret v1alpha1.InfisicalSecret, secretsFromAPI []model.SingleEnvironmentVariable, ETag string) error {
+func (r *InfisicalSecretReconciler) createInfisicalManagedKubeSecret(ctx context.Context, logger logr.Logger, infisicalSecret v1alpha1.InfisicalSecret, managedSecretReference v1alpha1.ManagedKubeSecretConfig, secretsFromAPI []model.SingleEnvironmentVariable, ETag string) error {
 	plainProcessedSecrets := make(map[string][]byte)
-	secretType := infisicalSecret.Spec.ManagedSecretReference.SecretType
-	managedTemplateData := infisicalSecret.Spec.ManagedSecretReference.Template
+	secretType := managedSecretReference.SecretType
+	managedTemplateData := managedSecretReference.Template
 
 	if managedTemplateData == nil || managedTemplateData.IncludeAllSecrets {
 		for _, secret := range secretsFromAPI {
@@ -226,8 +226,8 @@ func (r *InfisicalSecretReconciler) createInfisicalManagedKubeSecret(ctx context
 	// create a new secret as specified by the managed secret spec of CRD
 	newKubeSecretInstance := &corev1.Secret{
 		ObjectMeta: metav1.ObjectMeta{
-			Name:        infisicalSecret.Spec.ManagedSecretReference.SecretName,
-			Namespace:   infisicalSecret.Spec.ManagedSecretReference.SecretNamespace,
+			Name:        managedSecretReference.SecretName,
+			Namespace:   managedSecretReference.SecretNamespace,
 			Annotations: annotations,
 			Labels:      labels,
 		},
@@ -235,7 +235,7 @@ func (r *InfisicalSecretReconciler) createInfisicalManagedKubeSecret(ctx context
 		Data: plainProcessedSecrets,
 	}
 
-	if infisicalSecret.Spec.ManagedSecretReference.CreationPolicy == "Owner" {
+	if managedSecretReference.CreationPolicy == "Owner" {
 		// Set InfisicalSecret instance as the owner and controller of the managed secret
 		err := ctrl.SetControllerReference(&infisicalSecret, newKubeSecretInstance, r.Scheme)
 		if err != nil {
@@ -252,8 +252,8 @@ func (r *InfisicalSecretReconciler) createInfisicalManagedKubeSecret(ctx context
 	return nil
 }
 
-func (r *InfisicalSecretReconciler) updateInfisicalManagedKubeSecret(ctx context.Context, logger logr.Logger, infisicalSecret v1alpha1.InfisicalSecret, managedKubeSecret corev1.Secret, secretsFromAPI []model.SingleEnvironmentVariable, ETag string) error {
-	managedTemplateData := infisicalSecret.Spec.ManagedSecretReference.Template
+func (r *InfisicalSecretReconciler) updateInfisicalManagedKubeSecret(ctx context.Context, logger logr.Logger, managedSecretReference v1alpha1.ManagedKubeSecretConfig, managedKubeSecret corev1.Secret, secretsFromAPI []model.SingleEnvironmentVariable, ETag string) error {
+	managedTemplateData := managedSecretReference.Template
 
 	plainProcessedSecrets := make(map[string][]byte)
 	if managedTemplateData == nil || managedTemplateData.IncludeAllSecrets {
@@ -337,7 +337,7 @@ func (r *InfisicalSecretReconciler) updateResourceVariables(infisicalSecret v1al
 	infisicalSecretResourceVariablesMap[string(infisicalSecret.UID)] = resourceVariables
 }
 
-func (r *InfisicalSecretReconciler) ReconcileInfisicalSecret(ctx context.Context, logger logr.Logger, infisicalSecret v1alpha1.InfisicalSecret) error {
+func (r *InfisicalSecretReconciler) ReconcileInfisicalSecret(ctx context.Context, logger logr.Logger, infisicalSecret v1alpha1.InfisicalSecret, managedKubeSecretReferences []v1alpha1.ManagedKubeSecretConfig) error {
 
 	resourceVariables := r.getResourceVariables(infisicalSecret)
 	infisicalClient := resourceVariables.InfisicalClient
@@ -361,72 +361,84 @@ func (r *InfisicalSecretReconciler) ReconcileInfisicalSecret(ctx context.Context
 		})
 	}
 
-	// Look for managed secret by name and namespace
-	managedKubeSecret, err := util.GetKubeSecretByNamespacedName(ctx, r.Client, types.NamespacedName{
-		Name:      infisicalSecret.Spec.ManagedSecretReference.SecretName,
-		Namespace: infisicalSecret.Spec.ManagedSecretReference.SecretNamespace,
-	})
+	for _, managedSecretReference := range managedKubeSecretReferences {
+		// Look for managed secret by name and namespace
+		managedKubeSecret, err := util.GetKubeSecretByNamespacedName(ctx, r.Client, types.NamespacedName{
+			Name:      managedSecretReference.SecretName,
+			Namespace: managedSecretReference.SecretNamespace,
+		})
 
-	if err != nil && !k8Errors.IsNotFound(err) {
-		return fmt.Errorf("something went wrong when fetching the managed Kubernetes secret [%w]", err)
-	}
-
-	// Get exiting Etag if exists
-	secretVersionBasedOnETag := ""
-	if managedKubeSecret != nil {
-		secretVersionBasedOnETag = managedKubeSecret.Annotations[constants.SECRET_VERSION_ANNOTATION]
-	}
-
-	var plainTextSecretsFromApi []model.SingleEnvironmentVariable
-	var updateDetails model.RequestUpdateUpdateDetails
-
-	if authDetails.AuthStrategy == util.AuthStrategy.SERVICE_ACCOUNT { // Service Account // ! Legacy auth method
-		serviceAccountCreds, err := r.getInfisicalServiceAccountCredentialsFromKubeSecret(ctx, infisicalSecret)
-		if err != nil {
-			return fmt.Errorf("ReconcileInfisicalSecret: unable to get service account creds from kube secret [err=%s]", err)
-		}
-
-		plainTextSecretsFromApi, updateDetails, err = util.GetPlainTextSecretsViaServiceAccount(infisicalClient, serviceAccountCreds, infisicalSecret.Spec.Authentication.ServiceAccount.ProjectId, infisicalSecret.Spec.Authentication.ServiceAccount.EnvironmentName, secretVersionBasedOnETag)
-		if err != nil {
-			return fmt.Errorf("\nfailed to get secrets because [err=%v]", err)
-		}
-
-		logger.Info("ReconcileInfisicalSecret: Fetched secrets via service account")
-
-	} else if authDetails.AuthStrategy == util.AuthStrategy.SERVICE_TOKEN { // Service Tokens // ! Legacy / Deprecated auth method
-		infisicalToken, err := r.getInfisicalTokenFromKubeSecret(ctx, infisicalSecret)
-		if err != nil {
-			return fmt.Errorf("ReconcileInfisicalSecret: unable to get service token from kube secret [err=%s]", err)
-		}
-
-		envSlug := infisicalSecret.Spec.Authentication.ServiceToken.SecretsScope.EnvSlug
-		secretsPath := infisicalSecret.Spec.Authentication.ServiceToken.SecretsScope.SecretsPath
-		recursive := infisicalSecret.Spec.Authentication.ServiceToken.SecretsScope.Recursive
-
-		plainTextSecretsFromApi, updateDetails, err = util.GetPlainTextSecretsViaServiceToken(infisicalClient, infisicalToken, secretVersionBasedOnETag, envSlug, secretsPath, recursive)
-		if err != nil {
-			return fmt.Errorf("\nfailed to get secrets because [err=%v]", err)
-		}
-
-		logger.Info("ReconcileInfisicalSecret: Fetched secrets via [type=SERVICE_TOKEN]")
-
-	} else if authDetails.IsMachineIdentityAuth { // * Machine Identity authentication, the SDK will be authenticated at this point
-		plainTextSecretsFromApi, updateDetails, err = util.GetPlainTextSecretsViaMachineIdentity(infisicalClient, secretVersionBasedOnETag, authDetails.MachineIdentityScope)
-
-		if err != nil {
-			return fmt.Errorf("\nfailed to get secrets because [err=%v]", err)
-		}
-
-		logger.Info(fmt.Sprintf("ReconcileInfisicalSecret: Fetched secrets via machine identity [type=%v]", authDetails.AuthStrategy))
-
-	} else {
-		return errors.New("no authentication method provided yet. Please configure a authentication method then try again")
-	}
-
-	if managedKubeSecret == nil {
-		return r.createInfisicalManagedKubeSecret(ctx, logger, infisicalSecret, plainTextSecretsFromApi, updateDetails.ETag)
-	} else {
-		return r.updateInfisicalManagedKubeSecret(ctx, logger, infisicalSecret, *managedKubeSecret, plainTextSecretsFromApi, updateDetails.ETag)
+		if err != nil && !k8Errors.IsNotFound(err) {
+			return fmt.Errorf("something went wrong when fetching the managed Kubernetes secret [%w]", err)
+		}
+
+		// Get exiting Etag if exists
+		secretVersionBasedOnETag := ""
+		if managedKubeSecret != nil {
+			secretVersionBasedOnETag = managedKubeSecret.Annotations[constants.SECRET_VERSION_ANNOTATION]
+		}
+
+		var plainTextSecretsFromApi []model.SingleEnvironmentVariable
+		var updateDetails model.RequestUpdateUpdateDetails
+
+		if authDetails.AuthStrategy == util.AuthStrategy.SERVICE_ACCOUNT { // Service Account // ! Legacy auth method
+			serviceAccountCreds, err := r.getInfisicalServiceAccountCredentialsFromKubeSecret(ctx, infisicalSecret)
+			if err != nil {
+				return fmt.Errorf("ReconcileInfisicalSecret: unable to get service account creds from kube secret [err=%s]", err)
+			}
+
+			plainTextSecretsFromApi, updateDetails, err = util.GetPlainTextSecretsViaServiceAccount(infisicalClient, serviceAccountCreds, infisicalSecret.Spec.Authentication.ServiceAccount.ProjectId, infisicalSecret.Spec.Authentication.ServiceAccount.EnvironmentName, secretVersionBasedOnETag)
+			if err != nil {
+				return fmt.Errorf("\nfailed to get secrets because [err=%v]", err)
+			}
+
+			logger.Info("ReconcileInfisicalSecret: Fetched secrets via service account")
+
+		} else if authDetails.AuthStrategy == util.AuthStrategy.SERVICE_TOKEN { // Service Tokens // ! Legacy / Deprecated auth method
+			infisicalToken, err := r.getInfisicalTokenFromKubeSecret(ctx, infisicalSecret)
+			if err != nil {
+				return fmt.Errorf("ReconcileInfisicalSecret: unable to get service token from kube secret [err=%s]", err)
+			}
+
+			envSlug := infisicalSecret.Spec.Authentication.ServiceToken.SecretsScope.EnvSlug
+			secretsPath := infisicalSecret.Spec.Authentication.ServiceToken.SecretsScope.SecretsPath
+			recursive := infisicalSecret.Spec.Authentication.ServiceToken.SecretsScope.Recursive
+
+			plainTextSecretsFromApi, updateDetails, err = util.GetPlainTextSecretsViaServiceToken(infisicalClient, infisicalToken, secretVersionBasedOnETag, envSlug, secretsPath, recursive)
+			if err != nil {
+				return fmt.Errorf("\nfailed to get secrets because [err=%v]", err)
+			}
+
+			logger.Info("ReconcileInfisicalSecret: Fetched secrets via [type=SERVICE_TOKEN]")
+
+		} else if authDetails.IsMachineIdentityAuth { // * Machine Identity authentication, the SDK will be authenticated at this point
+			plainTextSecretsFromApi, updateDetails, err = util.GetPlainTextSecretsViaMachineIdentity(infisicalClient, secretVersionBasedOnETag, authDetails.MachineIdentityScope)
+
+			if err != nil {
+				return fmt.Errorf("\nfailed to get secrets because [err=%v]", err)
+			}
+
+			logger.Info(fmt.Sprintf("ReconcileInfisicalSecret: Fetched secrets via machine identity [type=%v]", authDetails.AuthStrategy))
+
+		} else {
+			return errors.New("no authentication method provided. Please configure a authentication method then try again")
+		}
+
+		if !updateDetails.Modified {
+			logger.Info("ReconcileInfisicalSecret: No secrets modified so reconcile not needed")
+			continue
+		}
+
+		if managedKubeSecret == nil {
+			if err := r.createInfisicalManagedKubeSecret(ctx, logger, infisicalSecret, managedSecretReference, plainTextSecretsFromApi, updateDetails.ETag); err != nil {
+				return fmt.Errorf("failed to create managed secret [err=%s]", err)
+			}
+		} else {
+			if err := r.updateInfisicalManagedKubeSecret(ctx, logger, managedSecretReference, *managedKubeSecret, plainTextSecretsFromApi, updateDetails.ETag); err != nil {
+				return fmt.Errorf("failed to update managed secret [err=%s]", err)
+			}
+		}
 	}
 
+	return nil
 }

k8-operator/packages/controllerhelpers/controllerhelpers.go

@@ -59,6 +59,17 @@ func ReconcileDeploymentsWithManagedSecrets(ctx context.Context, client controll
 	return 0, nil
 }
 
+func ReconcileDeploymentsWithMultipleManagedSecrets(ctx context.Context, client controllerClient.Client, logger logr.Logger, managedSecrets []v1alpha1.ManagedKubeSecretConfig) (int, error) {
+	for _, managedSecret := range managedSecrets {
+		_, err := ReconcileDeploymentsWithManagedSecrets(ctx, client, logger, managedSecret)
+		if err != nil {
+			logger.Error(err, fmt.Sprintf("unable to reconcile deployments with managed secret [name=%v]", managedSecret.SecretName))
+			return 0, err
+		}
+	}
+	return 0, nil
+}
+
 // Check if the deployment uses managed secrets
 func IsDeploymentUsingManagedSecret(deployment v1.Deployment, managedSecret v1alpha1.ManagedKubeSecretConfig) bool {
 	managedSecretName := managedSecret.SecretName