Finish new identity page

backend/src/db/migrations/20240704161322_identity-access-token-name.ts

@@ -0,0 +1,24 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  if (await knex.schema.hasTable(TableName.IdentityAccessToken)) {
+    const hasNameColumn = await knex.schema.hasColumn(TableName.IdentityAccessToken, "name");
+    if (!hasNameColumn) {
+      await knex.schema.alterTable(TableName.IdentityAccessToken, (t) => {
+        t.string("name").nullable();
+      });
+    }
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  if (await knex.schema.hasTable(TableName.IdentityAccessToken)) {
+    if (await knex.schema.hasColumn(TableName.IdentityAccessToken, "name")) {
+      await knex.schema.alterTable(TableName.IdentityAccessToken, (t) => {
+        t.dropColumn("name");
+      });
+    }
+  }
+}

backend/src/db/schemas/identity-access-tokens.ts

@@ -19,7 +19,8 @@ export const IdentityAccessTokensSchema = z.object({
   identityUAClientSecretId: z.string().nullable().optional(),
   identityId: z.string().uuid(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  name: z.string().nullable().optional()
 });
 
 export type TIdentityAccessTokens = z.infer<typeof IdentityAccessTokensSchema>;

backend/src/ee/services/audit-log/audit-log-types.ts

@@ -67,6 +67,8 @@ export enum EventType {
   GET_IDENTITY_UNIVERSAL_AUTH = "get-identity-universal-auth",
   REVOKE_IDENTITY_UNIVERSAL_AUTH = "revoke-identity-universal-auth",
   CREATE_TOKEN_IDENTITY_TOKEN_AUTH = "create-token-identity-token-auth",
+  UPDATE_TOKEN_IDENTITY_TOKEN_AUTH = "update-token-identity-token-auth",
+  GET_TOKENS_IDENTITY_TOKEN_AUTH = "get-tokens-identity-token-auth",
   ADD_IDENTITY_TOKEN_AUTH = "add-identity-token-auth",
   UPDATE_IDENTITY_TOKEN_AUTH = "update-identity-token-auth",
   GET_IDENTITY_TOKEN_AUTH = "get-identity-token-auth",
@@ -460,6 +462,22 @@ interface CreateTokenIdentityTokenAuthEvent {
   };
 }
 
+interface UpdateTokenIdentityTokenAuthEvent {
+  type: EventType.UPDATE_TOKEN_IDENTITY_TOKEN_AUTH;
+  metadata: {
+    identityId: string;
+    tokenId: string;
+    name?: string;
+  };
+}
+
+interface GetTokensIdentityTokenAuthEvent {
+  type: EventType.GET_TOKENS_IDENTITY_TOKEN_AUTH;
+  metadata: {
+    identityId: string;
+  };
+}
+
 interface AddIdentityTokenAuthEvent {
   type: EventType.ADD_IDENTITY_TOKEN_AUTH;
   metadata: {
@@ -1104,6 +1122,8 @@ export type Event =
   | DeleteIdentityUniversalAuthEvent
   | GetIdentityUniversalAuthEvent
   | CreateTokenIdentityTokenAuthEvent
+  | UpdateTokenIdentityTokenAuthEvent
+  | GetTokensIdentityTokenAuthEvent
   | AddIdentityTokenAuthEvent
   | UpdateIdentityTokenAuthEvent
   | GetIdentityTokenAuthEvent

backend/src/server/routes/index.ts

@@ -812,11 +812,13 @@ export const registerRoutes = async (
     permissionService,
     identityDAL,
     identityOrgMembershipDAL,
+    identityProjectDAL,
     licenseService
   });
   const identityAccessTokenService = identityAccessTokenServiceFactory({
     identityAccessTokenDAL,
-    identityOrgMembershipDAL
+    identityOrgMembershipDAL,
+    permissionService
   });
   const identityProjectService = identityProjectServiceFactory({
     permissionService,

backend/src/server/routes/v1/identity-access-token-router.ts

@@ -2,6 +2,8 @@ import { z } from "zod";
 
 import { UNIVERSAL_AUTH } from "@app/lib/api-docs";
 import { writeLimit } from "@app/server/config/rateLimiter";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { AuthMode } from "@app/services/auth/auth-type";
 
 export const registerIdentityAccessTokenRouter = async (server: FastifyZodProvider) => {
   server.route({
@@ -61,4 +63,37 @@ export const registerIdentityAccessTokenRouter = async (server: FastifyZodProvid
       };
     }
   });
+
+  server.route({
+    url: "/token/revoke-by-id",
+    method: "POST",
+    config: {
+      rateLimit: writeLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "Revoke access token by the id of the token",
+      body: z.object({
+        tokenId: z.string().trim()
+      }),
+      response: {
+        200: z.object({
+          message: z.string()
+        })
+      }
+    },
+    handler: async (req) => {
+      await server.services.identityAccessToken.revokeAccessTokenById({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        ...req.body
+      });
+
+      return {
+        message: "Successfully revoked access token"
+      };
+    }
+  });
 };

backend/src/server/routes/v1/identity-router.ts

@@ -1,6 +1,12 @@
 import { z } from "zod";
 
-import { IdentitiesSchema, IdentityOrgMembershipsSchema, OrgMembershipRole, OrgRolesSchema } from "@app/db/schemas";
+import {
+  IdentitiesSchema,
+  IdentityOrgMembershipsSchema,
+  OrgMembershipRole,
+  OrgRolesSchema,
+  ProjectsSchema
+} from "@app/db/schemas";
 import { EventType } from "@app/ee/services/audit-log/audit-log-types";
 import { IDENTITIES } from "@app/lib/api-docs";
 import { creationLimit, readLimit, writeLimit } from "@app/server/config/rateLimiter";
@@ -260,4 +266,63 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
       return { identities };
     }
   });
