Finish new identity page

2026-10-15 14:27:23 +00:00 · 2024-07-08 17:12:49 +07:00
parent b5166f1d39
commit b81f7d8350
42 changed files with 2691 additions and 671 deletions
@@ -11,19 +11,30 @@ export {
  useCreateIdentityUniversalAuthClientSecret,
  useCreateTokenIdentityTokenAuth,
  useDeleteIdentity,
+  useDeleteIdentityAwsAuth,
+  useDeleteIdentityAzureAuth,
+  useDeleteIdentityGcpAuth,
+  useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityTokenAuth,
+  useDeleteIdentityUniversalAuth,
  useRevokeIdentityUniversalAuthClientSecret,
+  useRevokeToken,
  useUpdateIdentity,
  useUpdateIdentityAwsAuth,
  useUpdateIdentityAzureAuth,
  useUpdateIdentityGcpAuth,
  useUpdateIdentityKubernetesAuth,
  useUpdateIdentityTokenAuth,
-  useUpdateIdentityUniversalAuth} from "./mutations";
+  useUpdateIdentityUniversalAuth,
+  useUpdateTokenIdentityTokenAuth} from "./mutations";
 export {
  useGetIdentityAwsAuth,
  useGetIdentityAzureAuth,
+  useGetIdentityById,
  useGetIdentityGcpAuth,
  useGetIdentityKubernetesAuth,
+  useGetIdentityProjectMemberships,
  useGetIdentityTokenAuth,
+  useGetIdentityTokensTokenAuth,
  useGetIdentityUniversalAuth,
  useGetIdentityUniversalAuthClientSecrets} from "./queries";
@@ -17,22 +17,32 @@ import {
  CreateIdentityUniversalAuthClientSecretRes,
  CreateTokenIdentityTokenAuthDTO,
  CreateTokenIdentityTokenAuthRes,
+  DeleteIdentityAwsAuthDTO,
+  DeleteIdentityAzureAuthDTO,
  DeleteIdentityDTO,
+  DeleteIdentityGcpAuthDTO,
+  DeleteIdentityKubernetesAuthDTO,
+  DeleteIdentityTokenAuthDTO,
  DeleteIdentityUniversalAuthClientSecretDTO,
+  DeleteIdentityUniversalAuthDTO,
  Identity,
+  IdentityAccessToken,
  IdentityAwsAuth,
  IdentityAzureAuth,
  IdentityGcpAuth,
  IdentityKubernetesAuth,
  IdentityTokenAuth,
  IdentityUniversalAuth,
+  RevokeTokenDTO,
+  RevokeTokenRes,
  UpdateIdentityAwsAuthDTO,
  UpdateIdentityAzureAuthDTO,
  UpdateIdentityDTO,
  UpdateIdentityGcpAuthDTO,
  UpdateIdentityKubernetesAuthDTO,
  UpdateIdentityTokenAuthDTO,
-  UpdateIdentityUniversalAuthDTO} from "./types";
+  UpdateIdentityUniversalAuthDTO,
+  UpdateTokenIdentityTokenAuthDTO} from "./types";

 export const useCreateIdentity = () => {
  const queryClient = useQueryClient();
@@ -62,8 +72,9 @@ export const useUpdateIdentity = () => {

      return identity;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { organizationId, identityId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
    }
  });
 };
@@ -107,8 +118,10 @@ export const useAddIdentityUniversalAuth = () => {
      });
      return identityUniversalAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuth(identityId));
    }
  });
 };
@@ -135,8 +148,27 @@ export const useUpdateIdentityUniversalAuth = () => {
      });
      return identityUniversalAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityUniversalAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityUniversalAuth, {}, DeleteIdentityUniversalAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityUniversalAuth }
+      } = await apiRequest.delete(`/api/v1/auth/universal-auth/identities/${identityId}`);
+      return identityUniversalAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuth(identityId));
    }
  });
 };
@@ -218,8 +250,10 @@ export const useAddIdentityGcpAuth = () => {

      return identityGcpAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityGcpAuth(identityId));
    }
  });
 };
@@ -256,8 +290,27 @@ export const useUpdateIdentityGcpAuth = () => {

      return identityGcpAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityGcpAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityGcpAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityGcpAuth, {}, DeleteIdentityGcpAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityGcpAuth }
+      } = await apiRequest.delete(`/api/v1/auth/gcp-auth/identities/${identityId}`);
+      return identityGcpAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityGcpAuth(identityId));
    }
  });
 };
@@ -292,8 +345,10 @@ export const useAddIdentityAwsAuth = () => {

      return identityAwsAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityAwsAuth(identityId));
    }
  });
 };
@@ -328,8 +383,27 @@ export const useUpdateIdentityAwsAuth = () => {

      return identityAwsAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityAwsAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityAwsAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityAwsAuth, {}, DeleteIdentityAwsAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityAwsAuth }
+      } = await apiRequest.delete(`/api/v1/auth/aws-auth/identities/${identityId}`);
+      return identityAwsAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityAwsAuth(identityId));
    }
  });
 };
@@ -364,8 +438,10 @@ export const useAddIdentityAzureAuth = () => {

      return identityAzureAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityKubernetesAuth(identityId));
    }
  });
 };
@@ -406,8 +482,10 @@ export const useAddIdentityKubernetesAuth = () => {

      return identityKubernetesAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityAzureAuth(identityId));
    }
  });
 };
@@ -442,8 +520,27 @@ export const useUpdateIdentityAzureAuth = () => {

      return identityAzureAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityAzureAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityAzureAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityAzureAuth, {}, DeleteIdentityAzureAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityAzureAuth }
+      } = await apiRequest.delete(`/api/v1/auth/azure-auth/identities/${identityId}`);
+      return identityAzureAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityAzureAuth(identityId));
    }
  });
 };
@@ -484,8 +581,27 @@ export const useUpdateIdentityKubernetesAuth = () => {

      return identityKubernetesAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityKubernetesAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityKubernetesAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTokenAuth, {}, DeleteIdentityKubernetesAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityKubernetesAuth }
+      } = await apiRequest.delete(`/api/v1/auth/kubernetes-auth/identities/${identityId}`);
+      return identityKubernetesAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityKubernetesAuth(identityId));
    }
  });
 };
@@ -514,8 +630,10 @@ export const useAddIdentityTokenAuth = () => {

      return identityTokenAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuth(identityId));
    }
  });
 };
@@ -544,8 +662,27 @@ export const useUpdateIdentityTokenAuth = () => {

      return identityTokenAuth;
    },
-    onSuccess: (_, { organizationId }) => {
+    onSuccess: (_, { identityId, organizationId }) => {
      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityTokenAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTokenAuth, {}, DeleteIdentityTokenAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityTokenAuth }
+      } = await apiRequest.delete(`/api/v1/auth/token-auth/identities/${identityId}`);
+      return identityTokenAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityTokenAuth(identityId));
    }
  });
 };
