misc: make index creation concurrently

improvement(org-access-control): Standardize and improve org access control UI

backend/src/@types/fastify.d.ts

@@ -74,6 +74,7 @@ import { TAllowedFields } from "@app/services/identity-ldap-auth/identity-ldap-a
 import { TIdentityOciAuthServiceFactory } from "@app/services/identity-oci-auth/identity-oci-auth-service";
 import { TIdentityOidcAuthServiceFactory } from "@app/services/identity-oidc-auth/identity-oidc-auth-service";
 import { TIdentityProjectServiceFactory } from "@app/services/identity-project/identity-project-service";
+import { TIdentityTlsCertAuthServiceFactory } from "@app/services/identity-tls-cert-auth/identity-tls-cert-auth-types";
 import { TIdentityTokenAuthServiceFactory } from "@app/services/identity-token-auth/identity-token-auth-service";
 import { TIdentityUaServiceFactory } from "@app/services/identity-ua/identity-ua-service";
 import { TIntegrationServiceFactory } from "@app/services/integration/integration-service";
@@ -218,6 +219,7 @@ declare module "fastify" {
       identityKubernetesAuth: TIdentityKubernetesAuthServiceFactory;
       identityGcpAuth: TIdentityGcpAuthServiceFactory;
       identityAliCloudAuth: TIdentityAliCloudAuthServiceFactory;
+      identityTlsCertAuth: TIdentityTlsCertAuthServiceFactory;
       identityAwsAuth: TIdentityAwsAuthServiceFactory;
       identityAzureAuth: TIdentityAzureAuthServiceFactory;
       identityOciAuth: TIdentityOciAuthServiceFactory;

backend/src/@types/knex.d.ts

@@ -164,6 +164,9 @@ import {
   TIdentityProjectMemberships,
   TIdentityProjectMembershipsInsert,
   TIdentityProjectMembershipsUpdate,
+  TIdentityTlsCertAuths,
+  TIdentityTlsCertAuthsInsert,
+  TIdentityTlsCertAuthsUpdate,
   TIdentityTokenAuths,
   TIdentityTokenAuthsInsert,
   TIdentityTokenAuthsUpdate,
@@ -794,6 +797,11 @@ declare module "knex/types/tables" {
       TIdentityAlicloudAuthsInsert,
       TIdentityAlicloudAuthsUpdate
     >;
+    [TableName.IdentityTlsCertAuth]: KnexOriginal.CompositeTableType<
+      TIdentityTlsCertAuths,
+      TIdentityTlsCertAuthsInsert,
+      TIdentityTlsCertAuthsUpdate
+    >;
     [TableName.IdentityAwsAuth]: KnexOriginal.CompositeTableType<
       TIdentityAwsAuths,
       TIdentityAwsAuthsInsert,

backend/src/db/migrations/20250624061429_identity-tls-auth.ts

@@ -0,0 +1,28 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+import { createOnUpdateTrigger, dropOnUpdateTrigger } from "../utils";
+
+export async function up(knex: Knex): Promise<void> {
+  if (!(await knex.schema.hasTable(TableName.IdentityTlsCertAuth))) {
+    await knex.schema.createTable(TableName.IdentityTlsCertAuth, (t) => {
+      t.uuid("id", { primaryKey: true }).defaultTo(knex.fn.uuid());
+      t.bigInteger("accessTokenTTL").defaultTo(7200).notNullable();
+      t.bigInteger("accessTokenMaxTTL").defaultTo(7200).notNullable();
+      t.bigInteger("accessTokenNumUsesLimit").defaultTo(0).notNullable();
+      t.jsonb("accessTokenTrustedIps").notNullable();
+      t.timestamps(true, true, true);
+      t.uuid("identityId").notNullable().unique();
+      t.foreign("identityId").references("id").inTable(TableName.Identity).onDelete("CASCADE");
+      t.string("allowedCommonNames").nullable();
+      t.binary("encryptedCaCertificate").notNullable();
+    });
+  }
+
+  await createOnUpdateTrigger(knex, TableName.IdentityTlsCertAuth);
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.dropTableIfExists(TableName.IdentityTlsCertAuth);
+  await dropOnUpdateTrigger(knex, TableName.IdentityTlsCertAuth);
+}

backend/src/db/migrations/20250630170849_add-index-for-access-token.ts

@@ -0,0 +1,29 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.raw(`
+        CREATE INDEX CONCURRENTLY IF NOT EXISTS ${TableName.IdentityAccessToken}_identityid_index 
+        ON ${TableName.IdentityAccessToken} ("identityId")
+      `);
+
+  await knex.raw(`
+        CREATE INDEX CONCURRENTLY IF NOT EXISTS ${TableName.IdentityAccessToken}_identityuaclientsecretid_index 
+        ON ${TableName.IdentityAccessToken} ("identityUAClientSecretId")
+      `);
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.raw(`
+        DROP INDEX IF EXISTS ${TableName.IdentityAccessToken}_identityid_index
+      `);
+
+  await knex.raw(`
+        DROP INDEX IF EXISTS ${TableName.IdentityAccessToken}_identityuaclientsecretid_index
+      `);
+}
+
+const config = { transaction: false };
+
+export { config };

backend/src/db/schemas/identity-tls-cert-auths.ts

@@ -0,0 +1,27 @@
+// Code generated by automation script, DO NOT EDIT.
+// Automated by pulling database and generating zod schema
+// To update. Just run npm run generate:schema
+// Written by akhilmhdh.
+
+import { z } from "zod";
+
+import { zodBuffer } from "@app/lib/zod";
+
+import { TImmutableDBKeys } from "./models";
+
+export const IdentityTlsCertAuthsSchema = z.object({
+  id: z.string().uuid(),
+  accessTokenTTL: z.coerce.number().default(7200),
+  accessTokenMaxTTL: z.coerce.number().default(7200),
+  accessTokenNumUsesLimit: z.coerce.number().default(0),
+  accessTokenTrustedIps: z.unknown(),
+  createdAt: z.date(),
+  updatedAt: z.date(),
+  identityId: z.string().uuid(),
+  allowedCommonNames: z.string().nullable().optional(),
+  encryptedCaCertificate: zodBuffer
+});
+
+export type TIdentityTlsCertAuths = z.infer<typeof IdentityTlsCertAuthsSchema>;
+export type TIdentityTlsCertAuthsInsert = Omit<z.input<typeof IdentityTlsCertAuthsSchema>, TImmutableDBKeys>;
+export type TIdentityTlsCertAuthsUpdate = Partial<Omit<z.input<typeof IdentityTlsCertAuthsSchema>, TImmutableDBKeys>>;

backend/src/db/schemas/index.ts

@@ -52,6 +52,7 @@ export * from "./identity-org-memberships";
 export * from "./identity-project-additional-privilege";
 export * from "./identity-project-membership-role";
 export * from "./identity-project-memberships";
+export * from "./identity-tls-cert-auths";
 export * from "./identity-token-auths";
 export * from "./identity-ua-client-secrets";
 export * from "./identity-universal-auths";

backend/src/db/schemas/models.ts

@@ -86,6 +86,7 @@ export enum TableName {
   IdentityOidcAuth = "identity_oidc_auths",
   IdentityJwtAuth = "identity_jwt_auths",
   IdentityLdapAuth = "identity_ldap_auths",
+  IdentityTlsCertAuth = "identity_tls_cert_auths",
   IdentityOrgMembership = "identity_org_memberships",
   IdentityProjectMembership = "identity_project_memberships",
   IdentityProjectMembershipRole = "identity_project_membership_role",
@@ -251,6 +252,7 @@ export enum IdentityAuthMethod {
   ALICLOUD_AUTH = "alicloud-auth",
   AWS_AUTH = "aws-auth",
   AZURE_AUTH = "azure-auth",
+  TLS_CERT_AUTH = "tls-cert-auth",
   OCI_AUTH = "oci-auth",
   OIDC_AUTH = "oidc-auth",
   JWT_AUTH = "jwt-auth",

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

@@ -131,7 +131,6 @@ export const auditLogQueueServiceFactory = async ({
                 });
 
               try {
-                logger.info(`Streaming audit log [url=${url}] for org [orgId=${orgId}]`);
                 const response = await request.post(
                   url,
                   { ...providerSpecificPayload(url), ...auditLog },
@@ -143,9 +142,6 @@ export const auditLogQueueServiceFactory = async ({
                     signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
                   }
                 );
-                logger.info(
-                  `Successfully streamed audit log [url=${url}] for org [orgId=${orgId}] [response=${JSON.stringify(response.data)}]`
-                );
                 return response;
               } catch (error) {
                 logger.error(
@@ -237,7 +233,6 @@ export const auditLogQueueServiceFactory = async ({
             });
 
           try {
-            logger.info(`Streaming audit log [url=${url}] for org [orgId=${orgId}]`);
             const response = await request.post(
               url,
               { ...providerSpecificPayload(url), ...auditLog },
@@ -249,9 +244,6 @@ export const auditLogQueueServiceFactory = async ({
                 signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
               }
             );
-            logger.info(
-              `Successfully streamed audit log [url=${url}] for org [orgId=${orgId}] [response=${JSON.stringify(response.data)}]`
-            );
             return response;
           } catch (error) {
             logger.error(

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

@@ -202,6 +202,12 @@ export enum EventType {
   REVOKE_IDENTITY_ALICLOUD_AUTH = "revoke-identity-alicloud-auth",
   GET_IDENTITY_ALICLOUD_AUTH = "get-identity-alicloud-auth",
 
+  LOGIN_IDENTITY_TLS_CERT_AUTH = "login-identity-tls-cert-auth",
+  ADD_IDENTITY_TLS_CERT_AUTH = "add-identity-tls-cert-auth",
+  UPDATE_IDENTITY_TLS_CERT_AUTH = "update-identity-tls-cert-auth",
+  REVOKE_IDENTITY_TLS_CERT_AUTH = "revoke-identity-tls-cert-auth",
+  GET_IDENTITY_TLS_CERT_AUTH = "get-identity-tls-cert-auth",
+
   LOGIN_IDENTITY_AWS_AUTH = "login-identity-aws-auth",
   ADD_IDENTITY_AWS_AUTH = "add-identity-aws-auth",
   UPDATE_IDENTITY_AWS_AUTH = "update-identity-aws-auth",
@@ -1141,6 +1147,53 @@ interface GetIdentityAliCloudAuthEvent {
   };
 }
 
+interface LoginIdentityTlsCertAuthEvent {
+  type: EventType.LOGIN_IDENTITY_TLS_CERT_AUTH;
+  metadata: {
+    identityId: string;
+    identityTlsCertAuthId: string;
+    identityAccessTokenId: string;
+  };
+}
+
+interface AddIdentityTlsCertAuthEvent {
+  type: EventType.ADD_IDENTITY_TLS_CERT_AUTH;
+  metadata: {
+    identityId: string;
+    allowedCommonNames: string | null | undefined;
+    accessTokenTTL: number;
+    accessTokenMaxTTL: number;
+    accessTokenNumUsesLimit: number;
+    accessTokenTrustedIps: Array<TIdentityTrustedIp>;
+  };
+}
+
+interface DeleteIdentityTlsCertAuthEvent {
+  type: EventType.REVOKE_IDENTITY_TLS_CERT_AUTH;
+  metadata: {
+    identityId: string;
+  };
+}
+
+interface UpdateIdentityTlsCertAuthEvent {
+  type: EventType.UPDATE_IDENTITY_TLS_CERT_AUTH;
+  metadata: {
+    identityId: string;
+    allowedCommonNames: string | null | undefined;
+    accessTokenTTL?: number;
+    accessTokenMaxTTL?: number;
+    accessTokenNumUsesLimit?: number;
+    accessTokenTrustedIps?: Array<TIdentityTrustedIp>;
+  };
+}
+
+interface GetIdentityTlsCertAuthEvent {
+  type: EventType.GET_IDENTITY_TLS_CERT_AUTH;
+  metadata: {
+    identityId: string;
+  };
+}
+
 interface LoginIdentityOciAuthEvent {
   type: EventType.LOGIN_IDENTITY_OCI_AUTH;
   metadata: {
@@ -3358,6 +3411,11 @@ export type Event =
   | UpdateIdentityAliCloudAuthEvent
   | GetIdentityAliCloudAuthEvent
   | DeleteIdentityAliCloudAuthEvent
+  | LoginIdentityTlsCertAuthEvent
+  | AddIdentityTlsCertAuthEvent
+  | UpdateIdentityTlsCertAuthEvent
+  | GetIdentityTlsCertAuthEvent
+  | DeleteIdentityTlsCertAuthEvent
   | LoginIdentityOciAuthEvent
   | AddIdentityOciAuthEvent
   | UpdateIdentityOciAuthEvent

backend/src/lib/api-docs/constants.ts

@@ -22,6 +22,7 @@ export enum ApiDocsTags {
   UniversalAuth = "Universal Auth",
   GcpAuth = "GCP Auth",
   AliCloudAuth = "Alibaba Cloud Auth",
+  TlsCertAuth = "TLS Certificate Auth",
   AwsAuth = "AWS Auth",
   OciAuth = "OCI Auth",
   AzureAuth = "Azure Auth",
@@ -283,6 +284,38 @@ export const ALICLOUD_AUTH = {
   }
 } as const;
 
+export const TLS_CERT_AUTH = {
+  LOGIN: {
+    identityId: "The ID of the identity to login."
+  },
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    allowedCommonNames:
+      "The comma-separated list of trusted common names that are allowed to authenticate with Infisical.",
+    caCertificate: "The PEM-encoded CA certificate to validate client certificates.",
+    accessTokenTTL: "The lifetime for an access token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an access token in seconds.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    allowedCommonNames:
+      "The comma-separated list of trusted common names that are allowed to authenticate with Infisical.",
+    caCertificate: "The PEM-encoded CA certificate to validate client certificates.",
+    accessTokenTTL: "The new lifetime for an access token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an access token in seconds.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
+  REVOKE: {
+    identityId: "The ID of the identity to revoke the auth method for."
+  }
+} as const;
+
 export const AWS_AUTH = {
   LOGIN: {
     identityId: "The ID of the identity to login.",

backend/src/lib/config/env.ts

@@ -193,6 +193,9 @@ const envSchema = z
     PYLON_API_KEY: zpStr(z.string().optional()),
     DISABLE_AUDIT_LOG_GENERATION: zodStrBool.default("false"),
     SSL_CLIENT_CERTIFICATE_HEADER_KEY: zpStr(z.string().optional()).default("x-ssl-client-cert"),
+    IDENTITY_TLS_CERT_AUTH_CLIENT_CERTIFICATE_HEADER_KEY: zpStr(z.string().optional()).default(
+      "x-identity-tls-cert-auth-client-cert"
+    ),
     WORKFLOW_SLACK_CLIENT_ID: zpStr(z.string().optional()),
     WORKFLOW_SLACK_CLIENT_SECRET: zpStr(z.string().optional()),
     ENABLE_MSSQL_SECRET_ROTATION_ENCRYPT: zodStrBool.default("true"),

backend/src/server/routes/index.ts

@@ -193,6 +193,8 @@ import { identityOidcAuthServiceFactory } from "@app/services/identity-oidc-auth
 import { identityProjectDALFactory } from "@app/services/identity-project/identity-project-dal";
 import { identityProjectMembershipRoleDALFactory } from "@app/services/identity-project/identity-project-membership-role-dal";
 import { identityProjectServiceFactory } from "@app/services/identity-project/identity-project-service";
+import { identityTlsCertAuthDALFactory } from "@app/services/identity-tls-cert-auth/identity-tls-cert-auth-dal";
+import { identityTlsCertAuthServiceFactory } from "@app/services/identity-tls-cert-auth/identity-tls-cert-auth-service";
 import { identityTokenAuthDALFactory } from "@app/services/identity-token-auth/identity-token-auth-dal";
 import { identityTokenAuthServiceFactory } from "@app/services/identity-token-auth/identity-token-auth-service";
 import { identityUaClientSecretDALFactory } from "@app/services/identity-ua/identity-ua-client-secret-dal";
@@ -384,6 +386,7 @@ export const registerRoutes = async (
   const identityKubernetesAuthDAL = identityKubernetesAuthDALFactory(db);
   const identityUaClientSecretDAL = identityUaClientSecretDALFactory(db);
   const identityAliCloudAuthDAL = identityAliCloudAuthDALFactory(db);
+  const identityTlsCertAuthDAL = identityTlsCertAuthDALFactory(db);
   const identityAwsAuthDAL = identityAwsAuthDALFactory(db);
   const identityGcpAuthDAL = identityGcpAuthDALFactory(db);
   const identityOciAuthDAL = identityOciAuthDALFactory(db);
@@ -1416,7 +1419,8 @@ export const registerRoutes = async (
   const identityAccessTokenService = identityAccessTokenServiceFactory({
     identityAccessTokenDAL,
     identityOrgMembershipDAL,
-    accessTokenQueue
+    accessTokenQueue,
+    identityDAL
   });
 
   const identityProjectService = identityProjectServiceFactory({
@@ -1492,6 +1496,15 @@ export const registerRoutes = async (
     permissionService
   });
 
+  const identityTlsCertAuthService = identityTlsCertAuthServiceFactory({
+    identityAccessTokenDAL,
+    identityTlsCertAuthDAL,
+    identityOrgMembershipDAL,
+    licenseService,
+    permissionService,
+    kmsService
+  });
+
   const identityAwsAuthService = identityAwsAuthServiceFactory({
     identityAccessTokenDAL,
     identityAwsAuthDAL,
@@ -1946,6 +1959,7 @@ export const registerRoutes = async (
     identityAwsAuth: identityAwsAuthService,
     identityAzureAuth: identityAzureAuthService,
     identityOciAuth: identityOciAuthService,
+    identityTlsCertAuth: identityTlsCertAuthService,
     identityOidcAuth: identityOidcAuthService,
     identityJwtAuth: identityJwtAuthService,
     identityLdapAuth: identityLdapAuthService,

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

@@ -0,0 +1,396 @@
+import crypto from "node:crypto";
+
+import { z } from "zod";
+
+import { IdentityTlsCertAuthsSchema } from "@app/db/schemas";
+import { EventType } from "@app/ee/services/audit-log/audit-log-types";
+import { ApiDocsTags, TLS_CERT_AUTH } from "@app/lib/api-docs";
+import { getConfig } from "@app/lib/config/env";
+import { BadRequestError } from "@app/lib/errors";
+import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { AuthMode } from "@app/services/auth/auth-type";
+import { TIdentityTrustedIp } from "@app/services/identity/identity-types";
+import { isSuperAdmin } from "@app/services/super-admin/super-admin-fns";
+
+const validateCommonNames = z
+  .string()
+  .min(1)
+  .trim()
+  .transform((el) =>
+    el
+      .split(",")
+      .map((i) => i.trim())
+      .join(",")
+  );
+
+const validateCaCertificate = (caCert: string) => {
+  if (!caCert) return true;
+  try {
+    // eslint-disable-next-line no-new
+    new crypto.X509Certificate(caCert);
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+
+export const registerIdentityTlsCertAuthRouter = async (server: FastifyZodProvider) => {
+  server.route({
+    method: "POST",
+    url: "/login",
+    config: {
+      rateLimit: writeLimit
+    },
+    schema: {
+      hide: false,
+      tags: [ApiDocsTags.TlsCertAuth],
+      description: "Login with TLS Certificate Auth",
+      body: z.object({
+        identityId: z.string().trim().describe(TLS_CERT_AUTH.LOGIN.identityId)
+      }),
+      response: {
+        200: z.object({
+          accessToken: z.string(),
+          expiresIn: z.coerce.number(),
+          accessTokenMaxTTL: z.coerce.number(),
+          tokenType: z.literal("Bearer")
+        })
+      }
+    },
+    handler: async (req) => {
+      const appCfg = getConfig();
+      const clientCertificate = req.headers[appCfg.IDENTITY_TLS_CERT_AUTH_CLIENT_CERTIFICATE_HEADER_KEY];
+      if (!clientCertificate) {
+        throw new BadRequestError({ message: "Missing TLS certificate in header" });
+      }
+
+      const { identityTlsCertAuth, accessToken, identityAccessToken, identityMembershipOrg } =
+        await server.services.identityTlsCertAuth.login({
+          identityId: req.body.identityId,
+          clientCertificate: clientCertificate as string
+        });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: identityMembershipOrg?.orgId,
+        event: {
+          type: EventType.LOGIN_IDENTITY_TLS_CERT_AUTH,
+          metadata: {
+            identityId: identityTlsCertAuth.identityId,
+            identityAccessTokenId: identityAccessToken.id,
+            identityTlsCertAuthId: identityTlsCertAuth.id
+          }
+        }
+      });
+
+      return {
+        accessToken,
+        tokenType: "Bearer" as const,
+        expiresIn: identityTlsCertAuth.accessTokenTTL,
+        accessTokenMaxTTL: identityTlsCertAuth.accessTokenMaxTTL
+      };
+    }
+  });
+
+  server.route({
+    method: "POST",
+    url: "/identities/:identityId",
+    config: {
+      rateLimit: writeLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      hide: false,
+      tags: [ApiDocsTags.TlsCertAuth],
+      description: "Attach TLS Certificate Auth configuration onto identity",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string().trim().describe(TLS_CERT_AUTH.ATTACH.identityId)
+      }),
+      body: z
+        .object({
+          allowedCommonNames: validateCommonNames
+            .optional()
+            .nullable()
+            .describe(TLS_CERT_AUTH.ATTACH.allowedCommonNames),
+          caCertificate: z
+            .string()
+            .min(1)
+            .max(10240)
+            .refine(validateCaCertificate, "Invalid CA Certificate.")
+            .describe(TLS_CERT_AUTH.ATTACH.caCertificate),
+          accessTokenTrustedIps: z
+            .object({
+              ipAddress: z.string().trim()
+            })
+            .array()
+            .min(1)
+            .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+            .describe(TLS_CERT_AUTH.ATTACH.accessTokenTrustedIps),
+          accessTokenTTL: z
+            .number()
+            .int()
+            .min(0)
+            .max(315360000)
+            .default(2592000)
+            .describe(TLS_CERT_AUTH.ATTACH.accessTokenTTL),
+          accessTokenMaxTTL: z
+            .number()
+            .int()
+            .min(1)
+            .max(315360000)
+            .default(2592000)
+            .describe(TLS_CERT_AUTH.ATTACH.accessTokenMaxTTL),
+          accessTokenNumUsesLimit: z
+            .number()
+            .int()
+            .min(0)
+            .default(0)
+            .describe(TLS_CERT_AUTH.ATTACH.accessTokenNumUsesLimit)
+        })
+        .refine(
+          (val) => val.accessTokenTTL <= val.accessTokenMaxTTL,
+          "Access Token TTL cannot be greater than Access Token Max TTL."
+        ),
+      response: {
+        200: z.object({
+          identityTlsCertAuth: IdentityTlsCertAuthsSchema
+        })
+      }
+    },
+    handler: async (req) => {
+      const identityTlsCertAuth = await server.services.identityTlsCertAuth.attachTlsCertAuth({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        ...req.body,
+        identityId: req.params.identityId,
+        isActorSuperAdmin: isSuperAdmin(req.auth)
+      });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: req.permission.orgId,
+        event: {
+          type: EventType.ADD_IDENTITY_TLS_CERT_AUTH,
+          metadata: {
+            identityId: identityTlsCertAuth.identityId,
+            allowedCommonNames: identityTlsCertAuth.allowedCommonNames,
+            accessTokenTTL: identityTlsCertAuth.accessTokenTTL,
+            accessTokenMaxTTL: identityTlsCertAuth.accessTokenMaxTTL,
+            accessTokenTrustedIps: identityTlsCertAuth.accessTokenTrustedIps as TIdentityTrustedIp[],
+            accessTokenNumUsesLimit: identityTlsCertAuth.accessTokenNumUsesLimit
+          }
+        }
+      });
+
+      return { identityTlsCertAuth };
+    }
+  });
+
+  server.route({
+    method: "PATCH",
+    url: "/identities/:identityId",
+    config: {
+      rateLimit: writeLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      hide: false,
+      tags: [ApiDocsTags.TlsCertAuth],
+      description: "Update TLS Certificate Auth configuration on identity",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string().describe(TLS_CERT_AUTH.UPDATE.identityId)
+      }),
+      body: z
+        .object({
+          caCertificate: z
+            .string()
+            .min(1)
+            .max(10240)
+            .refine(validateCaCertificate, "Invalid CA Certificate.")
+            .optional()
+            .describe(TLS_CERT_AUTH.UPDATE.caCertificate),
+          allowedCommonNames: validateCommonNames
+            .optional()
+            .nullable()
+            .describe(TLS_CERT_AUTH.UPDATE.allowedCommonNames),
+          accessTokenTrustedIps: z
+            .object({
+              ipAddress: z.string().trim()
+            })
+            .array()
+            .min(1)
+            .optional()
+            .describe(TLS_CERT_AUTH.UPDATE.accessTokenTrustedIps),
+          accessTokenTTL: z
+            .number()
+            .int()
+            .min(0)
+            .max(315360000)
+            .optional()
+            .describe(TLS_CERT_AUTH.UPDATE.accessTokenTTL),
+          accessTokenNumUsesLimit: z
+            .number()
+            .int()
+            .min(0)
+            .optional()
+            .describe(TLS_CERT_AUTH.UPDATE.accessTokenNumUsesLimit),
+          accessTokenMaxTTL: z
+            .number()
+            .int()
+            .max(315360000)
+            .min(0)
+            .optional()
+            .describe(TLS_CERT_AUTH.UPDATE.accessTokenMaxTTL)
+        })
+        .refine(
+          (val) => (val.accessTokenMaxTTL && val.accessTokenTTL ? val.accessTokenTTL <= val.accessTokenMaxTTL : true),
+          "Access Token TTL cannot be greater than Access Token Max TTL."
+        ),
+      response: {
+        200: z.object({
+          identityTlsCertAuth: IdentityTlsCertAuthsSchema
+        })
+      }
+    },
+    handler: async (req) => {
+      const identityTlsCertAuth = await server.services.identityTlsCertAuth.updateTlsCertAuth({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        ...req.body,
+        identityId: req.params.identityId
+      });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: req.permission.orgId,
+        event: {
+          type: EventType.UPDATE_IDENTITY_TLS_CERT_AUTH,
+          metadata: {
+            identityId: identityTlsCertAuth.identityId,
+            allowedCommonNames: identityTlsCertAuth.allowedCommonNames,
+            accessTokenTTL: identityTlsCertAuth.accessTokenTTL,
+            accessTokenMaxTTL: identityTlsCertAuth.accessTokenMaxTTL,
+            accessTokenTrustedIps: identityTlsCertAuth.accessTokenTrustedIps as TIdentityTrustedIp[],
+            accessTokenNumUsesLimit: identityTlsCertAuth.accessTokenNumUsesLimit
+          }
+        }
+      });
+
+      return { identityTlsCertAuth };
+    }
+  });
+
+  server.route({
+    method: "GET",
+    url: "/identities/:identityId",
+    config: {
+      rateLimit: readLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      hide: false,
+      tags: [ApiDocsTags.TlsCertAuth],
+      description: "Retrieve TLS Certificate Auth configuration on identity",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string().describe(TLS_CERT_AUTH.RETRIEVE.identityId)
+      }),
+      response: {
+        200: z.object({
+          identityTlsCertAuth: IdentityTlsCertAuthsSchema.extend({
+            caCertificate: z.string()
+          })
+        })
+      }
+    },
+    handler: async (req) => {
+      const identityTlsCertAuth = await server.services.identityTlsCertAuth.getTlsCertAuth({
+        identityId: req.params.identityId,
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorOrgId: req.permission.orgId,
+        actorAuthMethod: req.permission.authMethod
+      });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: req.permission.orgId,
+        event: {
+          type: EventType.GET_IDENTITY_TLS_CERT_AUTH,
+          metadata: {
+            identityId: identityTlsCertAuth.identityId
+          }
+        }
+      });
+      return { identityTlsCertAuth };
+    }
+  });
+
+  server.route({
+    method: "DELETE",
+    url: "/identities/:identityId",
+    config: {
+      rateLimit: writeLimit
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    schema: {
+      hide: false,
+      tags: [ApiDocsTags.TlsCertAuth],
+      description: "Delete TLS Certificate Auth configuration on identity",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        identityId: z.string().describe(TLS_CERT_AUTH.REVOKE.identityId)
+      }),
+      response: {
+        200: z.object({
+          identityTlsCertAuth: IdentityTlsCertAuthsSchema
+        })
+      }
+    },
+    handler: async (req) => {
+      const identityTlsCertAuth = await server.services.identityTlsCertAuth.revokeTlsCertAuth({
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        identityId: req.params.identityId
+      });
+
+      await server.services.auditLog.createAuditLog({
+        ...req.auditLogInfo,
+        orgId: req.permission.orgId,
+        event: {
+          type: EventType.REVOKE_IDENTITY_TLS_CERT_AUTH,
+          metadata: {
+            identityId: identityTlsCertAuth.identityId
+          }
+        }
+      });
+
+      return { identityTlsCertAuth };
+    }
+  });
+};

backend/src/server/routes/v1/index.ts

@@ -25,6 +25,7 @@ import { registerIdentityLdapAuthRouter } from "./identity-ldap-auth-router";
 import { registerIdentityOciAuthRouter } from "./identity-oci-auth-router";
 import { registerIdentityOidcAuthRouter } from "./identity-oidc-auth-router";
 import { registerIdentityRouter } from "./identity-router";
+import { registerIdentityTlsCertAuthRouter } from "./identity-tls-cert-auth-router";
 import { registerIdentityTokenAuthRouter } from "./identity-token-auth-router";
 import { registerIdentityUaRouter } from "./identity-universal-auth-router";
 import { registerIntegrationAuthRouter } from "./integration-auth-router";
@@ -66,6 +67,7 @@ export const registerV1Routes = async (server: FastifyZodProvider) => {
       await authRouter.register(registerIdentityAccessTokenRouter);
       await authRouter.register(registerIdentityAliCloudAuthRouter);
       await authRouter.register(registerIdentityAwsAuthRouter);
+      await authRouter.register(registerIdentityTlsCertAuthRouter, { prefix: "/tls-cert-auth" });
       await authRouter.register(registerIdentityAzureAuthRouter);
       await authRouter.register(registerIdentityOciAuthRouter);
       await authRouter.register(registerIdentityOidcAuthRouter);

backend/src/services/app-connection/gcp/gcp-connection-service.ts

@@ -1,3 +1,4 @@
+import { logger } from "@app/lib/logger";
 import { OrgServiceActor } from "@app/lib/types";
 
 import { AppConnection } from "../app-connection-enums";
@@ -19,6 +20,7 @@ export const gcpConnectionService = (getAppConnection: TGetAppConnectionFunc) =>
 
       return projects;
     } catch (error) {
+      logger.error(error, "Error listing GCP secret manager projects");
       return [];
     }
   };

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

@@ -17,70 +17,11 @@ export const identityAccessTokenDALFactory = (db: TDbClient) => {
       const doc = await (tx || db.replicaNode())(TableName.IdentityAccessToken)
         .where(filter)
         .join(TableName.Identity, `${TableName.Identity}.id`, `${TableName.IdentityAccessToken}.identityId`)
-        .leftJoin(
-          TableName.IdentityUaClientSecret,
-          `${TableName.IdentityAccessToken}.identityUAClientSecretId`,
-          `${TableName.IdentityUaClientSecret}.id`
-        )
-        .leftJoin(
-          TableName.IdentityUniversalAuth,
-          `${TableName.IdentityUaClientSecret}.identityUAId`,
-          `${TableName.IdentityUniversalAuth}.id`
-        )
-        .leftJoin(TableName.IdentityGcpAuth, `${TableName.Identity}.id`, `${TableName.IdentityGcpAuth}.identityId`)
-        .leftJoin(
-          TableName.IdentityAliCloudAuth,
-          `${TableName.Identity}.id`,
-          `${TableName.IdentityAliCloudAuth}.identityId`
-        )
-        .leftJoin(TableName.IdentityAwsAuth, `${TableName.Identity}.id`, `${TableName.IdentityAwsAuth}.identityId`)
-        .leftJoin(TableName.IdentityAzureAuth, `${TableName.Identity}.id`, `${TableName.IdentityAzureAuth}.identityId`)
-        .leftJoin(TableName.IdentityLdapAuth, `${TableName.Identity}.id`, `${TableName.IdentityLdapAuth}.identityId`)
-        .leftJoin(
-          TableName.IdentityKubernetesAuth,
-          `${TableName.Identity}.id`,
-          `${TableName.IdentityKubernetesAuth}.identityId`
-        )
-        .leftJoin(TableName.IdentityOciAuth, `${TableName.Identity}.id`, `${TableName.IdentityOciAuth}.identityId`)
-        .leftJoin(TableName.IdentityOidcAuth, `${TableName.Identity}.id`, `${TableName.IdentityOidcAuth}.identityId`)
-        .leftJoin(TableName.IdentityTokenAuth, `${TableName.Identity}.id`, `${TableName.IdentityTokenAuth}.identityId`)
-        .leftJoin(TableName.IdentityJwtAuth, `${TableName.Identity}.id`, `${TableName.IdentityJwtAuth}.identityId`)
         .select(selectAllTableCols(TableName.IdentityAccessToken))
-        .select(
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityUniversalAuth).as("accessTokenTrustedIpsUa"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityGcpAuth).as("accessTokenTrustedIpsGcp"),
-          db
-            .ref("accessTokenTrustedIps")
-            .withSchema(TableName.IdentityAliCloudAuth)
-            .as("accessTokenTrustedIpsAliCloud"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityAwsAuth).as("accessTokenTrustedIpsAws"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityAzureAuth).as("accessTokenTrustedIpsAzure"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityKubernetesAuth).as("accessTokenTrustedIpsK8s"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityOciAuth).as("accessTokenTrustedIpsOci"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityOidcAuth).as("accessTokenTrustedIpsOidc"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityTokenAuth).as("accessTokenTrustedIpsToken"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityJwtAuth).as("accessTokenTrustedIpsJwt"),
-          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityLdapAuth).as("accessTokenTrustedIpsLdap"),
-          db.ref("name").withSchema(TableName.Identity)
-        )
+        .select(db.ref("name").withSchema(TableName.Identity))
         .first();
 
-      if (!doc) return;
-
-      return {
-        ...doc,
-        trustedIpsUniversalAuth: doc.accessTokenTrustedIpsUa,
-        trustedIpsGcpAuth: doc.accessTokenTrustedIpsGcp,
-        trustedIpsAliCloudAuth: doc.accessTokenTrustedIpsAliCloud,
-        trustedIpsAwsAuth: doc.accessTokenTrustedIpsAws,
-        trustedIpsAzureAuth: doc.accessTokenTrustedIpsAzure,
-        trustedIpsKubernetesAuth: doc.accessTokenTrustedIpsK8s,
-        trustedIpsOciAuth: doc.accessTokenTrustedIpsOci,
-        trustedIpsOidcAuth: doc.accessTokenTrustedIpsOidc,
-        trustedIpsAccessTokenAuth: doc.accessTokenTrustedIpsToken,
-        trustedIpsAccessJwtAuth: doc.accessTokenTrustedIpsJwt,
-        trustedIpsAccessLdapAuth: doc.accessTokenTrustedIpsLdap
-      };
+      return doc;
     } catch (error) {
       throw new DatabaseError({ error, name: "IdAccessTokenFindOne" });
     }

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

@@ -7,12 +7,14 @@ import { checkIPAgainstBlocklist, TIp } from "@app/lib/ip";
 
 import { TAccessTokenQueueServiceFactory } from "../access-token-queue/access-token-queue";
 import { AuthTokenType } from "../auth/auth-type";
+import { TIdentityDALFactory } from "../identity/identity-dal";
 import { TIdentityOrgDALFactory } from "../identity/identity-org-dal";
 import { TIdentityAccessTokenDALFactory } from "./identity-access-token-dal";
 import { TIdentityAccessTokenJwtPayload, TRenewAccessTokenDTO } from "./identity-access-token-types";
 
 type TIdentityAccessTokenServiceFactoryDep = {
   identityAccessTokenDAL: TIdentityAccessTokenDALFactory;
+  identityDAL: Pick<TIdentityDALFactory, "getTrustedIpsByAuthMethod">;
   identityOrgMembershipDAL: TIdentityOrgDALFactory;
   accessTokenQueue: Pick<
     TAccessTokenQueueServiceFactory,
@@ -25,7 +27,8 @@ export type TIdentityAccessTokenServiceFactory = ReturnType<typeof identityAcces
 export const identityAccessTokenServiceFactory = ({
   identityAccessTokenDAL,
   identityOrgMembershipDAL,
-  accessTokenQueue
+  accessTokenQueue,
+  identityDAL
 }: TIdentityAccessTokenServiceFactoryDep) => {
   const validateAccessTokenExp = async (identityAccessToken: TIdentityAccessTokens) => {
     const {
@@ -190,23 +193,11 @@ export const identityAccessTokenServiceFactory = ({
         message: "Failed to authorize revoked access token, access token is revoked"
       });
 
-    const trustedIpsMap: Record<IdentityAuthMethod, unknown> = {
-      [IdentityAuthMethod.UNIVERSAL_AUTH]: identityAccessToken.trustedIpsUniversalAuth,
-      [IdentityAuthMethod.GCP_AUTH]: identityAccessToken.trustedIpsGcpAuth,
-      [IdentityAuthMethod.ALICLOUD_AUTH]: identityAccessToken.trustedIpsAliCloudAuth,
-      [IdentityAuthMethod.AWS_AUTH]: identityAccessToken.trustedIpsAwsAuth,
-      [IdentityAuthMethod.OCI_AUTH]: identityAccessToken.trustedIpsOciAuth,
-      [IdentityAuthMethod.AZURE_AUTH]: identityAccessToken.trustedIpsAzureAuth,
-      [IdentityAuthMethod.KUBERNETES_AUTH]: identityAccessToken.trustedIpsKubernetesAuth,
-      [IdentityAuthMethod.OIDC_AUTH]: identityAccessToken.trustedIpsOidcAuth,
-      [IdentityAuthMethod.TOKEN_AUTH]: identityAccessToken.trustedIpsAccessTokenAuth,
-      [IdentityAuthMethod.JWT_AUTH]: identityAccessToken.trustedIpsAccessJwtAuth,
-      [IdentityAuthMethod.LDAP_AUTH]: identityAccessToken.trustedIpsAccessLdapAuth
-    };
-
-    const trustedIps = trustedIpsMap[identityAccessToken.authMethod as IdentityAuthMethod];
-
-    if (ipAddress) {
+    const trustedIps = await identityDAL.getTrustedIpsByAuthMethod(
+      identityAccessToken.identityId,
+      identityAccessToken.authMethod as IdentityAuthMethod
+    );
+    if (ipAddress && trustedIps) {
       checkIPAgainstBlocklist({
         ipAddress,
         trustedIps: trustedIps as TIp[]

backend/src/services/identity-tls-cert-auth/identity-tls-cert-auth-dal.ts

@@ -0,0 +1,10 @@
+import { TDbClient } from "@app/db";
+import { TableName } from "@app/db/schemas";
+import { ormify, TOrmify } from "@app/lib/knex";
+
+export type TIdentityTlsCertAuthDALFactory = TOrmify<TableName.IdentityTlsCertAuth>;
+
+export const identityTlsCertAuthDALFactory = (db: TDbClient) => {
+  const orm = ormify(db, TableName.IdentityTlsCertAuth);
+  return orm;
+};

backend/src/services/identity-tls-cert-auth/identity-tls-cert-auth-service.ts

@@ -0,0 +1,423 @@
+import crypto from "node:crypto";
+
+import { ForbiddenError } from "@casl/ability";
+import jwt from "jsonwebtoken";
+
+import { IdentityAuthMethod } from "@app/db/schemas";
+import { TLicenseServiceFactory } from "@app/ee/services/license/license-service";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/ee/services/permission/org-permission";
+import {
+  constructPermissionErrorMessage,
+  validatePrivilegeChangeOperation
+} from "@app/ee/services/permission/permission-fns";
+import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service-types";
+import { extractX509CertFromChain } from "@app/lib/certificates/extract-certificate";
+import { getConfig } from "@app/lib/config/env";
+import { BadRequestError, NotFoundError, PermissionBoundaryError, UnauthorizedError } from "@app/lib/errors";
+import { extractIPDetails, isValidIpOrCidr } from "@app/lib/ip";
+
+import { ActorType, AuthTokenType } from "../auth/auth-type";
+import { TIdentityOrgDALFactory } from "../identity/identity-org-dal";
+import { TIdentityAccessTokenDALFactory } from "../identity-access-token/identity-access-token-dal";
+import { TIdentityAccessTokenJwtPayload } from "../identity-access-token/identity-access-token-types";
+import { TKmsServiceFactory } from "../kms/kms-service";
+import { KmsDataKey } from "../kms/kms-types";
+import { validateIdentityUpdateForSuperAdminPrivileges } from "../super-admin/super-admin-fns";
+import { TIdentityTlsCertAuthDALFactory } from "./identity-tls-cert-auth-dal";
+import { TIdentityTlsCertAuthServiceFactory } from "./identity-tls-cert-auth-types";
+
+type TIdentityTlsCertAuthServiceFactoryDep = {
+  identityAccessTokenDAL: Pick<TIdentityAccessTokenDALFactory, "create" | "delete">;
+  identityTlsCertAuthDAL: Pick<
+    TIdentityTlsCertAuthDALFactory,
+    "findOne" | "transaction" | "create" | "updateById" | "delete"
+  >;
+  identityOrgMembershipDAL: Pick<TIdentityOrgDALFactory, "findOne">;
+  licenseService: Pick<TLicenseServiceFactory, "getPlan">;
+  permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
+  kmsService: Pick<TKmsServiceFactory, "createCipherPairWithDataKey">;
+};
+
+const parseSubjectDetails = (data: string) => {
+  const values: Record<string, string> = {};
+  data.split("\n").forEach((el) => {
+    const [key, value] = el.split("=");
+    values[key.trim()] = value.trim();
+  });
+  return values;
+};
+
+export const identityTlsCertAuthServiceFactory = ({
+  identityAccessTokenDAL,
+  identityTlsCertAuthDAL,
+  identityOrgMembershipDAL,
+  licenseService,
+  permissionService,
+  kmsService
+}: TIdentityTlsCertAuthServiceFactoryDep): TIdentityTlsCertAuthServiceFactory => {
+  const login: TIdentityTlsCertAuthServiceFactory["login"] = async ({ identityId, clientCertificate }) => {
+    const identityTlsCertAuth = await identityTlsCertAuthDAL.findOne({ identityId });
+    if (!identityTlsCertAuth) {
+      throw new NotFoundError({
+        message: "TLS Certificate auth method not found for identity, did you configure TLS Certificate auth?"
+      });
+    }
+
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({
+      identityId: identityTlsCertAuth.identityId
+    });
+
+    if (!identityMembershipOrg) {
+      throw new NotFoundError({
+        message: `Identity organization membership for identity with ID '${identityTlsCertAuth.identityId}' not found`
+      });
+    }
+
+    const { decryptor } = await kmsService.createCipherPairWithDataKey({
+      type: KmsDataKey.Organization,
+      orgId: identityMembershipOrg.orgId
+    });
+
+    const caCertificate = decryptor({
+      cipherTextBlob: identityTlsCertAuth.encryptedCaCertificate
+    }).toString();
+
+    const leafCertificate = extractX509CertFromChain(decodeURIComponent(clientCertificate))?.[0];
+    if (!leafCertificate) {
+      throw new BadRequestError({ message: "Missing client certificate" });
+    }
+
+    const clientCertificateX509 = new crypto.X509Certificate(leafCertificate);
+    const caCertificateX509 = new crypto.X509Certificate(caCertificate);
+
+    const isValidCertificate = clientCertificateX509.verify(caCertificateX509.publicKey);
+    if (!isValidCertificate)
+      throw new UnauthorizedError({
+        message: "Access denied: Certificate not issued by the provided CA."
+      });
+
+    if (new Date(clientCertificateX509.validTo) < new Date()) {
+      throw new UnauthorizedError({
+        message: "Access denied: Certificate has expired."
+      });
+    }
+
+    if (new Date(clientCertificateX509.validFrom) > new Date()) {
+      throw new UnauthorizedError({
+        message: "Access denied: Certificate not yet valid."
+      });
+    }
+
+    const subjectDetails = parseSubjectDetails(clientCertificateX509.subject);
+    if (identityTlsCertAuth.allowedCommonNames) {
+      const isValidCommonName = identityTlsCertAuth.allowedCommonNames.split(",").includes(subjectDetails.CN);
+      if (!isValidCommonName) {
+        throw new UnauthorizedError({
+          message: "Access denied: TLS Certificate Auth common name not allowed."
+        });
+      }
+    }
+
+    // Generate the token
+    const identityAccessToken = await identityTlsCertAuthDAL.transaction(async (tx) => {
+      const newToken = await identityAccessTokenDAL.create(
+        {
+          identityId: identityTlsCertAuth.identityId,
+          isAccessTokenRevoked: false,
+          accessTokenTTL: identityTlsCertAuth.accessTokenTTL,
+          accessTokenMaxTTL: identityTlsCertAuth.accessTokenMaxTTL,
+          accessTokenNumUses: 0,
+          accessTokenNumUsesLimit: identityTlsCertAuth.accessTokenNumUsesLimit,
+          authMethod: IdentityAuthMethod.TLS_CERT_AUTH
+        },
+        tx
+      );
+      return newToken;
+    });
+
+    const appCfg = getConfig();
+    const accessToken = jwt.sign(
+      {
+        identityId: identityTlsCertAuth.identityId,
+        identityAccessTokenId: identityAccessToken.id,
+        authTokenType: AuthTokenType.IDENTITY_ACCESS_TOKEN
+      } as TIdentityAccessTokenJwtPayload,
+      appCfg.AUTH_SECRET,
+      Number(identityAccessToken.accessTokenTTL) === 0
+        ? undefined
+        : {
+            expiresIn: Number(identityAccessToken.accessTokenTTL)
+          }
+    );
+
+    return {
+      identityTlsCertAuth,
+      accessToken,
+      identityAccessToken,
+      identityMembershipOrg
+    };
+  };
+
+  const attachTlsCertAuth: TIdentityTlsCertAuthServiceFactory["attachTlsCertAuth"] = async ({
+    identityId,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps,
+    actorId,
+    actorAuthMethod,
+    actor,
+    actorOrgId,
+    isActorSuperAdmin,
+    caCertificate,
+    allowedCommonNames
+  }) => {
+    await validateIdentityUpdateForSuperAdminPrivileges(identityId, isActorSuperAdmin);
+
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityMembershipOrg) throw new NotFoundError({ message: `Failed to find identity with ID ${identityId}` });
+
+    if (identityMembershipOrg.identity.authMethods.includes(IdentityAuthMethod.TLS_CERT_AUTH)) {
+      throw new BadRequestError({
+        message: "Failed to add TLS Certificate Auth to already configured identity"
+      });
+    }
+
+    if (accessTokenMaxTTL > 0 && accessTokenTTL > accessTokenMaxTTL) {
+      throw new BadRequestError({ message: "Access token TTL cannot be greater than max TTL" });
+    }
+
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionIdentityActions.Create, OrgPermissionSubjects.Identity);
+
+    const plan = await licenseService.getPlan(identityMembershipOrg.orgId);
+    const reformattedAccessTokenTrustedIps = accessTokenTrustedIps.map((accessTokenTrustedIp) => {
+      if (
+        !plan.ipAllowlisting &&
+        accessTokenTrustedIp.ipAddress !== "0.0.0.0/0" &&
+        accessTokenTrustedIp.ipAddress !== "::/0"
+      )
+        throw new BadRequestError({
+          message:
+            "Failed to add IP access range to access token due to plan restriction. Upgrade plan to add IP access range."
+        });
+      if (!isValidIpOrCidr(accessTokenTrustedIp.ipAddress))
+        throw new BadRequestError({
+          message: "The IP is not a valid IPv4, IPv6, or CIDR block"
+        });
+      return extractIPDetails(accessTokenTrustedIp.ipAddress);
+    });
+
+    const { encryptor } = await kmsService.createCipherPairWithDataKey({
+      type: KmsDataKey.Organization,
+      orgId: identityMembershipOrg.orgId
+    });
+
+    const identityTlsCertAuth = await identityTlsCertAuthDAL.transaction(async (tx) => {
+      const doc = await identityTlsCertAuthDAL.create(
+        {
+          identityId: identityMembershipOrg.identityId,
+          accessTokenMaxTTL,
+          allowedCommonNames,
+          accessTokenTTL,
+          encryptedCaCertificate: encryptor({ plainText: Buffer.from(caCertificate) }).cipherTextBlob,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps: JSON.stringify(reformattedAccessTokenTrustedIps)
+        },
+        tx
+      );
+      return doc;
+    });
+    return { ...identityTlsCertAuth, orgId: identityMembershipOrg.orgId };
+  };
+
+  const updateTlsCertAuth: TIdentityTlsCertAuthServiceFactory["updateTlsCertAuth"] = async ({
+    identityId,
+    caCertificate,
+    allowedCommonNames,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps,
+    actorId,
+    actorAuthMethod,
+    actor,
+    actorOrgId
+  }) => {
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityMembershipOrg) throw new NotFoundError({ message: `Failed to find identity with ID ${identityId}` });
+
+    if (!identityMembershipOrg.identity.authMethods.includes(IdentityAuthMethod.TLS_CERT_AUTH)) {
+      throw new NotFoundError({
+        message: "The identity does not have TLS Certificate Auth attached"
+      });
+    }
+
+    const identityTlsCertAuth = await identityTlsCertAuthDAL.findOne({ identityId });
+
+    if (
+      (accessTokenMaxTTL || identityTlsCertAuth.accessTokenMaxTTL) > 0 &&
+      (accessTokenTTL || identityTlsCertAuth.accessTokenTTL) >
+        (accessTokenMaxTTL || identityTlsCertAuth.accessTokenMaxTTL)
+    ) {
+      throw new BadRequestError({ message: "Access token TTL cannot be greater than max TTL" });
+    }
+
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionIdentityActions.Edit, OrgPermissionSubjects.Identity);
+
+    const plan = await licenseService.getPlan(identityMembershipOrg.orgId);
+    const reformattedAccessTokenTrustedIps = accessTokenTrustedIps?.map((accessTokenTrustedIp) => {
+      if (
+        !plan.ipAllowlisting &&
+        accessTokenTrustedIp.ipAddress !== "0.0.0.0/0" &&
+        accessTokenTrustedIp.ipAddress !== "::/0"
+      )
+        throw new BadRequestError({
+          message:
+            "Failed to add IP access range to access token due to plan restriction. Upgrade plan to add IP access range."
+        });
+      if (!isValidIpOrCidr(accessTokenTrustedIp.ipAddress))
+        throw new BadRequestError({
+          message: "The IP is not a valid IPv4, IPv6, or CIDR block"
+        });
+      return extractIPDetails(accessTokenTrustedIp.ipAddress);
+    });
+    const { encryptor } = await kmsService.createCipherPairWithDataKey({
+      type: KmsDataKey.Organization,
+      orgId: identityMembershipOrg.orgId
+    });
+
+    const updatedTlsCertAuth = await identityTlsCertAuthDAL.updateById(identityTlsCertAuth.id, {
+      allowedCommonNames,
+      encryptedCaCertificate: caCertificate
+        ? encryptor({ plainText: Buffer.from(caCertificate) }).cipherTextBlob
+        : undefined,
+      accessTokenMaxTTL,
+      accessTokenTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps: reformattedAccessTokenTrustedIps
+        ? JSON.stringify(reformattedAccessTokenTrustedIps)
+        : undefined
+    });
+
+    return { ...updatedTlsCertAuth, orgId: identityMembershipOrg.orgId };
+  };
+
+  const getTlsCertAuth: TIdentityTlsCertAuthServiceFactory["getTlsCertAuth"] = async ({
+    identityId,
+    actorId,
+    actor,
+    actorAuthMethod,
+    actorOrgId
+  }) => {
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityMembershipOrg) throw new NotFoundError({ message: `Failed to find identity with ID ${identityId}` });
+
+    if (!identityMembershipOrg.identity.authMethods.includes(IdentityAuthMethod.TLS_CERT_AUTH)) {
+      throw new BadRequestError({
+        message: "The identity does not have TLS Certificate Auth attached"
+      });
+    }
+
+    const identityAuth = await identityTlsCertAuthDAL.findOne({ identityId });
+
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionIdentityActions.Read, OrgPermissionSubjects.Identity);
+    const { decryptor } = await kmsService.createCipherPairWithDataKey({
+      type: KmsDataKey.Organization,
+      orgId: identityMembershipOrg.orgId
+    });
+    let caCertificate = "";
+    if (identityAuth.encryptedCaCertificate) {
+      caCertificate = decryptor({ cipherTextBlob: identityAuth.encryptedCaCertificate }).toString();
+    }
+
+    return { ...identityAuth, caCertificate, orgId: identityMembershipOrg.orgId };
+  };
+
+  const revokeTlsCertAuth: TIdentityTlsCertAuthServiceFactory["revokeTlsCertAuth"] = async ({
+    identityId,
+    actorId,
+    actor,
+    actorAuthMethod,
+    actorOrgId
+  }) => {
+    const identityMembershipOrg = await identityOrgMembershipDAL.findOne({ identityId });
+    if (!identityMembershipOrg) throw new NotFoundError({ message: `Failed to find identity with ID ${identityId}` });
+    if (!identityMembershipOrg.identity.authMethods.includes(IdentityAuthMethod.TLS_CERT_AUTH)) {
+      throw new BadRequestError({
+        message: "The identity does not have TLS Certificate auth"
+      });
+    }
+    const { permission, membership } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionIdentityActions.Edit, OrgPermissionSubjects.Identity);
+
+    const { permission: rolePermission } = await permissionService.getOrgPermission(
+      ActorType.IDENTITY,
+      identityMembershipOrg.identityId,
+      identityMembershipOrg.orgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+
+    const permissionBoundary = validatePrivilegeChangeOperation(
+      membership.shouldUseNewPrivilegeSystem,
+      OrgPermissionIdentityActions.RevokeAuth,
+      OrgPermissionSubjects.Identity,
+      permission,
+      rolePermission
+    );
+
+    if (!permissionBoundary.isValid)
+      throw new PermissionBoundaryError({
+        message: constructPermissionErrorMessage(
+          "Failed to revoke TLS Certificate auth of identity with more privileged role",
+          membership.shouldUseNewPrivilegeSystem,
+          OrgPermissionIdentityActions.RevokeAuth,
+          OrgPermissionSubjects.Identity
+        ),
+        details: { missingPermissions: permissionBoundary.missingPermissions }
+      });
+
+    const revokedIdentityTlsCertAuth = await identityTlsCertAuthDAL.transaction(async (tx) => {
+      const deletedTlsCertAuth = await identityTlsCertAuthDAL.delete({ identityId }, tx);
+      await identityAccessTokenDAL.delete({ identityId, authMethod: IdentityAuthMethod.TLS_CERT_AUTH }, tx);
+
+      return { ...deletedTlsCertAuth?.[0], orgId: identityMembershipOrg.orgId };
+    });
+    return revokedIdentityTlsCertAuth;
+  };
+
+  return {
+    login,
+    attachTlsCertAuth,
+    updateTlsCertAuth,
+    getTlsCertAuth,
+    revokeTlsCertAuth
+  };
+};

backend/src/services/identity-tls-cert-auth/identity-tls-cert-auth-types.ts

@@ -0,0 +1,49 @@
+import { TIdentityAccessTokens, TIdentityOrgMemberships, TIdentityTlsCertAuths } from "@app/db/schemas";
+import { TProjectPermission } from "@app/lib/types";
+
+export type TLoginTlsCertAuthDTO = {
+  identityId: string;
+  clientCertificate: string;
+};
+
+export type TAttachTlsCertAuthDTO = {
+  identityId: string;
+  caCertificate: string;
+  allowedCommonNames?: string | null;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: { ipAddress: string }[];
+  isActorSuperAdmin?: boolean;
+} & Omit<TProjectPermission, "projectId">;
+
+export type TUpdateTlsCertAuthDTO = {
+  identityId: string;
+  caCertificate?: string;
+  allowedCommonNames?: string | null;
+  accessTokenTTL?: number;
+  accessTokenMaxTTL?: number;
+  accessTokenNumUsesLimit?: number;
+  accessTokenTrustedIps?: { ipAddress: string }[];
+} & Omit<TProjectPermission, "projectId">;
+
+export type TGetTlsCertAuthDTO = {
+  identityId: string;
+} & Omit<TProjectPermission, "projectId">;
+
+export type TRevokeTlsCertAuthDTO = {
+  identityId: string;
+} & Omit<TProjectPermission, "projectId">;
+
+export type TIdentityTlsCertAuthServiceFactory = {
+  login: (dto: TLoginTlsCertAuthDTO) => Promise<{
+    identityTlsCertAuth: TIdentityTlsCertAuths;
+    accessToken: string;
+    identityAccessToken: TIdentityAccessTokens;
+    identityMembershipOrg: TIdentityOrgMemberships;
+  }>;
+  attachTlsCertAuth: (dto: TAttachTlsCertAuthDTO) => Promise<TIdentityTlsCertAuths>;
+  updateTlsCertAuth: (dto: TUpdateTlsCertAuthDTO) => Promise<TIdentityTlsCertAuths>;
+  revokeTlsCertAuth: (dto: TRevokeTlsCertAuthDTO) => Promise<TIdentityTlsCertAuths>;
+  getTlsCertAuth: (dto: TGetTlsCertAuthDTO) => Promise<TIdentityTlsCertAuths & { caCertificate: string }>;
+};

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

@@ -1,5 +1,5 @@
 import { TDbClient } from "@app/db";
-import { TableName, TIdentities } from "@app/db/schemas";
+import { IdentityAuthMethod, TableName, TIdentities } from "@app/db/schemas";
 import { DatabaseError } from "@app/lib/errors";
 import { ormify, selectAllTableCols } from "@app/lib/knex";
 
@@ -8,6 +8,28 @@ export type TIdentityDALFactory = ReturnType<typeof identityDALFactory>;
 export const identityDALFactory = (db: TDbClient) => {
   const identityOrm = ormify(db, TableName.Identity);
 
+  const getTrustedIpsByAuthMethod = async (identityId: string, authMethod: IdentityAuthMethod) => {
+    const authMethodToTableName = {
+      [IdentityAuthMethod.TOKEN_AUTH]: TableName.IdentityTokenAuth,
+      [IdentityAuthMethod.UNIVERSAL_AUTH]: TableName.IdentityUniversalAuth,
+      [IdentityAuthMethod.KUBERNETES_AUTH]: TableName.IdentityKubernetesAuth,
+      [IdentityAuthMethod.GCP_AUTH]: TableName.IdentityGcpAuth,
+      [IdentityAuthMethod.ALICLOUD_AUTH]: TableName.IdentityAliCloudAuth,
+      [IdentityAuthMethod.AWS_AUTH]: TableName.IdentityAwsAuth,
+      [IdentityAuthMethod.AZURE_AUTH]: TableName.IdentityAzureAuth,
+      [IdentityAuthMethod.TLS_CERT_AUTH]: TableName.IdentityTlsCertAuth,
+      [IdentityAuthMethod.OCI_AUTH]: TableName.IdentityOciAuth,
+      [IdentityAuthMethod.OIDC_AUTH]: TableName.IdentityOidcAuth,
+      [IdentityAuthMethod.JWT_AUTH]: TableName.IdentityJwtAuth,
+      [IdentityAuthMethod.LDAP_AUTH]: TableName.IdentityLdapAuth
+    } as const;
+    const tableName = authMethodToTableName[authMethod];
+    if (!tableName) return;
+    const data = await db(tableName).where({ identityId }).first();
+    if (!data) return;
+    return data.accessTokenTrustedIps;
+  };
+
   const getIdentitiesByFilter = async ({
     limit,
     offset,
@@ -38,5 +60,5 @@ export const identityDALFactory = (db: TDbClient) => {
     }
   };
 
-  return { ...identityOrm, getIdentitiesByFilter };
+  return { ...identityOrm, getTrustedIpsByAuthMethod, getIdentitiesByFilter };
 };

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

@@ -11,7 +11,8 @@ export const buildAuthMethods = ({
   azureId,
   tokenId,
   jwtId,
-  ldapId
+  ldapId,
+  tlsCertId
 }: {
   uaId?: string;
   gcpId?: string;
@@ -24,6 +25,7 @@ export const buildAuthMethods = ({
   tokenId?: string;
   jwtId?: string;
   ldapId?: string;
+  tlsCertId?: string;
 }) => {
   return [
     ...[uaId ? IdentityAuthMethod.UNIVERSAL_AUTH : null],
@@ -36,6 +38,7 @@ export const buildAuthMethods = ({
     ...[azureId ? IdentityAuthMethod.AZURE_AUTH : null],
     ...[tokenId ? IdentityAuthMethod.TOKEN_AUTH : null],
     ...[jwtId ? IdentityAuthMethod.JWT_AUTH : null],
-    ...[ldapId ? IdentityAuthMethod.LDAP_AUTH : null]
+    ...[ldapId ? IdentityAuthMethod.LDAP_AUTH : null],
+    ...[tlsCertId ? IdentityAuthMethod.TLS_CERT_AUTH : null]
   ].filter((authMethod) => authMethod) as IdentityAuthMethod[];
 };

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

@@ -12,6 +12,7 @@ import {
   TIdentityOciAuths,
   TIdentityOidcAuths,
   TIdentityOrgMemberships,
+  TIdentityTlsCertAuths,
   TIdentityTokenAuths,
   TIdentityUniversalAuths,
   TOrgRoles
@@ -99,7 +100,11 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           `${TableName.IdentityOrgMembership}.identityId`,
           `${TableName.IdentityLdapAuth}.identityId`
         )
-
+        .leftJoin<TIdentityTlsCertAuths>(
+          TableName.IdentityTlsCertAuth,
+          `${TableName.IdentityOrgMembership}.identityId`,
+          `${TableName.IdentityTlsCertAuth}.identityId`
+        )
         .select(
           selectAllTableCols(TableName.IdentityOrgMembership),
 
@@ -114,6 +119,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("id").as("tokenId").withSchema(TableName.IdentityTokenAuth),
           db.ref("id").as("jwtId").withSchema(TableName.IdentityJwtAuth),
           db.ref("id").as("ldapId").withSchema(TableName.IdentityLdapAuth),
+          db.ref("id").as("tlsCertId").withSchema(TableName.IdentityTlsCertAuth),
           db.ref("name").withSchema(TableName.Identity),
           db.ref("hasDeleteProtection").withSchema(TableName.Identity)
         );
@@ -238,7 +244,11 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           "paginatedIdentity.identityId",
           `${TableName.IdentityLdapAuth}.identityId`
         )
-
+        .leftJoin<TIdentityTlsCertAuths>(
+          TableName.IdentityTlsCertAuth,
+          "paginatedIdentity.identityId",
+          `${TableName.IdentityTlsCertAuth}.identityId`
+        )
         .select(
           db.ref("id").withSchema("paginatedIdentity"),
           db.ref("role").withSchema("paginatedIdentity"),
@@ -260,7 +270,8 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("id").as("azureId").withSchema(TableName.IdentityAzureAuth),
           db.ref("id").as("tokenId").withSchema(TableName.IdentityTokenAuth),
           db.ref("id").as("jwtId").withSchema(TableName.IdentityJwtAuth),
-          db.ref("id").as("ldapId").withSchema(TableName.IdentityLdapAuth)
+          db.ref("id").as("ldapId").withSchema(TableName.IdentityLdapAuth),
+          db.ref("id").as("tlsCertId").withSchema(TableName.IdentityTlsCertAuth)
         )
         // cr stands for custom role
         .select(db.ref("id").as("crId").withSchema(TableName.OrgRoles))
@@ -306,6 +317,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           azureId,
           tokenId,
           ldapId,
+          tlsCertId,
           createdAt,
           updatedAt
         }) => ({
@@ -313,7 +325,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           roleId,
           identityId,
           id,
-
           orgId,
           createdAt,
           updatedAt,
@@ -341,7 +352,8 @@ export const identityOrgDALFactory = (db: TDbClient) => {
               azureId,
               tokenId,
               jwtId,
-              ldapId
+              ldapId,
+              tlsCertId
             })
           }
         }),
@@ -380,7 +392,12 @@ export const identityOrgDALFactory = (db: TDbClient) => {
         .join(TableName.Identity, `${TableName.Identity}.id`, `${TableName.IdentityOrgMembership}.identityId`)
         .where(`${TableName.IdentityOrgMembership}.orgId`, orgId)
         .leftJoin(TableName.OrgRoles, `${TableName.IdentityOrgMembership}.roleId`, `${TableName.OrgRoles}.id`)
-        .orderBy(`${TableName.Identity}.${orderBy}`, orderDirection)
+        .orderBy(
+          orderBy === OrgIdentityOrderBy.Role
+            ? `${TableName.IdentityOrgMembership}.${orderBy}`
+            : `${TableName.Identity}.${orderBy}`,
+          orderDirection
+        )
         .select(`${TableName.IdentityOrgMembership}.id`)
         .select<{ id: string; total_count: string }>(
           db.raw(
@@ -511,6 +528,23 @@ export const identityOrgDALFactory = (db: TDbClient) => {
 
       if (orderBy === OrgIdentityOrderBy.Name) {
         void query.orderBy("identityName", orderDirection);
+      } else if (orderBy === OrgIdentityOrderBy.Role) {
+        void query.orderByRaw(
+          `
+          CASE 
+            WHEN ??.role = ? 
+            THEN ??.slug 
+            ELSE ??.role 
+          END ?
+          `,
+          [
+            TableName.IdentityOrgMembership,
+            "custom",
+            TableName.OrgRoles,
+            TableName.IdentityOrgMembership,
+            db.raw(orderDirection)
+          ]
+        );
       }
 
       const docs = await query;

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

@@ -46,8 +46,8 @@ export type TListOrgIdentitiesByOrgIdDTO = {
 } & TOrgPermission;
 
 export enum OrgIdentityOrderBy {
-  Name = "name"
-  // Role = "role"
+  Name = "name",
+  Role = "role"
 }
 
 export type TSearchOrgIdentitiesByOrgIdDAL = {

company/handbook/spending-money.mdx

@@ -11,9 +11,9 @@ Fairly frequently, you might run into situations when you need to spend company
 
 As a perk of working at Infisical, we cover some of your meal expenses.
 
-HQ team members: meals and unlimited snacks are provided on-site at no cost.
+**HQ team members**: meals and unlimited snacks are provided **on-site** at no cost.
 
-Remote team members: a food stipend is allocated based on location.
+**Remote team members**: a food stipend is allocated based on location.
 
 # Trivial expenses
 
@@ -27,21 +27,28 @@ This means expenses that are:
 Please spend money in a way that you think is in the best interest of the company.
 </Note>
 
-## Saving receipts
 
-Make sure you keep copies for all receipts. If you expense something on a company card and cannot provide a receipt, this may be deducted from your pay.
+# Travel
 
-You should default to using your company card in all cases - it has no transaction fees. If using your personal card is unavoidable, please reach out to Maidul to get it reimbursed manually.
+If you need to travel on Infisical’s behalf for in-person onboarding, meeting customers, and offsites, again please spend money in the best interests of the company.
 
-## Training
+We do not pre-approve your travel expenses, and trust team members to make the right decisions here. Some guidance:
+
+- Please find a flight ticket that is reasonably priced. We all travel economy by default – we cannot afford for folks to fly premium or business class. Feel free to upgrade using your personal money/airmiles if you’d like to.
+- Feel free to pay for the Uber/subway/bus to and from the airport with your Brex card. 
+- For business travel, Infisical will cover reasonable expenses for breakfast, lunch, and dinner.  
+- When traveling internationally, Infisical does not cover roaming charges for your phone. You can expense a reasonable eSIM, which usually is no more than $20.
+
+<Note>
+Note that this only applies to business travel. It is not applicable for personal travel or day-to-day commuting.
+</Note>
 
-For engineers, you’re welcome to take an approved Udemy course. Please reach out to Maidul. For the GTM team, you may buy a book a month if it’s relevant to your work.
 
 # Equipment
 
 Infisical is a remote first company so we understand the importance of having a comfortable work setup. To support this, we provide allowances for essential office equipment.
 
-### Desk & Chair
+### 1. Desk & Chair
 
 Most people already have a comfortable desk and chair, but if you need an upgrade, we offer the following allowances. 
 While we're not yet able to provide the latest and greatest, we strive to be reasonable given the stage of our company.
@@ -50,10 +57,10 @@ While we're not yet able to provide the latest and greatest, we strive to be rea
 
 **Chair**: $150 USD
 
-### Laptop
+### 2. Laptop
 Each team member will receive a company-issued Macbook Pro before they start their first day.
 
-### Notes
+### 3. Notes
 
 1. All equipment purchased using company allowances remains the property of Infisical.
 2. Keep all receipts for equipment purchases and submit them for reimbursement.
@@ -65,6 +72,28 @@ This is because we don't yet have a formal HR department to handle such logistic
 For any equipment related questions, please reach out to Maidul.
 
 
-## Brex
+# Brex
 
 We use Brex as our primary credit card provider. Don't have a company card yet? Reach out to Maidul. 
+
+### Budgets
+
+You will generally have multiple budgets assigned to you. "General Company Expenses" primarily covers quick SaaS purchases (not food). Remote team members should have a "Lunch Stipend" budget that applies to food.
+
+If your position involves a lot of travel, you may also have a "Travel" budget that applies to expenses related to business travel (e.g., you can not use it for transportation or food during personal travel).
+
+### Saving receipts
+
+Make sure you keep copies for all receipts. If you expense something on a company card and cannot provide a receipt, this may be deducted from your pay.
+
+You should default to using your company card in all cases - it has no transaction fees. If using your personal card is unavoidable, please reach out to Maidul to get it reimbursed manually.
+
+### ​Need a one-off budget increase? 
+
+You can do this directly within Brex - just request the amount and duration for the relevant budget in the app, and your hiring manager will automatically be notified for approval.
+
+
+# Training
+
+For engineers, you’re welcome to take an approved Udemy course. Please reach out to Maidul. For the GTM team, you may buy a book a month if it’s relevant to your work.
+

docker-compose.dev.yml

@@ -4,7 +4,7 @@ services:
   nginx:
     container_name: infisical-dev-nginx
     image: nginx
-    restart: always
+    restart: "always"
     ports:
       - 8080:80
       - 8443:443

docs/api-reference/endpoints/tls-cert-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/tls-cert-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/tls-cert-auth/login.mdx

@@ -0,0 +1,4 @@
+---
+title: "Login"
+openapi: "POST /api/v1/auth/tls-cert-auth/login"
+---

docs/api-reference/endpoints/tls-cert-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/tls-cert-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/tls-cert-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/tls-cert-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/tls-cert-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/tls-cert-auth/identities/{identityId}"
+---

docs/docs.json

@@ -288,6 +288,7 @@
                   "documentation/platform/identities/kubernetes-auth",
                   "documentation/platform/identities/oci-auth",
                   "documentation/platform/identities/token-auth",
+                  "documentation/platform/identities/tls-cert-auth",
                   "documentation/platform/identities/universal-auth",
                   {
                     "group": "OIDC Auth",
@@ -752,6 +753,16 @@
                   "api-reference/endpoints/alicloud-auth/revoke"
                 ]
               },
+              {
+                "group": "TLS Certificate Auth",
+                "pages": [
+                  "api-reference/endpoints/tls-cert-auth/login",
+                  "api-reference/endpoints/tls-cert-auth/attach",
+                  "api-reference/endpoints/tls-cert-auth/retrieve",
+                  "api-reference/endpoints/tls-cert-auth/update",
+                  "api-reference/endpoints/tls-cert-auth/revoke"
+                ]
+              },
               {
                 "group": "AWS Auth",
                 "pages": [

docs/documentation/platform/identities/tls-cert-auth.mdx

@@ -0,0 +1,176 @@
+---
+title: TLS Certificate Auth
+description: "Learn how to authenticate with Infisical using TLS Certificate."
+---
+
+**TLS Certificate Auth** is an authentication method that verifies a user's TLS Client certificate using the provided CA Certificate, allowing secure access to Infisical resources.
+
+## Diagram
+
+The following sequence diagram illustrates the TLS Certificate Auth workflow for authenticating users with Infisical.
+
+```mermaid
+sequenceDiagram
+  participant Client
+  participant Infisical
+
+  Note over Client,Client: Step 1: Setup your TLS request with the client certificate
+
+  Note over Client,Infisical: Step 2: Login Operation
+  Client->>Infisical: Send request to /api/v1/auth/tls-cert-auth/login
+
+  Note over Infisical: Step 3: Request verification using CA Certificate
+
+  Infisical->>Client: Return short-lived access token
+
+  Note over Client,Infisical: Step 5: Access Infisical API with token
+  Client->>Infisical: Make authenticated requests using the short-lived access token
+```
+
+## Concept
+
+At a high level, Infisical authenticates the client's TLS Certificate by verifying its identity and checking that it meets specific requirements (e.g., it is bound to the allowed common names) at the `/api/v1/auth/tls-cert-auth/login` endpoint. If successful, Infisical returns a short-lived access token that can be used to make authenticated requests to the Infisical API.
+
+To be more specific:
+
+1. The client sends a TLS request with the client certificate to Infisical at the `/api/v1/auth/tls-cert-auth/login` endpoint.
+2. Infisical verifies the incoming request using the provided CA certificate.
+3. Infisical checks the user's properties against set criteria such as Allowed Common Names.
+4. If all checks pass, Infisical returns a short-lived access token that the client can use to make authenticated requests to the Infisical API.
+
+<Accordion title="TLS with Load Balancer/Proxy">
+  Most of the time, the Infisical server will be behind a load balancer or
+  proxy. To propagate the TLS certificate from the load balancer to the
+  instance, you can configure the TLS to send the client certificate as a header
+  that is set as an [environment
+  variable](/self-hosting/configuration/envars#param-identity-tls-cert-auth-client-certificate-header-key).
+</Accordion>
+
+## Guide
+
+In the following steps, we explore how to create and use identities for your workloads and applications on TLS Certificate to
+access the Infisical API using request signing.
+
+<Warning>
+  **Self-Hosted Users:** Before using TLS Certificate Auth, please review the
+  [Security Requirements for Self-Hosted
+  Deployments](#security-requirements-for-self-hosted-deployments) section below
+  to ensure proper configuration and avoid security vulnerabilities.
+</Warning>
+
+### Creating an identity
+
+To create an identity, head to your Organization Settings > Access Control > [Identities](https://app.infisical.com/organization/access-management?selectedTab=identities) and press **Create identity**.
+
+![identities organization](/images/platform/identities/identities-org.png)
+
+When creating an identity, you specify an organization-level [role](/documentation/platform/role-based-access-controls) for it to assume; you can configure roles in Organization Settings > Access Control > [Organization Roles](https://app.infisical.com/organization/access-management?selectedTab=roles).
+
+![identities organization create](/images/platform/identities/identities-org-create.png)
+
+Input some details for your new identity:
+
+- **Name (required):** A friendly name for the identity.
+- **Role (required):** A role from the [**Organization Roles**](https://app.infisical.com/organization/access-management?selectedTab=roles) tab for the identity to assume. The organization role assigned will determine what organization-level resources this identity can have access to.
+
+Once you've created an identity, you'll be redirected to a page where you can manage the identity.
+
+![identities page](/images/platform/identities/identities-page.png)
+
+Since the identity has been configured with [Universal Auth](https://infisical.com/docs/documentation/platform/identities/universal-auth) by default, you should reconfigure it to use TLS Certificate Auth instead. To do this, click the cog next to **Universal Auth** and then select **Delete** in the options dropdown.
+
+![identities press cog](/images/platform/identities/identities-press-cog.png)
+
+![identities page remove default auth](/images/platform/identities/identities-page-remove-default-auth.png)
+
+Now create a new TLS Certificate Auth Method.
+
+![identities create tls cert auth method](/images/platform/identities/identities-tls-cert-auth-create-auth.png)
+
+Here's some information about each field:
+
+- **CA Certificate:** A PEM encoded CA Certificate used to validate incoming TLS request client certificate.
+- **Allowed Common Names:** A comma separated list of client certificate common names allowed.
+- **Access Token TTL (default is `2592000` equivalent to 30 days):** The lifetime for an access token in seconds. This value will be referenced at renewal time.
+- **Access Token Max TTL (default is `2592000` equivalent to 30 days):** The maximum lifetime for an access token in seconds. This value will be referenced at renewal time.
+- **Access Token Max Number of Uses (default is `0`):** The maximum number of times that an access token can be used; a value of `0` implies an infinite number of uses.
+- **Access Token Trusted IPs:** The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the `0.0.0.0/0`, allowing usage from any network address.
+
+### Adding an identity to a project
+
+In order to allow an identity to access project-level resources such as secrets, you must add it to the relevant projects.
+
+To do this, head over to the project you want to add the identity to and navigate to Project Settings > Access Control > Machine Identities and press **Add Identity**.
+
+![identities project](/images/platform/identities/identities-project.png)
+
+Select the identity you want to add to the project and the project-level role you want it to assume. The project role given to the identity will determine what project-level resources this identity can access.
+
+![identities project create](/images/platform/identities/identities-project-create.png)
+
+### Accessing the Infisical API with the identity
+
+To access the Infisical API as the identity, you need to send a TLS request to `/api/v1/auth/tls-cert-auth/login` endpoint.
+
+Below is an example of how you can authenticate with Infisical using NodeJS.
+
+```javascript
+const fs = require("fs");
+const https = require("https");
+const axios = require("axios");
+
+try {
+  const clientCertificate = fs.readFileSync("client-cert.pem", "utf8");
+  const clientKeyCertificate = fs.readFileSync("client-key.pem", "utf8");
+
+  const infisicalUrl = "https://app.infisical.com"; // or your self-hosted Infisical URL
+  const identityId = "<your-identity-id>";
+
+  // Create HTTPS agent with client certificate and key
+  const httpsAgent = new https.Agent({
+    cert: clientCertificate,
+    key: clientKeyCertificate,
+  });
+
+  const { data } = await axios.post(
+    `${infisicalUrl}/api/v1/auth/tls-cert-auth/login`,
+    {
+      identityId,
+    },
+    {
+      httpsAgent: httpsAgent, // Pass the HTTPS agent with client cert
+    }
+  );
+
+  console.log("result data: ", data); // access token here
+} catch (err) {
+  console.error(err);
+}
+```
+
+<Note>
+    Each identity access token has a time-to-live (TTL) which you can infer from the response of the login operation; the default TTL is `7200` seconds, which can be adjusted.
+
+    If an identity access token expires, it can no longer access the Infisical API. A new access token should be obtained by performing another login operation.
+
+</Note>
+
+## Security Requirements for Self-Hosted Deployments
+
+ALL TLS cert [login](/api-reference/endpoints/tls-cert-auth/login) requests **MUST** go through a load balancer/proxy that verifies certificate ownership:
+
+- **REQUIRED:** Configure your load balancer/proxy to **require a proper TLS handshake with client certificate presentation**
+- **REQUIRED:** Ensure the load balancer **verifies the client possesses the private key** corresponding to the certificate (standard TLS behavior)
+- **NEVER** allow direct connections to Infisical for TLS cert auth - this enables header injection attacks
+- **NEVER** forward certificate headers without requiring proper TLS certificate presentation
+
+### Load Balancer Configuration Examples
+
+- **AWS ALB:** Use mTLS listeners which require client certificate presentation during the TLS handshake
+- **NGINX/HAProxy:** Configure SSL client certificate requirement with proper TLS handshake verification
+
+<Note>
+  Infisical will handle the actual certificate validation against the configured
+  CA certificate and determine authentication permissions. The load balancer's
+  role is to ensure certificate ownership, not certificate trust validation.
+</Note>

docs/integrations/secret-syncs/gcp-secret-manager.mdx

@@ -7,9 +7,10 @@ description: "Learn how to configure a GCP Secret Manager Sync for Infisical."
 
         - Set up and add secrets to [Infisical Cloud](https://app.infisical.com)
         - Create a [GCP Connection](/integrations/app-connections/gcp) with the required **Secret Sync** permissions
-        - Enable **Cloud Resource Manager API** and **Secret Manager API** on your GCP project
+        - Enable **Cloud Resource Manager API**, **Secret Manager API**, and **Service Usage API** on your GCP project
             ![Secret Syncs Tab](/images/secret-syncs/gcp-secret-manager/enable-resource-manager-api.png)
             ![Secret Syncs Tab](/images/secret-syncs/gcp-secret-manager/enable-secret-manager-api.png)
+            ![Secret Syncs Tab](/images/secret-syncs/gcp-secret-manager/enable-service-usage-api.png)
 
 <Tabs>
     <Tab title="Infisical UI">

docs/self-hosting/configuration/envars.mdx

@@ -32,7 +32,7 @@ Used to configure platform-specific security and operational settings
 <ParamField query="HOST" type="string" default="localhost" optional>
   Specifies the network interface Infisical will bind to when accepting incoming connections.
 
-  By default, Infisical binds to `localhost`, which restricts access to connections from the same machine.
+By default, Infisical binds to `localhost`, which restricts access to connections from the same machine.
 
 To make the application accessible externally (e.g., for self-hosted deployments), set this to `0.0.0.0`, which tells the server to listen on all network interfaces.
 
@@ -122,6 +122,7 @@ DB_READ_REPLICAS=[{"DB_CONNECTION_URI":""}]
 </ParamField>
 
 ### Redis
+
 Redis is used for caching and background tasks. You can use either a standalone Redis instance or a Redis Sentinel setup.
 
 <Tabs>
@@ -199,8 +200,17 @@ Without email configuration, Infisical's core functions like sign-up/login and s
   connection can not be encrypted then message is not sent.
 </ParamField>
 
-<ParamField query="SMTP_TLS_REJECT_UNAUTHORIZED" type="bool" default="true" optional>
-  If this is `true`, Infisical will validate the server's SSL/TLS certificate and reject the connection if the certificate is invalid or not trusted. If set to `false`, the client will accept the server's certificate regardless of its validity, which can be useful in development or testing environments but is not recommended for production use.
+<ParamField
+  query="SMTP_TLS_REJECT_UNAUTHORIZED"
+  type="bool"
+  default="true"
+  optional
+>
+  If this is `true`, Infisical will validate the server's SSL/TLS certificate
+  and reject the connection if the certificate is invalid or not trusted. If set
+  to `false`, the client will accept the server's certificate regardless of its
+  validity, which can be useful in development or testing environments but is
+  not recommended for production use.
 </ParamField>
 
 <ParamField query="SMTP_CUSTOM_CA_CERT" type="string" default="none" optional>
@@ -211,6 +221,7 @@ Without email configuration, Infisical's core functions like sign-up/login and s
     Infisical highly encourages the following variables be used alongside this one for maximum security:
     - `SMTP_REQUIRE_TLS=true`
     - `SMTP_TLS_REJECT_UNAUTHORIZED=true`
+
 </ParamField>
 </Accordion>
 
@@ -577,6 +588,7 @@ You can configure third-party app connections for re-use across Infisical Projec
     <ParamField query="INF_APP_CONNECTION_GITHUB_RADAR_APP_WEBHOOK_SECRET" type="string" default="none" optional>
         The webhook secret configured for payload verification in the GitHub Radar App
     </ParamField>
+
 </Accordion>
 
 <Accordion title="GitHub OAuth Connection">
@@ -771,3 +783,14 @@ If export type is set to `otlp`, you will have to configure a value for `OTEL_EX
 <ParamField query="OTEL_COLLECTOR_BASIC_AUTH_PASSWORD" type="string">
   The password for authenticating with the telemetry collector.
 </ParamField>
+
+## Identity Auth Method
+
+<ParamField
+  query="IDENTITY_TLS_CERT_AUTH_CLIENT_CERTIFICATE_HEADER_KEY"
+  type="string"
+  default="x-identity-tls-cert-auth-client-cert"
+>
+  The TLS header used to propagate the client certificate from the load balancer
+  to the server.
+</ParamField>

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -76,7 +76,7 @@ export const GcpSyncFields = () => {
             helperText={
               <Tooltip
                 className="max-w-md"
-                content="Ensure that you've enabled the Secret Manager API and Cloud Resource Manager API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
+                content="Ensure that you've enabled the Secret Manager API, Cloud Resource Manager API, and Service Usage API on your GCP project. Additionally, make sure that the service account is assigned the appropriate GCP roles."
               >
                 <div>
                   <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}

frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
@@ -7,6 +9,7 @@ type Props = {
   className?: string;
   labelClassName?: string;
   truncate?: boolean;
+  icon?: IconDefinition;
 };
 
 export const GenericFieldLabel = ({
@@ -14,11 +17,15 @@ export const GenericFieldLabel = ({
   children,
   className,
   labelClassName,
-  truncate
+  truncate,
+  icon
 }: Props) => {
   return (
     <div className={twMerge("min-w-0", className)}>
-      <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
+      <div className="flex items-center gap-1.5">
+        {icon && <FontAwesomeIcon icon={icon} className="text-mineshaft-400" size="sm" />}
+        <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
+      </div>
       {children ? (
         <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
       ) : (

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -64,7 +64,7 @@ export const Pagination = ({
               <FontAwesomeIcon className="text-xs" icon={faCaretDown} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="min-w-fit">
+          <DropdownMenuContent sideOffset={2} className="min-w-fit">
             {perPageList.map((perPageOption) => (
               <DropdownMenuItem
                 key={`pagination-per-page-options-${perPageOption}`}

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

@@ -11,5 +11,6 @@ export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
   [IdentityAuthMethod.OCI_AUTH]: "OCI Auth",
   [IdentityAuthMethod.OIDC_AUTH]: "OIDC Auth",
   [IdentityAuthMethod.LDAP_AUTH]: "LDAP Auth",
-  [IdentityAuthMethod.JWT_AUTH]: "JWT Auth"
+  [IdentityAuthMethod.JWT_AUTH]: "JWT Auth",
+  [IdentityAuthMethod.TLS_CERT_AUTH]: "TLS Certificate Auth"
 };

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

@@ -9,7 +9,8 @@ export enum IdentityAuthMethod {
   OCI_AUTH = "oci-auth",
   OIDC_AUTH = "oidc-auth",
   LDAP_AUTH = "ldap-auth",
-  JWT_AUTH = "jwt-auth"
+  JWT_AUTH = "jwt-auth",
+  TLS_CERT_AUTH = "tls-cert-auth"
 }
 
 export enum IdentityJwtConfigurationType {

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

@@ -14,6 +14,7 @@ import {
   AddIdentityLdapAuthDTO,
   AddIdentityOciAuthDTO,
   AddIdentityOidcAuthDTO,
+  AddIdentityTlsCertAuthDTO,
   AddIdentityTokenAuthDTO,
   AddIdentityUniversalAuthDTO,
   ClientSecretData,
@@ -32,6 +33,7 @@ import {
   DeleteIdentityLdapAuthDTO,
   DeleteIdentityOciAuthDTO,
   DeleteIdentityOidcAuthDTO,
+  DeleteIdentityTlsCertAuthDTO,
   DeleteIdentityTokenAuthDTO,
   DeleteIdentityUniversalAuthClientSecretDTO,
   DeleteIdentityUniversalAuthDTO,
@@ -46,6 +48,7 @@ import {
   IdentityLdapAuth,
   IdentityOciAuth,
   IdentityOidcAuth,
+  IdentityTlsCertAuth,
   IdentityTokenAuth,
   IdentityUniversalAuth,
   RevokeTokenDTO,
@@ -60,6 +63,7 @@ import {
   UpdateIdentityLdapAuthDTO,
   UpdateIdentityOciAuthDTO,
   UpdateIdentityOidcAuthDTO,
+  UpdateIdentityTlsCertAuthDTO,
   UpdateIdentityTokenAuthDTO,
   UpdateIdentityUniversalAuthDTO,
   UpdateTokenIdentityTokenAuthDTO
@@ -655,6 +659,107 @@ export const useDeleteIdentityAliCloudAuth = () => {
   });
 };
 
+export const useAddIdentityTlsCertAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTlsCertAuth, object, AddIdentityTlsCertAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      allowedCommonNames,
+      caCertificate,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityTlsCertAuth }
+      } = await apiRequest.post<{ identityTlsCertAuth: IdentityTlsCertAuth }>(
+        `/api/v1/auth/tls-cert-auth/identities/${identityId}`,
+        {
+          allowedCommonNames,
+          caCertificate,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityTlsCertAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.getOrgIdentityMemberships(organizationId)
+      });
+      queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
+      queryClient.invalidateQueries({
+        queryKey: identitiesKeys.getIdentityTlsCertAuth(identityId)
+      });
+    }
+  });
+};
+
+export const useUpdateIdentityTlsCertAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTlsCertAuth, object, UpdateIdentityTlsCertAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      allowedCommonNames,
+      caCertificate,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityTlsCertAuth }
+      } = await apiRequest.patch<{ identityTlsCertAuth: IdentityTlsCertAuth }>(
+        `/api/v1/auth/tls-cert-auth/identities/${identityId}`,
+        {
+          caCertificate,
+          allowedCommonNames,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityTlsCertAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.getOrgIdentityMemberships(organizationId)
+      });
+      queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
+      queryClient.invalidateQueries({
+        queryKey: identitiesKeys.getIdentityTlsCertAuth(identityId)
+      });
+    }
+  });
+};
+
+export const useDeleteIdentityTlsCertAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTlsCertAuth, object, DeleteIdentityTlsCertAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityTlsCertAuth }
+      } = await apiRequest.delete(`/api/v1/auth/tls-cert-auth/identities/${identityId}`);
+      return identityTlsCertAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.getOrgIdentityMemberships(organizationId)
+      });
+      queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
+      queryClient.invalidateQueries({
+        queryKey: identitiesKeys.getIdentityTlsCertAuth(identityId)
+      });
+    }
+  });
+};
+
 export const useUpdateIdentityOidcAuth = () => {
   const queryClient = useQueryClient();
   return useMutation<IdentityOidcAuth, object, UpdateIdentityOidcAuthDTO>({

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

@@ -17,6 +17,7 @@ import {
   IdentityMembershipOrg,
   IdentityOciAuth,
   IdentityOidcAuth,
+  IdentityTlsCertAuth,
   IdentityTokenAuth,
   IdentityUniversalAuth,
   TSearchIdentitiesDTO
@@ -34,6 +35,8 @@ export const identitiesKeys = {
   getIdentityGcpAuth: (identityId: string) => [{ identityId }, "identity-gcp-auth"] as const,
   getIdentityOidcAuth: (identityId: string) => [{ identityId }, "identity-oidc-auth"] as const,
   getIdentityAwsAuth: (identityId: string) => [{ identityId }, "identity-aws-auth"] as const,
+  getIdentityTlsCertAuth: (identityId: string) =>
+    [{ identityId }, "identity-tls-cert-auth"] as const,
   getIdentityAliCloudAuth: (identityId: string) =>
     [{ identityId }, "identity-alicloud-auth"] as const,
   getIdentityOciAuth: (identityId: string) => [{ identityId }, "identity-oci-auth"] as const,
@@ -78,7 +81,8 @@ export const useSearchIdentities = (dto: TSearchIdentitiesDTO) => {
         search
       });
       return data;
-    }
+    },
+    placeholderData: (previousData) => previousData
   });
 };
 
@@ -175,6 +179,27 @@ export const useGetIdentityAwsAuth = (
   });
 };
 
+export const useGetIdentityTlsCertAuth = (
+  identityId: string,
+  options?: TReactQueryOptions["options"]
+) => {
+  return useQuery({
+    queryKey: identitiesKeys.getIdentityTlsCertAuth(identityId),
+    queryFn: async () => {
+      const {
+        data: { identityTlsCertAuth }
+      } = await apiRequest.get<{ identityTlsCertAuth: IdentityTlsCertAuth }>(
+        `/api/v1/auth/tls-cert-auth/identities/${identityId}`
+      );
+      return identityTlsCertAuth;
+    },
+    staleTime: 0,
+    gcTime: 0,
+    ...options,
+    enabled: Boolean(identityId) && (options?.enabled ?? true)
+  });
+};
+
 export const useGetIdentityOciAuth = (
   identityId: string,
   options?: TReactQueryOptions["options"]

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

@@ -485,6 +485,47 @@ export type DeleteIdentityKubernetesAuthDTO = {
   identityId: string;
 };
 
+export type IdentityTlsCertAuth = {
+  identityId: string;
+  caCertificate: string;
+  allowedCommonNames: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: IdentityTrustedIp[];
+};
+
+export type AddIdentityTlsCertAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  caCertificate: string;
+  allowedCommonNames?: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: {
+    ipAddress: string;
+  }[];
+};
+
+export type UpdateIdentityTlsCertAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  caCertificate: string;
+  allowedCommonNames?: string | null;
+  accessTokenTTL?: number;
+  accessTokenMaxTTL?: number;
+  accessTokenNumUsesLimit?: number;
+  accessTokenTrustedIps?: {
+    ipAddress: string;
+  }[];
+};
+
+export type DeleteIdentityTlsCertAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type CreateIdentityUniversalAuthClientSecretDTO = {
   identityId: string;
   description?: string;

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

@@ -154,6 +154,6 @@ export type TOrgIdentitiesList = {
 };
 
 export enum OrgIdentityOrderBy {
-  Name = "name"
-  // Role = "role"
+  Name = "name",
+  Role = "role"
 }

frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx

@@ -56,12 +56,12 @@ export const OrgGroupsSection = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
         <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => handleAddGroupModal()}

frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx

@@ -2,14 +2,17 @@ import { useMemo } from "react";
 import {
   faArrowDown,
   faArrowUp,
-  faEllipsis,
+  faCopy,
+  faEdit,
+  faEllipsisV,
   faMagnifyingGlass,
   faSearch,
+  faTrash,
+  faUserGroup,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -261,7 +264,8 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                               <Select
                                 value={role === "custom" ? (customRole?.slug as string) : role}
                                 isDisabled={!isAllowed}
-                                className="w-48 bg-mineshaft-600"
+                                className="h-8 w-48 bg-mineshaft-700"
+                                position="popper"
                                 dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                                 onValueChange={(selectedRole) =>
                                   handleChangeRole({
@@ -282,13 +286,19 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                       </Td>
                       <Td>
                         <DropdownMenu>
-                          <DropdownMenuTrigger asChild className="rounded-lg">
-                            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                            </div>
+                          <DropdownMenuTrigger asChild>
+                            <IconButton
+                              ariaLabel="Options"
+                              className="w-6"
+                              colorSchema="secondary"
+                              variant="plain"
+                            >
+                              <FontAwesomeIcon icon={faEllipsisV} />
+                            </IconButton>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent align="start" className="p-1">
+                          <DropdownMenuContent sideOffset={2} align="end">
                             <DropdownMenuItem
+                              icon={<FontAwesomeIcon icon={faCopy} />}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 createNotification({
@@ -306,10 +316,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
+                                  icon={<FontAwesomeIcon icon={faEdit} />}
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handlePopUpOpen("group", {
@@ -320,7 +327,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                       customRole
                                     });
                                   }}
-                                  disabled={!isAllowed}
+                                  isDisabled={!isAllowed}
                                 >
                                   Edit Group
                                 </DropdownMenuItem>
@@ -332,10 +339,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
+                                  icon={<FontAwesomeIcon icon={faUserGroup} />}
                                   onClick={() =>
                                     navigate({
                                       to: "/organization/groups/$groupId",
@@ -344,7 +348,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                       }
                                     })
                                   }
-                                  disabled={!isAllowed}
+                                  isDisabled={!isAllowed}
                                 >
                                   Manage Members
                                 </DropdownMenuItem>
@@ -356,11 +360,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
-                                  className={twMerge(
-                                    isAllowed
-                                      ? "hover:!bg-red-500 hover:!text-white"
-                                      : "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handlePopUpOpen("deleteGroup", {
@@ -368,7 +368,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                       name
                                     });
                                   }}
-                                  disabled={!isAllowed}
+                                  isDisabled={!isAllowed}
                                 >
                                   Delete Group
                                 </DropdownMenuItem>

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

@@ -17,6 +17,7 @@ import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
 import { IdentityLdapAuthForm } from "./IdentityLdapAuthForm";
 import { IdentityOciAuthForm } from "./IdentityOciAuthForm";
 import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
+import { IdentityTlsCertAuthForm } from "./IdentityTlsCertAuthForm";
 import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
@@ -52,6 +53,7 @@ const identityAuthMethods = [
   { label: "OCI Auth", value: IdentityAuthMethod.OCI_AUTH },
   { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH },
   { label: "LDAP Auth", value: IdentityAuthMethod.LDAP_AUTH },
+  { label: "TLS Certificate Auth", value: IdentityAuthMethod.TLS_CERT_AUTH },
   {
     label: "JWT Auth",
     value: IdentityAuthMethod.JWT_AUTH
@@ -123,6 +125,15 @@ export const IdentityAuthMethodModalContent = ({
         />
       )
     },
+    [IdentityAuthMethod.TLS_CERT_AUTH]: {
+      render: () => (
+        <IdentityTlsCertAuthForm
+          identityId={identityAuthMethodData.identityId}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
+    },
 
     [IdentityAuthMethod.OIDC_AUTH]: {
       render: () => (

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

@@ -1,4 +1,4 @@
-import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -71,20 +71,22 @@ export const IdentitySection = withPermission(
 
     return (
       <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex justify-between">
-          <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
-          <div className="flex w-full justify-end pr-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-1">
+            <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
             <a
+              href="https://infisical.com/docs/documentation/platform/identities/overview"
               target="_blank"
               rel="noopener noreferrer"
-              href="https://infisical.com/docs/documentation/platform/identities/overview"
-              className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white"
             >
-              Documentation{" "}
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.06rem] ml-1 text-xs"
-              />
+              <div className="ml-1 mt-[0.16rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                <span>Docs</span>
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1.5 text-[10px]"
+                />
+              </div>
             </a>
           </div>
           <OrgPermissionCan
@@ -93,7 +95,7 @@ export const IdentitySection = withPermission(
           >
             {(isAllowed) => (
               <Button
-                colorSchema="primary"
+                colorSchema="secondary"
                 type="submit"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => {

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

@@ -1,12 +1,15 @@
-import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useCallback, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
-  faEllipsis,
+  faCheckCircle,
+  faChevronRight,
+  faEdit,
+  faEllipsisV,
   faFilter,
   faMagnifyingGlass,
-  faServer
+  faServer,
+  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
@@ -15,19 +18,18 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuTrigger,
+  DropdownSubMenu,
+  DropdownSubMenuContent,
+  DropdownSubMenuTrigger,
   EmptyState,
-  FormControl,
   IconButton,
   Input,
   Pagination,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
   Select,
   SelectItem,
   Spinner,
@@ -38,7 +40,6 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
@@ -63,6 +64,10 @@ type Props = {
   ) => void;
 };
 
+type Filter = {
+  roles: string[];
+};
+
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
@@ -90,7 +95,9 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     setUserTablePreference("identityTable", PreferenceKey.PerPage, newPerPage);
   };
 
-  const [filteredRoles, setFilteredRoles] = useState<string[]>([]);
+  const [filter, setFilter] = useState<Filter>({
+    roles: []
+  });
 
   const organizationId = currentOrg?.id || "";
 
@@ -103,7 +110,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     orderBy,
     search: {
       name: debouncedSearch ? { $contains: debouncedSearch } : undefined,
-      role: filteredRoles?.length ? { $in: filteredRoles } : undefined
+      role: filter.roles?.length ? { $in: filter.roles } : undefined
     }
   });
 
@@ -113,7 +120,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     offset,
     setPage
   });
-  const filterForm = useForm<{ roles: string }>();
 
   const { data: roles } = useGetOrgRoles(organizationId);
 
@@ -153,79 +159,80 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
     }
   };
 
+  const handleRoleToggle = useCallback(
+    (roleSlug: string) =>
+      setFilter((state) => {
+        const currentRoles = state.roles || [];
+
+        if (currentRoles.includes(roleSlug)) {
+          return { ...state, roles: currentRoles.filter((role) => role !== roleSlug) };
+        }
+        return { ...state, roles: [...currentRoles, roleSlug] };
+      }),
+    []
+  );
+
+  const isTableFiltered = Boolean(filter.roles.length);
+
   return (
     <div>
       <div className="mb-4 flex items-center space-x-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Identities"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
+            <DropdownSubMenu>
+              <DropdownSubMenuTrigger
+                iconPos="right"
+                icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
+              >
+                Roles
+              </DropdownSubMenuTrigger>
+              <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  Apply Roles to Filter Identities
+                </DropdownMenuLabel>
+                {roles?.map(({ id, slug, name }) => (
+                  <DropdownMenuItem
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      handleRoleToggle(slug);
+                    }}
+                    key={id}
+                    icon={filter.roles.includes(slug) && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center">
+                      <div
+                        className="mr-2 h-2 w-2 rounded-full"
+                        style={{ background: "#bec2c8" }}
+                      />
+                      {name}
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownSubMenuContent>
+            </DropdownSubMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
         <Input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
           placeholder="Search identities by name..."
         />
-        <div>
-          <Popover>
-            <PopoverTrigger>
-              <IconButton
-                ariaLabel="filter"
-                variant="outline_bg"
-                className={filteredRoles?.length ? "border-primary" : ""}
-              >
-                <Tooltip content="Advance Filter">
-                  <FontAwesomeIcon icon={faFilter} />
-                </Tooltip>
-              </IconButton>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl">
-              <div className="mb-4 border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
-                Advance Filter
-              </div>
-              <form
-                onSubmit={filterForm.handleSubmit((el) => {
-                  setFilteredRoles(el.roles?.split(",")?.filter(Boolean) || []);
-                })}
-              >
-                <Controller
-                  control={filterForm.control}
-                  name="roles"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Roles"
-                      helperText="Eg: admin,viewer"
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-                <div className="flex items-center space-x-2">
-                  <Button
-                    type="submit"
-                    size="xs"
-                    colorSchema="primary"
-                    variant="outline_bg"
-                    className="mt-4"
-                  >
-                    Apply Filter
-                  </Button>
-                  {Boolean(filteredRoles.length) && (
-                    <Button
-                      size="xs"
-                      variant="link"
-                      className="ml-4 mt-4"
-                      onClick={() => {
-                        filterForm.reset({ roles: "" });
-                        setFilteredRoles([]);
-                      }}
-                    >
-                      Clear
-                    </Button>
-                  )}
-                </div>
-              </form>
-            </PopoverContent>
-          </Popover>
-        </div>
       </div>
       <TableContainer>
         <Table>
@@ -251,8 +258,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                   </IconButton>
                 </div>
               </Th>
-              <Th>Role</Th>
-              {/* <Th>
+              <Th>
                 <div className="flex items-center">
                   Role
                   <IconButton
@@ -271,7 +277,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                     />
                   </IconButton>
                 </div>
-              </Th> */}
+              </Th>
               <Th className="w-16">{isFetching ? <Spinner size="xs" /> : null}</Th>
             </Tr>
           </THead>
@@ -303,7 +309,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             <Select
                               value={role === "custom" ? (customRole?.slug as string) : role}
                               isDisabled={!isAllowed}
-                              className="w-48 bg-mineshaft-600"
+                              className="h-8 w-48 bg-mineshaft-700"
+                              position="popper"
                               dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
                               onValueChange={(selectedRole) =>
                                 handleChangeRole({
@@ -324,21 +331,24 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                     </Td>
                     <Td>
                       <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="flex justify-center hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                          </div>
+                        <DropdownMenuTrigger asChild>
+                          <IconButton
+                            ariaLabel="Options"
+                            className="w-6"
+                            colorSchema="secondary"
+                            variant="plain"
+                          >
+                            <FontAwesomeIcon icon={faEllipsisV} />
+                          </IconButton>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="mt-3 p-1">
+                        <DropdownMenuContent sideOffset={2} align="end">
                           <OrgPermissionCan
                             I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
+                                icon={<FontAwesomeIcon icon={faEdit} />}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   navigate({
@@ -348,7 +358,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                                     }
                                   });
                                 }}
-                                disabled={!isAllowed}
+                                isDisabled={!isAllowed}
                               >
                                 Edit Identity
                               </DropdownMenuItem>
@@ -360,11 +370,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
-                                className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   handlePopUpOpen("deleteIdentity", {
@@ -372,7 +377,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                                     name
                                   });
                                 }}
-                                disabled={!isAllowed}
+                                isDisabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
                               >
                                 Delete Identity
                               </DropdownMenuItem>
@@ -398,7 +404,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
         {!isPending && data && data?.identities.length === 0 && (
           <EmptyState
             title={
-              debouncedSearch.trim().length > 0 || filteredRoles?.length > 0
+              debouncedSearch.trim().length > 0 || filter.roles?.length > 0
                 ? "No identities match search filter"
                 : "No identities have been created in this organization"
             }

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

@@ -0,0 +1,358 @@
+import { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextArea
+} from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+  useAddIdentityTlsCertAuth,
+  useGetIdentityTlsCertAuth,
+  useUpdateIdentityTlsCertAuth
+} from "@app/hooks/api";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { IdentityFormTab } from "./types";
+
+const schema = z.object({
+  allowedCommonNames: z.string().optional(),
+  caCertificate: z.string().min(1),
+  accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token TTL cannot be greater than 315360000"
+  }),
+  accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token Max TTL cannot be greater than 315360000"
+  }),
+  accessTokenNumUsesLimit: z.string(),
+  accessTokenTrustedIps: z
+    .array(
+      z.object({
+        ipAddress: z.string().max(50)
+      })
+    )
+    .min(1)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityId?: string;
+  isUpdate?: boolean;
+};
+
+export const IdentityTlsCertAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityId,
+  isUpdate
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityTlsCertAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityTlsCertAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
+
+  const { data } = useGetIdentityTlsCertAuth(identityId ?? "", {
+    enabled: isUpdate
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      caCertificate: "",
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+    }
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        caCertificate: data.caCertificate,
+        allowedCommonNames: data.allowedCommonNames || undefined,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        caCertificate: "",
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({
+    caCertificate,
+    allowedCommonNames,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityId) return;
+
+      if (data) {
+        await updateMutateAsync({
+          organizationId: orgId,
+          caCertificate,
+          allowedCommonNames: allowedCommonNames || null,
+          identityId,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId,
+          caCertificate,
+          allowedCommonNames: allowedCommonNames || undefined,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch {
+      createNotification({
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
+        <TabList>
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
+        </TabList>
+        <TabPanel value={IdentityFormTab.Configuration}>
+          <Controller
+            control={control}
+            name="caCertificate"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                tooltipText="A PEM-encoded CA certificate. This will be used to validate client certificate."
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            defaultValue=""
+            name="allowedCommonNames"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Common Names"
+                isError={Boolean(error)}
+                isOptional
+                errorText={error?.message}
+                tooltipText="Comma separated common names allowed to authenticate against the identity. Leave empty to allow any certificate."
+              >
+                <Input {...field} placeholder="" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                tooltipText="The lifetime for an access token in seconds. This value will be referenced at renewal time."
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
+
+                          handlePopUpOpen("upgradePlan");
+                        }}
+                        placeholder="123.456.789.0"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => {
+                  if (subscription?.ipAllowlisting) {
+                    removeAccessTokenTrustedIp(index);
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {isUpdate ? "Update" : "Add"}
+        </Button>
+
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -115,12 +115,12 @@ export const OrgMembersSection = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Users</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => handleAddMemberModal()}

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -4,11 +4,14 @@ import {
   faArrowUp,
   faCheckCircle,
   faChevronRight,
-  faEllipsis,
+  faEdit,
+  faEllipsisV,
   faFilter,
   faMagnifyingGlass,
   faSearch,
-  faUsers
+  faUsers,
+  faUserSlash,
+  faUserXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
@@ -79,7 +82,8 @@ type Props = {
 
 enum OrgMembersOrderBy {
   Name = "firstName",
-  Email = "email"
+  Email = "email",
+  Role = "role"
 }
 
 type Filter = {
@@ -99,8 +103,10 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
   const { data: serverDetails } = useFetchServerStatus();
   const { data: members = [], isPending: isMembersLoading } = useGetOrgUsers(orgId);
 
-  const { mutateAsync: resendOrgMemberInvitation } = useResendOrgMemberInvitation();
+  const { mutateAsync: resendOrgMemberInvitation, isPending: isResendInvitePending } =
+    useResendOrgMemberInvitation();
   const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
+  const [resendInviteId, setResendInviteId] = useState<string | null>(null);
 
   const onRoleChange = async (membershipId: string, role: string) => {
     if (!currentOrg?.id) return;
@@ -136,6 +142,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
   };
 
   const onResendInvite = async (membershipId: string) => {
+    setResendInviteId(membershipId);
     try {
       const signupToken = await resendOrgMemberInvitation({
         membershipId
@@ -156,6 +163,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
         text: "Failed to resend org invitation",
         type: "error"
       });
+    } finally {
+      setResendInviteId(null);
     }
   };
 
@@ -229,6 +238,16 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
               valueOne = memberOne.user.email || memberOne.inviteEmail;
               valueTwo = memberTwo.user.email || memberTwo.inviteEmail;
               break;
+            case OrgMembersOrderBy.Role:
+              valueOne =
+                memberOne.role === "custom"
+                  ? findRoleFromId(memberOne.roleId)!.slug
+                  : memberOne.role;
+              valueTwo =
+                memberTwo.role === "custom"
+                  ? findRoleFromId(memberTwo.roleId)!.slug
+                  : memberTwo.role;
+              break;
             case OrgMembersOrderBy.Name:
             default:
               valueOne = memberOne.user.firstName;
@@ -284,7 +303,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -378,7 +397,26 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                   </IconButton>
                 </div>
               </Th>
-              <Th>Role</Th>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Role
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Role ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(OrgMembersOrderBy.Role)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC &&
+                        orderBy === OrgMembersOrderBy.Role
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
               <Th className="w-5" />
             </Tr>
           </THead>
@@ -398,7 +436,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                     isActive
                   }) => {
                     const name =
-                      u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : "-";
+                      u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : null;
                     const email = u?.email || inviteEmail;
                     const username = u?.username ?? inviteEmail ?? "-";
                     return (
@@ -415,7 +453,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                         }
                       >
                         <Td className={isActive ? "" : "text-mineshaft-400"}>
-                          {name}
+                          {name ?? <span className="text-mineshaft-400">Not Set</span>}
                           {u.superAdmin && (
                             <Badge variant="primary" className="ml-2">
                               Server Admin
@@ -429,79 +467,77 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                             a={OrgPermissionSubjects.Member}
                           >
                             {(isAllowed) => (
-                              <>
-                                {!isActive && (
-                                  <Button
-                                    isDisabled
-                                    className="w-40"
-                                    colorSchema="primary"
-                                    variant="outline_bg"
-                                    onClick={() => {}}
-                                  >
-                                    Suspended
-                                  </Button>
-                                )}
-                                {isActive && status === "accepted" && (
-                                  <Select
-                                    value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
-                                    isDisabled={userId === u?.id || !isAllowed}
-                                    className="w-48 bg-mineshaft-600"
-                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                    onValueChange={(selectedRole) =>
-                                      onRoleChange(orgMembershipId, selectedRole)
-                                    }
-                                  >
-                                    {(roles || [])
-                                      .filter(({ slug }) =>
-                                        slug === "owner" ? isIamOwner || role === "owner" : true
-                                      )
-                                      .map(({ slug, name: roleName }) => (
-                                        <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                          {roleName}
-                                        </SelectItem>
-                                      ))}
-                                  </Select>
-                                )}
-                                {isActive &&
-                                  (status === "invited" || status === "verified") &&
-                                  email &&
-                                  serverDetails?.emailConfigured && (
+                              <Select
+                                value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
+                                isDisabled={userId === u?.id || !isAllowed}
+                                className="h-8 w-48 bg-mineshaft-700"
+                                position="popper"
+                                dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                onValueChange={(selectedRole) =>
+                                  onRoleChange(orgMembershipId, selectedRole)
+                                }
+                              >
+                                {(roles || [])
+                                  .filter(({ slug }) =>
+                                    slug === "owner" ? isIamOwner || role === "owner" : true
+                                  )
+                                  .map(({ slug, name: roleName }) => (
+                                    <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                      {roleName}
+                                    </SelectItem>
+                                  ))}
+                              </Select>
+                            )}
+                          </OrgPermissionCan>
+                        </Td>
+                        <Td>
+                          <div className="flex items-center justify-end gap-6">
+                            {isActive &&
+                              (status === "invited" || status === "verified") &&
+                              email &&
+                              serverDetails?.emailConfigured && (
+                                <OrgPermissionCan
+                                  I={OrgPermissionActions.Edit}
+                                  a={OrgPermissionSubjects.Member}
+                                >
+                                  {(isAllowed) => (
                                     <Button
-                                      isDisabled={!isAllowed}
-                                      className="w-48"
+                                      isDisabled={!isAllowed || isResendInvitePending}
+                                      className="h-8 border-mineshaft-600 bg-mineshaft-700 font-normal"
                                       colorSchema="primary"
                                       variant="outline_bg"
+                                      isLoading={
+                                        isResendInvitePending && resendInviteId === orgMembershipId
+                                      }
                                       onClick={(e) => {
                                         onResendInvite(orgMembershipId);
                                         e.stopPropagation();
                                       }}
                                     >
-                                      Resend invite
+                                      Resend Invite
                                     </Button>
                                   )}
-                              </>
-                            )}
-                          </OrgPermissionCan>
-                        </Td>
-                        <Td>
-                          {userId !== u?.id && (
+                                </OrgPermissionCan>
+                              )}
                             <DropdownMenu>
-                              <DropdownMenuTrigger asChild className="rounded-lg">
-                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                                </div>
+                              <DropdownMenuTrigger asChild>
+                                <IconButton
+                                  ariaLabel="Options"
+                                  colorSchema="secondary"
+                                  className={twMerge("w-6", userId === u?.id && "opacity-50")}
+                                  variant="plain"
+                                  isDisabled={userId === u?.id}
+                                >
+                                  <FontAwesomeIcon icon={faEllipsisV} />
+                                </IconButton>
                               </DropdownMenuTrigger>
-                              <DropdownMenuContent align="start" className="p-1">
+                              <DropdownMenuContent sideOffset={2} align="end">
                                 <OrgPermissionCan
                                   I={OrgPermissionActions.Edit}
                                   a={OrgPermissionSubjects.Member}
                                 >
                                   {(isAllowed) => (
                                     <DropdownMenuItem
-                                      className={twMerge(
-                                        !isAllowed &&
-                                          "pointer-events-none cursor-not-allowed opacity-50"
-                                      )}
                                       onClick={(e) => {
                                         e.stopPropagation();
                                         navigate({
@@ -511,7 +547,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                           }
                                         });
                                       }}
-                                      disabled={!isAllowed}
+                                      isDisabled={!isAllowed}
+                                      icon={<FontAwesomeIcon icon={faEdit} />}
                                     >
                                       Edit User
                                     </DropdownMenuItem>
@@ -523,15 +560,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                 >
                                   {(isAllowed) => (
                                     <DropdownMenuItem
-                                      className={
-                                        isActive
-                                          ? twMerge(
-                                              isAllowed
-                                                ? "hover:!bg-red-500 hover:!text-white"
-                                                : "pointer-events-none cursor-not-allowed opacity-50"
-                                            )
-                                          : ""
-                                      }
+                                      icon={<FontAwesomeIcon icon={faUserSlash} />}
                                       onClick={async (e) => {
                                         e.stopPropagation();
 
@@ -560,7 +589,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                           username
                                         });
                                       }}
-                                      disabled={!isAllowed}
+                                      isDisabled={!isAllowed}
                                     >
                                       {`${isActive ? "Deactivate" : "Activate"} User`}
                                     </DropdownMenuItem>
@@ -572,11 +601,6 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                 >
                                   {(isAllowed) => (
                                     <DropdownMenuItem
-                                      className={twMerge(
-                                        isAllowed
-                                          ? "hover:!bg-red-500 hover:!text-white"
-                                          : "pointer-events-none cursor-not-allowed opacity-50"
-                                      )}
                                       onClick={(e) => {
                                         e.stopPropagation();
 
@@ -593,7 +617,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                           username
                                         });
                                       }}
-                                      disabled={!isAllowed}
+                                      isDisabled={!isAllowed}
+                                      icon={<FontAwesomeIcon icon={faUserXmark} />}
                                     >
                                       Remove User
                                     </DropdownMenuItem>
@@ -601,7 +626,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                 </OrgPermissionCan>
                               </DropdownMenuContent>
                             </DropdownMenu>
-                          )}
+                          </div>
                         </Td>
                       </Tr>
                     );

frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -6,10 +6,10 @@ export const OrgRoleTabSection = () => {
   return (
     <motion.div
       key="role-list"
-      transition={{ duration: 0.1 }}
-      initial={{ opacity: 0, translateX: -30 }}
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
       animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: -30 }}
+      exit={{ opacity: 0, translateX: 30 }}
     >
       <OrgRoleTable />
     </motion.div>

frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -1,4 +1,17 @@
-import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faCopy,
+  faEdit,
+  faEllipsisV,
+  faEye,
+  faIdBadge,
+  faMagnifyingGlass,
+  faPlus,
+  faSearch,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
@@ -14,6 +27,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -30,13 +47,25 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
-import { isCustomOrgRole } from "@app/helpers/roles";
-import { usePopUp } from "@app/hooks";
+import { isCustomOrgRole, isCustomProjectRole } from "@app/helpers/roles";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useDeleteOrgRole, useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { TOrgRole } from "@app/hooks/api/roles/types";
 import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { RoleModal } from "@app/pages/organization/RoleByIDPage/components/RoleModal";
 
+enum RolesOrderBy {
+  Name = "name",
+  Slug = "slug",
+  Type = "type"
+}
+
 export const OrgRoleTable = () => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
@@ -93,14 +122,89 @@ export const OrgRoleTable = () => {
     }
   };
 
+  const {
+    orderDirection,
+    toggleOrderDirection,
+    orderBy,
+    setOrderDirection,
+    setOrderBy,
+    search,
+    setSearch,
+    page,
+    perPage,
+    setPerPage,
+    setPage,
+    offset
+  } = usePagination<RolesOrderBy>(RolesOrderBy.Type, {
+    initPerPage: getUserTablePreference("orgRolesTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("orgRolesTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const filteredRoles = useMemo(
+    () =>
+      roles
+        ?.filter((role) => {
+          const { slug, name } = role;
+
+          const searchValue = search.trim().toLowerCase();
+
+          return (
+            name.toLowerCase().includes(searchValue) || slug.toLowerCase().includes(searchValue)
+          );
+        })
+        .sort((a, b) => {
+          const [roleOne, roleTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          switch (orderBy) {
+            case RolesOrderBy.Slug:
+              return roleOne.slug.toLowerCase().localeCompare(roleTwo.slug.toLowerCase());
+            case RolesOrderBy.Type: {
+              const roleOneValue = isCustomOrgRole(roleOne.slug) ? -1 : 1;
+              const roleTwoValue = isCustomOrgRole(roleTwo.slug) ? -1 : 1;
+
+              return roleTwoValue - roleOneValue;
+            }
+            case RolesOrderBy.Name:
+            default:
+              return roleOne.name.toLowerCase().localeCompare(roleTwo.name.toLowerCase());
+          }
+        }) ?? [],
+    [roles, orderDirection, search, orderBy]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredRoles.length,
+    offset,
+    setPage
+  });
+
+  const handleSort = (column: RolesOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  const getClassName = (col: RolesOrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+
+  const getColSortIcon = (col: RolesOrderBy) =>
+    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
+
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex items-center justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Organization Roles</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
           {(isAllowed) => (
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => {
@@ -113,18 +217,63 @@ export const OrgRoleTable = () => {
           )}
         </OrgPermissionCan>
       </div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search roles..."
+        className="flex-1"
+        containerClassName="mb-4"
+      />
       <TableContainer>
         <Table>
           <THead>
             <Tr>
-              <Th>Name</Th>
-              <Th>Slug</Th>
+              <Th>
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Name)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Name)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex items-center">
+                  Slug
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Slug)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Slug)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Slug)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex items-center">
+                  Type
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(RolesOrderBy.Type)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(RolesOrderBy.Type)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(RolesOrderBy.Type)} />
+                  </IconButton>
+                </div>
+              </Th>
               <Th aria-label="actions" className="w-5" />
             </Tr>
           </THead>
           <TBody>
-            {isRolesLoading && <TableSkeleton columns={3} innerKey="org-roles" />}
-            {roles?.map((role) => {
+            {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
+            {filteredRoles?.slice(offset, perPage * page).map((role) => {
               const { id, name, slug } = role;
               const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
               const isDefaultOrgRole = isCustomOrgRole(slug)
@@ -162,23 +311,30 @@ export const OrgRoleTable = () => {
                   <Td className="max-w-md overflow-hidden text-ellipsis whitespace-nowrap">
                     {slug}
                   </Td>
+                  <Td>
+                    <Badge className="w-min whitespace-nowrap bg-mineshaft-400/50 text-bunker-200">
+                      {isCustomProjectRole(slug) ? "Custom" : "Default"}
+                    </Badge>
+                  </Td>
                   <Td>
                     <DropdownMenu>
-                      <DropdownMenuTrigger asChild className="rounded-lg">
-                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                        </div>
+                      <DropdownMenuTrigger asChild>
+                        <IconButton
+                          ariaLabel="Options"
+                          colorSchema="secondary"
+                          className="w-6"
+                          variant="plain"
+                        >
+                          <FontAwesomeIcon icon={faEllipsisV} />
+                        </IconButton>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="p-1">
+                      <DropdownMenuContent className="min-w-[12rem]" sideOffset={2} align="end">
                         <OrgPermissionCan
                           I={OrgPermissionActions.Edit}
                           a={OrgPermissionSubjects.Role}
                         >
                           {(isAllowed) => (
                             <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 navigate({
@@ -188,7 +344,8 @@ export const OrgRoleTable = () => {
                                   }
                                 });
                               }}
-                              disabled={!isAllowed}
+                              isDisabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={isNonMutatable ? faEye : faEdit} />}
                             >
                               {`${isNonMutatable ? "View" : "Edit"} Role`}
                             </DropdownMenuItem>
@@ -200,14 +357,12 @@ export const OrgRoleTable = () => {
                         >
                           {(isAllowed) => (
                             <DropdownMenuItem
-                              className={twMerge(
-                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                              )}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 handlePopUpOpen("duplicateRole", role);
                               }}
-                              disabled={!isAllowed}
+                              isDisabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faCopy} />}
                             >
                               Duplicate Role
                             </DropdownMenuItem>
@@ -220,14 +375,12 @@ export const OrgRoleTable = () => {
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                disabled={!isAllowed}
+                                isDisabled={!isAllowed}
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   handleSetRoleAsDefault(slug);
                                 }}
+                                icon={<FontAwesomeIcon icon={faIdBadge} />}
                               >
                                 Set as Default Role
                               </DropdownMenuItem>
@@ -250,16 +403,12 @@ export const OrgRoleTable = () => {
                               >
                                 {(isAllowed) => (
                                   <DropdownMenuItem
-                                    className={twMerge(
-                                      isAllowed && !isDefaultOrgRole
-                                        ? "hover:!bg-red-500 hover:!text-white"
-                                        : "pointer-events-none cursor-not-allowed opacity-50"
-                                    )}
                                     onClick={(e) => {
                                       e.stopPropagation();
                                       handlePopUpOpen("deleteRole", role);
                                     }}
-                                    disabled={!isAllowed || isDefaultOrgRole}
+                                    icon={<FontAwesomeIcon icon={faTrash} />}
+                                    isDisabled={!isAllowed || isDefaultOrgRole}
                                   >
                                     Delete Role
                                   </DropdownMenuItem>
@@ -276,6 +425,25 @@ export const OrgRoleTable = () => {
             })}
           </TBody>
         </Table>
+        {Boolean(filteredRoles?.length) && (
+          <Pagination
+            count={filteredRoles!.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {!filteredRoles?.length && !isRolesLoading && (
+          <EmptyState
+            title={
+              roles?.length
+                ? "No roles match search..."
+                : "This organization does not have any roles"
+            }
+            icon={roles?.length ? faSearch : undefined}
+          />
+        )}
       </TableContainer>
       <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal

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

@@ -15,6 +15,7 @@ import {
   useDeleteIdentityLdapAuth,
   useDeleteIdentityOciAuth,
   useDeleteIdentityOidcAuth,
+  useDeleteIdentityTlsCertAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth
 } from "@app/hooks/api";
@@ -29,6 +30,7 @@ import { ViewIdentityKubernetesAuthContent } from "./ViewIdentityKubernetesAuthC
 import { ViewIdentityLdapAuthContent } from "./ViewIdentityLdapAuthContent";
 import { ViewIdentityOciAuthContent } from "./ViewIdentityOciAuthContent";
 import { ViewIdentityOidcAuthContent } from "./ViewIdentityOidcAuthContent";
+import { ViewIdentityTlsCertAuthContent } from "./ViewIdentityTlsCertAuthContent";
 import { ViewIdentityTokenAuthContent } from "./ViewIdentityTokenAuthContent";
 import { ViewIdentityUniversalAuthContent } from "./ViewIdentityUniversalAuthContent";
 
@@ -63,6 +65,7 @@ export const Content = ({
   const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
   const { mutateAsync: revokeKubernetesAuth } = useDeleteIdentityKubernetesAuth();
   const { mutateAsync: revokeGcpAuth } = useDeleteIdentityGcpAuth();
+  const { mutateAsync: revokeTlsCertAuth } = useDeleteIdentityTlsCertAuth();
   const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeAliCloudAuth } = useDeleteIdentityAliCloudAuth();
@@ -93,6 +96,10 @@ export const Content = ({
       revokeMethod = revokeGcpAuth;
       Component = ViewIdentityGcpAuthContent;
       break;
+    case IdentityAuthMethod.TLS_CERT_AUTH:
+      revokeMethod = revokeTlsCertAuth;
+      Component = ViewIdentityTlsCertAuthContent;
+      break;
     case IdentityAuthMethod.AWS_AUTH:
       revokeMethod = revokeAwsAuth;
       Component = ViewIdentityAwsAuthContent;

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

@@ -0,0 +1,88 @@
+import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { useGetIdentityTlsCertAuth } from "@app/hooks/api";
+import { IdentityTlsCertAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTlsCertAuthForm";
+
+import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
+import { ViewAuthMethodProps } from "./types";
+import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
+
+export const ViewIdentityTlsCertAuthContent = ({
+  identityId,
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
+}: ViewAuthMethodProps) => {
+  const { data, isPending } = useGetIdentityTlsCertAuth(identityId);
+
+  if (isPending) {
+    return (
+      <div className="flex w-full items-center justify-center">
+        <Spinner className="text-mineshaft-400" />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <EmptyState
+        icon={faBan}
+        title="Could not find TLS Certificate Auth associated with this Identity."
+      />
+    );
+  }
+
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityTlsCertAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
+  return (
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
+        <Tooltip
+          side="right"
+          className="max-w-xl p-2"
+          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCertificate}</p>}
+        >
+          <div className="w-min">
+            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+              <FontAwesomeIcon icon={faEye} />
+              <span>Reveal</span>
+            </Badge>
+          </div>
+        </Tooltip>
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Common Names">
+        {data.allowedCommonNames
+          ?.split(",")
+          .map((cn) => cn.trim())
+          .join(", ")}
+      </IdentityAuthFieldDisplay>
+    </ViewIdentityContentWrapper>
+  );
+};

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx

@@ -197,7 +197,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
               variant="plain"
               size="sm"
               className={twMerge(
-                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                "flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
                 isTableFiltered && "border-primary/50 text-primary"
               )}
             >
@@ -298,7 +298,8 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
             {!isMembersLoading &&
               filteredUsers.slice(offset, perPage * page).map((projectMember) => {
                 const { user: u, inviteEmail, id: membershipId, roles } = projectMember;
-                const name = u.firstName || u.lastName ? `${u.firstName} ${u.lastName || ""}` : "-";
+                const name =
+                  u.firstName || u.lastName ? `${u.firstName} ${u.lastName || ""}` : null;
                 const email = u?.email || inviteEmail;
 
                 return (
@@ -328,7 +329,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
                       })
                     }
                   >
-                    <Td>{name}</Td>
+                    <Td>{name ?? <span className="text-mineshaft-400">Not Set</span>}</Td>
                     <Td>{email}</Td>
                     <Td>
                       <div className="flex items-center space-x-2">

frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -236,7 +236,7 @@ export const ProjectRoleList = () => {
             </Tr>
           </THead>
           <TBody>
-            {isRolesLoading && <TableSkeleton columns={3} innerKey="project-roles" />}
+            {isRolesLoading && <TableSkeleton columns={4} innerKey="project-roles" />}
             {filteredRoles?.slice(offset, perPage * page).map((role) => {
               const { id, name, slug } = role;
               const isNonMutatable = Object.values(ProjectMembershipRole).includes(

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx

@@ -12,7 +12,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Button, Checkbox, Select, SelectItem, Tag, Tooltip } from "@app/components/v2";
+import { Button, Checkbox, IconButton, Select, SelectItem, Tag, Tooltip } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 
@@ -241,16 +241,19 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                         />
                       </Tooltip>
                       {!isDisabled && (
-                        <Button
-                          leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                          variant="outline_bg"
-                          size="xs"
-                          className="ml-auto mr-3"
-                          onClick={() => remove(rootIndex)}
-                          isDisabled={isDisabled}
-                        >
-                          Remove Rule
-                        </Button>
+                        <Tooltip content="Remove Rule">
+                          <IconButton
+                            ariaLabel="Remove rule"
+                            colorSchema="danger"
+                            variant="plain"
+                            size="xs"
+                            className="ml-auto mr-3 rounded"
+                            onClick={() => remove(rootIndex)}
+                            isDisabled={isDisabled}
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        </Tooltip>
                       )}
                       {!isDisabled && (
                         <Tooltip position="left" content="Drag to reorder permission">
@@ -271,16 +274,19 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                   <div className="flex w-full justify-between">
                     <div className="mb-2">Actions</div>
                     {!isDisabled && !isConditionalSubjects(subject) && (
-                      <Button
-                        leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                        variant="outline_bg"
-                        size="xs"
-                        className="ml-auto"
-                        onClick={() => remove(rootIndex)}
-                        isDisabled={isDisabled}
-                      >
-                        Remove Rule
-                      </Button>
+                      <Tooltip content="Remove Rule">
+                        <IconButton
+                          ariaLabel="Remove rule"
+                          colorSchema="danger"
+                          variant="plain"
+                          size="xs"
+                          className="ml-auto rounded"
+                          onClick={() => remove(rootIndex)}
+                          isDisabled={isDisabled}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      </Tooltip>
                     )}
                   </div>
                   <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -247,9 +247,7 @@ export const AccessApprovalRequest = ({
         };
       else if (userReviewStatus === ApprovalStatus.APPROVED) {
         displayData = {
-          label: `Pending ${request.policy.approvals - request.reviewers.length} review${
-            request.policy.approvals - request.reviewers.length > 1 ? "s" : ""
-          }`,
+          label: "Pending Additional Reviews",
           type: "primary",
           icon: faClipboardCheck
         };

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -1,10 +1,9 @@
-import { useCallback, useMemo, useState } from "react";
+import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
-  faCheckCircle,
-  faCircle,
-  faTriangleExclamation,
-  faUsers,
-  faXmarkCircle
+  faBan,
+  faCheck,
+  faHourglass,
+  faTriangleExclamation
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
@@ -15,12 +14,10 @@ import {
   Button,
   Checkbox,
   FormControl,
+  GenericFieldLabel,
   Input,
   Modal,
   ModalContent,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
   Tooltip
 } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
@@ -38,10 +35,22 @@ import { groupBy } from "@app/lib/fn/array";
 
 const getReviewedStatusSymbol = (status?: ApprovalStatus) => {
   if (status === ApprovalStatus.APPROVED)
-    return <FontAwesomeIcon icon={faCheckCircle} size="xs" style={{ color: "#15803d" }} />;
+    return (
+      <Badge variant="success" className="flex h-4 items-center justify-center">
+        <FontAwesomeIcon icon={faCheck} size="xs" />
+      </Badge>
+    );
   if (status === ApprovalStatus.REJECTED)
-    return <FontAwesomeIcon icon={faXmarkCircle} size="xs" style={{ color: "#b91c1c" }} />;
-  return <FontAwesomeIcon icon={faCircle} size="xs" style={{ color: "#c2410c" }} />;
+    return (
+      <Badge variant="danger" className="flex h-4 items-center justify-center">
+        <FontAwesomeIcon icon={faBan} size="xs" />
+      </Badge>
+    );
+  return (
+    <Badge variant="primary" className="flex h-4 items-center justify-center">
+      <FontAwesomeIcon icon={faHourglass} size="xs" />
+    </Badge>
+  );
 };
 
 export const ReviewAccessRequestModal = ({
@@ -267,139 +276,160 @@ export const ReviewAccessRequestModal = ({
         </div>
         <div className="">
           <div className="mb-2 mt-4 text-mineshaft-200">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <div className="mb-1 text-xs font-semibold uppercase">Environment</div>
-                <div>{accessDetails.env || "-"}</div>
-              </div>
-              <div>
-                <div className="mb-1 text-xs font-semibold uppercase">Secret Path</div>
-                <div>{accessDetails.secretPath || "-"}</div>
-              </div>
-              <div>
-                <div className="mb-1 text-xs font-semibold uppercase">Access Type</div>
-                <div>{getAccessLabel()}</div>
-              </div>
-              <div>
-                <div className="mb-1 text-xs font-semibold uppercase">Permission</div>
-                <div>{requestedAccess}</div>
-              </div>
-              <div className="col-span-2">
-                <div className="mb-1 text-xs font-semibold uppercase">Note</div>
-                <div>{request.note || "-"}</div>
-              </div>
+            <div className="flex flex-wrap gap-8">
+              <GenericFieldLabel label="Environment">{accessDetails.env}</GenericFieldLabel>
+              <GenericFieldLabel truncate label="Secret Path">
+                {accessDetails.secretPath}
+              </GenericFieldLabel>
+              <GenericFieldLabel label="Access Type">{getAccessLabel()}</GenericFieldLabel>
+              <GenericFieldLabel label="Permission">{requestedAccess}</GenericFieldLabel>
+              {request.note && (
+                <GenericFieldLabel className="col-span-full" label="Note">
+                  {request.note}
+                </GenericFieldLabel>
+              )}
             </div>
           </div>
-          <div className="mb-4 border-b-2 border-mineshaft-500 py-2 text-lg">Approvers</div>
-          <div className="thin-scrollbar max-h-64 overflow-y-auto rounded p-2">
-            {approverSequence?.approvers?.map((approver, index) => (
-              <div
-                key={`approval-list-${index + 1}`}
-                className={twMerge(
-                  "relative mb-2 flex items-center rounded border border-mineshaft-500 bg-mineshaft-700 p-4",
-                  approverSequence?.currentSequence !== approver.sequence &&
-                    !hasApproved &&
-                    "text-mineshaft-400"
-                )}
-              >
-                <div>
-                  <div
-                    className={twMerge(
-                      "mr-8 flex h-8 w-8 items-center justify-center text-3xl font-medium",
-                      approver.hasApproved && "border-green-400 text-green-400",
-                      approver.hasRejected && "border-red-500 text-red-500"
-                    )}
-                  >
-                    {index + 1}
-                  </div>
-                  {index !== (approverSequence?.approvers?.length || 0) - 1 && (
-                    <div
-                      className={twMerge(
-                        "absolute bottom-0 left-8 h-5 border-r-2 border-gray-400",
-                        approver.hasApproved && "border-green-400",
-                        approver.hasRejected && "border-red-500"
-                      )}
-                    />
-                  )}
-                  {index !== 0 && (
-                    <div
-                      className={twMerge(
-                        "absolute left-8 top-0 h-5 border-r-2 border-gray-400",
-                        approver.hasApproved && "border-green-400",
-                        approver.hasRejected && "border-red-500"
-                      )}
-                    />
-                  )}
-                </div>
-                <div className="grid flex-grow grid-cols-3">
-                  <div>
-                    <div className="mb-1 text-xs font-semibold uppercase">Users</div>
-                    <div>
-                      {approver?.user
-                        ?.map(
-                          (el) => approverSequence?.membersGroupById?.[el.id]?.[0]?.user?.username
-                        )
-                        .join(",") || "-"}
-                    </div>
-                  </div>
-                  <div>
-                    <div className="mb-1 text-xs font-semibold uppercase">Groups</div>
-                    <div>
-                      {approver?.group
-                        ?.map(
-                          (el) =>
-                            approverSequence?.projectGroupsGroupById?.[el.id]?.[0]?.group?.name
-                        )
-                        .join(",") || "-"}
-                    </div>
-                  </div>
-                  <div className="flex items-center">
-                    <div>
-                      <div className="mb-1 text-xs font-semibold uppercase">Approvals Required</div>
-                      <div>{approver.approvals || "-"}</div>
-                    </div>
-                    <div className="ml-16">
-                      <Popover>
-                        <PopoverTrigger>
-                          <FontAwesomeIcon icon={faUsers} />
-                        </PopoverTrigger>
-                        <PopoverContent hideCloseBtn className="pt-3">
-                          <div>
-                            <div className="mb-1 text-sm text-bunker-300">Reviewers</div>
-                            <div className="thin-scrollbar flex max-h-64 flex-col gap-1 overflow-y-auto rounded">
-                              {approver.reviewers.map((el, idx) => (
-                                <div
-                                  key={`reviewer-${idx + 1}`}
-                                  className="flex items-center gap-2 bg-mineshaft-700 p-1 text-sm"
-                                >
-                                  <div className="flex-grow">{el.username}</div>
-                                  <Tooltip
-                                    content={`Status: ${el?.status || ApprovalStatus.PENDING}`}
-                                  >
-                                    {getReviewedStatusSymbol(el?.status as ApprovalStatus)}
-                                  </Tooltip>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
+
+          <div className="mt-4 flex items-center justify-between border-b-2 border-mineshaft-500 py-2">
+            <span>Approvers</span>
+            {approverSequence.isMyReviewInThisSequence &&
+              request.status === ApprovalStatus.PENDING && (
+                <Badge variant="primary" className="h-min">
+                  Awaiting Your Review
+                </Badge>
+              )}
+          </div>
+          <div className="thin-scrollbar max-h-[40vh] overflow-y-auto rounded py-2">
+            {approverSequence?.approvers &&
+              approverSequence.approvers.map((approver, index) => {
+                const isInactive =
+                  approverSequence?.currentSequence <
+                  (approver.sequence ?? approverSequence.approvers!.length);
+
+                const isPending = approverSequence?.currentSequence === approver.sequence;
+
+                let StepComponent: ReactNode;
+                let BadgeComponent: ReactNode = null;
+                if (approver.hasRejected) {
+                  StepComponent = (
+                    <Badge
+                      variant="danger"
+                      className="flex h-6 min-w-6 items-center justify-center"
+                    >
+                      <FontAwesomeIcon icon={faBan} />
+                    </Badge>
+                  );
+                  BadgeComponent = <Badge variant="danger">Rejected</Badge>;
+                } else if (approver.hasApproved) {
+                  StepComponent = (
+                    <Badge
+                      variant="success"
+                      className="flex h-6 min-w-6 items-center justify-center"
+                    >
+                      <FontAwesomeIcon icon={faCheck} />
+                    </Badge>
+                  );
+                  BadgeComponent = <Badge variant="success">Approved</Badge>;
+                } else if (isPending) {
+                  StepComponent = (
+                    <Badge
+                      variant="primary"
+                      className="flex h-6 min-w-6 items-center justify-center"
+                    >
+                      <FontAwesomeIcon icon={faHourglass} />
+                    </Badge>
+                  );
+                  BadgeComponent = <Badge variant="primary">Pending</Badge>;
+                } else {
+                  StepComponent = (
+                    <Badge
+                      className={
+                        isInactive
+                          ? "py-auto my-auto flex h-6 min-w-6 items-center justify-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-center text-bunker-200"
+                          : ""
+                      }
+                    >
+                      <span>{index + 1}</span>
+                    </Badge>
+                  );
+                }
+
+                return (
+                  <div
+                    key={`approval-list-${index + 1}`}
+                    className={twMerge("flex", isInactive && "opacity-50")}
+                  >
+                    {approverSequence.approvers!.length > 1 && (
+                      <div className="flex w-12 flex-col items-center gap-2 pr-4">
+                        <div
+                          className={twMerge(
+                            "flex-grow border-mineshaft-600",
+                            index !== 0 && "border-r"
+                          )}
+                        />
+                        {StepComponent}
+                        <div
+                          className={twMerge(
+                            "flex-grow border-mineshaft-600",
+                            index < approverSequence.approvers!.length - 1 && "border-r"
+                          )}
+                        />
+                      </div>
+                    )}
+                    <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 p-4">
+                      <GenericFieldLabel className="col-span-2" label="Users">
+                        {approver?.user
+                          ?.map(
+                            (el) => approverSequence?.membersGroupById?.[el.id]?.[0]?.user?.username
+                          )
+                          .join(", ")}
+                      </GenericFieldLabel>
+                      <GenericFieldLabel className="col-span-2" label="Groups">
+                        {approver?.group
+                          ?.map(
+                            (el) =>
+                              approverSequence?.projectGroupsGroupById?.[el.id]?.[0]?.group?.name
+                          )
+                          .join(", ")}
+                      </GenericFieldLabel>
+                      <GenericFieldLabel label="Approvals Required">
+                        <div className="flex items-center">
+                          <span className="mr-2">{approver.approvals}</span>
+                          {BadgeComponent && (
+                            <Tooltip
+                              className="max-w-lg"
+                              content={
+                                <div>
+                                  <div className="mb-1 text-sm text-bunker-300">Reviewers</div>
+                                  <div className="thin-scrollbar flex max-h-64 flex-col divide-y divide-mineshaft-500 overflow-y-auto rounded">
+                                    {approver.reviewers.map((el, idx) => (
+                                      <div
+                                        key={`reviewer-${idx + 1}`}
+                                        className="flex items-center gap-2 px-2 py-2 text-sm"
+                                      >
+                                        <div className="flex-1">{el.username}</div>
+                                        {getReviewedStatusSymbol(el?.status as ApprovalStatus)}
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              }
+                            >
+                              <div>{BadgeComponent}</div>
+                            </Tooltip>
+                          )}
+                        </div>
+                      </GenericFieldLabel>
+                    </div>
+                  </div>
+                );
+              })}
           </div>
-          {approverSequence.isMyReviewInThisSequence &&
-            request.status === ApprovalStatus.PENDING && (
-              <div className="mb-4 rounded-r border-l-2 border-l-primary-400 bg-mineshaft-300/5 px-4 py-2.5 text-sm">
-                Awaiting review from you.
-              </div>
-            )}
           {shouldBlockRequestActions ? (
             <div
               className={twMerge(
-                "mb-4 rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 px-4 py-2.5 text-sm",
+                "mt-2 rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 px-4 py-2.5 text-sm",
                 isReviewedByMe && "border-l-green-400",
                 !approverSequence.isMyReviewInThisSequence && "border-l-primary-400",
                 hasRejected && "border-l-red-500"
@@ -409,41 +439,6 @@ export const ReviewAccessRequestModal = ({
             </div>
           ) : (
             <>
-              <div className="space-x-2">
-                <Button
-                  isLoading={isLoading === "approved"}
-                  isDisabled={
-                    Boolean(isLoading) ||
-                    (!(
-                      request.isApprover &&
-                      (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
-                    ) &&
-                      !bypassApproval)
-                  }
-                  onClick={() => handleReview("approved")}
-                  className="mt-4"
-                  size="sm"
-                  colorSchema={!request.isApprover && isSoftEnforcement ? "danger" : "primary"}
-                >
-                  Approve Request
-                </Button>
-                <Button
-                  isLoading={isLoading === "rejected"}
-                  isDisabled={
-                    !!isLoading ||
-                    (!(
-                      request.isApprover &&
-                      (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
-                    ) &&
-                      !bypassApproval)
-                  }
-                  onClick={() => handleReview("rejected")}
-                  className="mt-4 border-transparent bg-transparent text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200"
-                  size="sm"
-                >
-                  Reject Request
-                </Button>
-              </div>
               {isSoftEnforcement &&
                 request.isRequestedByCurrentUser &&
                 !(request.isApprover && request.isSelfApproveAllowed) &&
@@ -453,11 +448,7 @@ export const ReviewAccessRequestModal = ({
                       onCheckedChange={(checked) => setBypassApproval(checked === true)}
                       isChecked={bypassApproval}
                       id="byPassApproval"
-                      checkIndicatorBg="text-white"
-                      className={twMerge(
-                        "mr-2",
-                        bypassApproval ? "border-red bg-red hover:bg-red-600" : ""
-                      )}
+                      className={twMerge("mr-2", bypassApproval ? "border-red/30 bg-red/10" : "")}
                     >
                       <span className="text-xs text-red">
                         Approve without waiting for requirements to be met (bypass policy
@@ -481,6 +472,42 @@ export const ReviewAccessRequestModal = ({
                     )}
                   </div>
                 )}
+              <div className="space-x-2">
+                <Button
+                  isLoading={isLoading === "approved"}
+                  isDisabled={
+                    Boolean(isLoading) ||
+                    (!(
+                      request.isApprover &&
+                      (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
+                    ) &&
+                      !bypassApproval)
+                  }
+                  onClick={() => handleReview("approved")}
+                  className="mt-4"
+                  size="sm"
+                  variant="outline_bg"
+                  colorSchema={!request.isApprover && isSoftEnforcement ? "danger" : "primary"}
+                >
+                  Approve Request
+                </Button>
+                <Button
+                  isLoading={isLoading === "rejected"}
+                  isDisabled={
+                    !!isLoading ||
+                    (!(
+                      request.isApprover &&
+                      (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
+                    ) &&
+                      !bypassApproval)
+                  }
+                  onClick={() => handleReview("rejected")}
+                  className="mt-4 border-transparent bg-transparent text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200"
+                  size="sm"
+                >
+                  Reject Request
+                </Button>
+              </div>
             </>
           )}
         </div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -1,5 +1,12 @@
 import { useMemo } from "react";
-import { faEdit, faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import {
+  faClipboardCheck,
+  faEdit,
+  faEllipsisV,
+  faTrash,
+  faUser,
+  faUserGroup
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -179,26 +186,40 @@ export const ApprovalPolicyRow = ({
             }`}
           >
             <div className="p-4">
-              <div className="mb-4 border-b-2 border-mineshaft-500 pb-2">Approvers</div>
+              <div className="border-b-2 border-mineshaft-500 pb-2">Approvers</div>
               {labels?.map((el, index) => (
-                <div
-                  key={`approval-list-${index + 1}`}
-                  className="relative mb-2 flex rounded border border-mineshaft-500 bg-mineshaft-800 p-4"
-                >
-                  <div className="my-auto mr-8 flex h-8 w-8 items-center justify-center rounded border border-mineshaft-400 bg-bunker-500/50 text-white">
-                    <div>{index + 1}</div>
-                  </div>
-                  {index !== labels.length - 1 && (
-                    <div className="absolute bottom-0 left-8 h-[1.25rem] border-r border-mineshaft-400" />
+                <div key={`approval-list-${index + 1}`} className="flex">
+                  {labels.length > 1 && (
+                    <div className="flex w-12 flex-col items-center gap-2 pr-4">
+                      <div
+                        className={twMerge(
+                          "flex-grow border-mineshaft-600",
+                          index !== 0 && "border-r"
+                        )}
+                      />
+                      {labels.length > 1 && (
+                        <Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-center text-bunker-200">
+                          <span>{index + 1}</span>
+                        </Badge>
+                      )}
+                      <div
+                        className={twMerge(
+                          "flex-grow border-mineshaft-600",
+                          index < labels.length - 1 && "border-r"
+                        )}
+                      />
+                    </div>
                   )}
-                  {index !== 0 && (
-                    <div className="absolute left-8 top-0 h-[1.25rem] border-r border-mineshaft-400" />
-                  )}
-
-                  <div className="grid flex-grow grid-cols-3">
-                    <GenericFieldLabel label="Users">{el.userLabels}</GenericFieldLabel>
-                    <GenericFieldLabel label="Groups">{el.groupLabels}</GenericFieldLabel>
-                    <GenericFieldLabel label="Approvals Required">{el.approvals}</GenericFieldLabel>
+                  <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 p-4">
+                    <GenericFieldLabel className="col-span-2" icon={faUser} label="Users">
+                      {el.userLabels}
+                    </GenericFieldLabel>
+                    <GenericFieldLabel className="col-span-2" icon={faUserGroup} label="Groups">
+                      {el.groupLabels}
+                    </GenericFieldLabel>
+                    <GenericFieldLabel icon={faClipboardCheck} label="Approvals Required">
+                      {el.approvals}
+                    </GenericFieldLabel>
                   </div>
                 </div>
               ))}