+
+  server.route({
+    method: "GET",
+    url: "/:identityId/identity-memberships",
+    config: {
+      rateLimit: readLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "List project memberships that identity with id is part of",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string().describe(IDENTITIES.GET_BY_ID.identityId)
+      }),
+      response: {
+        200: z.object({
+          identityMemberships: z.array(
+            z.object({
+              id: z.string(),
+              identityId: z.string(),
+              createdAt: z.date(),
+              updatedAt: z.date(),
+              roles: z.array(
+                z.object({
+                  id: z.string(),
+                  role: z.string(),
+                  customRoleId: z.string().optional().nullable(),
+                  customRoleName: z.string().optional().nullable(),
+                  customRoleSlug: z.string().optional().nullable(),
+                  isTemporary: z.boolean(),
+                  temporaryMode: z.string().optional().nullable(),
+                  temporaryRange: z.string().nullable().optional(),
+                  temporaryAccessStartTime: z.date().nullable().optional(),
+                  temporaryAccessEndTime: z.date().nullable().optional()
+                })
+              ),
+              identity: IdentitiesSchema.pick({ name: true, id: true, authMethod: true }),
+              project: ProjectsSchema.pick({ name: true, id: true })
+            })
+          )
+        })
+      }
+    },
+    handler: async (req) => {
+      const identityMemberships = await server.services.identity.listProjectIdentitiesByIdentityId({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        identityId: req.params.identityId
+      });
+
+      return { identityMemberships };
+    }
+  });
 };

backend/src/server/routes/v1/identity-token-auth-router.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { IdentityTokenAuthsSchema } from "@app/db/schemas";
+import { IdentityAccessTokensSchema, IdentityTokenAuthsSchema } from "@app/db/schemas";
 import { EventType } from "@app/ee/services/audit-log/audit-log-types";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
@@ -255,7 +255,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
 
   server.route({
     method: "POST",
-    url: "/token-auth/identities/:identityId/token",
+    url: "/token-auth/identities/:identityId/tokens",
     config: {
       rateLimit: writeLimit
     },
@@ -270,6 +270,9 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
       params: z.object({
         identityId: z.string()
       }),
+      body: z.object({
+        name: z.string().optional()
+      }),
       response: {
         200: z.object({
           accessToken: z.string(),
@@ -286,7 +289,8 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
           actorId: req.permission.id,
           actorAuthMethod: req.permission.authMethod,
           actorOrgId: req.permission.orgId,
-          identityId: req.params.identityId
+          identityId: req.params.identityId,
+          ...req.body
         });
 
       await server.services.auditLog.createAuditLog({
@@ -309,4 +313,111 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
       };
     }
   });
+
+  server.route({
+    method: "GET",
+    url: "/token-auth/identities/:identityId/tokens",
+    config: {
+      rateLimit: readLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "Get tokens for identity with Token Auth configured",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string()
+      }),
+      querystring: z.object({
+        offset: z.coerce.number().min(0).max(100).default(0),
+        limit: z.coerce.number().min(1).max(100).default(20)
+      }),
+      response: {
+        200: z.object({
+          tokens: IdentityAccessTokensSchema.array()
+        })
+      }
+    },
+    handler: async (req) => {
+      const { tokens, identityMembershipOrg } = await server.services.identityTokenAuth.getTokensTokenAuth({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        identityId: req.params.identityId,
+        ...req.query
+      });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: identityMembershipOrg.orgId,
+        event: {
+          type: EventType.GET_TOKENS_IDENTITY_TOKEN_AUTH,
+          metadata: {
+            identityId: req.params.identityId
+          }
+        }
+      });
+
+      return { tokens };
+    }
+  });
+
+  server.route({
+    method: "PATCH",
+    url: "/token-auth/identities/:identityId/tokens/:tokenId",
+    config: {
+      rateLimit: writeLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      description: "Update token for identity with Token Auth configured",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string(),
+        tokenId: z.string()
+      }),
+      body: z.object({
+        name: z.string().optional()
+      }),
+      response: {
+        200: z.object({
+          token: IdentityAccessTokensSchema
+        })
+      }
+    },
+    handler: async (req) => {
+      const { token, identityMembershipOrg } = await server.services.identityTokenAuth.updateTokenTokenAuth({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        identityId: req.params.identityId,
+        tokenId: req.params.tokenId,
+        ...req.body
+      });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: identityMembershipOrg.orgId,
+        event: {
+          type: EventType.UPDATE_TOKEN_IDENTITY_TOKEN_AUTH,
+          metadata: {
+            identityId: req.params.identityId,
+            tokenId: token.id,
+            name: req.body.name
+          }
+        }
+      });
+
+      return { token };
+    }
+  });
 };