@@ -553,15 +690,55 @@ export const useUpdateIdentityTokenAuth = () => {
 export const useCreateTokenIdentityTokenAuth = () => {
  const queryClient = useQueryClient();
  return useMutation<CreateTokenIdentityTokenAuthRes, {}, CreateTokenIdentityTokenAuthDTO>({
-    mutationFn: async ({ identityId }) => {
+    mutationFn: async ({ identityId, name }) => {
      const { data } = await apiRequest.post<CreateTokenIdentityTokenAuthRes>(
-        `/api/v1/auth/token-auth/identities/${identityId}/token`
+        `/api/v1/auth/token-auth/identities/${identityId}/tokens`,
+        {
+          name
+        }
      );

      return data;
    },
-    onSuccess: (_, { organizationId }) => {
-      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    onSuccess: (_, { identityId }) => {
+      queryClient.invalidateQueries(identitiesKeys.getIdentityTokensTokenAuth(identityId));
+    }
+  });
+};
+
+export const useUpdateTokenIdentityTokenAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityAccessToken, {}, UpdateTokenIdentityTokenAuthDTO>({
+    mutationFn: async ({ identityId, tokenId, name }) => {
+      const {
+        data: { token }
+      } = await apiRequest.patch<{ token: IdentityAccessToken }>(
+        `/api/v1/auth/token-auth/identities/${identityId}/tokens/${tokenId}`,
+        {
+          name
+        }
+      );
+
+      return token;
+    },
+    onSuccess: (_, { identityId }) => {
+      queryClient.invalidateQueries(identitiesKeys.getIdentityTokensTokenAuth(identityId));
+    }
+  });
+};
+
+export const useRevokeToken = () => {
+  const queryClient = useQueryClient();
+  return useMutation<RevokeTokenRes, {}, RevokeTokenDTO>({
+    mutationFn: async ({ tokenId }) => {
+      const { data } = await apiRequest.post<RevokeTokenRes>("/api/v1/auth/token/revoke-by-id", {
+        tokenId
+      });
+
+      return data;
+    },
+    onSuccess: (_, { identityId }) => {
+      queryClient.invalidateQueries(identitiesKeys.getIdentityTokensTokenAuth(identityId));
    }
  });
 };
@@ -4,14 +4,17 @@ import { apiRequest } from "@app/config/request";

 import {
  ClientSecretData,
+  IdentityAccessToken,
  IdentityAwsAuth,
  IdentityAzureAuth,
  IdentityGcpAuth,
  IdentityKubernetesAuth,
+  IdentityMembershipOrg,
  IdentityTokenAuth,
  IdentityUniversalAuth} from "./types";

 export const identitiesKeys = {
+  getIdentityById: (identityId: string) => [{ identityId }, "identity"] as const,
  getIdentityUniversalAuth: (identityId: string) =>
    [{ identityId }, "identity-universal-auth"] as const,
  getIdentityUniversalAuthClientSecrets: (identityId: string) =>
@@ -21,7 +24,39 @@ export const identitiesKeys = {
  getIdentityGcpAuth: (identityId: string) => [{ identityId }, "identity-gcp-auth"] as const,
  getIdentityAwsAuth: (identityId: string) => [{ identityId }, "identity-aws-auth"] as const,
  getIdentityAzureAuth: (identityId: string) => [{ identityId }, "identity-azure-auth"] as const,
-  getIdentityTokenAuth: (identityId: string) => [{ identityId }, "identity-token-auth"] as const
+  getIdentityTokenAuth: (identityId: string) => [{ identityId }, "identity-token-auth"] as const,
+  getIdentityTokensTokenAuth: (identityId: string) =>
+    [{ identityId }, "identity-tokens-token-auth"] as const,
+  getIdentityProjectMemberships: (identityId: string) =>
+    [{ identityId }, "identity-project-memberships"] as const
+};
+
+export const useGetIdentityById = (identityId: string) => {
+  return useQuery({
+    enabled: Boolean(identityId),
+    queryKey: identitiesKeys.getIdentityById(identityId),
+    queryFn: async () => {
+      const {
+        data: { identity }
+      } = await apiRequest.get<{ identity: IdentityMembershipOrg }>(
+        `/api/v1/identities/${identityId}`
+      );
+      return identity;
+    }
+  });
+};
+
+export const useGetIdentityProjectMemberships = (identityId: string) => {
+  return useQuery({
+    enabled: Boolean(identityId),
+    queryKey: identitiesKeys.getIdentityProjectMemberships(identityId),
+    queryFn: async () => {
+      const {
+        data: { identityMemberships }
+      } = await apiRequest.get(`/api/v1/identities/${identityId}/identity-memberships`);
+      return identityMemberships;
+    }
+  });
 };

 export const useGetIdentityUniversalAuth = (identityId: string) => {
@@ -35,7 +70,9 @@ export const useGetIdentityUniversalAuth = (identityId: string) => {
        `/api/v1/auth/universal-auth/identities/${identityId}`
      );
      return identityUniversalAuth;
-    }
+    },
+    staleTime: 0,
+    cacheTime: 0
  });
 };

@@ -65,7 +102,9 @@ export const useGetIdentityGcpAuth = (identityId: string) => {
        `/api/v1/auth/gcp-auth/identities/${identityId}`
      );
      return identityGcpAuth;
-    }
+    },
+    staleTime: 0,
+    cacheTime: 0
  });
 };

@@ -80,7 +119,9 @@ export const useGetIdentityAwsAuth = (identityId: string) => {
        `/api/v1/auth/aws-auth/identities/${identityId}`
      );
      return identityAwsAuth;
-    }
+    },
+    staleTime: 0,
+    cacheTime: 0
  });
 };

@@ -95,7 +136,9 @@ export const useGetIdentityAzureAuth = (identityId: string) => {
        `/api/v1/auth/azure-auth/identities/${identityId}`
      );
      return identityAzureAuth;
-    }
+    },
+    staleTime: 0,
+    cacheTime: 0
  });
 };

@@ -110,7 +153,9 @@ export const useGetIdentityKubernetesAuth = (identityId: string) => {
        `/api/v1/auth/kubernetes-auth/identities/${identityId}`
      );
      return identityKubernetesAuth;
-    }
+    },
+    staleTime: 0,
+    cacheTime: 0
  });
 };

@@ -125,6 +170,23 @@ export const useGetIdentityTokenAuth = (identityId: string) => {
        `/api/v1/auth/token-auth/identities/${identityId}`
      );
      return identityTokenAuth;
+    },
+    staleTime: 0,
+    cacheTime: 0
+  });
+};
+
+export const useGetIdentityTokensTokenAuth = (identityId: string) => {
+  return useQuery({
+    enabled: Boolean(identityId),
+    queryKey: identitiesKeys.getIdentityTokensTokenAuth(identityId),
+    queryFn: async () => {
+      const {
+        data: { tokens }
+      } = await apiRequest.get<{ tokens: IdentityAccessToken[] }>(
+        `/api/v1/auth/token-auth/identities/${identityId}/tokens`
+      );
+      return tokens;
    }
  });
 };
@@ -16,6 +16,22 @@ export type Identity = {
  updatedAt: string;
 };

+export type IdentityAccessToken = {
+  id: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUses: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenLastUsedAt: string | null;
+  accessTokenLastRenewedAt: string | null;
+  isAccessTokenRevoked: boolean;
+  identityUAClientSecretId: string | null;
+  identityId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string | null;
+};
+
 export type IdentityMembershipOrg = {
  id: string;
  identity: Identity;
@@ -113,6 +129,11 @@ export type UpdateIdentityUniversalAuthDTO = {
  }[];
 };

+export type DeleteIdentityUniversalAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type IdentityGcpAuth = {
  identityId: string;
  type: "iam" | "gce";
@@ -155,6 +176,11 @@ export type UpdateIdentityGcpAuthDTO = {
  }[];
 };

+export type DeleteIdentityGcpAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type IdentityAwsAuth = {
  identityId: string;
  type: "iam";
@@ -195,6 +221,11 @@ export type UpdateIdentityAwsAuthDTO = {
  }[];
 };

+export type DeleteIdentityAwsAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type IdentityAzureAuth = {
  identityId: string;
  tenantId: string;
@@ -234,6 +265,11 @@ export type UpdateIdentityAzureAuthDTO = {
  }[];
 };

+export type DeleteIdentityAzureAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type IdentityKubernetesAuth = {
  identityId: string;
  kubernetesHost: string;
@@ -282,6 +318,11 @@ export type UpdateIdentityKubernetesAuthDTO = {
  }[];
 };

+export type DeleteIdentityKubernetesAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type CreateIdentityUniversalAuthClientSecretDTO = {
  identityId: string;
  description?: string;
@@ -342,9 +383,14 @@ export type UpdateIdentityTokenAuthDTO = {
  }[];
 };