backend/src/services/identity-access-token/identity-access-token-service.ts

@@ -1,6 +1,9 @@
+import { ForbiddenError } from "@casl/ability";
 import jwt, { JwtPayload } from "jsonwebtoken";
 
 import { TableName, TIdentityAccessTokens } from "@app/db/schemas";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/ee/services/permission/org-permission";
+import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { getConfig } from "@app/lib/config/env";
 import { BadRequestError, UnauthorizedError } from "@app/lib/errors";
 import { checkIPAgainstBlocklist, TIp } from "@app/lib/ip";
@@ -8,18 +11,24 @@ import { checkIPAgainstBlocklist, TIp } from "@app/lib/ip";
 import { AuthTokenType } from "../auth/auth-type";
 import { TIdentityOrgDALFactory } from "../identity/identity-org-dal";
 import { TIdentityAccessTokenDALFactory } from "./identity-access-token-dal";
-import { TIdentityAccessTokenJwtPayload, TRenewAccessTokenDTO } from "./identity-access-token-types";
+import {
+  TIdentityAccessTokenJwtPayload,
+  TRenewAccessTokenDTO,
+  TRevokeAccessTokenByIdDTO
+} from "./identity-access-token-types";
 
 type TIdentityAccessTokenServiceFactoryDep = {
   identityAccessTokenDAL: TIdentityAccessTokenDALFactory;
   identityOrgMembershipDAL: TIdentityOrgDALFactory;
+  permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
 };
 
 export type TIdentityAccessTokenServiceFactory = ReturnType<typeof identityAccessTokenServiceFactory>;
 
 export const identityAccessTokenServiceFactory = ({
   identityAccessTokenDAL,
-  identityOrgMembershipDAL
+  identityOrgMembershipDAL,
+  permissionService
 }: TIdentityAccessTokenServiceFactoryDep) => {
   const validateAccessTokenExp = async (identityAccessToken: TIdentityAccessTokens) => {
     const {
@@ -131,7 +140,47 @@ export const identityAccessTokenServiceFactory = ({
     });
     if (!identityAccessToken) throw new UnauthorizedError();
 
-    const revokedToken = await identityAccessTokenDAL.deleteById(identityAccessToken.id);
+    const revokedToken = await identityAccessTokenDAL.updateById(identityAccessToken.id, {
+      isAccessTokenRevoked: true
+    });
+
+    return { revokedToken };
+  };
+
+  const revokeAccessTokenById = async ({
+    tokenId,
+    actorId,
+    actor,
+    actorAuthMethod,
+    actorOrgId
+  }: TRevokeAccessTokenByIdDTO) => {
+    const identityAccessToken = await identityAccessTokenDAL.findOne({
+      [`${TableName.IdentityAccessToken}.id` as "id"]: tokenId,
+      isAccessTokenRevoked: false
+    });
+    if (!identityAccessToken) throw new UnauthorizedError();
+
+    const identityOrgMembership = await identityOrgMembershipDAL.findOne({
+      identityId: identityAccessToken.identityId
+    });
+
+    if (!identityOrgMembership) {
+      throw new UnauthorizedError({ message: "Identity does not belong to any organization" });
+    }
+
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityOrgMembership.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Edit, OrgPermissionSubjects.Identity);
+
+    const revokedToken = await identityAccessTokenDAL.updateById(identityAccessToken.id, {
+      isAccessTokenRevoked: true
+    });
+
     return { revokedToken };
   };
 
@@ -141,6 +190,10 @@ export const identityAccessTokenServiceFactory = ({
       isAccessTokenRevoked: false
     });
     if (!identityAccessToken) throw new UnauthorizedError();
+    if (identityAccessToken.isAccessTokenRevoked)
+      throw new UnauthorizedError({
+        message: "Failed to authorize revoked access token"
+      });
 
     if (ipAddress && identityAccessToken) {
       checkIPAgainstBlocklist({
@@ -168,5 +221,5 @@ export const identityAccessTokenServiceFactory = ({
     return { ...identityAccessToken, orgId: identityOrgMembership.orgId };
   };
 
-  return { renewAccessToken, revokeAccessToken, fnValidateIdentityAccessToken };
+  return { renewAccessToken, revokeAccessToken, revokeAccessTokenById, fnValidateIdentityAccessToken };
 };

backend/src/services/identity-access-token/identity-access-token-types.ts

@@ -1,3 +1,5 @@
+import { TProjectPermission } from "@app/lib/types";
+
 export type TRenewAccessTokenDTO = {
   accessToken: string;
 };
@@ -8,3 +10,7 @@ export type TIdentityAccessTokenJwtPayload = {
   identityAccessTokenId: string;
   authTokenType: string;
 };
+
+export type TRevokeAccessTokenByIdDTO = {
+  tokenId: string;
+} & Omit<TProjectPermission, "projectId">;

backend/src/services/identity-project/identity-project-dal.ts

@@ -10,6 +10,103 @@ export type TIdentityProjectDALFactory = ReturnType<typeof identityProjectDALFac
 export const identityProjectDALFactory = (db: TDbClient) => {
   const identityProjectOrm = ormify(db, TableName.IdentityProjectMembership);
 
+  const findByIdentityId = async (identityId: string, tx?: Knex) => {
+    try {
+      const docs = await (tx || db.replicaNode())(TableName.IdentityProjectMembership)
+        .where(`${TableName.IdentityProjectMembership}.identityId`, identityId)
+        .join(TableName.Project, `${TableName.IdentityProjectMembership}.projectId`, `${TableName.Project}.id`)
+        .join(TableName.Identity, `${TableName.IdentityProjectMembership}.identityId`, `${TableName.Identity}.id`)
+        .join(
+          TableName.IdentityProjectMembershipRole,
+          `${TableName.IdentityProjectMembershipRole}.projectMembershipId`,
+          `${TableName.IdentityProjectMembership}.id`
+        )
+        .leftJoin(
+          TableName.ProjectRoles,
+          `${TableName.IdentityProjectMembershipRole}.customRoleId`,
+          `${TableName.ProjectRoles}.id`
+        )
+        .leftJoin(
+          TableName.IdentityProjectAdditionalPrivilege,
+          `${TableName.IdentityProjectMembership}.id`,
+          `${TableName.IdentityProjectAdditionalPrivilege}.projectMembershipId`
+        )
+        .select(
+          db.ref("id").withSchema(TableName.IdentityProjectMembership),
+          db.ref("createdAt").withSchema(TableName.IdentityProjectMembership),
+          db.ref("updatedAt").withSchema(TableName.IdentityProjectMembership),
+          db.ref("authMethod").as("identityAuthMethod").withSchema(TableName.Identity),
+          db.ref("id").as("identityId").withSchema(TableName.Identity),
+          db.ref("name").as("identityName").withSchema(TableName.Identity),
+          db.ref("id").withSchema(TableName.IdentityProjectMembership),
+          db.ref("role").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("id").withSchema(TableName.IdentityProjectMembershipRole).as("membershipRoleId"),
+          db.ref("customRoleId").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("name").withSchema(TableName.ProjectRoles).as("customRoleName"),
+          db.ref("slug").withSchema(TableName.ProjectRoles).as("customRoleSlug"),
+          db.ref("temporaryMode").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("isTemporary").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("temporaryRange").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("temporaryAccessStartTime").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("temporaryAccessEndTime").withSchema(TableName.IdentityProjectMembershipRole),
+          db.ref("projectId").withSchema(TableName.IdentityProjectMembership),
+          db.ref("name").as("projectName").withSchema(TableName.Project)
+        );
+
+      const members = sqlNestRelationships({
+        data: docs,
+        parentMapper: ({ identityName, identityAuthMethod, id, createdAt, updatedAt, projectId, projectName }) => ({
+          id,
+          identityId,
+          createdAt,
+          updatedAt,
+          identity: {
+            id: identityId,
+            name: identityName,
+            authMethod: identityAuthMethod
+          },
+          project: {
+            id: projectId,
+            name: projectName
+          }
+        }),
+        key: "id",
+        childrenMapper: [
+          {
+            label: "roles" as const,
+            key: "membershipRoleId",
+            mapper: ({
+              role,
+              customRoleId,
+              customRoleName,
+              customRoleSlug,
+              membershipRoleId,
+              temporaryRange,
+              temporaryMode,
+              temporaryAccessEndTime,
+              temporaryAccessStartTime,
+              isTemporary
+            }) => ({
+              id: membershipRoleId,
+              role,
+              customRoleId,
+              customRoleName,
+              customRoleSlug,
+              temporaryRange,
+              temporaryMode,
+              temporaryAccessEndTime,
+              temporaryAccessStartTime,
+              isTemporary
+            })
+          }
+        ]
+      });
+      return members;
+    } catch (error) {
+      throw new DatabaseError({ error, name: "FindByIdentityId" });
+    }
+  };
+
   const findByProjectId = async (projectId: string, filter: { identityId?: string } = {}, tx?: Knex) => {
     try {
       const docs = await (tx || db.replicaNode())(TableName.IdentityProjectMembership)
@@ -105,5 +202,9 @@ export const identityProjectDALFactory = (db: TDbClient) => {
     }
   };
 
-  return { ...identityProjectOrm, findByProjectId };
+  return {
+    ...identityProjectOrm,
+    findByIdentityId,
+    findByProjectId
+  };
 };

backend/src/services/identity-token-auth/identity-token-auth-service.ts

@@ -20,8 +20,10 @@ import {
   TAttachTokenAuthDTO,
   TCreateTokenTokenAuthDTO,
   TGetTokenAuthDTO,
+  TGetTokensTokenAuthDTO,
   TRevokeTokenAuthDTO,
-  TUpdateTokenAuthDTO
+  TUpdateTokenAuthDTO,
+  TUpdateTokenTokenAuthDTO
 } from "./identity-token-auth-types";
 
 type TIdentityTokenAuthServiceFactoryDep = {
@@ -31,7 +33,7 @@ type TIdentityTokenAuthServiceFactoryDep = {
   >;
   identityDAL: Pick<TIdentityDALFactory, "updateById">;
   identityOrgMembershipDAL: Pick<TIdentityOrgDALFactory, "findOne">;
-  identityAccessTokenDAL: Pick<TIdentityAccessTokenDALFactory, "create">;
+  identityAccessTokenDAL: Pick<TIdentityAccessTokenDALFactory, "create" | "find" | "update">;
   permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
   licenseService: Pick<TLicenseServiceFactory, "getPlan">;
 };
@@ -258,7 +260,8 @@ export const identityTokenAuthServiceFactory = ({
     actorId,
     actor,
     actorAuthMethod,
-    actorOrgId
+    actorOrgId,
+    name
   }: TCreateTokenTokenAuthDTO) => {
     const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
     if (!identityMembershipOrg) throw new BadRequestError({ message: "Failed to find identity" });
@@ -285,7 +288,7 @@ export const identityTokenAuthServiceFactory = ({
     const hasPriviledge = isAtLeastAsPrivileged(permission, rolePermission);
     if (!hasPriviledge)
       throw new ForbiddenRequestError({
-        message: "Failed to revoke Token Auth of identity with more privileged role"
+        message: "Failed to create token for identity with more privileged role"
       });
 
     const identityTokenAuth = await identityTokenAuthDAL.findOne({ identityId });
@@ -298,7 +301,8 @@ export const identityTokenAuthServiceFactory = ({
           accessTokenTTL: identityTokenAuth.accessTokenTTL,
           accessTokenMaxTTL: identityTokenAuth.accessTokenMaxTTL,
           accessTokenNumUses: 0,
-          accessTokenNumUsesLimit: identityTokenAuth.accessTokenNumUsesLimit
+          accessTokenNumUsesLimit: identityTokenAuth.accessTokenNumUsesLimit,
+          name
         },
         tx
       );
@@ -324,11 +328,110 @@ export const identityTokenAuthServiceFactory = ({
     return { accessToken, identityTokenAuth, identityAccessToken, identityMembershipOrg };
   };
 
+  const getTokensTokenAuth = async ({
+    identityId,
+    offset = 0,
+    limit = 20,
+    actorId,
+    actor,
+    actorAuthMethod,
+    actorOrgId
+  }: TGetTokensTokenAuthDTO) => {
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityMembershipOrg) throw new BadRequestError({ message: "Failed to find identity" });
+    if (identityMembershipOrg.identity?.authMethod !== IdentityAuthMethod.TOKEN_AUTH)
+      throw new BadRequestError({
+        message: "The identity does not have Token Auth"
+      });
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Edit, OrgPermissionSubjects.Identity);
+
+    const { permission: rolePermission } = await permissionService.getOrgPermission(
+      ActorType.IDENTITY,
+      identityMembershipOrg.identityId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    const hasPriviledge = isAtLeastAsPrivileged(permission, rolePermission);
+    if (!hasPriviledge)
+      throw new ForbiddenRequestError({
+        message: "Failed to get tokens for identity with more privileged role"
+      });
+
+    const tokens = await identityAccessTokenDAL.find(
+      {
+        identityId
+      },
+      { offset, limit, sort: [["updatedAt", "desc"]] }
+    );
+
+    return { tokens, identityMembershipOrg };
+  };
+
+  const updateTokenTokenAuth = async ({
+    identityId,
+    tokenId,
+    name,
+    actorId,
+    actor,
+    actorAuthMethod,
+    actorOrgId
+  }: TUpdateTokenTokenAuthDTO) => {
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityMembershipOrg) throw new BadRequestError({ message: "Failed to find identity" });
+    if (identityMembershipOrg.identity?.authMethod !== IdentityAuthMethod.TOKEN_AUTH)
+      throw new BadRequestError({
+        message: "The identity does not have Token Auth"
+      });
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Edit, OrgPermissionSubjects.Identity);
+
+    const { permission: rolePermission } = await permissionService.getOrgPermission(
+      ActorType.IDENTITY,
+      identityMembershipOrg.identityId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    const hasPriviledge = isAtLeastAsPrivileged(permission, rolePermission);
+    if (!hasPriviledge)
+      throw new ForbiddenRequestError({
+        message: "Failed to update token for identity with more privileged role"
+      });
+
+    const [token] = await identityAccessTokenDAL.update(
+      {
+        identityId,
+        id: tokenId
+      },
+      {
+        name
+      }
+    );
+
+    return { token, identityMembershipOrg };
+  };
+
   return {
     attachTokenAuth,
     updateTokenAuth,
     getTokenAuth,
     revokeIdentityTokenAuth,
-    createTokenTokenAuth
+    createTokenTokenAuth,
+    getTokensTokenAuth,
+    updateTokenTokenAuth
   };
 };

backend/src/services/identity-token-auth/identity-token-auth-types.ts

@@ -26,4 +26,17 @@ export type TRevokeTokenAuthDTO = {
 
 export type TCreateTokenTokenAuthDTO = {
   identityId: string;
+  name?: string;
+} & Omit<TProjectPermission, "projectId">;
+
+export type TGetTokensTokenAuthDTO = {
+  identityId: string;
+  offset: number;
+  limit: number;
+} & Omit<TProjectPermission, "projectId">;
+
+export type TUpdateTokenTokenAuthDTO = {
+  identityId: string;
+  tokenId: string;
+  name?: string;
 } & Omit<TProjectPermission, "projectId">;

backend/src/services/identity/identity-service.ts

@@ -7,15 +7,23 @@ import { TPermissionServiceFactory } from "@app/ee/services/permission/permissio
 import { isAtLeastAsPrivileged } from "@app/lib/casl";
 import { BadRequestError, ForbiddenRequestError } from "@app/lib/errors";
 import { TOrgPermission } from "@app/lib/types";
+import { TIdentityProjectDALFactory } from "@app/services/identity-project/identity-project-dal";
 
 import { ActorType } from "../auth/auth-type";
 import { TIdentityDALFactory } from "./identity-dal";
 import { TIdentityOrgDALFactory } from "./identity-org-dal";
-import { TCreateIdentityDTO, TDeleteIdentityDTO, TGetIdentityByIdDTO, TUpdateIdentityDTO } from "./identity-types";
+import {
+  TCreateIdentityDTO,
+  TDeleteIdentityDTO,
+  TGetIdentityByIdDTO,
+  TListProjectIdentitiesByIdentityIdDTO,
+  TUpdateIdentityDTO
+} from "./identity-types";
 
 type TIdentityServiceFactoryDep = {
   identityDAL: TIdentityDALFactory;
   identityOrgMembershipDAL: TIdentityOrgDALFactory;
+  identityProjectDAL: Pick<TIdentityProjectDALFactory, "findByIdentityId">;
   permissionService: Pick<TPermissionServiceFactory, "getOrgPermission" | "getOrgPermissionByRole">;
   licenseService: Pick<TLicenseServiceFactory, "getPlan" | "updateSubscriptionOrgMemberCount">;
 };
@@ -25,6 +33,7 @@ export type TIdentityServiceFactory = ReturnType<typeof identityServiceFactory>;
 export const identityServiceFactory = ({
   identityDAL,
   identityOrgMembershipDAL,
+  identityProjectDAL,
   permissionService,
   licenseService
 }: TIdentityServiceFactoryDep) => {
@@ -196,11 +205,35 @@ export const identityServiceFactory = ({
     return identityMemberships;
   };
 
+  const listProjectIdentitiesByIdentityId = async ({
+    identityId,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId
+  }: TListProjectIdentitiesByIdentityIdDTO) => {
+    const identityOrgMembership = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityOrgMembership) throw new BadRequestError({ message: `Failed to find identity with id ${identityId}` });
+
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityOrgMembership.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Identity);
+
+    const identityMemberships = await identityProjectDAL.findByIdentityId(identityId);
+    return identityMemberships;
+  };
+
   return {
     createIdentity,
     updateIdentity,
     deleteIdentity,
     listOrgIdentities,
-    getIdentityById
+    getIdentityById,
+    listProjectIdentitiesByIdentityId
   };
 };

backend/src/services/identity/identity-types.ts

@@ -25,3 +25,7 @@ export interface TIdentityTrustedIp {
   type: IPType;
   prefix: number;
 }
+
+export type TListProjectIdentitiesByIdentityIdDTO = {
+  identityId: string;
+} & Omit<TOrgPermission, "orgId">;

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

@@ -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";

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

@@ -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 }) => {
+    onSuccess: (_, { identityId }) => {
-      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      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));
     }
   });
 };

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

@@ -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;
     }
   });
 };

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

@@ -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;
+};

frontend/src/pages/org/[id]/identities/[identityId]/index.tsx

@@ -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;

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

@@ -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 }
+);

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

@@ -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 />
+  );
+};

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

@@ -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>
+  );
+};

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

@@ -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>
+  );
+};

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

@@ -0,0 +1 @@
+export { IdentityAuthenticationSection } from "./IdentityAuthenticationSection";

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

@@ -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>
+  );
+};

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

@@ -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 />
+  );
+};

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

@@ -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>
+  );
+};

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

@@ -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>
+  );
+};

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

@@ -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>
+  );
+};

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

@@ -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";

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

@@ -0,0 +1 @@
+export { IdentityPage } from "./IdentityPage";

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

@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAwsAuth,
+  useDeleteIdentityAwsAuth,
   useGetIdentityAwsAuth,
-  useUpdateIdentityAwsAuth
+  useUpdateIdentityAwsAuth} from "@app/hooks/api";
-} 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">
+      <div className="flex justify-between">
-        <Button
+        <div className="flex items-center">
-          className="mr-4"
+          <Button
-          size="sm"
+            className="mr-4"
-          type="submit"
+            size="sm"
-          isLoading={isSubmitting}
+            type="submit"
-          isDisabled={isSubmitting}
+            isLoading={isSubmitting}
-        >
+            isDisabled={isSubmitting}
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          >
-        </Button>
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        <Button
+          </Button>
-          colorSchema="secondary"
+          <Button
-          variant="plain"
+            colorSchema="secondary"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="plain"
-        >
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          >
-        </Button>
+            {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>
   );

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