+export type DeleteIdentityTokenAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type CreateTokenIdentityTokenAuthDTO = {
  identityId: string;
-  organizationId: string;
+  name: string;
 };

 export type CreateTokenIdentityTokenAuthRes = {
@@ -353,3 +399,18 @@ export type CreateTokenIdentityTokenAuthRes = {
  expiresIn: number;
  accessTokenMaxTTL: number;
 };
+
+export type UpdateTokenIdentityTokenAuthDTO = {
+  identityId: string;
+  tokenId: string;
+  name?: string;
+};
+
+export type RevokeTokenDTO = {
+  identityId: string;
+  tokenId: string;
+};
+
+export type RevokeTokenRes = {
+  message: string;
+};
@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { IdentityPage } from "@app/views/Org/IdentityPage";
+
+export default function Identity() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <IdentityPage />
+    </>
+  );
+}
+
+Identity.requireAuth = true;
@@ -0,0 +1,332 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  UpgradePlanModal
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { withPermission } from "@app/hoc";
+import {
+  useDeleteIdentity,
+  useGetIdentityById,
+  useRevokeIdentityUniversalAuthClientSecret,
+  useRevokeToken
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { IdentityAuthMethodModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal";
+import { IdentityModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal";
+import { IdentityUniversalAuthClientSecretModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal";
+import {
+  IdentityAuthenticationSection,
+  IdentityClientSecretModal,
+  IdentityDetailsSection,
+  IdentityProjectsSection,
+  IdentityTokenListModal,
+  IdentityTokenModal} from "./components";
+
+export const IdentityPage = withPermission(
+  () => {
+    const router = useRouter();
+    const identityId = router.query.identityId as string;
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?.id || "";
+    const { data } = useGetIdentityById(identityId);
+    const { mutateAsync: deleteIdentity } = useDeleteIdentity();
+    const { mutateAsync: revokeToken } = useRevokeToken();
+    const { mutateAsync: revokeClientSecret } = useRevokeIdentityUniversalAuthClientSecret();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "identity",
+      "deleteIdentity",
+      "identityAuthMethod",
+      "token",
+      "tokenList",
+      "revokeToken",
+      "clientSecret",
+      "revokeClientSecret",
+      "universalAuthClientSecret", // list of client secrets
+      "upgradePlan"
+    ] as const);
+
+    const onDeleteIdentitySubmit = async (id: string) => {
+      try {
+        await deleteIdentity({
+          identityId: id,
+          organizationId: orgId
+        });
+
+        createNotification({
+          text: "Successfully deleted identity",
+          type: "success"
+        });
+
+        handlePopUpClose("deleteIdentity");
+        router.push(`/org/${orgId}/members`);
+      } 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 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) 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 py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/org/${orgId}/members`);
+              }}
+              className="mb-4"
+            >
+              Identities
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.identity.name}</p>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="rounded-lg">
+                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                    <Tooltip content="More options">
+                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    </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,
+                            authMethod: data.identity.authMethod
+                          });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        {`${data.identity.authMethod ? "Edit" : "Configure"} 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>
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+                <IdentityAuthenticationSection
+                  identityId={identityId}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              </div>
+              <IdentityProjectsSection identityId={identityId} />
+            </div>
+          </div>
+        )}
+        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <IdentityAuthMethodModal
+          popUp={popUp}
+          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)}
+          text={(popUp.upgradePlan?.data as { description: string })?.description}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteIdentity.isOpen}
+          title={`Are you sure want to delete ${
+            (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onDeleteIdentitySubmit(
+              (popUp?.deleteIdentity?.data as { identityId: string })?.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>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Identity }
+);
@@ -0,0 +1,98 @@
+import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  IconButton,
+  // Button,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetIdentityById } from "@app/hooks/api";
+import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { IdentityClientSecrets } from "./IdentityClientSecrets";
+import { IdentityTokens } from "./IdentityTokens";
+
+type Props = {
+  identityId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      [
+        "clientSecret",
+        "identityAuthMethod",
+        "revokeClientSecret",
+        "token",
+        "revokeToken",
+        "universalAuthClientSecret",
+        "tokenList"
+      ]
+    >,
+    data?: {}
+  ) => void;
+};
+
+export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: Props) => {
+  const { data } = useGetIdentityById(identityId);
+  return data ? (
+    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Authentication</h3>
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content={`${data.identity.authMethod ? "Edit" : "Configure"} Auth Method`}>
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() =>
+                    handlePopUpOpen("identityAuthMethod", {
+                      identityId,
+                      name: data.identity.name,
+                      authMethod: data.identity.authMethod
+                    })
+                  }
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </div>
+      <div className="py-4">
+        <div className="flex justify-between">
+          <p className="text-sm font-semibold text-mineshaft-300">Auth Method</p>
+          {/* <Button
+            variant="link"
+            onClick={() => {
+              handlePopUpOpen("identityAuthMethod", {
+                identityId,
+                name: data.identity.name,
+                authMethod: data.identity.authMethod
+              });
+            }}
+          >
+            Manage
+          </Button> */}
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          {data.identity.authMethod
+            ? identityAuthToNameMap[data.identity.authMethod]
+            : "Not configured"}
+        </p>
+      </div>
+      {data.identity.authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
+        <IdentityClientSecrets identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+      )}
+      {data.identity.authMethod === IdentityAuthMethod.TOKEN_AUTH && (
+        <IdentityTokens identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+      )}
+    </div>
+  ) : (
+    <div />
+  );
+};
@@ -0,0 +1,120 @@
+import { faKey, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import {
+  useGetIdentityById,
+  useGetIdentityUniversalAuth,
+  useGetIdentityUniversalAuthClientSecrets
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  identityId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["clientSecret", "revokeClientSecret", "universalAuthClientSecret"]
+    >,
+    data?: {}
+  ) => void;
+};
+
+const SHOW_LIMIT = 3;
+
+export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) => {
+  const { data } = useGetIdentityById(identityId);
+  const { data: identityUniversalAuth } = useGetIdentityUniversalAuth(identityId);
+  const { data: clientSecrets } = useGetIdentityUniversalAuthClientSecrets(identityId);
+  return (
+    <div>
+      <div className="mb-4">
+        <p className="text-sm font-semibold text-mineshaft-300">Client ID</p>
+        <p className="text-sm text-mineshaft-300">{identityUniversalAuth?.clientId ?? ""}</p>
+      </div>
+      {clientSecrets?.length ? (
+        <div className="flex justify-between">
+          <p className="text-sm font-semibold text-mineshaft-300">{`Client Secrets (${clientSecrets.length})`}</p>
+          <Button
+            variant="link"
+            onClick={() => {
+              handlePopUpOpen("universalAuthClientSecret", {
+                identityId,
+                name: data?.identity.name ?? ""
+              });
+            }}
+          >
+            Manage
+          </Button>
+        </div>
+      ) : (
+        <div />
+      )}
+      {clientSecrets
+        ?.slice(0, SHOW_LIMIT)
+        .map(({ id, clientSecretTTL, clientSecretPrefix, createdAt }) => {
+          let expiresAt;
+          if (clientSecretTTL > 0) {
+            expiresAt = new Date(new Date(createdAt).getTime() + clientSecretTTL * 1000);
+          }
+
+          return (
+            <div
+              className="group flex items-center justify-between py-2 last:pb-0"
+              key={`client-secret-${id}`}
+            >
+              <div className="flex items-center">
+                <FontAwesomeIcon size="1x" icon={faKey} />
+                <div className="ml-4">
+                  <p className="text-sm font-semibold text-mineshaft-300">
+                    {`${clientSecretPrefix}****`}
+                  </p>
+                  <p className="text-sm text-mineshaft-300">
+                    {expiresAt ? `Expires on ${format(expiresAt, "yyyy-MM-dd")}` : "No Expiry"}
+                  </p>
+                </div>
+              </div>
+              <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                <Tooltip content="Revoke Client Secret">
+                  <IconButton
+                    ariaLabel="copy icon"
+                    variant="plain"
+                    className="group relative"
+                    onClick={() => {
+                      handlePopUpOpen("revokeClientSecret", {
+                        clientSecretId: id,
+                        clientSecretPrefix
+                      });
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            </div>
+          );
+        })}
+      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+        {(isAllowed) => {
+          return (
+            <Button
+              isDisabled={!isAllowed}
+              className="mt-4 w-full"
+              colorSchema="primary"
+              type="submit"
+              onClick={() => {
+                handlePopUpOpen("clientSecret", {
+                  identityId
+                });
+              }}
+            >
+              Create Client Secret
+            </Button>
+          );
+        }}
+      </OrgPermissionCan>
+    </div>
+  );
+};
@@ -0,0 +1,119 @@
+import { faEllipsis, faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { useGetIdentityById, useGetIdentityTokensTokenAuth } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  identityId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["token", "tokenList", "revokeToken"]>,
+    data?: {}
+  ) => void;
+};
+
+export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
+  const { data } = useGetIdentityById(identityId);
+  const { data: tokens } = useGetIdentityTokensTokenAuth(identityId);
+  return (
+    <div>
+      {tokens?.length ? (
+        <div className="flex justify-between">
+          <p className="text-sm font-semibold text-mineshaft-300">{`Access Tokens (${tokens.length})`}</p>
+          <Button
+            variant="link"
+            onClick={() => {
+              handlePopUpOpen("tokenList", {
+                identityId,
+                name: data?.identity.name ?? ""
+              });
+            }}
+          >
+            Manage
+          </Button>
+        </div>
+      ) : (
+        <div />
+      )}
+      {tokens?.map((token) => {
+        const expiresAt = new Date(
+          new Date(token.createdAt).getTime() + token.accessTokenMaxTTL * 1000
+        );
+        return (
+          <div
+            className="group flex items-center justify-between py-2 last:pb-0"
+            key={`identity-token-${token.id}`}
+          >
+            <div className="flex items-center">
+              <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-sm text-mineshaft-300">
+                  {token.isAccessTokenRevoked
+                    ? "Revoked"
+                    : `Expires on ${format(expiresAt, "yyyy-MM-dd")}`}
+                </p>
+              </div>
+            </div>
+            <DropdownMenu>
+              <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="p-1">
+                <DropdownMenuItem
+                  onClick={async () => {
+                    handlePopUpOpen("token", {
+                      identityId,
+                      tokenId: token.id,
+                      name: token.name
+                    });
+                  }}
+                >
+                  Edit Token
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={async () => {
+                    handlePopUpOpen("revokeToken", {
+                      identityId,
+                      tokenId: token.id,
+                      name: token.name
+                    });
+                  }}
+                >
+                  Revoke Token
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        );
+      })}
+      <Button
+        className="mt-4 mr-4 w-full"
+        colorSchema="primary"
+        type="submit"
+        onClick={() => {
+          handlePopUpOpen("token", {
+            identityId
+          });
+        }}
+      >
+        Create Token
+      </Button>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { IdentityAuthenticationSection } from "./IdentityAuthenticationSection";
@@ -0,0 +1,191 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Tooltip
+} from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+import { useCreateIdentityUniversalAuthClientSecret } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    description: z.string(),
+    ttl: z.string(),
+    numUsesLimit: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["clientSecret"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["clientSecret"]>, state?: boolean) => void;
+};
+
+export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { mutateAsync: createClientSecret } = useCreateIdentityUniversalAuthClientSecret();
+  const [token, setToken] = useState("");
+  const [copyTextToken, isCopyingToken, setCopyTextToken] = useTimedReset<string>({
+    initialState: "Copy to clipboard"
+  });
+  const hasToken = Boolean(token);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      description: "",
+      ttl: "",
+      numUsesLimit: ""
+    }
+  });
+
+  const popUpData = popUp?.clientSecret?.data as {
+    identityId: string;
+  };
+
+  const onFormSubmit = async ({ description, ttl, numUsesLimit }: FormData) => {
+    try {
+      const { clientSecret } = await createClientSecret({
+        identityId: popUpData.identityId,
+        description,
+        ttl: Number(ttl),
+        numUsesLimit: Number(numUsesLimit)
+      });
+
+      setToken(clientSecret);
+
+      createNotification({
+        text: "Successfully created client secret",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to create client secret";
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.clientSecret?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("clientSecret", isOpen);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent
+        title="Create Client Secret"
+        subTitle={hasToken ? "We will only show this secret once" : ""}
+      >
+        {!hasToken ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="description"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Description"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="My Client Secret" />
+                </FormControl>
+              )}
+            />
+            <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=""
+              name="numUsesLimit"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Max Number of Uses"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="0" type="number" min="0" step="1" />
+                </FormControl>
+              )}
+            />
+            <div className="flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                Create
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("clientSecret", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{token}</p>
+            <Tooltip content={copyTextToken}>
+              <IconButton
+                ariaLabel="copy icon"
+                colorSchema="secondary"
+                className="group relative"
+                onClick={() => {
+                  navigator.clipboard.writeText(token);
+                  setCopyTextToken("Copied");
+                }}
+              >
+                <FontAwesomeIcon icon={isCopyingToken ? faCheck : faCopy} />
+              </IconButton>
+            </Tooltip>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,67 @@
+import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton,Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetIdentityById } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  identityId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["identity", "identityAuthMethod", "token", "clientSecret"]>,
+    data?: {}
+  ) => void;
+};
+
+export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) => {
+  const { data } = useGetIdentityById(identityId);
+  return data ? (
+    <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">Details</h3>
+        <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
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">ID</p>
+          <p className="text-sm text-mineshaft-300">{data.identity.id}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{data.role}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};
@@ -0,0 +1,57 @@
+import { faKey } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useGetIdentityProjectMemberships } from "@app/hooks/api";
+
+type Props = {
+  identityId: string;
+};
+
+export const IdentityProjectsSection = ({ identityId }: Props) => {
+  const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
+  return (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Projects</h3>
+      </div>
+      <div className="py-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Name</Th>
+                <Th>Role</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={2} innerKey="identity-project-memberships" />}
+              {!isLoading &&
+                projectMemberships?.map((membership: any) => {
+                  // TODO: fix any
+                  return (
+                    <Tr className="h-10" key={`identity-project-membership-${membership.id}`}>
+                      <Td>{membership.project.name}</Td>
+                      <Td>{membership.roles[0].role}</Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isLoading && !projectMemberships?.length && (
+            <EmptyState title="This identity has not been assigned to any projects" icon={faKey} />
+          )}
+        </TableContainer>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,269 @@
+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?: {}) => 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, isLoading } = 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>
+              {isLoading && <TableSkeleton columns={5} innerKey="identities-tokens" />}
+              {!isLoading &&
+                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>
+                    );
+                  }
+                )}
+              {!isLoading && 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>
+  );
+};
@@ -0,0 +1,183 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Tooltip
+} from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+import { useCreateTokenIdentityTokenAuth, useUpdateTokenIdentityTokenAuth } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    name: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["token"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["token"]>, state?: boolean) => void;
+};
+
+export const IdentityTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { mutateAsync: createToken } = useCreateTokenIdentityTokenAuth();
+  const { mutateAsync: updateToken } = useUpdateTokenIdentityTokenAuth();
+  const [token, setToken] = useState("");
+  const [copyTextToken, isCopyingToken, setCopyTextToken] = useTimedReset<string>({
+    initialState: "Copy to clipboard"
+  });
+  const hasToken = Boolean(token);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: ""
+    }
+  });
+
+  const tokenData = popUp?.token?.data as {
+    identityId: string;
+    tokenId?: string;
+    name?: string;
+  };
+
+  useEffect(() => {
+    if (tokenData?.tokenId && tokenData?.name) {
+      reset({
+        name: tokenData.name
+      });
+    } else {
+      reset({
+        name: ""
+      });
+    }
+  }, [popUp?.token?.data]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (tokenData?.tokenId) {
+        // update
+
+        await updateToken({
+          identityId: tokenData.identityId,
+          tokenId: tokenData.tokenId,
+          name
+        });
+
+        handlePopUpToggle("token", false);
+      } else {
+        // create
+
+        const newTokenData = await createToken({
+          identityId: tokenData.identityId,
+          name
+        });
+
+        setToken(newTokenData.accessToken);
+        // note: may be helpful to tell user ttl etc.
+      }
+
+      createNotification({
+        text: `Successfully ${popUp?.token?.data ? "updated" : "created"} token`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text =
+        error?.response?.data?.message ??
+        `Failed to ${popUp?.token?.data ? "update" : "create"} token`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.token?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("token", isOpen);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent
+        title={`${tokenData?.tokenId ? "Update" : "Create"} Access Token`}
+        subTitle={hasToken ? "We will only show this token once" : ""}
+      >
+        {!hasToken ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} placeholder="My Token" />
+                </FormControl>
+              )}
+            />
+            <div className="flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                {tokenData?.name ? "Update" : "Create"}
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("token", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{token}</p>
+            <Tooltip content={copyTextToken}>
+              <IconButton
+                ariaLabel="copy icon"
+                colorSchema="secondary"
+                className="group relative"
+                onClick={() => {
+                  navigator.clipboard.writeText(token);
+                  setCopyTextToken("Copied");
+                }}
+              >
+                <FontAwesomeIcon icon={isCopyingToken ? faCheck : faCopy} />
+              </IconButton>
+            </Tooltip>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,6 @@
+export { IdentityAuthenticationSection } from "./IdentityAuthenticationSection/IdentityAuthenticationSection";
+export { IdentityClientSecretModal } from "./IdentityClientSecretModal";
+export { IdentityDetailsSection } from "./IdentityDetailsSection";
+export { IdentityProjectsSection } from "./IdentityProjectsSection";
+export { IdentityTokenListModal } from "./IdentityTokenListModal";
+export { IdentityTokenModal } from "./IdentityTokenModal";
@@ -0,0 +1 @@
+export { IdentityPage } from "./IdentityPage";
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityAwsAuth,
+  useDeleteIdentityAwsAuth,
  useGetIdentityAwsAuth,
-  useUpdateIdentityAwsAuth
-} from "@app/hooks/api";
+  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";
@@ -63,6 +63,7 @@ export const IdentityAwsAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityAwsAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityAwsAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityAwsAuth();

  const { data } = useGetIdentityAwsAuth(identityAuthMethodData?.identityId ?? "");

@@ -329,23 +330,43 @@ export const IdentityAwsAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityAzureAuth,
+  useDeleteIdentityAzureAuth,
  useGetIdentityAzureAuth,
-  useUpdateIdentityAzureAuth
-} from "@app/hooks/api";
+  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";
@@ -61,6 +61,7 @@ export const IdentityAzureAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityAzureAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityAzureAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityAzureAuth();

  const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "");

@@ -327,23 +328,43 @@ export const IdentityAzureAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityGcpAuth,
+  useDeleteIdentityGcpAuth,
  useGetIdentityGcpAuth,
-  useUpdateIdentityGcpAuth
-} from "@app/hooks/api";
+  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";
@@ -62,6 +62,7 @@ export const IdentityGcpAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityGcpAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityGcpAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityGcpAuth();

  const { data } = useGetIdentityGcpAuth(identityAuthMethodData?.identityId ?? "");

@@ -361,23 +362,43 @@ export const IdentityGcpAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input, TextArea } from "@app/component
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityKubernetesAuth,
+  useDeleteIdentityKubernetesAuth,
  useGetIdentityKubernetesAuth,
-  useUpdateIdentityKubernetesAuth
-} from "@app/hooks/api";
+  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";
@@ -64,6 +64,7 @@ export const IdentityKubernetesAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityKubernetesAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityKubernetesAuth();

  const { data } = useGetIdentityKubernetesAuth(identityAuthMethodData?.identityId ?? "");

@@ -382,23 +383,43 @@ export const IdentityKubernetesAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -16,8 +17,8 @@ import {
 import { useOrganization } from "@app/context";
 import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
 import {
-  IdentityAuthMethod
-  // useAddIdentityUniversalAuth
+  // IdentityAuthMethod,
+  useAddIdentityUniversalAuth
 } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -32,18 +33,19 @@ export type FormData = yup.InferType<typeof schema>;

 type Props = {
  popUp: UsePopUpState<["identity"]>;
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-    data: {
-      identityId: string;
-      name: string;
-      authMethod?: IdentityAuthMethod;
-    }
-  ) => void;
+  // handlePopUpOpen: (
+  //   popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+  //   data: {
+  //     identityId: string;
+  //     name: string;
+  //     authMethod?: IdentityAuthMethod;
+  //   }
+  // ) => void;
  handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };

-export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

@@ -51,7 +53,7 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro

  const { mutateAsync: createMutateAsync } = useCreateIdentity();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  // const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();

  const {
    control,
@@ -113,32 +115,30 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
      } else {
        // create

-        const {
-          id: createdId,
-          name: createdName,
-          authMethod
-        } = await createMutateAsync({
+        const { id: createdId } = await createMutateAsync({
          name,
          role: role || undefined,
          organizationId: orgId
        });

-        // await addMutateAsync({
-        //   organizationId: orgId,
-        //   identityId: createdId,
-        //   clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTTL: 2592000,
-        //   accessTokenMaxTTL: 2592000,
-        //   accessTokenNumUsesLimit: 0
-        // });
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId: createdId,
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
+          accessTokenNumUsesLimit: 0
+        });

        handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
-          identityId: createdId,
-          name: createdName,
-          authMethod
-        });
+        router.push(`/org/${orgId}/identities/${createdId}`);
+
+        // handlePopUpOpen("identityAuthMethod", {
+        //   identityId: createdId,
+        //   name: createdName,
+        //   authMethod
+        // });
      }

      createNotification({
@@ -1,193 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { faKey } from "@fortawesome/free-solid-svg-icons";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import {
-  Button,
-  EmptyState,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Tab,
-  Table,
-  TableContainer,
-  TabList,
-  TabPanel,
-  Tabs,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr} from "@app/components/v2";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  popUp: UsePopUpState<["identityModalV2", "upgradePlan"]>;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityModalV2", "upgradePlan"]>,
-    state?: boolean
-  ) => void;
-};
-
-enum TabSections {
-  AccessTokens = "access-tokens",
-  AuthMethod = "auth-method"
-}
-
-const schema = z.object({
-  name: z.string(),
-  role: z.string()
-});
-
-type FormData = z.infer<typeof schema>;
-
-export const IdentityModalV2 = ({ popUp, handlePopUpToggle }: Props) => {
-  const {
-    control,
-    formState: { isSubmitting }
-  } = useForm<FormData>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      name: "",
-      role: ""
-    }
-  });
-
-  const identityData = popUp?.identityModalV2?.data as {
-    identityId: string;
-    name: string;
-    authMethod?: IdentityAuthMethod;
-  };
-
-  return (
-    <Modal
-      isOpen={popUp?.identityModalV2?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("identityModalV2", isOpen);
-      }}
-    >
-      <ModalContent
-        className="max-w-screen-lg"
-        title={`Manage Service Account: ${identityData?.name ?? ""}`}
-      >
-        <div className="flex">
-          <div className="w-72 border-r-2 border-mineshaft-600 pr-8">
-            <div className="flex h-full flex-col justify-between">
-              <div>
-                <div className="mb-4 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                  <p className="whitespace-pre-wrap break-all">Some ID</p>
-                </div>
-                <Controller
-                  control={control}
-                  defaultValue=""
-                  name="name"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
-                      <Input {...field} placeholder="Machine 1" />
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  defaultValue=""
-                  name="role"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Organization Role"
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} placeholder="Admin" />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <Button size="sm" type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-                Edit
-              </Button>
-            </div>
-          </div>
-          <div className="flex-2 pl-8">
-            <Tabs defaultValue={TabSections.AccessTokens}>
-              <TabList>
-                <Tab value={TabSections.AccessTokens}>Access Tokens</Tab>
-                <Tab value={TabSections.AuthMethod}>Auth Method</Tab>
-              </TabList>
-              <TabPanel value={TabSections.AccessTokens}>
-                <div className="mb-8">
-                  <div className="mb-2 flex items-center justify-between">
-                    <h2 className="text-md text-mineshaft-100">Access Token</h2>
-                    <Button
-                      onClick={() => console.log("manage")}
-                      colorSchema="secondary"
-                      // isDisabled={!isAllowed}
-                    >
-                      Create Token
-                    </Button>
-                  </div>
-                  <p className="text-sm text-mineshaft-300">
-                    Create an access token to authenticate with the API
-                  </p>
-                </div>
-                <TableContainer>
-                  <Table>
-                    <THead>
-                      <Tr>
-                        <Th>Token</Th>
-                        <Th>Expires</Th>
-                        <Th />
-                      </Tr>
-                    </THead>
-                    <TBody>
-                      <Tr>
-                        <Td colSpan={4}>
-                          <EmptyState
-                            title="No access tokens have been created for this service account"
-                            icon={faKey}
-                          />
-                        </Td>
-                      </Tr>
-                    </TBody>
-                  </Table>
-                </TableContainer>
-              </TabPanel>
-              <TabPanel value={TabSections.AuthMethod}>Amx</TabPanel>
-            </Tabs>
-          </div>
-        </div>
-        {/* <Controller
-          control={control}
-          name="authMethod"
-          defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
-          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-            <FormControl label="Auth Method" errorText={error?.message} isError={Boolean(error)}>
-              <Select
-                defaultValue={field.value}
-                {...field}
-                onValueChange={(e) => onChange(e)}
-                className="w-full"
-                isDisabled={!!identityData?.authMethod}
-              >
-                {identityAuthMethods.map(({ label, value }) => (
-                  <SelectItem value={String(value || "")} key={label}>
-                    {label}
-                  </SelectItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        /> */}
-        {/* {renderIdentityAuthForm()} */}
-        {/* <UpgradePlanModal
-          isOpen={popUp?.upgradePlan?.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-        /> */}
-      </ModalContent>
-    </Modal>
-  );
-};
@@ -17,11 +17,9 @@ import { usePopUp } from "@app/hooks/usePopUp";

 import { IdentityAuthMethodModal } from "./IdentityAuthMethodModal";
 import { IdentityModal } from "./IdentityModal";
-// new
-import { IdentityModalV2 } from "./IdentityModalV2";
 import { IdentityTable } from "./IdentityTable";
 import { IdentityTokenAuthTokenModal } from "./IdentityTokenAuthTokenModal";
-import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";
+// import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";

 export const IdentitySection = withPermission(
  () => {
@@ -32,7 +30,6 @@ export const IdentitySection = withPermission(
    const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
      "identity",
-      "identityModalV2", // TODO: update
      "identityAuthMethod",
      "deleteIdentity",
      "universalAuthClientSecret",
@@ -111,27 +108,18 @@ export const IdentitySection = withPermission(
            )}
          </OrgPermissionCan>
        </div>
-        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
-        <IdentityModal
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityModalV2
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
+        <IdentityTable />
+        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        <IdentityAuthMethodModal
          popUp={popUp}
          handlePopUpOpen={handlePopUpOpen}
          handlePopUpToggle={handlePopUpToggle}
        />
-        <IdentityUniversalAuthClientSecretModal
+        {/* <IdentityUniversalAuthClientSecretModal
          popUp={popUp}
          handlePopUpOpen={handlePopUpOpen}
          handlePopUpToggle={handlePopUpToggle}
-        />
+        /> */}
        <IdentityTokenAuthTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        <DeleteActionModal
          isOpen={popUp.deleteIdentity.isOpen}
@@ -1,23 +1,11 @@
-import {
-  faCopy,
-  faEllipsis,
-  faKey,
-  faLock,
-  faPencil,
-  faServer,
-  faXmark
-} from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faEllipsis, faServer } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
  EmptyState,
  IconButton,
  Select,
@@ -29,50 +17,17 @@ import {
  Td,
  Th,
  THead,
-  Tooltip,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import {
-  useCreateTokenIdentityTokenAuth,
-  useGetIdentityMembershipOrgs,
-  useGetOrgRoles,
-  useUpdateIdentity
-} from "@app/hooks/api";
-import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";
+import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";

-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<
-      [
-        "deleteIdentity",
-        "identity",
-        "identityModalV2",
-        "universalAuthClientSecret",
-        "identityAuthMethod",
-        "tokenAuthToken"
-      ]
-    >,
-    data?: {
-      identityId?: string;
-      name?: string;
-      authMethod?: string;
-      role?: string;
-      customRole?: {
-        name: string;
-        slug: string;
-      };
-      accessToken?: string;
-    }
-  ) => void;
-};
-
-export const IdentityTable = ({ handlePopUpOpen }: Props) => {
+export const IdentityTable = () => {
+  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  const { mutateAsync: createToken } = useCreateTokenIdentityTokenAuth();
  const { data, isLoading } = useGetIdentityMembershipOrgs(orgId);

  const { data: roles } = useGetOrgRoles(orgId);
@@ -108,7 +63,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
          <Tr>
            <Th>Name</Th>
            <Th>Role</Th>
-            <Th>Auth Method</Th>
            <Th className="w-5" />
          </Tr>
        </THead>
@@ -117,22 +71,11 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
          {!isLoading &&
            data &&
            data.length > 0 &&
-            data.map(({ identity: { id, name, authMethod }, role, customRole }) => {
+            data.map(({ identity: { id, name }, role, customRole }) => {
              return (
                <Tr className="h-10" key={`identity-${id}`}>
                  <Td>
-                    <Button
-                      variant="link"
-                      onClick={() => {
-                        handlePopUpOpen("identityModalV2", {
-                          identityId: id,
-                          name,
-                          authMethod
-                        });
-                      }}
-                    >
-                      {name}
-                    </Button>
+                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
                  </Td>
                  <Td>
                    <OrgPermissionCan
@@ -163,146 +106,16 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                      }}
                    </OrgPermissionCan>
                  </Td>
-                  <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
                  <Td>
                    <div className="flex items-center justify-end space-x-4">
-                      {authMethod === IdentityAuthMethod.TOKEN_AUTH && (
-                        <Tooltip content="Create access token">
-                          <IconButton
-                            onClick={async () => {
-                              const newTokenData = await createToken({
-                                identityId: id,
-                                organizationId: orgId
-                              });
-
-                              handlePopUpOpen("tokenAuthToken", {
-                                accessToken: newTokenData.accessToken
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faKey} />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-                        <Tooltip content="Manage client ID/secrets">
-                          <IconButton
-                            onClick={async () => {
-                              handlePopUpOpen("universalAuthClientSecret", {
-                                identityId: id,
-                                name
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faKey} />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Identity}
+                      <IconButton
+                        ariaLabel="copy icon"
+                        variant="plain"
+                        className="group relative"
+                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
                      >
-                        {(isAllowed) => (
-                          <Tooltip content="Manage auth method">
-                            <IconButton
-                              onClick={async () => {
-                                handlePopUpOpen("identityAuthMethod", {
-                                  identityId: id,
-                                  name,
-                                  authMethod
-                                });
-                              }}
-                              size="lg"
-                              colorSchema="primary"
-                              variant="plain"
-                              ariaLabel="update"
-                              isDisabled={!isAllowed}
-                            >
-                              <FontAwesomeIcon icon={faLock} />
-                            </IconButton>
-                          </Tooltip>
-                        )}
-                      </OrgPermissionCan>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <Tooltip content="More options">
-                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
-                            </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 () => {
-                                  if (!isAllowed) return;
-                                  handlePopUpOpen("identity", {
-                                    identityId: id,
-                                    name,
-                                    role,
-                                    customRole
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                                icon={<FontAwesomeIcon icon={faPencil} />}
-                              >
-                                Update 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={() => {
-                                  if (!isAllowed) return;
-                                  handlePopUpOpen("deleteIdentity", {
-                                    identityId: id,
-                                    name
-                                  });
-                                }}
-                                icon={<FontAwesomeIcon icon={faXmark} />}
-                              >
-                                Delete identity
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <DropdownMenuItem
-                            onClick={() => {
-                              navigator.clipboard.writeText(id);
-                              createNotification({
-                                text: "Copied identity internal ID to clipboard",
-                                type: "success"
-                              });
-                            }}
-                            icon={<FontAwesomeIcon icon={faCopy} />}
-                          >
-                            Copy Identity ID
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                        <FontAwesomeIcon icon={faEllipsis} />
+                      </IconButton>
                    </div>
                  </Td>
                </Tr>
@@ -9,9 +9,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityTokenAuth,
+  useDeleteIdentityTokenAuth,
  useGetIdentityTokenAuth,
-  useUpdateIdentityTokenAuth
-} from "@app/hooks/api";
+  useUpdateIdentityTokenAuth} from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -56,6 +56,7 @@ export const IdentityTokenAuthForm = ({

  const { mutateAsync: addMutateAsync } = useAddIdentityTokenAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityTokenAuth();

  const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "");

@@ -239,23 +240,43 @@ export const IdentityTokenAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -10,7 +10,7 @@ import * as yup from "yup";
 import { createNotification } from "@app/components/notifications";
 import {
  Button,
-  DeleteActionModal,
+  // DeleteActionModal,
  EmptyState,
  FormControl,
  IconButton,
@@ -30,8 +30,7 @@ import { useToggle } from "@app/hooks";
 import {
  useCreateIdentityUniversalAuthClientSecret,
  useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets,
-  useRevokeIdentityUniversalAuthClientSecret
+  useGetIdentityUniversalAuthClientSecrets
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -44,18 +43,16 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;

 type Props = {
-  popUp: UsePopUpState<["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]>;
+  popUp: UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>;
  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteUniversalAuthClientSecret"]>,
+    popUpName: keyof UsePopUpState<["revokeClientSecret"]>,
    data?: {
      clientSecretPrefix: string;
      clientSecretId: string;
    }
  ) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<
-      ["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]
-    >,
+    popUpName: keyof UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>,
    state?: boolean
  ) => void;
 };
@@ -66,7 +63,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
  handlePopUpToggle
 }: Props) => {
  const { t } = useTranslation();
-  
+
  const [token, setToken] = useState("");
  const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
  const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
@@ -81,8 +78,6 @@ export const IdentityUniversalAuthClientSecretModal = ({

  const { mutateAsync: createClientSecretMutateAsync } =
    useCreateIdentityUniversalAuthClientSecret();
-  const { mutateAsync: revokeClientSecretMutateAsync } =
-    useRevokeIdentityUniversalAuthClientSecret();

  const {
    control,
@@ -142,41 +137,6 @@ export const IdentityUniversalAuthClientSecretModal = ({
    }
  };

-  const onDeleteClientSecretSubmit = async ({
-    clientSecretId,
-    clientSecretPrefix
-  }: {
-    clientSecretId: string;
-    clientSecretPrefix: string;
-  }) => {
-    try {
-      if (!popUpData?.identityId) return;
-
-      await revokeClientSecretMutateAsync({
-        identityId: popUpData.identityId,
-        clientSecretId
-      });
-
-      if (token.startsWith(clientSecretPrefix)) {
-        reset();
-        setToken("");
-      }
-
-      handlePopUpToggle("deleteUniversalAuthClientSecret", false);
-
-      createNotification({
-        text: "Successfully deleted client secret",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete client secret",
-        type: "error"
-      });
-    }
-  };
-
  const hasToken = Boolean(token);

  return (
@@ -346,7 +306,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
                        <Td>
                          <IconButton
                            onClick={() => {
-                              handlePopUpOpen("deleteUniversalAuthClientSecret", {
+                              handlePopUpOpen("revokeClientSecret", {
                                clientSecretPrefix,
                                clientSecretId: id
                              });
@@ -376,26 +336,6 @@ export const IdentityUniversalAuthClientSecretModal = ({
            </TBody>
          </Table>
        </TableContainer>
-        <DeleteActionModal
-          isOpen={popUp.deleteUniversalAuthClientSecret.isOpen}
-          title={`Are you sure want to delete the client secret ${
-            (popUp?.deleteUniversalAuthClientSecret?.data as { clientSecretPrefix: string })
-              ?.clientSecretPrefix || ""
-          }************?`}
-          onChange={(isOpen) => handlePopUpToggle("deleteUniversalAuthClientSecret", isOpen)}
-          deleteKey="confirm"
-          onDeleteApproved={() => {
-            const deleteClientSecretData = popUp?.deleteUniversalAuthClientSecret?.data as {
-              clientSecretId: string;
-              clientSecretPrefix: string;
-            };
-
-            return onDeleteClientSecretSubmit({
-              clientSecretId: deleteClientSecretData.clientSecretId,
-              clientSecretPrefix: deleteClientSecretData.clientSecretPrefix
-            });
-          }}
-        />
      </ModalContent>
    </Modal>
  );
@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
  useAddIdentityUniversalAuth,
+  useDeleteIdentityUniversalAuth,
  useGetIdentityUniversalAuth,
-  useUpdateIdentityUniversalAuth
-} from "@app/hooks/api";
+  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";
@@ -68,6 +68,7 @@ export const IdentityUniversalAuthForm = ({
  const { subscription } = useSubscription();
  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
+  const { mutateAsync: deleteMutateAsync } = useDeleteIdentityUniversalAuth();
  const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "");

  const {
@@ -368,23 +369,43 @@ export const IdentityUniversalAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={async () => {
+              await deleteMutateAsync({
+                identityId: identityAuthMethodData.identityId,
+                organizationId: orgId
+              });
+
+              handlePopUpToggle("identityAuthMethod", false);
+            }}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
				`@@ -0,0 +1 @@`
				`export { IdentityAuthenticationSection } from "./IdentityAuthenticationSection";`
				`@@ -0,0 +1 @@`
				`export { IdentityPage } from "./IdentityPage";`