@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAzureAuth,
+  useDeleteIdentityAzureAuth,
   useGetIdentityAzureAuth,
-  useUpdateIdentityAzureAuth
+  useUpdateIdentityAzureAuth} from "@app/hooks/api";
-} 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">
+      <div className="flex justify-between">
-        <Button
+        <div className="flex items-center">
-          className="mr-4"
+          <Button
-          size="sm"
+            className="mr-4"
-          type="submit"
+            size="sm"
-          isLoading={isSubmitting}
+            type="submit"
-          isDisabled={isSubmitting}
+            isLoading={isSubmitting}
-        >
+            isDisabled={isSubmitting}
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          >
-        </Button>
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        <Button
+          </Button>
-          colorSchema="secondary"
+          <Button
-          variant="plain"
+            colorSchema="secondary"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="plain"
-        >
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          >
-        </Button>
+            {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>
   );

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

@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityGcpAuth,
+  useDeleteIdentityGcpAuth,
   useGetIdentityGcpAuth,
-  useUpdateIdentityGcpAuth
+  useUpdateIdentityGcpAuth} from "@app/hooks/api";
-} 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">
+      <div className="flex justify-between">
-        <Button
+        <div className="flex items-center">
-          className="mr-4"
+          <Button
-          size="sm"
+            className="mr-4"
-          type="submit"
+            size="sm"
-          isLoading={isSubmitting}
+            type="submit"
-          isDisabled={isSubmitting}
+            isLoading={isSubmitting}
-        >
+            isDisabled={isSubmitting}
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          >
-        </Button>
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        <Button
+          </Button>
-          colorSchema="secondary"
+          <Button
-          variant="plain"
+            colorSchema="secondary"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="plain"
-        >
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          >
-        </Button>
+            {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>
   );

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

@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input, TextArea } from "@app/component
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityKubernetesAuth,
+  useDeleteIdentityKubernetesAuth,
   useGetIdentityKubernetesAuth,
-  useUpdateIdentityKubernetesAuth
+  useUpdateIdentityKubernetesAuth} from "@app/hooks/api";
-} 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">
+      <div className="flex justify-between">
-        <Button
+        <div className="flex items-center">
-          className="mr-4"
+          <Button
-          size="sm"
+            className="mr-4"
-          type="submit"
+            size="sm"
-          isLoading={isSubmitting}
+            type="submit"
-          isDisabled={isSubmitting}
+            isLoading={isSubmitting}
-        >
+            isDisabled={isSubmitting}
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          >
-        </Button>
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        <Button
+          </Button>
-          colorSchema="secondary"
+          <Button
-          variant="plain"
+            colorSchema="secondary"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="plain"
-        >
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          >
-        </Button>
+            {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>
   );

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

@@ -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
+  // IdentityAuthMethod,
-  // useAddIdentityUniversalAuth
+  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: (
+  // handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+  //   popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-    data: {
+  //   data: {
-      identityId: string;
+  //     identityId: string;
-      name: string;
+  //     name: string;
-      authMethod?: IdentityAuthMethod;
+  //     authMethod?: IdentityAuthMethod;
-    }
+  //   }
-  ) => void;
+  // ) => 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 {
+        const { id: createdId } = await createMutateAsync({
-          id: createdId,
-          name: createdName,
-          authMethod
-        } = await createMutateAsync({
           name,
           role: role || undefined,
           organizationId: orgId
         });
 
-        // await addMutateAsync({
+        await addMutateAsync({
-        //   organizationId: orgId,
+          organizationId: orgId,
-        //   identityId: createdId,
+          identityId: createdId,
-        //   clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTTL: 2592000,
+          accessTokenTTL: 2592000,
-        //   accessTokenMaxTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
-        //   accessTokenNumUsesLimit: 0
+          accessTokenNumUsesLimit: 0
-        // });
+        });
 
         handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
+        router.push(`/org/${orgId}/identities/${createdId}`);
-          identityId: createdId,
+
-          name: createdName,
+        // handlePopUpOpen("identityAuthMethod", {
-          authMethod
+        //   identityId: createdId,
-        });
+        //   name: createdName,
+        //   authMethod
+        // });
       }
 
       createNotification({

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

@@ -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>
-  );
-};

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

@@ -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} />
+        <IdentityTable />
-        <IdentityModal
+        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityModalV2
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          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}

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

@@ -1,23 +1,11 @@
-import {
+import Link from "next/link";
-  faCopy,
+import { useRouter } from "next/router";
-  faEllipsis,
+import { faEllipsis, faServer } from "@fortawesome/free-solid-svg-icons";
-  faKey,
-  faLock,
-  faPencil,
-  faServer,
-  faXmark
-} 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
-  Tr} from "@app/components/v2";
+} from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import {
+import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
-  useCreateTokenIdentityTokenAuth,
-  useGetIdentityMembershipOrgs,
-  useGetOrgRoles,
-  useUpdateIdentity
-} from "@app/hooks/api";
-import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";
 
-type Props = {
+export const IdentityTable = () => {
-  handlePopUpOpen: (
+  const router = useRouter();
-    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) => {
   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
+                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
-                      variant="link"
-                      onClick={() => {
-                        handlePopUpOpen("identityModalV2", {
-                          identityId: id,
-                          name,
-                          authMethod
-                        });
-                      }}
-                    >
-                      {name}
-                    </Button>
                   </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 && (
+                      <IconButton
-                        <Tooltip content="Create access token">
+                        ariaLabel="copy icon"
-                          <IconButton
+                        variant="plain"
-                            onClick={async () => {
+                        className="group relative"
-                              const newTokenData = await createToken({
+                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
-                                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}
                       >
-                        {(isAllowed) => (
+                        <FontAwesomeIcon icon={faEllipsis} />
-                          <Tooltip content="Manage auth method">
+                      </IconButton>
-                            <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>
                     </div>
                   </Td>
                 </Tr>

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

@@ -9,9 +9,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityTokenAuth,
+  useDeleteIdentityTokenAuth,
   useGetIdentityTokenAuth,
-  useUpdateIdentityTokenAuth
+  useUpdateIdentityTokenAuth} from "@app/hooks/api";
-} 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">
+      <div className="flex justify-between">
-        <Button
+        <div className="flex items-center">
-          className="mr-4"
+          <Button
-          size="sm"
+            className="mr-4"
-          type="submit"
+            size="sm"
-          isLoading={isSubmitting}
+            type="submit"
-          isDisabled={isSubmitting}
+            isLoading={isSubmitting}
-        >
+            isDisabled={isSubmitting}
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          >
-        </Button>
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        <Button
+          </Button>
-          colorSchema="secondary"
+          <Button
-          variant="plain"
+            colorSchema="secondary"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="plain"
-        >
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          >
-        </Button>
+            {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>
   );

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

@@ -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,
+  useGetIdentityUniversalAuthClientSecrets
-  useRevokeIdentityUniversalAuthClientSecret
 } 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<
+    popUpName: keyof UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>,
-      ["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]
-    >,
     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>
   );

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

@@ -10,9 +10,9 @@ import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityUniversalAuth,
+  useDeleteIdentityUniversalAuth,
   useGetIdentityUniversalAuth,
-  useUpdateIdentityUniversalAuth
+  useUpdateIdentityUniversalAuth} from "@app/hooks/api";
-} 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">
+      <div className="flex justify-between">
-        <Button
+        <div className="flex items-center">
-          className="mr-4"
+          <Button
-          size="sm"
+            className="mr-4"
-          type="submit"
+            size="sm"
-          isLoading={isSubmitting}
+            type="submit"
-          isDisabled={isSubmitting}
+            isLoading={isSubmitting}
-        >
+            isDisabled={isSubmitting}
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          >
-        </Button>
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        <Button
+          </Button>
-          colorSchema="secondary"
+          <Button
-          variant="plain"
+            colorSchema="secondary"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="plain"
-        >
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+          >
-        </Button>
+            {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>
   );