Merge pull request #1192 from Infisical/stv3-org-roles

Add Identities + Universal Auth Authentication Method

frontend/src/context/OrgPermissionContext/types.ts

@@ -15,7 +15,8 @@ export enum OrgPermissionSubjects {
   IncidentAccount = "incident-contact",
   Sso = "sso",
   Billing = "billing",
-  SecretScanning = "secret-scanning"
+  SecretScanning = "secret-scanning",
+  Identity = "identity"
 }
 
 export type OrgPermissionSet =
@@ -27,6 +28,7 @@ export type OrgPermissionSet =
   | [OrgPermissionActions, OrgPermissionSubjects.IncidentAccount]
   | [OrgPermissionActions, OrgPermissionSubjects.Sso]
   | [OrgPermissionActions, OrgPermissionSubjects.SecretScanning]
-  | [OrgPermissionActions, OrgPermissionSubjects.Billing];
+  | [OrgPermissionActions, OrgPermissionSubjects.Billing]
+  | [OrgPermissionActions, OrgPermissionSubjects.Identity];
 
 export type TOrgPermission = MongoAbility<OrgPermissionSet>;

frontend/src/context/ProjectPermissionContext/types.ts

@@ -22,7 +22,8 @@ export enum ProjectPermissionSub {
   Secrets = "secrets",
   SecretRollback = "secret-rollback",
   SecretApproval = "secret-approval",
-  SecretRotation = "secret-rotation"
+  SecretRotation = "secret-rotation",
+  Identity = "identity"
 }
 
 type SubjectFields = {
@@ -44,6 +45,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.Environments]
   | [ProjectPermissionActions, ProjectPermissionSub.IpAllowList]
   | [ProjectPermissionActions, ProjectPermissionSub.Settings]
+  | [ProjectPermissionActions, ProjectPermissionSub.Identity]
   | [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
   | [ProjectPermissionActions, ProjectPermissionSub.SecretApproval]
   | [ProjectPermissionActions, ProjectPermissionSub.SecretRotation]

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

@@ -16,9 +16,17 @@ export const eventToNameMap: { [K in EventType]: string } = {
     [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
     [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
     [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
-    [EventType.CREATE_SERVICE_TOKEN_V3]: "Create (new) service token",
-    [EventType.UPDATE_SERVICE_TOKEN_V3]: "Update (new) service token",
-    [EventType.DELETE_SERVICE_TOKEN_V3]: "Delete (new) service token",
+    [EventType.CREATE_IDENTITY]: "Create identity",
+    [EventType.UPDATE_IDENTITY]: "Update identity",
+    [EventType.DELETE_IDENTITY]: "Delete identity",
+    [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
+    [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
+    [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
+    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+    [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
+    [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
+    [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
+    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
     [EventType.CREATE_ENVIRONMENT]: "Create environment",
     [EventType.UPDATE_ENVIRONMENT]: "Update environment",
     [EventType.DELETE_ENVIRONMENT]: "Delete environment",

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

@@ -1,7 +1,7 @@
 export enum ActorType {
   USER = "user",
   SERVICE = "service",
-  SERVICE_V3 = "service-v3"
+  IDENTITY = "identity"
 }
 
 export enum UserAgentType {
@@ -27,9 +27,16 @@ export enum EventType {
   DELETE_TRUSTED_IP = "delete-trusted-ip",
   CREATE_SERVICE_TOKEN = "create-service-token", // v2
   DELETE_SERVICE_TOKEN = "delete-service-token", // v2
-  CREATE_SERVICE_TOKEN_V3 = "create-service-token-v3", // v3
-  UPDATE_SERVICE_TOKEN_V3 = "update-service-token-v3", // v3
-  DELETE_SERVICE_TOKEN_V3 = "delete-service-token-v3", // v3
+  CREATE_IDENTITY = "create-identity",
+  UPDATE_IDENTITY = "update-identity",
+  DELETE_IDENTITY = "delete-identity",
+  LOGIN_IDENTITY_UNIVERSAL_AUTH = "login-identity-universal-auth",
+  ADD_IDENTITY_UNIVERSAL_AUTH = "add-identity-universal-auth",
+  UPDATE_IDENTITY_UNIVERSAL_AUTH = "update-identity-universal-auth",
+  GET_IDENTITY_UNIVERSAL_AUTH = "get-identity-universal-auth",
+  CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "create-identity-universal-auth-client-secret",
+  REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET =  "revoke-identity-universal-auth-client-secret",
+  GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS = "get-identity-universal-auth-client-secret",
   CREATE_ENVIRONMENT = "create-environment",
   UPDATE_ENVIRONMENT = "update-environment",
   DELETE_ENVIRONMENT = "delete-environment",

frontend/src/hooks/api/auditLogs/types.tsx

@@ -1,3 +1,4 @@
+import { IdentityTrustedIp } from "../identities/types";
 import { ActorType, EventType, UserAgentType } from "./enums";
 
 interface UserActorMetadata {
@@ -10,6 +11,11 @@ interface ServiceActorMetadata {
   name: string;
 }
 
+interface IdentityActorMetadata {
+  identityId: string;
+  name: string;
+}
+
 interface UserActor {
   type: ActorType.USER;
   metadata: UserActorMetadata;
@@ -20,12 +26,12 @@ export interface ServiceActor {
   metadata: ServiceActorMetadata;
 }
 
-export interface ServiceActorV3 {
-  type: ActorType.SERVICE_V3;
-  metadata: ServiceActorMetadata;
+export interface IdentityActor {
+  type: ActorType.IDENTITY;
+  metadata: IdentityActorMetadata;
 }
 
-export type Actor = UserActor | ServiceActor | ServiceActorV3;
+export type Actor = UserActor | ServiceActor | IdentityActor;
 
 interface GetSecretsEvent {
   type: EventType.GET_SECRETS;
@@ -188,34 +194,92 @@ interface DeleteServiceTokenEvent {
   };
 }
 
-interface CreateServiceTokenV3Event {
-    type: EventType.CREATE_SERVICE_TOKEN_V3;
-    metadata: {
-        name: string;
-        isActive: boolean;
-        role: string;
-        expiresAt?: Date;
-    }
+interface CreateIdentityEvent { // note: currently not logging org-role
+  type: EventType.CREATE_IDENTITY;
+  metadata: {
+    identityId: string;
+    name: string;
+  };
 }
 
-interface UpdateServiceTokenV3Event {
-    type: EventType.UPDATE_SERVICE_TOKEN_V3;
-    metadata: {
-        name?: string;
-        isActive?: boolean;
-        role?: string;
-        expiresAt?: Date;
-    }
+interface UpdateIdentityEvent {
+  type: EventType.UPDATE_IDENTITY;
+  metadata: {
+    identityId: string;
+    name?: string;
+  };
 }
 
-interface DeleteServiceTokenV3Event {
-    type: EventType.DELETE_SERVICE_TOKEN_V3;
-    metadata: {
-        name: string;
-        isActive: boolean;
-        role?: string;
-        expiresAt?: Date;
-    }
+interface DeleteIdentityEvent {
+  type: EventType.DELETE_IDENTITY;
+  metadata: {
+    identityId: string;
+  };
+}
+
+interface LoginIdentityUniversalAuthEvent {
+  type: EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH ;
+  metadata: {
+    identityId: string;
+    identityUniversalAuthId: string;
+    clientSecretId: string;
+    identityAccessTokenId: string;
+  };
+}
+
+interface AddIdentityUniversalAuthEvent {
+  type: EventType.ADD_IDENTITY_UNIVERSAL_AUTH;
+  metadata: {
+    identityId: string;
+    clientSecretTrustedIps: Array<IdentityTrustedIp>;
+    accessTokenTTL: number;
+    accessTokenMaxTTL: number;
+    accessTokenNumUsesLimit: number;
+    accessTokenTrustedIps: Array<IdentityTrustedIp>;
+  };
+}
+
+interface UpdateIdentityUniversalAuthEvent {
+  type: EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH;
+  metadata: {
+    identityId: string;
+    clientSecretTrustedIps?: Array<IdentityTrustedIp>;
+    accessTokenTTL?: number;
+    accessTokenMaxTTL?: number;
+    accessTokenNumUsesLimit?: number;
+    accessTokenTrustedIps?: Array<IdentityTrustedIp>;
+  };
+}
+
+interface GetIdentityUniversalAuthEvent {
+  type: EventType.GET_IDENTITY_UNIVERSAL_AUTH;
+  metadata: {
+    identityId: string;
+  };
+}
+
+interface CreateIdentityUniversalAuthClientSecretEvent {
+  type: EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET ;
+  metadata: {
+    identityId: string;
+    clientSecretId: string;
+  };
+}
+
+interface GetIdentityUniversalAuthClientSecretsEvent {
+  type: EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS;
+  metadata: {
+    identityId: string;
+  };
+}
+
+
+interface RevokeIdentityUniversalAuthClientSecretEvent {
+  type: EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET ;
+  metadata: {
+    identityId: string;
+    clientSecretId: string;
+  };
 }
 
 interface CreateEnvironmentEvent {
@@ -414,9 +478,16 @@ export type Event =
   | DeleteTrustedIPEvent
   | CreateServiceTokenEvent
   | DeleteServiceTokenEvent
-  | CreateServiceTokenV3Event
-  | UpdateServiceTokenV3Event
-  | DeleteServiceTokenV3Event
+  | CreateIdentityEvent
+  | UpdateIdentityEvent
+  | DeleteIdentityEvent
+  | LoginIdentityUniversalAuthEvent
+  | AddIdentityUniversalAuthEvent
+  | UpdateIdentityUniversalAuthEvent
+  | GetIdentityUniversalAuthEvent
+  | CreateIdentityUniversalAuthClientSecretEvent
+  | GetIdentityUniversalAuthClientSecretsEvent
+  | RevokeIdentityUniversalAuthClientSecretEvent
   | CreateEnvironmentEvent
   | UpdateEnvironmentEvent
   | DeleteEnvironmentEvent

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

@@ -0,0 +1,5 @@
+import { IdentityAuthMethod } from "./enums";
+
+export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
+    [IdentityAuthMethod.UNIVERSAL_AUTH]: "Universal Auth"
+};

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

@@ -0,0 +1,3 @@
+export enum IdentityAuthMethod {
+    UNIVERSAL_AUTH = "universal-auth"
+}

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

@@ -0,0 +1,14 @@
+export { identityAuthToNameMap } from "./constants";
+export { IdentityAuthMethod } from "./enums";
+export {
+    useAddIdentityUniversalAuth,
+    useCreateIdentity,
+    useCreateIdentityUniversalAuthClientSecret,
+    useDeleteIdentity,
+    useRevokeIdentityUniversalAuthClientSecret,
+    useUpdateIdentity,
+    useUpdateIdentityUniversalAuth} from "./mutations";
+export {
+    useGetIdentityUniversalAuth,
+    useGetIdentityUniversalAuthClientSecrets
+} from "./queries";

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

@@ -0,0 +1,164 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { organizationKeys } from "../organization/queries";
+import { identitiesKeys } from "./queries";
+import { 
+    AddIdentityUniversalAuthDTO,
+    ClientSecretData,
+    CreateIdentityDTO, 
+    CreateIdentityUniversalAuthClientSecretDTO,
+    CreateIdentityUniversalAuthClientSecretRes,
+    DeleteIdentityDTO,
+    DeleteIdentityUniversalAuthClientSecretDTO,
+    Identity,
+    IdentityUniversalAuth,
+    UpdateIdentityDTO,
+    UpdateIdentityUniversalAuthDTO} from "./types";
+
+export const useCreateIdentity = () => {
+    const queryClient = useQueryClient();
+    return useMutation<Identity, {}, CreateIdentityDTO>({
+        mutationFn: async (body) => {
+            const { data: { identity } } = await apiRequest.post("/api/v1/identities/", body);
+            return identity;
+        },
+        onSuccess: (_, { organizationId }) => {
+            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+        }
+    });
+};
+
+export const useUpdateIdentity = () => {
+    const queryClient = useQueryClient();
+    return useMutation<Identity, {}, UpdateIdentityDTO>({
+        mutationFn: async ({
+            identityId,
+            name,
+            role
+        }) => {
+            
+            const { data: { identity } } = await apiRequest.patch(`/api/v1/identities/${identityId}`, {
+                name,
+                role
+            });
+
+            return identity;
+        },
+        onSuccess: (_, { organizationId }) => {
+            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+        }
+    });
+}
+
+export const useDeleteIdentity = () => {
+    const queryClient = useQueryClient();
+    return useMutation<Identity, {}, DeleteIdentityDTO>({
+        mutationFn: async ({
+            identityId,
+        }) => {
+            const { data: { identity } } = await apiRequest.delete(`/api/v1/identities/${identityId}`);
+            return identity;
+        },
+        onSuccess: (_, { organizationId }) => {
+            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+        }
+    });
+};
+
+// TODO: move these to /auth
+
+export const useAddIdentityUniversalAuth = () => {
+    const queryClient = useQueryClient();
+    return useMutation<IdentityUniversalAuth, {}, AddIdentityUniversalAuthDTO>({
+        mutationFn: async ({
+            identityId,
+            clientSecretTrustedIps,
+            accessTokenTTL,
+            accessTokenMaxTTL,
+            accessTokenNumUsesLimit,
+            accessTokenTrustedIps,
+        }) => {
+            const { data: { identityUniversalAuth } } = await apiRequest.post(`/api/v1/auth/universal-auth/identities/${identityId}`,
+                {
+                    clientSecretTrustedIps,
+                    accessTokenTTL,
+                    accessTokenMaxTTL,
+                    accessTokenNumUsesLimit,
+                    accessTokenTrustedIps,
+                }
+            );
+            return identityUniversalAuth;
+        },
+        onSuccess: (_, { organizationId }) => {
+            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+        }
+    });
+};
+
+export const useUpdateIdentityUniversalAuth = () => {
+    const queryClient = useQueryClient();
+    return useMutation<IdentityUniversalAuth, {}, UpdateIdentityUniversalAuthDTO>({
+        mutationFn: async ({
+            identityId,
+            clientSecretTrustedIps,
+            accessTokenTTL,
+            accessTokenMaxTTL,
+            accessTokenNumUsesLimit,
+            accessTokenTrustedIps,
+        }) => {
+            const { data: { identityUniversalAuth } } = await apiRequest.patch(`/api/v1/auth/universal-auth/identities/${identityId}`,
+                {
+                    clientSecretTrustedIps,
+                    accessTokenTTL,
+                    accessTokenMaxTTL,
+                    accessTokenNumUsesLimit,
+                    accessTokenTrustedIps,
+                }
+            );
+            return identityUniversalAuth;
+        },
+        onSuccess: (_, { organizationId }) => {
+            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+        }
+    });
+};
+
+export const useCreateIdentityUniversalAuthClientSecret = () => {
+    const queryClient = useQueryClient();
+    return useMutation<CreateIdentityUniversalAuthClientSecretRes, {}, CreateIdentityUniversalAuthClientSecretDTO>({
+        mutationFn: async ({
+            identityId,
+            description,
+            ttl,
+            numUsesLimit
+        }) => {
+            const { data } = await apiRequest.post(`/api/v1/auth/universal-auth/identities/${identityId}/client-secrets`, {
+                description,
+                ttl,
+                numUsesLimit
+            });
+            return data;
+        },
+        onSuccess: (_, { identityId }) => {
+            queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId));
+        }
+    });
+};
+
+export const useRevokeIdentityUniversalAuthClientSecret = () => {
+    const queryClient = useQueryClient();
+    return useMutation<ClientSecretData, {}, DeleteIdentityUniversalAuthClientSecretDTO>({
+        mutationFn: async ({
+            identityId,
+            clientSecretId
+        }) => {
+            const { data: { clientSecretData } } = await apiRequest.post<{ clientSecretData: ClientSecretData }>(`/api/v1/auth/universal-auth/identities/${identityId}/client-secrets/${clientSecretId}/revoke`);
+            return clientSecretData;
+        },
+        onSuccess: (_, { identityId }) => {
+            queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId));
+        }
+    });
+};

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

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { ClientSecretData , IdentityUniversalAuth } from "./types";
+
+export const identitiesKeys = {
+    getIdentityUniversalAuth: (identityId: string) => [{ identityId }, "identity-universal-auth"] as const,
+    getIdentityUniversalAuthClientSecrets: (identityId: string) => [{ identityId }, "identity-universal-auth-client-secrets"] as const
+}
+
+export const useGetIdentityUniversalAuth = (identityId: string) => {
+    return useQuery({
+        queryKey: identitiesKeys.getIdentityUniversalAuth(identityId),
+        queryFn: async () => {
+            if (identityId === "") throw new Error("Identity ID is required");
+
+            const { data: { identityUniversalAuth } } = await apiRequest.get<{ identityUniversalAuth: IdentityUniversalAuth }>(
+                `/api/v1/auth/universal-auth/identities/${identityId}`
+            );
+        
+            return identityUniversalAuth;
+        }
+    });
+}
+
+export const useGetIdentityUniversalAuthClientSecrets = (identityId: string) => {
+    return useQuery({
+        queryKey: identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId),
+        queryFn: async () => {
+            if (identityId === "") return [];
+
+            const { data: { clientSecretData } } = await apiRequest.get<{ clientSecretData: ClientSecretData[] }>(
+                `/api/v1/auth/universal-auth/identities/${identityId}/client-secrets`
+            );
+        
+            return clientSecretData;
+        }
+    });
+}

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

@@ -0,0 +1,123 @@
+import { TRole } from "../roles/types";
+import { IdentityAuthMethod } from "./enums";
+
+export type IdentityTrustedIp = {
+    _id: string;
+    ipAddress: string;
+    type: "ipv4" | "ipv6";
+    prefix?: number;
+}
+
+export type Identity = {
+    _id: string;
+    name: string;
+    authMethod?: IdentityAuthMethod;
+    createdAt: string;
+    updatedAt: string;
+};
+
+export type IdentityMembershipOrg = {
+    _id: string;
+    identity: Identity;
+    organization: string;
+    role: "admin" | "member" | "viewer" | "no-access" | "custom";
+    customRole?: TRole<string>;
+    createdAt: string;
+    updatedAt: string;
+}
+
+export type IdentityMembership = {
+    _id: string;
+    identity: Identity;
+    organization: string;
+    role: "admin" | "member" | "viewer" | "no-access" | "custom";
+    customRole?: TRole<string>;
+    createdAt: string;
+    updatedAt: string;
+}
+
+export type CreateIdentityDTO = {
+    name: string;
+    organizationId: string;
+    role?: string;
+}
+
+export type UpdateIdentityDTO = {
+    identityId: string;
+    name?: string;
+    role?: string;
+    organizationId: string;
+}
+
+export type DeleteIdentityDTO = {
+    identityId: string;
+    organizationId: string;
+}
+
+export type IdentityUniversalAuth = {
+    identityId: string;
+    clientId: string;
+    clientSecretTrustedIps: IdentityTrustedIp[];
+    accessTokenTTL: number;
+    accessTokenMaxTTL: number;
+    accessTokenNumUsesLimit: number;
+    accessTokenTrustedIps: IdentityTrustedIp[];
+}
+
+export type AddIdentityUniversalAuthDTO = {
+    organizationId: string;
+    identityId: string;
+    clientSecretTrustedIps: {
+        ipAddress: string;
+    }[];
+    accessTokenTTL: number;
+    accessTokenMaxTTL: number;
+    accessTokenNumUsesLimit: number;
+    accessTokenTrustedIps: {
+        ipAddress: string;
+    }[];
+}
+
+export type UpdateIdentityUniversalAuthDTO = {
+    organizationId: string;
+    identityId: string;
+    clientSecretTrustedIps?: {
+        ipAddress: string;
+    }[];
+    accessTokenTTL?: number;
+    accessTokenMaxTTL?: number;
+    accessTokenNumUsesLimit?: number;
+    accessTokenTrustedIps?: {
+        ipAddress: string;
+    }[];
+}
+
+export type CreateIdentityUniversalAuthClientSecretDTO = {
+    identityId: string;
+    description?: string;
+    ttl?: number;
+    numUsesLimit?: number;
+}
+
+export type ClientSecretData = {
+    _id: string;
+    identityUniversalAuth: string;
+    isClientSecretRevoked: boolean;
+    description: string;
+    clientSecretPrefix: string;
+    clientSecretNumUses: number;
+    clientSecretNumUsesLimit: number;
+    clientSecretTTL: number;
+    createdAt: string;
+    updatedAt: string;
+}
+
+export type CreateIdentityUniversalAuthClientSecretRes = {
+    clientSecret: string;
+    clientSecretData: ClientSecretData;
+}
+
+export type DeleteIdentityUniversalAuthClientSecretDTO = {
+    identityId: string;
+    clientSecretId: string;
+}

frontend/src/hooks/api/index.tsx

@@ -1,8 +1,9 @@
-export * from "./apiKeys";
 export * from "./admin"
+export * from "./apiKeys";
 export * from "./auditLogs";
 export * from "./auth";
 export * from "./bots";
+export * from "./identities";
 export * from "./incidentContacts";
 export * from "./integrationAuth";
 export * from "./integrations";
@@ -16,6 +17,7 @@ export * from "./secretImports";
 export * from "./secretRotation";
 export * from "./secrets";
 export * from "./secretSnapshots";
+export * from "./serverDetails";
 export * from "./serviceTokens";
 export * from "./ssoConfig";
 export * from "./subscriptions";
@@ -23,4 +25,4 @@ export * from "./tags";
 export * from "./trustedIps";
 export * from "./users";
 export * from "./webhooks";
-export * from "./workspace";
+export * from "./workspace";

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

@@ -6,6 +6,7 @@ export {
     useDeleteOrgById,
     useDeleteOrgPmtMethod,
     useDeleteOrgTaxId,
+    useGetIdentityMembershipOrgs,
     useGetOrganizations, 
     useGetOrgBillingDetails,
     useGetOrgInvoices,
@@ -17,4 +18,5 @@ export {
     useGetOrgTaxIds,
     useGetOrgTrialUrl,
     useRenameOrg, 
-    useUpdateOrgBillingDetails} from "./queries";
+    useUpdateOrgBillingDetails
+} from "./queries";

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

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { IdentityMembershipOrg } from "../identities/types";
 import {
   BillingDetails,
   Invoice,
@@ -15,7 +16,7 @@ import {
   TaxID
 } from "./types";
 
-const organizationKeys = {
+export const organizationKeys = {
   getUserOrganizations: ["organization"] as const,
   getOrgPlanBillingInfo: (orgId: string) => [{ orgId }, "organization-plan-billing"] as const,
   getOrgPlanTable: (orgId: string) => [{ orgId }, "organization-plan-table"] as const,
@@ -25,7 +26,8 @@ const organizationKeys = {
   getOrgPmtMethods: (orgId: string) => [{ orgId }, "organization-pmt-methods"] as const,
   getOrgTaxIds: (orgId: string) => [{ orgId }, "organization-tax-ids"] as const,
   getOrgInvoices: (orgId: string) => [{ orgId }, "organization-invoices"] as const,
-  getOrgLicenses: (orgId: string) => [{ orgId }, "organization-licenses"] as const
+  getOrgLicenses: (orgId: string) => [{ orgId }, "organization-licenses"] as const,
+  getOrgIdentityMemberships: (orgId: string) => [{ orgId }, "organization-identity-memberships"] as const,
 };
 
 export const fetchOrganizations = async () => {
@@ -349,6 +351,22 @@ export const useGetOrgLicenses = (organizationId: string) => {
   });
 };
 
+export const useGetIdentityMembershipOrgs = (organizationId: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgIdentityMemberships(organizationId),
+    queryFn: async () => {
+      const {
+        data: { identityMemberships }
+      } = await apiRequest.get<{ identityMemberships: IdentityMembershipOrg[] }>(
+        `/api/v2/organizations/${organizationId}/identity-memberships`
+      );
+
+      return identityMemberships;
+    },
+    enabled: true
+  });
+};
+
 export const useDeleteOrgById = () => {
   const queryClient = useQueryClient();
 

frontend/src/hooks/api/serviceTokens/index.ts

@@ -1,8 +1,5 @@
 export { 
     useCreateServiceToken, 
-    useCreateServiceTokenV3,
     useDeleteServiceToken, 
-    useDeleteServiceTokenV3,
     useGetUserWsServiceTokens,
-    useUpdateServiceTokenV3
 } from "./queries";

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

@@ -2,17 +2,12 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { workspaceKeys } from "../workspace/queries";
 import {
-  CreateServiceTokenDataV3DTO,
-  CreateServiceTokenDataV3Res,
   CreateServiceTokenDTO,
   CreateServiceTokenRes,
-  DeleteServiceTokenDataV3DTO,
   DeleteServiceTokenRes,
-  ServiceToken,
-  ServiceTokenDataV3,
-  UpdateServiceTokenDataV3DTO} from "./types";
+  ServiceToken
+} from "./types";
 
 const serviceTokenKeys = {
   getAllWorkspaceServiceToken: (workspaceID: string) => [{ workspaceID }, "service-tokens"] as const
@@ -64,63 +59,4 @@ export const useDeleteServiceToken = () => {
       queryClient.invalidateQueries(serviceTokenKeys.getAllWorkspaceServiceToken(workspace));
     }
   });
-};
-
-export const useCreateServiceTokenV3 = () => {
-  const queryClient = useQueryClient();
-  return useMutation<CreateServiceTokenDataV3Res, {}, CreateServiceTokenDataV3DTO>({
-    mutationFn: async (body) => {
-      const { data } = await apiRequest.post("/api/v3/service-token/", body);
-      return data;
-    },
-    onSuccess: ({ serviceTokenData }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceServiceTokenDataV3(serviceTokenData.workspace));
-    }
-  });
-};
-
-export const useUpdateServiceTokenV3 = () => {
-  const queryClient = useQueryClient();
-  return useMutation<ServiceTokenDataV3, {}, UpdateServiceTokenDataV3DTO>({
-    mutationFn: async ({
-      serviceTokenDataId,
-      name,
-      role,
-      isActive,
-      trustedIps,
-      expiresIn,
-      accessTokenTTL,
-      isRefreshTokenRotationEnabled
-    }) => {
-      const { data: { serviceTokenData } } = await apiRequest.patch(`/api/v3/service-token/${serviceTokenDataId}`, {
-        name,
-        role,
-        isActive,
-        trustedIps,
-        expiresIn,
-        accessTokenTTL,
-        isRefreshTokenRotationEnabled
-      });
-
-      return serviceTokenData;
-    },
-    onSuccess: ({ workspace }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceServiceTokenDataV3(workspace));
-    }
-  });
-};
-
-export const useDeleteServiceTokenV3 = () => {
-  const queryClient = useQueryClient();
-  return useMutation<ServiceTokenDataV3, {}, DeleteServiceTokenDataV3DTO>({
-    mutationFn: async ({
-      serviceTokenDataId
-    }) => {
-      const { data: { serviceTokenData } } = await apiRequest.delete(`/api/v3/service-token/${serviceTokenDataId}`);
-      return serviceTokenData;
-    },
-    onSuccess: ({ workspace }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceServiceTokenDataV3(workspace));
-    }
-  });
 };

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

@@ -32,72 +32,4 @@ export type CreateServiceTokenRes = {
   serviceTokenData: ServiceToken;
 };
 
-export type DeleteServiceTokenRes = { serviceTokenData: ServiceToken };
-
-// --- v3
-
-export type ServiceTokenV3TrustedIp = {
-  _id: string;
-  ipAddress: string;
-  type: "ipv4" | "ipv6";
-  prefix?: number;
-}
-
-export type ServiceTokenDataV3 = {
-  _id: string;
-  name: string;
-  role: string;
-  customRole?: {
-    name: string;
-    slug: string;
-  };
-  workspace: string;
-  isActive: boolean;
-  refreshTokenLastUsed?: string;
-  accessTokenLastUsed?: string;
-  refreshTokenUsageCount: number;
-  accessTokenUsageCount: number;
-  trustedIps: ServiceTokenV3TrustedIp[];
-  expiresAt?: string;
-  accessTokenTTL: number;
-  isRefreshTokenRotationEnabled: boolean;
-  createdAt: string;
-  updatedAt: string;
-};
-
-export type CreateServiceTokenDataV3DTO = {
-  name: string;
-  role?: string;
-  workspaceId: string;
-  publicKey: string;
-  trustedIps: {
-    ipAddress: string;
-  }[];
-  expiresIn?: number;
-  accessTokenTTL: number;
-  encryptedKey: string;
-  nonce: string;
-  isRefreshTokenRotationEnabled: boolean;
-}
-
-export type CreateServiceTokenDataV3Res = {
-  refreshToken: string;
-  serviceTokenData: ServiceTokenDataV3;
-}
-
-export type UpdateServiceTokenDataV3DTO = {
-  serviceTokenDataId: string;
-  isActive?: boolean;
-  name?: string;
-  role?: string;
-  trustedIps?: {
-    ipAddress: string;
-  }[];
-  expiresIn?: number;
-  accessTokenTTL?: number;
-  isRefreshTokenRotationEnabled?: boolean;
-}
-
-export type DeleteServiceTokenDataV3DTO = {
-  serviceTokenDataId: string;
-}
+export type DeleteServiceTokenRes = { serviceTokenData: ServiceToken };

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

@@ -44,7 +44,7 @@ export type OrgUser = {
   };
   inviteEmail: string;
   organization: string;
-  role: "owner" | "admin" | "member" | "custom";
+  role: "owner" | "admin" | "member" | "no-access" | "custom";
   status: "invited" | "accepted" | "verified" | "completed";
   deniedPermissions: any[];
   customRole: string;

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

@@ -1,7 +1,9 @@
 export {
+  useAddIdentityToWorkspace,
   useAddUserToWorkspace,
   useCreateWorkspace,
   useCreateWsEnvironment,
+  useDeleteIdentityFromWorkspace,
   useDeleteUserFromWorkspace,
   useDeleteWorkspace,
   useDeleteWsEnvironment,
@@ -9,14 +11,15 @@ export {
   useGetUserWorkspaces,
   useGetWorkspaceAuthorizations,
   useGetWorkspaceById,
+  useGetWorkspaceIdentityMemberships,
   useGetWorkspaceIndexStatus,
   useGetWorkspaceIntegrations,
   useGetWorkspaceSecrets,
-  useGetWorkspaceServiceTokenDataV3,
   useGetWorkspaceUsers,
   useNameWorkspaceSecrets,
   useRenameWorkspace,
   useReorderWsEnvironment,
   useToggleAutoCapitalization,
+  useUpdateIdentityWorkspaceRole,
   useUpdateUserWorkspaceRole,
   useUpdateWsEnvironment} from "./queries";

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

@@ -2,10 +2,10 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { IdentityMembership } from "../identities/types";
 import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
 import { EncryptedSecret } from "../secrets/types";
-import { ServiceTokenDataV3 } from "../serviceTokens/types";
 import { TWorkspaceUser } from "../users/types";
 import {
   CreateEnvironmentDTO,
@@ -31,8 +31,7 @@ export const workspaceKeys = {
   getAllUserWorkspace: ["workspaces"] as const,
   getWorkspaceAuditLogs: (workspaceId: string) => [{ workspaceId }] as const,
   getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }] as const,
-  getWorkspaceServiceTokenDataV3: (workspaceId: string) =>
-    [{ workspaceId }, "workspace-service-token-data-v3"] as const
+  getWorkspaceIdentityMemberships: (workspaceId: string) => [{ workspaceId }, "workspace-identity-memberships"] as const
 };
 
 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -97,6 +96,7 @@ const fetchUserWorkspaceMemberships = async (orgId: string) => {
   const { data } = await apiRequest.get<Record<string, Workspace[]>>(
     `/api/v1/organization/${orgId}/workspace-memberships`
   );
+  
   return data;
 };
 
@@ -356,18 +356,92 @@ export const useUpdateUserWorkspaceRole = () => {
   });
 };
 
-export const useGetWorkspaceServiceTokenDataV3 = (workspaceId: string) => {
+export const useAddIdentityToWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      identityId,
+      workspaceId,
+      role
+    }: {
+      identityId: string;
+      workspaceId: string;
+      role?: string;
+    }) => {
+
+      const {
+        data: { identityMembership }
+      } = await apiRequest.post(`/api/v2/workspace/${workspaceId}/identity-memberships/${identityId}`, {
+        role
+      });
+      
+      return identityMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIdentityMemberships(workspaceId));
+    }
+  });
+};
+
+export const useUpdateIdentityWorkspaceRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      identityId,
+      workspaceId,
+      role
+    }: {
+      identityId: string;
+      workspaceId: string;
+      role?: string;
+    }) => {
+
+      const {
+        data: { identityMembership }
+      } = await apiRequest.patch(`/api/v2/workspace/${workspaceId}/identity-memberships/${identityId}`, {
+        role
+      });
+
+      return identityMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIdentityMemberships(workspaceId));
+    }
+  });
+};
+
+export const useDeleteIdentityFromWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      identityId,
+      workspaceId,
+    }: {
+      identityId: string;
+      workspaceId: string;
+    }) => {
+      const {
+        data: { identityMembership }
+      } = await apiRequest.delete(`/api/v2/workspace/${workspaceId}/identity-memberships/${identityId}`);
+      return identityMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIdentityMemberships(workspaceId));
+    }
+  });
+};
+
+export const useGetWorkspaceIdentityMemberships = (workspaceId: string) => {
   return useQuery({
-    queryKey: workspaceKeys.getWorkspaceServiceTokenDataV3(workspaceId),
+    queryKey: workspaceKeys.getWorkspaceIdentityMemberships(workspaceId),
     queryFn: async () => {
       const {
-        data: { serviceTokenData }
-      } = await apiRequest.get<{ serviceTokenData: ServiceTokenDataV3[] }>(
-        `/api/v3/workspaces/${workspaceId}/service-token`
+        data: { identityMemberships }
+      } = await apiRequest.get<{ identityMemberships: IdentityMembership[] }>(
+        `/api/v2/workspace/${workspaceId}/identity-memberships`
       );
-
-      return serviceTokenData;
+      return identityMemberships;
     },
     enabled: true
   });
-};
+};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -591,7 +591,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             isSelected={router.asPath === `/org/${currentOrg?._id}/members`}
                             icon="system-outline-96-groups"
                           >
-                            Members
+                            Access Control
                           </MenuItem>
                         </a>
                       </Link>

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -1,62 +1,49 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useTranslation } from "react-i18next";
-import { motion } from "framer-motion";
-
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
-import { useGetRoles } from "@app/hooks/api";
-import { TRole } from "@app/hooks/api/roles/types";
 
-import { OrgMembersTable } from "./components/OrgMembersTable";
-import { OrgRoleTabSection } from "./components/OrgRoleTabSection";
+import {
+  OrgIdentityTab,
+  OrgMembersTab,
+  OrgRoleTabSection
+} from "./components";
 
 enum TabSections {
   Member = "members",
-  Roles = "roles"
+  Roles = "roles",
+  Identities = "identities"
 }
 
 export const MembersPage = withPermission(
   () => {
-    const { t } = useTranslation();
-    const { currentOrg } = useOrganization();
-
-    const orgId = currentOrg?._id || "";
-
-    const { data: roles, isLoading: isRolesLoading } = useGetRoles({
-      orgId
-    });
-
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
           <p className="mr-4 mb-4 text-3xl font-semibold text-white">
-            {t("section.members.org-members")}
+            Organization Access Control
           </p>
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
-              <Tab value={TabSections.Member}>Members</Tab>
-              <Tab value={TabSections.Roles}>Roles</Tab>
+              <Tab value={TabSections.Member}>People</Tab>
+              <Tab value={TabSections.Identities}>
+                <div className="flex items-center">
+                  <p>Machine Identities</p>
+                  <div className="ml-2 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                    New
+                  </div>
+                </div>
+              </Tab>
+              <Tab value={TabSections.Roles}>Organization Roles</Tab>
             </TabList>
             <TabPanel value={TabSections.Member}>
-              <motion.div
-                key="panel-1"
-                transition={{ duration: 0.15 }}
-                initial={{ opacity: 0, translateX: 30 }}
-                animate={{ opacity: 1, translateX: 0 }}
-                exit={{ opacity: 0, translateX: 30 }}
-              >
-                <OrgMembersTable
-                  roles={roles as TRole<undefined>[]}
-                  isRolesLoading={isRolesLoading}
-                />
-              </motion.div>
+              <OrgMembersTab />
+            </TabPanel>
+            <TabPanel value={TabSections.Identities}>
+              <OrgIdentityTab />
             </TabPanel>
             <TabPanel value={TabSections.Roles}>
-              <OrgRoleTabSection
-                roles={roles as TRole<undefined>[]}
-                isRolesLoading={isRolesLoading}
-              />
+              <OrgRoleTabSection />
             </TabPanel>
           </Tabs>
         </div>

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

@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+
+import { 
+    IdentitySection
+} from "./components";
+
+export const OrgIdentityTab = () => {
+    return (
+        <motion.div
+            key="panel-service-token"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+        >
+            <IdentitySection />
+        </motion.div>
+    );
+}

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

@@ -0,0 +1,108 @@
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import {
+    FormControl,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem,
+    UpgradePlanModal
+} from "@app/components/v2";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
+
+type Props = {
+    popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+    handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>, state?: boolean) => void;
+}
+
+const identityAuthMethods = [
+    { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }
+];
+
+const schema = yup.object({
+    authMethod: yup.string().required("Auth method is required"), // TODO: better enforcement here
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const IdentityAuthMethodModal = ({
+    popUp,
+    handlePopUpOpen,
+    handlePopUpToggle
+}: Props) => {
+
+    const {
+        control,
+        // watch,
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+
+    const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
+        identityId: string;
+        name: string;
+        authMethod?: IdentityAuthMethod;
+    }
+    
+    // const authMethod = watch("authMethod");
+    
+    const renderIdentityAuthForm = () => {
+        return (
+            <IdentityUniversalAuthForm 
+                handlePopUpOpen={handlePopUpOpen}
+                handlePopUpToggle={handlePopUpToggle}
+                identityAuthMethodData={identityAuthMethodData}
+            />
+        );
+    }
+    
+    return (
+        <Modal
+            isOpen={popUp?.identityAuthMethod?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("identityAuthMethod", isOpen);
+            }}
+        >
+            <ModalContent title={`${identityAuthMethodData?.authMethod ? "Update" : "Configure"} Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}>
+                <Controller
+                    control={control}
+                    name="authMethod"
+                    defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                        <FormControl
+                            label="Auth Method"
+                            errorText={error?.message}
+                            isError={Boolean(error)}
+                        >
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full"
+                            >
+                                {identityAuthMethods.map(({ label, value }) => (
+                                    <SelectItem value={String(value || "")} key={label}>
+                                        {label}
+                                    </SelectItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    )}
+                />
+                {renderIdentityAuthForm()}
+                <UpgradePlanModal
+                    isOpen={popUp?.upgradePlan?.isOpen}
+                    onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                    text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+                />
+            </ModalContent>
+        </Modal>
+    );
+}
+

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

@@ -0,0 +1,239 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Input,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { 
+    useCreateIdentity,
+    useGetRoles,
+    useUpdateIdentity
+} from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    name: yup.string().required("MI name is required"),
+    role: yup.string(),
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["identity"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    data: {
+        identityId: string;
+        name: string;
+        authMethod?: IdentityAuthMethod;
+    }
+  ) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
+};
+
+export const IdentityModal = ({
+    popUp,
+    handlePopUpOpen,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?._id || "";
+
+    const { data: roles } = useGetRoles({
+        orgId
+    });
+    
+    const { mutateAsync: createMutateAsync } = useCreateIdentity();
+    const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema),
+        defaultValues: {
+            name: ""
+        }
+    });
+    
+    useEffect(() => {
+        
+        const identity = popUp?.identity?.data as { 
+            identityId: string;
+            name: string;
+            role: string;
+            customRole: {
+                name: string;
+                slug: string;
+            };
+        };
+
+        if (!roles?.length) return;
+    
+        if (identity) {
+            reset({
+                name: identity.name,
+                role: identity?.customRole?.slug ?? identity.role
+            });
+        } else {
+            reset({
+                name: "",
+                role: roles[0].slug
+            });
+        }
+    }, [popUp?.identity?.data, roles]);
+    
+    const onFormSubmit = async ({
+        name,
+        role,
+    }: FormData) => {
+        try {
+            
+            const identity = popUp?.identity?.data as { 
+                identityId: string;
+                name: string;
+                role: string;
+            };
+            
+            if (identity) {
+                // update
+                
+                await updateMutateAsync({
+                    identityId: identity.identityId,
+                    name,
+                    role: role || undefined,
+                    organizationId: orgId
+                });
+                
+                handlePopUpToggle("identity", false);
+            } else {
+                // create
+                
+                const { 
+                    _id: createdId,
+                    name: createdName,
+                    authMethod
+                } = await createMutateAsync({
+                    name,
+                    role: role || undefined,
+                    organizationId: orgId
+                });
+                
+                handlePopUpToggle("identity", false);
+                handlePopUpOpen("identityAuthMethod", {
+                    identityId: createdId,
+                    name: createdName,
+                    authMethod
+                });
+            }
+            
+            createNotification({
+                text: `Successfully ${popUp?.identity?.data ? "updated" : "created"} identity`,
+                type: "success"
+            });
+
+            reset();
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message
+                ?? `Failed to ${popUp?.identity?.data ? "updated" : "created"} identity`;
+            
+            createNotification({
+                text,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.identity?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("identity", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title={`${popUp?.identity?.data ? "Update" : "Create"} Identity`}>
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="name"
+                        render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                                label="Name"
+                                isError={Boolean(error)}
+                                errorText={error?.message}
+                            >
+                            <Input 
+                                {...field} 
+                                placeholder="Machine 1"
+                            />
+                            </FormControl>
+                        )}
+                    />
+                    <Controller
+                        control={control}
+                        name="role"
+                        defaultValue=""
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                                label={`${popUp?.identity?.data ? "Update" : ""} Role`}
+                                errorText={error?.message}
+                                isError={Boolean(error)}
+                                className="mt-4"
+                            >
+                                <Select
+                                    defaultValue={field.value}
+                                    {...field}
+                                    onValueChange={(e) => onChange(e)}
+                                    className="w-full"
+                                >
+                                    {(roles || []).map(({ name, slug }) => (
+                                        <SelectItem value={slug} key={`st-role-${slug}`}>
+                                            {name}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        )}
+                    />
+                    <div className="flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={isSubmitting}
+                            isDisabled={isSubmitting}
+                        >
+                            {popUp?.identity?.data ? "Update" : "Create"}
+                        </Button>
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain"
+                            onClick={() => handlePopUpToggle("identity", false)}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

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

@@ -0,0 +1,122 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { 
+  Button,
+  DeleteActionModal
+} from "@app/components/v2";
+import { 
+    OrgPermissionActions, 
+    OrgPermissionSubjects, 
+    useOrganization} from "@app/context";
+import { withPermission } from "@app/hoc";
+import { useDeleteIdentity } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { IdentityAuthMethodModal } from "./IdentityAuthMethodModal";
+import { IdentityModal } from "./IdentityModal";
+import { IdentityTable } from "./IdentityTable";
+import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";
+
+export const IdentitySection = withPermission(
+    () => {
+        const { currentOrg } = useOrganization();
+        const orgId = currentOrg?._id || "";
+    
+        const { createNotification } = useNotificationContext();
+        const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
+        const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+            "identity",
+            "identityAuthMethod",
+            "deleteIdentity",
+            "universalAuthClientSecret",
+            "deleteUniversalAuthClientSecret",
+            "upgradePlan"
+        ] as const);
+        
+        const onDeleteIdentitySubmit = async (identityId: string) => {
+            try {
+                
+                await deleteMutateAsync({
+                    identityId,
+                    organizationId: orgId
+                });
+                
+                createNotification({
+                    text: "Successfully deleted identity",
+                    type: "success"
+                });
+                
+                handlePopUpClose("deleteIdentity");
+            } catch (err) {
+                console.error(err);
+                const error = err as any;
+                const text = error?.response?.data?.message
+                    ?? "Failed to delete identity"
+
+                createNotification({
+                    text,
+                    type: "error"
+                });
+            }
+        }
+        
+        return (
+            <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+                <div className="flex justify-between mb-8">
+                    <p className="text-xl font-semibold text-mineshaft-100">
+                        Identities
+                    </p>
+                    <OrgPermissionCan
+                        I={OrgPermissionActions.Create}
+                        a={OrgPermissionSubjects.Identity}
+                    >
+                        {(isAllowed) => (
+                        <Button
+                            colorSchema="secondary"
+                            type="submit"
+                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                            onClick={() => handlePopUpOpen("identity")}
+                            isDisabled={!isAllowed}
+                        >
+                            Create identity
+                        </Button>
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <IdentityTable handlePopUpOpen={handlePopUpOpen} />
+                <IdentityModal
+                    popUp={popUp}
+                    handlePopUpOpen={handlePopUpOpen}
+                    handlePopUpToggle={handlePopUpToggle}
+                />
+                <IdentityAuthMethodModal 
+                    popUp={popUp}
+                    handlePopUpOpen={handlePopUpOpen}
+                    handlePopUpToggle={handlePopUpToggle}
+                />
+                <IdentityUniversalAuthClientSecretModal 
+                    popUp={popUp}
+                    handlePopUpOpen={handlePopUpOpen}
+                    handlePopUpToggle={handlePopUpToggle}
+                />
+                <DeleteActionModal
+                    isOpen={popUp.deleteIdentity.isOpen}
+                    title={`Are you sure want to delete ${
+                        (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+                    }?`}
+                    onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+                    deleteKey="confirm"
+                    onDeleteApproved={() => 
+                        onDeleteIdentitySubmit(
+                            (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+                        )
+                    }
+                />
+        </div>
+        );
+    },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Identity }
+);

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

@@ -0,0 +1,267 @@
+import { faKey, faLock,faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+    EmptyState,
+    IconButton,
+    Select,
+    SelectItem,
+    Table,
+    TableContainer,
+    TableSkeleton,
+    TBody,
+    Td,
+    Th,
+    THead,
+    Tooltip,
+    Tr
+} from "@app/components/v2";
+import { 
+    OrgPermissionActions,
+    OrgPermissionSubjects,
+    useOrganization} from "@app/context";
+import {
+    useGetIdentityMembershipOrgs,
+    useGetRoles,
+    useUpdateIdentity} from "@app/hooks/api";
+import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+// TODO: some kind of map
+
+type Props = {
+    handlePopUpOpen: (
+      popUpName: keyof UsePopUpState<["deleteIdentity", "identity", "universalAuthClientSecret", "identityAuthMethod"]>,
+      data?: {
+        identityId?: string;
+        name?: string;
+        authMethod?: string;
+        role?: string;
+        customRole?: {
+            name: string;
+            slug: string;
+        };
+      }
+    ) => void;
+  };
+
+export const IdentityTable = ({
+    handlePopUpOpen
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?._id || "";
+
+    const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+    const { data, isLoading } = useGetIdentityMembershipOrgs(orgId);
+    
+    const { data: roles } = useGetRoles({
+        orgId
+    });
+    
+    const handleChangeRole = async ({
+        identityId,
+        role
+    }: {
+        identityId: string;
+        role: string;
+    }) => {
+        try {
+            
+            await updateMutateAsync({
+                identityId,
+                role,
+                organizationId: orgId
+            });
+            
+            createNotification({
+                text: "Successfully updated identity role",
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message ?? "Failed to update identity role"
+            
+            createNotification({
+                text,
+                type: "error"
+              });
+        }
+    }
+      
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th>Name</Th>
+                        <Th>Role</Th>
+                        <Th>Auth Method</Th>
+                        <Th className="w-5" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={4} innerKey="org-identities" />}
+                    {!isLoading &&
+                    data &&
+                    data.length > 0 &&
+                    data.map(({
+                        identity: {
+                            _id,
+                            name,
+                            authMethod
+                        },
+                        role,
+                        customRole
+                    }) => {
+                        return (
+                            <Tr className="h-10" key={`identity-${_id}`}>
+                                <Td>{name}</Td>
+                                <Td>
+                                    <OrgPermissionCan
+                                        I={OrgPermissionActions.Edit}
+                                        a={OrgPermissionSubjects.Identity}
+                                    >
+                                        {(isAllowed) => {
+                                            return (
+                                                <Select
+                                                    value={
+                                                        role === "custom" ? (customRole?.slug as string) : role
+                                                    }
+                                                    isDisabled={!isAllowed}
+                                                    className="w-40 bg-mineshaft-600"
+                                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                                    onValueChange={(selectedRole) => 
+                                                        handleChangeRole({
+                                                            identityId: _id,
+                                                            role: selectedRole
+                                                        })
+                                                    }
+                                                >
+                                                    {(roles || [])
+                                                        .map(({ slug, name: roleName }) => (
+                                                            <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                                            {roleName}
+                                                            </SelectItem>
+                                                        ))}
+                                                </Select>
+                                            );
+                                        }}
+                                    </OrgPermissionCan>
+                                </Td> 
+                                <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
+                                <Td>
+                                    <div className="flex justify-end items-center">
+                                        {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
+                                            <Tooltip content="Manage client ID/secrets">
+                                                <IconButton
+                                                    onClick={async () => {
+                                                        handlePopUpOpen("universalAuthClientSecret", {
+                                                            identityId: _id,
+                                                            name
+                                                        });
+                                                    }}
+                                                    size="lg"
+                                                    colorSchema="primary"
+                                                    variant="plain"
+                                                    ariaLabel="update"
+                                                    // isDisabled={!isAllowed}
+                                                >
+                                                    <FontAwesomeIcon icon={faKey} />
+                                                </IconButton>
+                                            </Tooltip>
+                                        )}
+                                        <OrgPermissionCan
+                                            I={OrgPermissionActions.Edit}
+                                            a={OrgPermissionSubjects.Identity}
+                                        >
+                                            {(isAllowed) => (
+                                                <Tooltip content="Manage auth method">
+                                                    <IconButton
+                                                        onClick={async () => {
+                                                            handlePopUpOpen("identityAuthMethod", {
+                                                                identityId: _id,
+                                                                name,
+                                                                authMethod
+                                                            });
+                                                        }}
+                                                        size="lg"
+                                                        colorSchema="primary"
+                                                        variant="plain"
+                                                        ariaLabel="update"
+                                                        className="ml-4"
+                                                        isDisabled={!isAllowed}
+                                                    >
+                                                        <FontAwesomeIcon icon={faLock} />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            )}
+                                        </OrgPermissionCan>
+                                        <OrgPermissionCan
+                                            I={OrgPermissionActions.Edit}
+                                            a={OrgPermissionSubjects.Identity}
+                                        >
+                                            {(isAllowed) => (
+                                                <IconButton
+                                                    onClick={async () => {
+                                                        handlePopUpOpen("identity", {
+                                                            identityId: _id,
+                                                            name,
+                                                            role,
+                                                            customRole
+                                                        });
+                                                    }}
+                                                    size="lg"
+                                                    colorSchema="primary"
+                                                    variant="plain"
+                                                    ariaLabel="update"
+                                                    className="ml-4"
+                                                    isDisabled={!isAllowed}
+                                                >
+                                                    <FontAwesomeIcon icon={faPencil} />
+                                                </IconButton>
+                                            )}
+                                        </OrgPermissionCan>
+                                        <OrgPermissionCan
+                                            I={OrgPermissionActions.Delete}
+                                            a={OrgPermissionSubjects.Identity}
+                                        >
+                                            {(isAllowed) => (
+                                                <IconButton
+                                                    onClick={() => {
+                                                        handlePopUpOpen("deleteIdentity", {
+                                                            identityId: _id,
+                                                            name
+                                                        });
+                                                    }}
+                                                    size="lg"
+                                                    colorSchema="danger"
+                                                    variant="plain"
+                                                    ariaLabel="update"
+                                                    className="ml-4"
+                                                    isDisabled={!isAllowed}
+                                                >
+                                                    <FontAwesomeIcon icon={faXmark} />
+                                                </IconButton>
+                                            )}
+                                        </OrgPermissionCan>
+                                    </div>
+                                </Td>
+                            </Tr>
+                        );
+                    })}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={4}>
+                                <EmptyState title="No identities have been created in this organization" icon={faServer} />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}

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

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

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

@@ -0,0 +1,428 @@
+import { useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form"; 
+import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    IconButton,
+    Input,
+} from "@app/components/v2";
+import {
+    useOrganization,
+    useSubscription
+} from "@app/context";
+import { 
+    useAddIdentityUniversalAuth,
+    useGetIdentityUniversalAuth,
+    useUpdateIdentityUniversalAuth
+} from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    accessTokenTTL: yup
+        .string()
+        .required("Access Token TTL is required"),
+    accessTokenMaxTTL: yup
+        .string()
+        .required("Access Max Token TTL is required"),
+    accessTokenNumUsesLimit: yup
+        .string()
+        .required("Access Token Max Number of Uses is required"),
+    clientSecretTrustedIps: yup
+        .array(
+        yup.object({
+            ipAddress: yup.string().max(50).required().label("IP Address")
+        })
+        )
+        .min(1)
+        .required()
+        .label("Client Secret Trusted IP"),
+    accessTokenTrustedIps: yup
+        .array(
+        yup.object({
+            ipAddress: yup.string().max(50).required().label("IP Address")
+        })
+        )
+        .min(1)
+        .required()
+        .label("Access Token Trusted IP")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+    handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["identityAuthMethod"]>, state?: boolean) => void;
+    identityAuthMethodData: {
+        identityId: string;
+        name: string;
+        authMethod?: IdentityAuthMethod;
+    }
+}
+
+export const IdentityUniversalAuthForm = ({
+    handlePopUpOpen,
+    handlePopUpToggle,
+    identityAuthMethodData
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?._id || "";
+    const { subscription } = useSubscription();
+    const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
+    const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
+    const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "");
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema),
+        defaultValues: {
+            accessTokenTTL: "7200",
+            accessTokenMaxTTL: "0",
+            accessTokenNumUsesLimit: "0",
+            clientSecretTrustedIps: [{
+                ipAddress: "0.0.0.0/0"
+            }],
+            accessTokenTrustedIps: [{
+                ipAddress: "0.0.0.0/0"
+            }],
+        }
+    });
+
+    const {
+        fields: clientSecretTrustedIpsFields, 
+        append: appendClientSecretTrustedIp, 
+        remove: removeClientSecretTrustedIp 
+    } = useFieldArray({ control, name: "clientSecretTrustedIps" });
+    const { 
+        fields: accessTokenTrustedIpsFields, 
+        append: appendAccessTokenTrustedIp, 
+        remove: removeAccessTokenTrustedIp 
+    } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+    
+    useEffect(() => {
+        if (data) { // TODO: fix data type
+            reset({
+                accessTokenTTL: String(data.accessTokenTTL),
+                accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+                accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+                clientSecretTrustedIps: data.clientSecretTrustedIps.map(({ 
+                    ipAddress, 
+                    prefix 
+                }: IdentityTrustedIp) => {
+                    return ({
+                        ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+                    });
+                }),
+                accessTokenTrustedIps: data.accessTokenTrustedIps.map(({ 
+                    ipAddress, 
+                    prefix 
+                }: IdentityTrustedIp) => {
+                    return ({
+                        ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+                    });
+                })
+            });
+        } else {
+            reset({
+                accessTokenTTL: "7200",
+                accessTokenMaxTTL: "0",
+                accessTokenNumUsesLimit: "0",
+                clientSecretTrustedIps: [{
+                    ipAddress: "0.0.0.0/0"
+                }],
+                accessTokenTrustedIps: [{
+                    ipAddress: "0.0.0.0/0"
+                }]
+            });
+        }
+    }, [data]);
+
+    const onFormSubmit = async ({
+        accessTokenTTL,
+        accessTokenMaxTTL,
+        accessTokenNumUsesLimit,
+        clientSecretTrustedIps,
+        accessTokenTrustedIps
+    }: FormData) => {
+        try {
+            
+            if (!identityAuthMethodData) return;
+            
+            if (data) {
+                // update universal auth configuration
+                await updateMutateAsync({
+                    organizationId: orgId,
+                    identityId: identityAuthMethodData.identityId,
+                    clientSecretTrustedIps,
+                    accessTokenTTL: Number(accessTokenTTL),
+                    accessTokenMaxTTL: Number(accessTokenMaxTTL),
+                    accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+                    accessTokenTrustedIps,
+                });
+
+            } else {
+                // create new universal auth configuration
+
+                await addMutateAsync({
+                    organizationId: orgId,
+                    identityId: identityAuthMethodData.identityId,
+                    clientSecretTrustedIps,
+                    accessTokenTTL: Number(accessTokenTTL),
+                    accessTokenMaxTTL: Number(accessTokenMaxTTL),
+                    accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+                    accessTokenTrustedIps,
+                });
+            }
+            
+            handlePopUpToggle("identityAuthMethod", false);
+            
+            createNotification({
+                text: `Successfully ${identityAuthMethodData?.authMethod ? "updated" : "configured"} auth method`,
+                type: "success"
+            });
+
+            reset();
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message
+                ?? `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`;
+            
+            createNotification({
+                text,
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+                control={control}
+                defaultValue="7200"
+                name="accessTokenTTL"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Access Token TTL (seconds)"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="7200"
+                        type="number"
+                        min="0"
+                        step="1"
+                    />
+                    </FormControl>
+                )}
+            />
+            <Controller
+                control={control}
+                defaultValue="7200"
+                name="accessTokenMaxTTL"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Access Token Max TTL (seconds)"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="7200"
+                        type="number"
+                        min="0"
+                        step="1"
+                    />
+                    </FormControl>
+                )}
+            />
+            <Controller
+                control={control}
+                defaultValue="0"
+                name="accessTokenNumUsesLimit"
+                render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                        label="Access Token Max Number of Uses"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                    >
+                    <Input 
+                        {...field} 
+                        placeholder="0"
+                        type="number"
+                        min="0"
+                        step="1"
+                    />
+                    </FormControl>
+                )}
+            />
+            {clientSecretTrustedIpsFields.map(({ id }, index) => (
+                <div className="flex items-end space-x-2 mb-3" key={id}>
+                    <Controller
+                        control={control}
+                        name={`clientSecretTrustedIps.${index}.ipAddress`}
+                        defaultValue="0.0.0.0/0"
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <FormControl
+                                    className="mb-0 flex-grow"
+                                    label={index === 0 ? "Client Secret Trusted IPs" : undefined}
+                                    isError={Boolean(error)}
+                                    errorText={error?.message}
+                                >
+                                <Input 
+                                    value={field.value}
+                                    onChange={(e) => {
+                                        if (subscription?.ipAllowlisting) {
+                                            field.onChange(e);
+                                            return;
+                                        }
+                                        
+                                        handlePopUpOpen("upgradePlan");
+                                    }}
+                                    placeholder="123.456.789.0" 
+                                />
+                                </FormControl>
+                            );
+                        }}
+                    />
+                    <IconButton
+                        onClick={() => {
+                            if (subscription?.ipAllowlisting) {
+                                removeClientSecretTrustedIp(index);
+                                return;
+                            }
+                            
+                            handlePopUpOpen("upgradePlan");
+                        }}
+                        size="lg"
+                        colorSchema="danger"
+                        variant="plain"
+                        ariaLabel="update"
+                        className="p-3"
+                    >
+                        <FontAwesomeIcon icon={faXmark} />
+                    </IconButton>
+                </div>
+            ))}
+            <div className="my-4 ml-1">
+                <Button
+                    variant="outline_bg"
+                    onClick={() => {
+                        if (subscription?.ipAllowlisting) {
+                            appendClientSecretTrustedIp({
+                                ipAddress: "0.0.0.0/0"
+                            })
+                            return;
+                        }
+
+                        handlePopUpOpen("upgradePlan");
+                    }}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    size="xs"
+                >
+                    Add IP Address
+                </Button>
+            </div>
+            {accessTokenTrustedIpsFields.map(({ id }, index) => (
+                <div className="flex items-end space-x-2 mb-3" key={id}>
+                    <Controller
+                        control={control}
+                        name={`accessTokenTrustedIps.${index}.ipAddress`}
+                        defaultValue="0.0.0.0/0"
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <FormControl
+                                    className="mb-0 flex-grow"
+                                    label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                                    isError={Boolean(error)}
+                                    errorText={error?.message}
+                                >
+                                <Input 
+                                    value={field.value}
+                                    onChange={(e) => {
+                                        if (subscription?.ipAllowlisting) {
+                                            field.onChange(e);
+                                            return;
+                                        }
+                                        
+                                        handlePopUpOpen("upgradePlan");
+                                    }}
+                                    placeholder="123.456.789.0" 
+                                />
+                                </FormControl>
+                            );
+                        }}
+                    />
+                    <IconButton
+                        onClick={() => {
+                            if (subscription?.ipAllowlisting) {
+                                removeAccessTokenTrustedIp(index);
+                                return;
+                            }
+                            
+                            handlePopUpOpen("upgradePlan");
+                        }}
+                        size="lg"
+                        colorSchema="danger"
+                        variant="plain"
+                        ariaLabel="update"
+                        className="p-3"
+                    >
+                        <FontAwesomeIcon icon={faXmark} />
+                    </IconButton>
+                </div>
+            ))}
+            <div className="my-4 ml-1">
+                <Button
+                    variant="outline_bg"
+                    onClick={() => {
+                        if (subscription?.ipAllowlisting) {
+                            appendAccessTokenTrustedIp({
+                                ipAddress: "0.0.0.0/0"
+                            })
+                            return;
+                        }
+
+                        handlePopUpOpen("upgradePlan");
+                    }}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    size="xs"
+                >
+                    Add IP Address
+                </Button>
+            </div>
+            <div className="flex items-center">
+                <Button
+                    className="mr-4"
+                    size="sm"
+                    type="submit"
+                    isLoading={isSubmitting}
+                    isDisabled={isSubmitting}
+                >
+                    {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+                </Button>
+                <Button 
+                    colorSchema="secondary" 
+                    variant="plain"
+                    onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+                >
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}

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

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

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

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

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

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

frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx

@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+
+import { OrgMembersSection } from "./components";
+
+export const OrgMembersTab = () => {
+    return (
+        <motion.div
+            key="panel-service-token"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+        >
+            <OrgMembersSection />
+        </motion.div>
+    );
+}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -0,0 +1,176 @@
+import { Controller, useForm } from "react-hook-form";
+import {
+  faCheck,
+  faCopy,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
+import {
+  useAddUserToOrg,
+  useFetchServerStatus
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const addMemberFormSchema = yup.object({
+    email: yup.string().email().required().label("Email").trim().lowercase()
+});
+
+type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;
+
+type Props = {
+    popUp: UsePopUpState<["addMember"]>;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["addMember"]>, state?: boolean) => void;
+    completeInviteLink: string;
+    setCompleteInviteLink: (link: string) => void;
+};
+
+export const AddOrgMemberModal = ({
+    popUp,
+    handlePopUpToggle,
+    completeInviteLink,
+    setCompleteInviteLink
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+
+    const { data: serverDetails } = useFetchServerStatus();
+    const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
+
+    const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+      } = useForm<TAddMemberForm>({ resolver: yupResolver(addMemberFormSchema) });
+
+    const onAddMember = async ({ email }: TAddMemberForm) => {
+        if (!currentOrg?._id) return;
+    
+        try {
+            const { data } = await addUserMutateAsync({
+                organizationId: currentOrg?._id,
+                inviteeEmail: email
+            });
+
+            setCompleteInviteLink(data?.completeInviteLink ??"");
+
+            // only show this notification when email is configured.
+            // A [completeInviteLink] will not be sent if smtp is configured
+
+            if (!data.completeInviteLink) {
+                createNotification({
+                    text: "Successfully invited user to the organization.",
+                    type: "success"
+                });
+            }
+        } catch (error) {
+          console.error(error);
+          createNotification({
+            text: "Failed to invite user to org",
+            type: "error"
+          });
+        }
+
+        if (serverDetails?.emailConfigured) {
+            handlePopUpToggle("addMember", false);
+        }
+        
+        reset();
+    };
+
+    const copyTokenToClipboard = () => {
+        navigator.clipboard.writeText(completeInviteLink as string);
+        setInviteLinkCopied.on();
+    };
+    
+    return (
+        <Modal
+            isOpen={popUp?.addMember?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("addMember", isOpen);
+                setCompleteInviteLink("");
+            }}
+        >
+        <ModalContent
+            title={`Invite others to ${currentOrg?.name}`}
+            subTitle={
+                <div>
+                {!completeInviteLink && (
+                    <div>
+                    An invite is specific to an email address and expires after 1 day.
+                    <br />
+                    For security reasons, you will need to separately add members to projects.
+                    </div>
+                )}
+                {completeInviteLink &&
+                    "This Infisical instance does not have a email provider setup. Please share this invite link with the invitee manually"}
+                </div>
+            }
+        >
+                {!completeInviteLink && (
+                    <form onSubmit={handleSubmit(onAddMember)}>
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="email"
+                        render={({ field, fieldState: { error } }) => (
+                        <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                            <Input {...field} />
+                        </FormControl>
+                        )}
+                    />
+                    <div className="mt-8 flex items-center">
+                        <Button
+                        className="mr-4"
+                        size="sm"
+                        type="submit"
+                        isLoading={isSubmitting}
+                        isDisabled={isSubmitting}
+                        >
+                        Add Member
+                        </Button>
+                        <Button
+                        colorSchema="secondary"
+                        variant="plain"
+                        onClick={() => handlePopUpToggle("addMember", false)}
+                        >
+                        Cancel
+                        </Button>
+                    </div>
+                    </form>
+                )}
+                {completeInviteLink && (
+                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                    <p className="mr-4 break-all">{completeInviteLink}</p>
+                    <IconButton
+                        ariaLabel="copy icon"
+                        colorSchema="secondary"
+                        className="group relative"
+                        onClick={copyTokenToClipboard}
+                    >
+                        <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
+                        <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                        click to copy
+                        </span>
+                    </IconButton>
+                    </div>
+                )}
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  EmailServiceSetupModal,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription,
+} from "@app/context";
+import {
+  useDeleteOrgMembership,
+  useGetSSOConfig,
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddOrgMemberModal } from "./AddOrgMemberModal";
+import { OrgMembersTable } from "./OrgMembersTable";
+
+export const OrgMembersSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { subscription } = useSubscription();
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?._id ?? "";
+    
+    const [completeInviteLink, setCompleteInviteLink] = useState<string>("");
+
+    const { data: ssoConfig, isLoading: isLoadingSSOConfig } = useGetSSOConfig(orgId);
+    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+        "addMember",
+        "removeMember",
+        "upgradePlan",
+        "setUpEmail"
+    ] as const);
+
+    const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
+
+    const isMoreUsersNotAllowed = subscription?.memberLimit
+        ? subscription.membersUsed >= subscription.memberLimit
+        : false;
+
+    const handleAddMemberModal = () => {
+        if (!isLoadingSSOConfig && ssoConfig && ssoConfig.isActive) {
+            createNotification({
+                text: "You cannot invite users when SAML SSO is configured for your organization",
+                type: "error"
+            });
+            return;
+        }
+
+        if (isMoreUsersNotAllowed) {
+            handlePopUpOpen("upgradePlan", {
+                description: "You can add more members if you upgrade your Infisical plan."
+            });
+        } else {
+            handlePopUpOpen("addMember");
+        }
+    }
+
+    const onRemoveMemberSubmit = async (orgMembershipId: string) => {
+        try {
+            await deleteMutateAsync({
+                orgId,
+                membershipId: orgMembershipId
+            });
+            
+            createNotification({
+                text: "Successfully removed user from org",
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to remove user from the organization",
+                type: "error"
+            });
+        }
+        
+        handlePopUpClose("removeMember");
+    }
+
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <div className="flex justify-between mb-8">
+                <p className="text-xl font-semibold text-mineshaft-100">
+                    Members
+                </p>
+                <OrgPermissionCan
+                    I={OrgPermissionActions.Create}
+                    a={OrgPermissionSubjects.Member}
+                >
+                    {(isAllowed) => (
+                        <Button
+                        colorSchema="secondary"
+                        type="submit"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        onClick={() => handleAddMemberModal()}
+                        isDisabled={!isAllowed}
+                        >
+                            Add Member
+                        </Button>
+                    )}
+                </OrgPermissionCan>
+            </div>
+            <OrgMembersTable 
+                handlePopUpOpen={handlePopUpOpen} 
+                setCompleteInviteLink={setCompleteInviteLink}
+            />
+            <AddOrgMemberModal 
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+                completeInviteLink={completeInviteLink}
+                setCompleteInviteLink={setCompleteInviteLink} 
+            />
+            <DeleteActionModal
+                isOpen={popUp.removeMember.isOpen}
+                title={`Are you sure want to remove member with email ${
+                    (popUp?.removeMember?.data as { email: string })?.email || ""
+                }?`}
+                onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={() => 
+                    onRemoveMemberSubmit(
+                        (popUp?.removeMember?.data as { orgMembershipId: string })?.orgMembershipId
+                    )
+                }
+            />
+          <UpgradePlanModal
+            isOpen={popUp.upgradePlan.isOpen}
+            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+            text={(popUp.upgradePlan?.data as { description: string })?.description}
+        />
+        <EmailServiceSetupModal
+            isOpen={popUp.setUpEmail?.isOpen}
+            onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
+        />
+        </div>
+    );
+}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -0,0 +1,272 @@
+import { useCallback,useMemo, useState } from "react";
+import {
+  faMagnifyingGlass,
+  faUsers,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+    Button,
+    EmptyState,
+    IconButton,
+    Input,
+    Select,
+    SelectItem,
+    Table,
+    TableContainer,
+    TableSkeleton,
+    TBody,
+    Td,
+    Th,
+    THead,
+    Tr,
+} from "@app/components/v2";
+import { 
+    OrgPermissionActions,
+    OrgPermissionSubjects,
+    useOrganization,
+    useSubscription,
+    useUser} from "@app/context";
+import {
+    useAddUserToOrg,
+    useFetchServerStatus,
+    useGetOrgUsers,
+    useGetRoles,
+    useUpdateOrgUserRole
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+      popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
+      data?: {
+        orgMembershipId?: string;
+        email?: string;
+        description?: string;
+      }
+    ) => void;
+    setCompleteInviteLink: (link: string) => void;
+};
+
+export const OrgMembersTable = ({
+    handlePopUpOpen,
+    setCompleteInviteLink
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { subscription } = useSubscription();
+    const { currentOrg } = useOrganization();
+    const { user } = useUser();
+    const userId = user?._id || "";
+    const orgId = currentOrg?._id || "";
+
+    const { data: roles, isLoading: isRolesLoading } = useGetRoles({
+        orgId
+    });
+    
+    const [searchMemberFilter, setSearchMemberFilter] = useState("");
+
+    const { data: serverDetails } = useFetchServerStatus();
+    const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
+
+    const { mutateAsync: addUserMutateAsync } = useAddUserToOrg();
+    const { mutateAsync: updateUserOrgRole } = useUpdateOrgUserRole();
+
+    const onRoleChange = async (membershipId: string, role: string) => {
+        if (!currentOrg?._id) return;
+    
+        try {
+          // TODO: replace hardcoding default role
+          const isCustomRole = !["admin", "member"].includes(role);
+          
+          if (isCustomRole && subscription && !subscription?.rbac) {
+            handlePopUpOpen("upgradePlan", {
+              description: "You can assign custom roles to members if you upgrade your Infisical plan."
+            });
+            return;
+          }
+        
+          await updateUserOrgRole({ 
+            organizationId: currentOrg?._id, 
+            membershipId, role 
+          });
+
+          createNotification({
+            text: "Successfully updated user role",
+            type: "success"
+          });
+        } catch (error) {
+          console.error(error);
+          createNotification({
+            text: "Failed to update user role",
+            type: "error"
+          });
+        }
+    };
+    
+    const onResendInvite = async (email: string) => {
+        try {
+            
+            const { data } = await addUserMutateAsync({
+                organizationId: orgId,
+                inviteeEmail: email
+            });
+
+            setCompleteInviteLink(data?.completeInviteLink || "");
+            
+            if (!data.completeInviteLink) {
+                createNotification({
+                  text: `Successfully resent invite to ${email}`,
+                  type: "success"
+                });
+            }
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to resend invite to ${email}`,
+                type: "error"
+            });
+        }
+    }
+
+    const isLoading = isMembersLoading || isRolesLoading;
+
+    const isIamOwner = useMemo(
+        () => members?.find(({ user: u }) => userId === u?._id)?.role === "owner",
+        [userId, members]
+      );
+    
+      const findRoleFromId = useCallback(
+        (roleId: string) => {
+          return (roles || []).find(({ _id: id }) => id === roleId);
+        },
+        [roles]
+      );
+
+    const filterdUser = useMemo(
+        () =>
+          members?.filter(
+            ({ user: u, inviteEmail }) =>
+              u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
+              u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
+              u?.email?.toLowerCase().includes(searchMemberFilter) ||
+              inviteEmail?.includes(searchMemberFilter)
+          ),
+        [members, searchMemberFilter]
+      );
+    
+    return (
+        <div>
+        <Input
+            value={searchMemberFilter}
+            onChange={(e) => setSearchMemberFilter(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            placeholder="Search members..."
+        />
+        <TableContainer className="mt-4">
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Name</Th>
+                <Th>Email</Th>
+                <Th>Role</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
+              {!isLoading &&
+                filterdUser?.map(
+                  ({ user: u, inviteEmail, role, customRole, _id: orgMembershipId, status }) => {
+                    const name = u ? `${u.firstName} ${u.lastName}` : "-";
+                    const email = u?.email || inviteEmail;
+                    return (
+                      <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+                        <Td>{name}</Td>
+                        <Td>{email}</Td>
+                        <Td>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Member}
+                          >
+                            {(isAllowed) => (
+                              <>
+                                {status === "accepted" && (
+                                  <Select
+                                    value={
+                                      role === "custom" ? findRoleFromId(customRole)?.slug : role
+                                    }
+                                    isDisabled={userId === u?._id || !isAllowed}
+                                    className="w-40 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>
+                                )}
+                                {(status === "invited" || status === "verified") &&
+                                  serverDetails?.emailConfigured && (
+                                    <Button
+                                      isDisabled={!isAllowed}
+                                      className="w-40"
+                                      colorSchema="primary"
+                                      variant="outline_bg"
+                                      onClick={() => onResendInvite(email)}
+                                    >
+                                      Resend Invite
+                                    </Button>
+                                  )}
+                              </>
+                            )}
+                          </OrgPermissionCan>
+                        </Td>
+                        <Td>
+                          {userId !== u?._id && (
+                            <OrgPermissionCan
+                              I={OrgPermissionActions.Delete}
+                              a={OrgPermissionSubjects.Member}
+                            >
+                              {(isAllowed) => (
+                                <IconButton
+                                    onClick={() => {
+                                        handlePopUpOpen("removeMember", { orgMembershipId, email })
+                                    }}
+                                    size="lg"
+                                    colorSchema="danger"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                    className="ml-4"
+                                    isDisabled={!isAllowed}
+                                >
+                                    <FontAwesomeIcon icon={faXmark} />
+                                </IconButton>
+                              )}
+                            </OrgPermissionCan>
+                          )}
+                        </Td>
+                      </Tr>
+                    );
+                  }
+                )}
+            </TBody>
+          </Table>
+          {!isLoading && filterdUser?.length === 0 && (
+            <EmptyState title="No project members found" icon={faUsers} />
+          )}
+        </TableContainer>
+
+        </div>
+    );
+}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/index.tsx

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

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/index.tsx

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

frontend/src/views/Org/MembersPage/components/OrgMembersTab/index.tsx

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

frontend/src/views/Org/MembersPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -1,577 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useRouter } from "next/router";
-import {
-  faCheck,
-  faCopy,
-  faMagnifyingGlass,
-  faPlus,
-  faTrash,
-  faUsers
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  decryptAssymmetric,
-  encryptAssymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import {
-  Button,
-  DeleteActionModal,
-  EmailServiceSetupModal,
-  EmptyState,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  Tag,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  UpgradePlanModal
-} from "@app/components/v2";
-import {
-  OrgPermissionActions,
-  OrgPermissionSubjects,
-  useOrganization,
-  useSubscription,
-  useUser,
-  useWorkspace
-} from "@app/context";
-import { usePopUp, useToggle } from "@app/hooks";
-import {
-  useAddUserToOrg,
-  useDeleteOrgMembership,
-  useGetOrgUsers,
-  useGetSSOConfig,
-  useGetUserWorkspaceMemberships,
-  useGetUserWsKey,
-  useUpdateOrgUserRole,
-  useUploadWsKey
-} from "@app/hooks/api";
-import { TRole } from "@app/hooks/api/roles/types";
-import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-
-type Props = {
-  roles?: TRole<undefined>[];
-  isRolesLoading?: boolean;
-};
-
-const addMemberFormSchema = yup.object({
-  email: yup.string().email().required().label("Email").trim().lowercase()
-});
-
-type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;
-
-export const OrgMembersTable = ({ roles = [], isRolesLoading }: Props) => {
-  const router = useRouter();
-  const { createNotification } = useNotificationContext();
-
-  const { currentOrg } = useOrganization();
-  const { workspaces, currentWorkspace } = useWorkspace();
-  const { user } = useUser();
-  const userId = user?._id || "";
-  const orgId = currentOrg?._id || "";
-  const workspaceId = currentWorkspace?._id || "";
-
-  const { data: ssoConfig, isLoading: isLoadingSSOConfig } = useGetSSOConfig(orgId);
-  const [searchMemberFilter, setSearchMemberFilter] = useState("");
-  const { data: serverDetails } = useFetchServerStatus();
-
-  const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "addMember",
-    "removeMember",
-    "upgradePlan",
-    "setUpEmail"
-  ] as const);
-  const { subscription } = useSubscription();
-
-  const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
-  const { data: workspaceMemberships, isLoading: IsWsMembershipLoading } =
-    useGetUserWorkspaceMemberships(orgId);
-  const { data: wsKey } = useGetUserWsKey(workspaceId);
-
-  const removeUserOrgMembership = useDeleteOrgMembership();
-  const addUserToOrg = useAddUserToOrg();
-  const updateOrgUserRole = useUpdateOrgUserRole();
-  const uploadWsKey = useUploadWsKey();
-
-  const [completeInviteLink, setCompleteInviteLink] = useState<string | undefined>("");
-
-  const isMoreUsersNotAllowed = subscription?.memberLimit
-    ? subscription.membersUsed >= subscription.memberLimit
-    : false;
-
-  useEffect(() => {
-    if (router.query.action === "invite") {
-      handlePopUpOpen("addMember");
-    }
-  }, []);
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<TAddMemberForm>({ resolver: yupResolver(addMemberFormSchema) });
-
-  const onAddMember = async ({ email }: TAddMemberForm) => {
-    if (!currentOrg?._id) return;
-
-    try {
-      const { data } = await addUserToOrg.mutateAsync({
-        organizationId: currentOrg?._id,
-        inviteeEmail: email
-      });
-      setCompleteInviteLink(data?.completeInviteLink);
-      // only show this notification when email is configured.
-      // A [completeInviteLink] will not be sent if smtp is configured
-      if (!data.completeInviteLink) {
-        createNotification({
-          text: "Successfully invited user to the organization.",
-          type: "success"
-        });
-      }
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to invite user to org",
-        type: "error"
-      });
-    }
-    if (serverDetails?.emailConfigured) {
-      handlePopUpClose("addMember");
-    }
-    reset();
-  };
-
-  const onAddUserToOrg = async (email: string) => {
-    if (!currentOrg?._id) return;
-
-    try {
-      const { data } = await addUserToOrg.mutateAsync({
-        organizationId: currentOrg?._id,
-        inviteeEmail: email
-      });
-      setCompleteInviteLink(data?.completeInviteLink);
-
-      // only show this notification when email is configured. A [completeInviteLink] will not be sent if smtp is configured
-      if (!data.completeInviteLink) {
-        createNotification({
-          text: "Successfully invited user to the organization.",
-          type: "success"
-        });
-      }
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to invite user to org",
-        type: "error"
-      });
-    }
-  };
-
-  const onRemoveOrgMemberApproved = async () => {
-    const membershipId = (popUp?.removeMember?.data as { id: string })?.id;
-    if (!currentOrg?._id) return;
-
-    try {
-      await removeUserOrgMembership.mutateAsync({ orgId: currentOrg?._id, membershipId });
-      createNotification({
-        text: "Successfully removed user from org",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to remove user from the organization",
-        type: "error"
-      });
-    }
-    handlePopUpClose("removeMember");
-  };
-
-  const isIamOwner = useMemo(
-    () => members?.find(({ user: u }) => userId === u?._id)?.role === "owner",
-    [userId, members]
-  );
-
-  const findRoleFromId = useCallback(
-    (roleId: string) => {
-      return roles.find(({ _id: id }) => id === roleId);
-    },
-    [roles]
-  );
-
-  const filterdUser = useMemo(
-    () =>
-      members?.filter(
-        ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
-      ),
-    [members, searchMemberFilter]
-  );
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (isInviteLinkCopied) {
-      timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
-    }
-    return () => clearTimeout(timer);
-  }, [isInviteLinkCopied]);
-
-  const onRoleChange = async (membershipId: string, role: string) => {
-    if (!currentOrg?._id) return;
-
-    try {
-      await updateOrgUserRole.mutateAsync({ organizationId: currentOrg?._id, membershipId, role });
-      createNotification({
-        text: "Successfully updated user role",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to update user role",
-        type: "error"
-      });
-    }
-  };
-
-  const onGrantAccess = async (grantedUserId: string, publicKey: string) => {
-    try {
-      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
-      if (!PRIVATE_KEY || !wsKey) return;
-
-      // assymmetrically decrypt symmetric key with local private key
-      const key = decryptAssymmetric({
-        ciphertext: wsKey.encryptedKey,
-        nonce: wsKey.nonce,
-        publicKey: wsKey.sender.publicKey,
-        privateKey: PRIVATE_KEY
-      });
-
-      const { ciphertext, nonce } = encryptAssymmetric({
-        plaintext: key,
-        publicKey,
-        privateKey: PRIVATE_KEY
-      });
-
-      await uploadWsKey.mutateAsync({
-        userId: grantedUserId,
-        nonce,
-        encryptedKey: ciphertext,
-        workspaceId: currentWorkspace?._id || ""
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to grant access to user",
-        type: "error"
-      });
-    }
-  };
-
-  const copyTokenToClipboard = () => {
-    navigator.clipboard.writeText(completeInviteLink as string);
-    setInviteLinkCopied.on();
-  };
-
-  const isLoading = isMembersLoading || IsWsMembershipLoading || isRolesLoading;
-
-  return (
-    <div className="w-full">
-      <div className="mb-4 flex">
-        <div className="mr-4 flex-1">
-          <Input
-            value={searchMemberFilter}
-            onChange={(e) => setSearchMemberFilter(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search members..."
-          />
-        </div>
-        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
-          {(isAllowed) => (
-            <Button
-              isDisabled={!isAllowed}
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => {
-                if (!isLoadingSSOConfig && ssoConfig && ssoConfig.isActive) {
-                  createNotification({
-                    text: "You cannot invite users when SAML SSO is configured for your organization",
-                    type: "error"
-                  });
-
-                  return;
-                }
-
-                if (isMoreUsersNotAllowed) {
-                  handlePopUpOpen("upgradePlan");
-                } else {
-                  handlePopUpOpen("addMember");
-                }
-              }}
-            >
-              Add Member
-            </Button>
-          )}
-        </OrgPermissionCan>
-      </div>
-      <div>
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Th>Name</Th>
-                <Th>Email</Th>
-                <Th>Role</Th>
-                <Th>Projects</Th>
-                <Th aria-label="actions" />
-              </Tr>
-            </THead>
-            <TBody>
-              {isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
-              {!isLoading &&
-                filterdUser?.map(
-                  ({ user: u, inviteEmail, role, customRole, _id: orgMembershipId, status }) => {
-                    const name = u ? `${u.firstName} ${u.lastName}` : "-";
-                    const email = u?.email || inviteEmail;
-                    const userWs = workspaceMemberships?.[u?._id];
-
-                    return (
-                      <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
-                        <Td>{name}</Td>
-                        <Td>{email}</Td>
-                        <Td>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Member}
-                          >
-                            {(isAllowed) => (
-                              <>
-                                {status === "accepted" && (
-                                  <Select
-                                    defaultValue={
-                                      role === "custom" ? findRoleFromId(customRole)?.slug : role
-                                    }
-                                    isDisabled={userId === u?._id || !isAllowed}
-                                    className="w-40 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>
-                                )}
-                                {(status === "invited" || status === "verified") &&
-                                  serverDetails?.emailConfigured && (
-                                    <Button
-                                      isDisabled={!isAllowed}
-                                      className="w-40"
-                                      colorSchema="primary"
-                                      variant="outline_bg"
-                                      onClick={() => onAddUserToOrg(email)}
-                                    >
-                                      Resend Invite
-                                    </Button>
-                                  )}
-                                {status === "completed" && (
-                                  <Button
-                                    colorSchema="secondary"
-                                    isDisabled={!isAllowed}
-                                    onClick={() => onGrantAccess(u?._id, u?.publicKey)}
-                                  >
-                                    Grant Access
-                                  </Button>
-                                )}
-                              </>
-                            )}
-                          </OrgPermissionCan>
-                        </Td>
-                        <Td>
-                          {userWs ? (
-                            userWs?.map(({ name: wsName, _id }) => (
-                              <Tag key={`user-${u._id}-workspace-${_id}`} className="my-1">
-                                {wsName}
-                              </Tag>
-                            ))
-                          ) : (
-                            <div className="flex flex-row">
-                              {(status === "invited" || status === "verified") &&
-                              serverDetails?.emailConfigured ? (
-                                <Tag colorSchema="red">
-                                  This user hasn&apos;t accepted the invite yet
-                                </Tag>
-                              ) : (
-                                <Tag colorSchema="red">
-                                  This user isn&apos;t part of any projects yet
-                                </Tag>
-                              )}
-                              {router.query.id !== "undefined" &&
-                                !(
-                                  (status === "invited" || status === "verified") &&
-                                  serverDetails?.emailConfigured
-                                ) && (
-                                  <button
-                                    type="button"
-                                    onClick={() =>
-                                      router.push(`/project/${workspaces[0]?._id}/members`)
-                                    }
-                                    className="w-max cursor-pointer rounded-sm bg-mineshaft px-1.5 py-0.5 text-sm duration-200 hover:bg-primary hover:text-black"
-                                  >
-                                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
-                                    Add to projects
-                                  </button>
-                                )}
-                            </div>
-                          )}
-                        </Td>
-                        <Td>
-                          {userId !== u?._id && (
-                            <OrgPermissionCan
-                              I={OrgPermissionActions.Delete}
-                              a={OrgPermissionSubjects.Member}
-                            >
-                              {(isAllowed) => (
-                                <IconButton
-                                  ariaLabel="delete"
-                                  colorSchema="danger"
-                                  isDisabled={userId === u?._id || !isAllowed}
-                                  onClick={() =>
-                                    handlePopUpOpen("removeMember", { id: orgMembershipId })
-                                  }
-                                >
-                                  <FontAwesomeIcon icon={faTrash} />
-                                </IconButton>
-                              )}
-                            </OrgPermissionCan>
-                          )}
-                        </Td>
-                      </Tr>
-                    );
-                  }
-                )}
-            </TBody>
-          </Table>
-          {!isLoading && filterdUser?.length === 0 && (
-            <EmptyState title="No project members found" icon={faUsers} />
-          )}
-        </TableContainer>
-      </div>
-      <Modal
-        isOpen={popUp?.addMember?.isOpen}
-        onOpenChange={(isOpen) => {
-          handlePopUpToggle("addMember", isOpen);
-          setCompleteInviteLink(undefined);
-        }}
-      >
-        <ModalContent
-          title={`Invite others to ${currentOrg?.name}`}
-          subTitle={
-            <div>
-              {!completeInviteLink && (
-                <div>
-                  An invite is specific to an email address and expires after 1 day.
-                  <br />
-                  For security reasons, you will need to separately add members to projects.
-                </div>
-              )}
-              {completeInviteLink &&
-                "This Infisical instance does not have a email provider setup. Please share this invite link with the invitee manually"}
-            </div>
-          }
-        >
-          {!completeInviteLink && (
-            <form onSubmit={handleSubmit(onAddMember)}>
-              <Controller
-                control={control}
-                defaultValue=""
-                name="email"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
-                    <Input {...field} />
-                  </FormControl>
-                )}
-              />
-              <div className="mt-8 flex items-center">
-                <Button
-                  className="mr-4"
-                  size="sm"
-                  type="submit"
-                  isLoading={isSubmitting}
-                  isDisabled={isSubmitting}
-                >
-                  Add Member
-                </Button>
-                <Button
-                  colorSchema="secondary"
-                  variant="plain"
-                  onClick={() => handlePopUpClose("addMember")}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </form>
-          )}
-          {completeInviteLink && (
-            <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-              <p className="mr-4 break-all">{completeInviteLink}</p>
-              <IconButton
-                ariaLabel="copy icon"
-                colorSchema="secondary"
-                className="group relative"
-                onClick={copyTokenToClipboard}
-              >
-                <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
-                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                  click to copy
-                </span>
-              </IconButton>
-            </div>
-          )}
-        </ModalContent>
-      </Modal>
-      <DeleteActionModal
-        isOpen={popUp.removeMember.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this user from the org?"
-        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
-        onDeleteApproved={onRemoveOrgMemberApproved}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add custom environments if you switch to Infisical's Team plan."
-      />
-      <EmailServiceSetupModal
-        isOpen={popUp.setUpEmail?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
-      />
-    </div>
-  );
-};

frontend/src/views/Org/MembersPage/components/OrgMembersTable/index.tsx

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

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -5,17 +5,16 @@ import {
   faContactCard,
   faMagnifyingGlass,
   faMoneyBill,
+  faServer,
   faSignIn,
   faUserCog,
-  faUsers
-} from "@fortawesome/free-solid-svg-icons";
+  faUsers} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
-import { useOrganization, useSubscription } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { useCreateRole, useUpdateRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
@@ -40,6 +39,12 @@ const SIMPLE_PERMISSION_OPTIONS = [
     icon: faUsers,
     formName: "member"
   },
+  {
+    title: "Machine identity management",
+    subtitle: "Create, view, update and remove (machine) identities from the organization",
+    icon: faServer,
+    formName: "identity"
+  },
   {
     title: "Billing & usage",
     subtitle: "Modify organization subscription plan",
@@ -79,10 +84,7 @@ const SIMPLE_PERMISSION_OPTIONS = [
 ] as const;
 
 export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
-  const { subscription } = useSubscription();
-  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
-
-  const isNonEditable = ["owner", "admin", "member"].includes(role?.slug || "");
+  const isNonEditable = ["owner", "admin", "member", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
   const { createNotification } = useNotificationContext();
@@ -121,11 +123,6 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
   };
 
   const handleFormSubmit = async (el: TFormSchema) => {
-    if (subscription && !subscription?.rbac) {
-      handlePopUpOpen("upgradePlan");
-      return;
-    }
-
     if (!isNewRole) {
       await handleRoleUpdate(el);
       return;
@@ -229,17 +226,6 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
           </Button>
         </div>
       </form>
-      {subscription && (
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text={
-            subscription.slug === null
-              ? "You can use RBAC under an Enterprise license"
-              : "You can use RBAC if you switch to Infisical's Team Plan."
-          }
-        />
-      )}
     </div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts

@@ -31,7 +31,8 @@ export const formSchema = z.object({
       "incident-contact": generalPermissionSchema,
       "secret-scanning": generalPermissionSchema,
       sso: generalPermissionSchema,
-      billing: generalPermissionSchema
+      billing: generalPermissionSchema,
+      "identity": generalPermissionSchema
     })
     .optional()
 });

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -6,14 +6,8 @@ import { TRole } from "@app/hooks/api/roles/types";
 import { OrgRoleModifySection } from "./OrgRoleModifySection";
 import { OrgRoleTable } from "./OrgRoleTable";
 
-type Props = {
-  roles?: TRole<undefined>[];
-  isRolesLoading?: boolean;
-};
-
-export const OrgRoleTabSection = ({ roles = [], isRolesLoading }: Props) => {
+export const OrgRoleTabSection = () => {
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
-
   return popUp.editRole.isOpen ? (
     <motion.div
       key="role-modify"
@@ -35,11 +29,7 @@ export const OrgRoleTabSection = ({ roles = [], isRolesLoading }: Props) => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: -30 }}
     >
-      <OrgRoleTable
-        roles={roles}
-        isRolesLoading={isRolesLoading}
-        onSelectRole={(role) => handlePopUpOpen("editRole", role)}
-      />
+      <OrgRoleTable onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
     </motion.div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -20,22 +20,26 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteRole } from "@app/hooks/api";
+import { useDeleteRole, useGetRoles } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
 type Props = {
-  isRolesLoading?: boolean;
-  roles?: TRole<undefined>[];
   onSelectRole: (role?: TRole<undefined>) => void;
 };
 
-export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props) => {
+export const OrgRoleTable = ({ 
+  onSelectRole 
+}: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?._id || "";
   const { createNotification } = useNotificationContext();
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
 
+  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
+    orgId
+  });
+
   const { mutateAsync: deleteRole } = useDeleteRole();
 
   const handleRoleDelete = async () => {
@@ -88,9 +92,9 @@ export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props
             </THead>
             <TBody>
               {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
+              {(roles as TRole<undefined>[])?.map((role) => {
                 const { _id: id, name, slug } = role;
-                const isNonMutatable = ["owner", "admin", "member"].includes(slug);
+                const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
 
                 return (
                   <Tr key={`role-list-${id}`}>

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

@@ -0,0 +1,3 @@
+export { OrgIdentityTab } from "./OrgIdentityTab";
+export { OrgMembersTab } from "./OrgMembersTab";
+export { OrgRoleTabSection } from "./OrgRoleTabSection";

frontend/src/views/Project/AuditLogsPage/components/LogsFilter.tsx

@@ -50,11 +50,11 @@ export const LogsFilter = ({ control, reset }: Props) => {
             {actor.metadata.name}
           </SelectItem>
         );
-      case ActorType.SERVICE_V3:
+      case ActorType.IDENTITY:
         return (
           <SelectItem
-            value={`${actor.type}-${actor.metadata.serviceId}`}
-            key={`service-actor-v3-filter-${actor.metadata.serviceId}`}
+            value={`${actor.type}-${actor.metadata.identityId}`}
+            key={`identity-filter-${actor.metadata.identityId}`}
           >
             {actor.metadata.name}
           </SelectItem>

frontend/src/views/Project/AuditLogsPage/components/LogsTable.tsx

@@ -31,6 +31,7 @@ const AUDIT_LOG_LIMIT = 15;
 
 export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate }: Props) => {
   const { currentWorkspace } = useWorkspace();
+
   const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useGetAuditLogs(
     currentWorkspace?._id ?? "",
     {

frontend/src/views/Project/AuditLogsPage/components/LogsTableRow.tsx

@@ -29,11 +29,11 @@ export const LogsTableRow = ({
                         <p>Service token</p>
                     </Td>
                 ); 
-            case ActorType.SERVICE_V3:
+            case ActorType.IDENTITY:
                     return (
                         <Td>
                             <p>{`${actor.metadata.name}`}</p>
-                            <p>Service token V3</p>
+                            <p>Machine Identity</p>
                         </Td>
                     );
             default:
@@ -167,22 +167,24 @@ export const LogsTableRow = ({
                         <p>{`Name: ${event.metadata.name}`}</p>
                     </Td>
                 );
-                case EventType.CREATE_SERVICE_TOKEN_V3:
+                case EventType.CREATE_IDENTITY:
                     return (
                         <Td>
+                            <p>{`ID: ${event.metadata.identityId}`}</p>
                             <p>{`Name: ${event.metadata.name}`}</p>
                         </Td>
                     );
-                case EventType.UPDATE_SERVICE_TOKEN_V3:
+                case EventType.UPDATE_IDENTITY:
                     return (
                         <Td>
+                            <p>{`ID: ${event.metadata.identityId}`}</p>
                             <p>{`Name: ${event.metadata.name}`}</p>
                         </Td>
                     );
-                case EventType.DELETE_SERVICE_TOKEN_V3:
+                case EventType.DELETE_IDENTITY:
                     return (
                         <Td>
-                            <p>{`Name: ${event.metadata.name}`}</p>
+                            <p>{`ID: ${event.metadata.identityId}`}</p>
                         </Td>
                     );
             case EventType.CREATE_ENVIRONMENT:

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -5,13 +5,17 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import { MemberListTab } from "./components/MemberListTab";
-import { ProjectRoleListTab } from "./components/ProjectRoleListTab";
-import { ServiceTokenTab } from "./components/ServiceTokenTab";
+import {
+  IdentityTab,
+  MemberListTab,
+  ProjectRoleListTab,
+  ServiceTokenTab
+} from "./components";
 
 enum TabSections {
   Member = "members",
   Roles = "roles",
+  Identities = "identities",
   ServiceTokens = "service-tokens"
 }
 
@@ -21,13 +25,21 @@ export const MembersPage = withProjectPermission(
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
           <p className="mr-4 mb-4 text-3xl font-semibold text-white">
-            Access Control
+            Project Access Control
           </p>
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
-              <Tab value={TabSections.Member}>Members</Tab>
+              <Tab value={TabSections.Member}>People</Tab>
+              <Tab value={TabSections.Identities}>
+                <div className="flex items-center">
+                  <p>Machine Identities</p>
+                  <div className="ml-2 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                    New
+                  </div>
+                </div>
+              </Tab>
               <Tab value={TabSections.ServiceTokens}>Service Tokens</Tab>
-              <Tab value={TabSections.Roles}>Roles</Tab>
+              <Tab value={TabSections.Roles}>Project Roles</Tab>
             </TabList>
             <TabPanel value={TabSections.Member}>
               <motion.div
@@ -40,6 +52,9 @@ export const MembersPage = withProjectPermission(
                 <MemberListTab />
               </motion.div>
             </TabPanel>
+            <TabPanel value={TabSections.Identities}>
+              <IdentityTab />
+            </TabPanel>
             <TabPanel value={TabSections.ServiceTokens}>
               <ServiceTokenTab />
             </TabPanel>

frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx

@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+
+import { 
+    IdentitySection,
+} from "./components";
+
+export const IdentityTab = () => {
+    return (
+        <motion.div
+            key="panel-identity"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+        >
+            <IdentitySection />
+        </motion.div>
+    );
+}

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -0,0 +1,203 @@
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import Link from "next/link";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem,
+} from "@app/components/v2";
+import {
+    useOrganization,
+    useWorkspace
+} from "@app/context";
+import { 
+    useAddIdentityToWorkspace,
+    useGetIdentityMembershipOrgs,
+    useGetRoles,
+    useGetWorkspaceIdentityMemberships
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    identityId: yup.string().required("Identity id is required"),
+    role: yup.string()
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["identity"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
+};
+
+export const IdentityModal = ({
+    popUp,
+    handlePopUpToggle
+}: Props) => {
+    
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
+
+    const orgId = currentOrg?._id || "";
+    const workspaceId = currentWorkspace?._id || "";
+    
+    const { data: identityMembershipOrgs } = useGetIdentityMembershipOrgs(orgId);
+    const { data: identityMemberships } = useGetWorkspaceIdentityMemberships(workspaceId);
+
+    const { data: roles } = useGetRoles({
+        orgId,
+        workspaceId
+    });
+
+    const { mutateAsync: addIdentityToWorkspaceMutateAsync } = useAddIdentityToWorkspace();
+    
+    const filteredIdentityMembershipOrgs = useMemo(() => {
+        const wsIdentityIds = new Map();
+        
+        identityMemberships?.forEach((identityMembership) => {
+            wsIdentityIds.set(identityMembership.identity._id, true);
+        });
+        
+        return (identityMembershipOrgs || []).filter(
+          ({ identity: i }) => !wsIdentityIds.has(i._id)
+        );
+    }, [identityMembershipOrgs, identityMemberships]);
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+    
+    const onFormSubmit = async ({
+        identityId,
+        role
+    }: FormData) => {
+        try {
+
+            await addIdentityToWorkspaceMutateAsync({
+                workspaceId,
+                identityId,
+                role: role || undefined
+            });
+            
+            createNotification({
+                text: "Successfully added identity to project",
+                type: "success"
+            });
+
+            reset();
+            handlePopUpToggle("identity", false);
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message
+                ?? "Failed to add identity to project";
+            
+            createNotification({
+                text,
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <Modal
+            isOpen={popUp?.identity?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("identity", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add Identity to Project">
+                {filteredIdentityMembershipOrgs.length ? (
+                    <form onSubmit={handleSubmit(onFormSubmit)}>
+                        <Controller
+                            control={control}
+                            name="identityId"
+                            defaultValue={filteredIdentityMembershipOrgs?.[0]?._id}
+                            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Identity"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Select
+                                        defaultValue={field.value}
+                                        {...field}
+                                        onValueChange={(e) => onChange(e)}
+                                        className="w-full"
+                                    >
+                                        {filteredIdentityMembershipOrgs.map(({ identity }) => (
+                                            <SelectItem value={identity._id} key={`org-identity-${identity._id}`}>
+                                                {identity.name}
+                                            </SelectItem>
+                                        ))}
+                                    </Select>
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="role"
+                            defaultValue=""
+                            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Role"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                    className="mt-4"
+                                >
+                                    <Select
+                                        defaultValue={field.value}
+                                        {...field}
+                                        onValueChange={(e) => onChange(e)}
+                                        className="w-full"
+                                    >
+                                        {(roles || []).map(({ name, slug }) => (
+                                            <SelectItem value={slug} key={`st-role-${slug}`}>
+                                                {name}
+                                            </SelectItem>
+                                        ))}
+                                    </Select>
+                                </FormControl>
+                            )}
+                        />
+                        <div className="flex items-center">
+                            <Button
+                                className="mr-4"
+                                size="sm"
+                                type="submit"
+                                isLoading={isSubmitting}
+                                isDisabled={isSubmitting}
+                            >
+                                {popUp?.identity?.data ? "Update" : "Create"}
+                            </Button>
+                            <Button colorSchema="secondary" variant="plain">
+                                Cancel
+                            </Button>
+                        </div>
+                    </form>
+                ) : (
+                    <div className="flex flex-col space-y-4">
+                        <div>All identities in your organization are already added.</div>
+                        <Link href={`/org/${currentWorkspace?.organization}/members`}>
+                            <Button variant="outline_bg">Create a new/another identities</Button>
+                        </Link>
+                    </div>
+                )}
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -0,0 +1,109 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { 
+  Button,
+  DeleteActionModal
+} from "@app/components/v2";
+import { 
+  ProjectPermissionActions, 
+  ProjectPermissionSub, 
+  useWorkspace} from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { useDeleteIdentityFromWorkspace } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { IdentityModal } from "./IdentityModal";
+import { IdentityTable } from "./IdentityTable";
+
+export const IdentitySection = withProjectPermission(
+  () => {
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace } = useWorkspace();
+
+    const workspaceId = currentWorkspace?._id ?? "";
+
+    const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
+    
+    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+      "identity",
+      "deleteIdentity",
+      "upgradePlan"
+    ] as const);
+    
+    const onRemoveIdentitySubmit = async (identityId: string) => {
+      try {
+
+        await deleteMutateAsync({
+            identityId,
+            workspaceId
+        });
+
+        createNotification({
+            text: "Successfully removed identity from project",
+            type: "success"
+        });
+        
+        handlePopUpClose("deleteIdentity");
+      } catch (err) {
+        console.error(err);
+        const error = err as any;
+        const text = error?.response?.data?.message ?? "Failed to remove identity from project"
+        
+        createNotification({
+            text,
+            type: "error"
+        });
+      }
+    }
+
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="flex justify-between mb-8">
+            <p className="text-xl font-semibold text-mineshaft-100">
+                Identities
+            </p>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Create}
+              a={ProjectPermissionSub.Identity}
+            >
+              {(isAllowed) => (
+                <Button
+                  colorSchema="secondary"
+                  type="submit"
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => handlePopUpOpen("identity")}
+                  isDisabled={!isAllowed}
+                >
+                  Add identity
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </div>
+            <IdentityTable 
+                handlePopUpOpen={handlePopUpOpen}
+            />
+            <IdentityModal 
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+          <DeleteActionModal
+            isOpen={popUp.deleteIdentity.isOpen}
+            title={`Are you sure want to remove ${
+              (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+            } from the project?`}
+            onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+            deleteKey="confirm"
+            onDeleteApproved={() => 
+              onRemoveIdentitySubmit(
+                (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+              )
+            }
+          />
+        </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Identity }
+);

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -0,0 +1,191 @@
+import { faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+    EmptyState,
+    IconButton,
+    Select,
+    SelectItem,
+    Table,
+    TableContainer,
+    TableSkeleton,
+    TBody,
+    Td,
+    Th,
+    THead,
+    Tr
+} from "@app/components/v2";
+import {
+    ProjectPermissionActions, 
+    ProjectPermissionSub, 
+    useOrganization,
+    useWorkspace,
+} from "@app/context";
+import {
+    useGetRoles,
+    useGetWorkspaceIdentityMemberships,
+    useUpdateIdentityWorkspaceRole} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+      popUpName: keyof UsePopUpState<["deleteIdentity", "identity"]>,
+      data?: {
+        identityId?: string;
+        name?: string;
+      }
+    ) => void;
+};
+
+export const IdentityTable = ({
+    handlePopUpOpen
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
+    const orgId = currentOrg?._id || "";
+    const workspaceId = currentWorkspace?._id || "";
+    const { data, isLoading } = useGetWorkspaceIdentityMemberships(currentWorkspace?._id || "");
+    
+    const { data: roles } = useGetRoles({
+        orgId,
+        workspaceId
+    });
+
+    const { mutateAsync: updateMutateAsync } = useUpdateIdentityWorkspaceRole();
+
+    const handleChangeRole = async ({
+        identityId,
+        role
+    }: {
+        identityId: string;
+        role: string;
+    }) => {
+        try {
+
+            await updateMutateAsync({
+                identityId,
+                workspaceId,
+                role
+            });
+            
+            createNotification({
+                text: "Successfully updated identity role",
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message ?? "Failed to update identity role"
+            
+            createNotification({
+                text,
+                type: "error"
+              });
+        }
+    }
+      
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th>Name</Th>
+                        <Th>Role</Th>
+                        <Th>Added on</Th>
+                        <Th className="w-5" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={7} innerKey="project-identities" />}
+                    {!isLoading &&
+                    data &&
+                    data.length > 0 &&
+                    data.map(({
+                        identity: {
+                            _id,
+                            name
+                        },
+                        role,
+                        customRole,
+                        createdAt
+                    }) => {
+                        return (
+                            <Tr className="h-10" key={`st-v3-${_id}`}>
+                                <Td>{name}</Td>
+                                <Td>
+                                    <ProjectPermissionCan
+                                        I={ProjectPermissionActions.Edit}
+                                        a={ProjectPermissionSub.Identity}
+                                    >
+                                        {(isAllowed) => {
+                                            return (
+                                                <Select
+                                                    value={
+                                                        role === "custom" ? (customRole?.slug as string) : role
+                                                    }
+                                                    isDisabled={!isAllowed}
+                                                    className="w-40 bg-mineshaft-600"
+                                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                                    onValueChange={(selectedRole) => 
+                                                        handleChangeRole({
+                                                            identityId: _id,
+                                                            role: selectedRole
+                                                        })
+                                                    }
+                                                >
+                                                    {(roles || [])
+                                                        .map(({ slug, name: roleName }) => (
+                                                            <SelectItem value={slug} key={`owner-option-${slug}`}>
+                                                                {roleName}
+                                                            </SelectItem>
+                                                        ))}
+                                                </Select>
+                                            );
+                                        }}
+                                    </ProjectPermissionCan>
+                                </Td> 
+                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                                <Td className="flex justify-end">
+                                    <ProjectPermissionCan
+                                        I={ProjectPermissionActions.Delete}
+                                        a={ProjectPermissionSub.Identity}
+                                    >
+                                        {(isAllowed) => (
+                                            <IconButton
+                                                onClick={() => {
+                                                    handlePopUpOpen("deleteIdentity", {
+                                                        identityId: _id,
+                                                        name
+                                                    });
+                                                }}
+                                                size="lg"
+                                                colorSchema="danger"
+                                                variant="plain"
+                                                ariaLabel="update"
+                                                className="ml-4"
+                                                isDisabled={!isAllowed}
+                                            >
+                                                <FontAwesomeIcon icon={faXmark} />
+                                            </IconButton>
+                                        )}
+                                    </ProjectPermissionCan>
+                                </Td>
+                            </Tr>
+                        );
+                    })}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={7}>
+                                <EmptyState title="No identities have been added to this project" icon={faServer} />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx

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

frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx

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

frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx

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

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
-import { faMagnifyingGlass, faPlus, faTrash, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { faMagnifyingGlass, faPlus, faUsers,faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -38,9 +38,9 @@ import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useOrganization,
+  useSubscription,
   useUser,
-  useWorkspace
-} from "@app/context";
+  useWorkspace} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   useAddUserToWs,
@@ -60,6 +60,7 @@ type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
 export const MemberListTab = () => {
   const { createNotification } = useNotificationContext();
+  const { subscription } = useSubscription();
   const { t } = useTranslation();
 
   const { currentOrg } = useOrganization();
@@ -78,7 +79,7 @@ export const MemberListTab = () => {
   const { data: wsKey } = useGetUserWsKey(workspaceId);
   const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
   const { data: orgUsers } = useGetOrgUsers(orgId);
-
+  
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
 
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -170,6 +171,15 @@ export const MemberListTab = () => {
     if (!currentOrg?._id) return;
 
     try {
+      const isCustomRole = !["admin", "member", "viewer"].includes(role);
+          
+      if (isCustomRole && subscription && !subscription?.rbac) {
+        handlePopUpOpen("upgradePlan", {
+          description: "You can assign custom roles to members if you upgrade your Infisical plan."
+        });
+        return;
+      }
+          
       await updateUserWorkspaceRole({ membershipId, role });
       createNotification({
         text: "Successfully updated user role",
@@ -205,7 +215,7 @@ export const MemberListTab = () => {
       ({ status, user: u }) => status === "accepted" && !wsUserEmails.has(u.email)
     );
   }, [orgUsers, members]);
-
+  
   const onGrantAccess = async (grantedUserId: string, publicKey: string) => {
     try {
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
@@ -243,29 +253,35 @@ export const MemberListTab = () => {
   const isLoading = isMembersLoading || isRolesLoading;
 
   return (
-    <div className="w-full">
-      <div className="mb-4 flex">
-        <div className="mr-4 flex-1">
-          <Input
-            value={searchMemberFilter}
-            onChange={(e) => setSearchMemberFilter(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search members..."
-          />
-        </div>
-        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}>
-          {(isAllowed) => (
-            <Button
-              isDisabled={!isAllowed}
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => handlePopUpOpen("addMember")}
-            >
-              Add Member
-            </Button>
-          )}
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex justify-between mb-8">
+        <p className="text-xl font-semibold text-mineshaft-100">
+            Members
+        </p>
+        <ProjectPermissionCan
+            I={ProjectPermissionActions.Create} 
+            a={ProjectPermissionSub.Member}
+        >
+            {(isAllowed) => (
+                <Button
+                colorSchema="secondary"
+                type="submit"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("addMember")}
+                isDisabled={!isAllowed}
+                >
+                    Add Member
+                </Button>
+            )}
         </ProjectPermissionCan>
       </div>
-      <div>
+      <Input
+        value={searchMemberFilter}
+        onChange={(e) => setSearchMemberFilter(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search members..."
+      />
+      <div className="mt-4">
         <TableContainer>
           <Table>
             <THead>
@@ -273,7 +289,7 @@ export const MemberListTab = () => {
                 <Th>Name</Th>
                 <Th>Email</Th>
                 <Th>Role</Th>
-                <Th aria-label="actions" />
+                <Th className="w-5" />
               </Tr>
             </THead>
             <TBody>
@@ -296,7 +312,7 @@ export const MemberListTab = () => {
                             {(isAllowed) => (
                               <>
                                 <Select
-                                  defaultValue={
+                                  value={
                                     role === "custom" ? findRoleFromId(customRole)?.slug : role
                                   }
                                   isDisabled={userId === u?._id || !isAllowed}
@@ -339,14 +355,17 @@ export const MemberListTab = () => {
                             >
                               {(isAllowed) => (
                                 <IconButton
-                                  ariaLabel="delete"
+                                  size="lg"
                                   colorSchema="danger"
+                                  variant="plain"
+                                  ariaLabel="update"
+                                  className="ml-4"
                                   isDisabled={userId === u?._id || !isAllowed}
                                   onClick={() =>
                                     handlePopUpOpen("removeMember", { id: membershipId })
                                   }
                                 >
-                                  <FontAwesomeIcon icon={faTrash} />
+                                  <FontAwesomeIcon icon={faXmark} />
                                 </IconButton>
                               )}
                             </ProjectPermissionCan>
@@ -434,7 +453,7 @@ export const MemberListTab = () => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add custom environments if you switch to Infisical's Team plan."
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
       />
     </div>
   );

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -64,8 +64,6 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
     }
   };
 
-  // roles={roles as TRole<string>[]}
-
   return (
     <div className="w-full">
       <div className="mb-4 flex">
@@ -103,7 +101,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
               {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
               {(roles as TRole<string>[])?.map((role) => {
                 const { _id: id, name, slug } = role;
-                const isNonMutatable = ["admin", "member", "viewer"].includes(slug);
+                const isNonMutatable = ["admin", "member", "viewer", "no-access"].includes(slug);
 
                 return (
                   <Tr key={`role-list-${id}`}>

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -9,6 +9,7 @@ import {
   faLock,
   faNetworkWired,
   faPuzzlePiece,
+  faServer,
   faShield,
   faTags,
   faUser,
@@ -18,9 +19,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
-import { ProjectPermissionSub, useOrganization, useSubscription, useWorkspace } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { ProjectPermissionSub, useOrganization, useWorkspace } from "@app/context";
 import { useCreateRole, useUpdateRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
@@ -60,6 +60,12 @@ const SINGLE_PERMISSION_LIST = [
     icon: faUser,
     formName: "member"
   },
+  {
+    title: "Machine identity management",
+    subtitle: "Add, view, update and remove (machine) identities from the project",
+    icon: faServer,
+    formName: "identity"
+  },
   {
     title: "Webhooks",
     subtitle: "Webhook management control",
@@ -110,16 +116,13 @@ type Props = {
 };
 
 export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
-  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
-
-  const isNonEditable = ["admin", "member", "viewer"].includes(role?.slug || "");
+  const isNonEditable = ["admin", "member", "viewer", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
   const { createNotification } = useNotificationContext();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?._id || "";
   const { currentWorkspace } = useWorkspace();
-  const { subscription } = useSubscription();
   const workspaceId = currentWorkspace?._id || "";
 
   const {
@@ -137,7 +140,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
 
   const handleRoleUpdate = async (el: TFormSchema) => {
     if (!role?._id) return;
-
+    
     try {
       await updateRole({
         orgId,
@@ -155,11 +158,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   };
 
   const handleFormSubmit = async (el: TFormSchema) => {
-    if (subscription && !subscription?.rbac) {
-      handlePopUpOpen("upgradePlan");
-      return;
-    }
-
     if (!isNewRole) {
       await handleRoleUpdate(el);
       return;
@@ -282,17 +280,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
           </Button>
         </div>
       </form>
-      {subscription && (
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text={
-            subscription.slug === null
-              ? "You can use RBAC under an Enterprise license"
-              : "You can use RBAC if you switch to Infisical's Team Plan."
-          }
-        />
-      )}
     </div>
   );
 };

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts

@@ -33,6 +33,7 @@ export const formSchema = z.object({
     .object({
       secrets: z.record(multiEnvPermissionSchema).optional(),
       member: generalPermissionSchema,
+      "identity": generalPermissionSchema,
       role: generalPermissionSchema,
       integrations: generalPermissionSchema,
       webhooks: generalPermissionSchema,

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx

@@ -23,6 +23,7 @@ type Props = {
     | "tags"
     | "audit-logs"
     | "ip-allowlist"
+    | "identity"
     | ProjectPermissionSub.SecretApproval;
   isNonEditable?: boolean;
   setValue: UseFormSetValue<TFormSchema>;

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx

@@ -2,7 +2,6 @@ import { motion } from "framer-motion";
 
 import { 
     ServiceTokenSection, 
-    // ServiceTokenV3Section 
 } from "./components";
 
 export const ServiceTokenTab = () => {
@@ -14,8 +13,7 @@ export const ServiceTokenTab = () => {
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
         >
-            {/* <ServiceTokenV3Section /> */}
             <ServiceTokenSection />
         </motion.div>
     );
-}
+}

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenV3Section/AddServiceTokenV3Modal.tsx

@@ -1,539 +0,0 @@
-import { useEffect, useState } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form"; 
-import { faCheck, faCopy,faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { motion } from "framer-motion";
-import nacl from "tweetnacl";
-import { encodeBase64 } from "tweetnacl-util";
-import * as yup from "yup";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    decryptAssymmetric,
-    encryptAssymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import {
-    Button,
-    FormControl,
-    IconButton,
-    Input,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem,
-    Switch,
-    Tab,
-    TabList,
-    TabPanel,
-    Tabs,
-    UpgradePlanModal} from "@app/components/v2";
-import {
-    useOrganization,
-    useSubscription,
-    useWorkspace
-} from "@app/context";
-import { useToggle } from "@app/hooks";
-import { 
-    useCreateServiceTokenV3,
-    useGetRoles,
-    useGetUserWsKey,
-    useUpdateServiceTokenV3} from "@app/hooks/api";
-import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-enum TabSections {
-    General = "general",
-    Advanced = "advanced"
-}
-
-const expirations = [
-    { label: "Never", value: "" },
-    { label: "1 day", value: "86400" },
-    { label: "7 days", value: "604800" },
-    { label: "1 month", value: "2592000" },
-    { label: "6 months", value: "15552000" },
-    { label: "12 months", value: "31104000" }
-];
-
-const schema = yup.object({
-    name: yup.string().required("ST V3 name is required"),
-    expiresIn: yup.string(),
-    accessTokenTTL: yup
-        .string()
-        .test("is-positive-integer", "Access Token TTL must be a positive integer", (value) => {
-            if (typeof value === "undefined") {
-                return false;
-            }
-            
-            const num = parseInt(value, 10);
-            return !Number.isNaN(num) && num > 0 && String(num) === value;
-        })
-        .required("Access Token TTL is required"),
-    role: yup.string().required("ST V3 role is required"),
-    trustedIps: yup
-        .array(
-        yup.object({
-            ipAddress: yup.string().max(50).required().label("IP Address")
-        })
-        )
-        .min(1)
-        .required()
-        .label("Trusted IP"),
-    isRefreshTokenRotationEnabled: yup.boolean().default(false)
-}).required();
-
-export type FormData = yup.InferType<typeof schema>;
-
-type Props = {
-  popUp: UsePopUpState<["serviceTokenV3", "upgradePlan"]>;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["serviceTokenV3", "upgradePlan"]>, state?: boolean) => void;
-};
-
-export const AddServiceTokenV3Modal = ({
-    popUp,
-    handlePopUpOpen,
-    handlePopUpToggle
-}: Props) => {
-    const [newServiceTokenJSON, setNewServiceTokenJSON] = useState("");
-    const [isServiceTokenJSONCopied, setIsServiceTokenJSONCopied] = useToggle(false);
-
-    const { subscription } = useSubscription();
-    const { currentOrg } = useOrganization();
-    const { currentWorkspace } = useWorkspace();
-
-    const orgId = currentOrg?._id || "";
-    const workspaceId = currentWorkspace?._id || "";
-
-    const { data: roles } = useGetRoles({
-        orgId,
-        workspaceId
-    });
-    
-    const { data: latestFileKey } = useGetUserWsKey(workspaceId);
-    const { mutateAsync: createMutateAsync } = useCreateServiceTokenV3();
-    const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
-    const { createNotification } = useNotificationContext();
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            name: "",
-            accessTokenTTL: "7200",
-            trustedIps: [{
-                ipAddress: "0.0.0.0/0"
-            }]
-        }
-    });
-
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
-
-        if (isServiceTokenJSONCopied) {
-            timer = setTimeout(() => setIsServiceTokenJSONCopied.off(), 2000);
-        }
-
-        return () => clearTimeout(timer);
-    }, [setIsServiceTokenJSONCopied]);
-
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newServiceTokenJSON);
-        setIsServiceTokenJSONCopied.on();
-    };
-    
-    useEffect(() => {
-        const serviceTokenData = popUp?.serviceTokenV3?.data as { 
-            serviceTokenDataId: string;
-            name: string;
-            role: string;
-            customRole: {
-                name: string;
-                slug: string;
-            };
-            trustedIps: ServiceTokenV3TrustedIp[];
-            accessTokenTTL: number;
-            isRefreshTokenRotationEnabled: boolean;
-        };
-        
-        if (!roles?.length) return;
-    
-        if (serviceTokenData) {
-            reset({
-                name: serviceTokenData.name,
-                role: serviceTokenData?.customRole?.slug ?? serviceTokenData.role,
-                trustedIps: serviceTokenData.trustedIps.map(({ 
-                    ipAddress, 
-                    prefix 
-                }: ServiceTokenV3TrustedIp) => {
-                    return ({
-                        ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
-                    });
-                }),
-                accessTokenTTL: String(serviceTokenData.accessTokenTTL),
-                isRefreshTokenRotationEnabled: serviceTokenData.isRefreshTokenRotationEnabled
-            });
-        } else {
-            reset({
-                name: "",
-                accessTokenTTL: "7200",
-                role: roles[0].slug,
-                trustedIps: [{
-                    ipAddress: "0.0.0.0/0"
-                }]
-            });
-        }
-    }, [popUp?.serviceTokenV3?.data, roles]);
-    
-    const { fields: tokenTrustedIps, append: appendTrustedIp, remove: removeTrustedIp } = useFieldArray({ control, name: "trustedIps" });
-    
-    const onFormSubmit = async ({
-        name,
-        expiresIn,
-        accessTokenTTL,
-        role,
-        trustedIps,
-        isRefreshTokenRotationEnabled
-    }: FormData) => {
-        try {
-            const serviceTokenData = popUp?.serviceTokenV3?.data as { 
-                serviceTokenDataId: string;
-                name: string;
-                role: string;
-            };
-            
-            if (serviceTokenData) {
-                // update
-                
-                await updateMutateAsync({
-                    serviceTokenDataId: serviceTokenData.serviceTokenDataId,
-                    name,
-                    role,
-                    trustedIps,
-                    expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
-                    accessTokenTTL: Number(accessTokenTTL),
-                    isRefreshTokenRotationEnabled
-                });
-                
-                handlePopUpToggle("serviceTokenV3", false);
-            } else {
-                // create
-                if (!workspaceId) return;
-                if (!latestFileKey) return;
-                
-                const pair = nacl.box.keyPair();
-                const secretKeyUint8Array = pair.secretKey;
-                const publicKeyUint8Array = pair.publicKey;
-                const privateKey = encodeBase64(secretKeyUint8Array);
-                const publicKey = encodeBase64(publicKeyUint8Array);
-                
-                const key = decryptAssymmetric({
-                    ciphertext: latestFileKey.encryptedKey,
-                    nonce: latestFileKey.nonce,
-                    publicKey: latestFileKey.sender.publicKey,
-                    privateKey: localStorage.getItem("PRIVATE_KEY") as string
-                });
-                
-                const { ciphertext, nonce } = encryptAssymmetric({
-                    plaintext: key,
-                    publicKey,
-                    privateKey: localStorage.getItem("PRIVATE_KEY") as string
-                });
-
-                const { refreshToken } = await createMutateAsync({
-                    name,
-                    role,
-                    workspaceId,
-                    publicKey,
-                    trustedIps,
-                    expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
-                    accessTokenTTL: Number(accessTokenTTL),
-                    encryptedKey: ciphertext,
-                    nonce,
-                    isRefreshTokenRotationEnabled
-                });
-                
-                const downloadData = {
-                    public_key: publicKey,
-                    private_key: privateKey,
-                    refresh_token: refreshToken
-                };
-
-                const serviceTokenJSON = JSON.stringify(downloadData, null, 2);
-                setNewServiceTokenJSON(serviceTokenJSON);
-
-                const blob = new Blob([serviceTokenJSON], { type: "application/json" });
-                const href = URL.createObjectURL(blob);
-                const link = document.createElement("a");
-                link.href = href;
-                link.download = `infisical_${name}.json`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-            }
-            
-            createNotification({
-                text: `Successfully ${popUp?.serviceTokenV3?.data ? "updated" : "created"} ST V3`,
-                type: "success"
-            });
-
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${popUp?.serviceTokenV3?.data ? "updated" : "created"} ST V3`,
-                type: "error"
-            });
-        }
-    }
-
-    const hasServiceTokenJSON = Boolean(newServiceTokenJSON);
-    
-    return (
-        <Modal
-            isOpen={popUp?.serviceTokenV3?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("serviceTokenV3", isOpen);
-                reset();
-                setNewServiceTokenJSON("");
-            }}
-        >
-            <ModalContent title={`${popUp?.serviceTokenV3?.data ? "Update" : "Create"} Service Token V3`}>
-                {!hasServiceTokenJSON ? (
-                    <form onSubmit={handleSubmit(onFormSubmit)}>
-                        <Tabs defaultValue={TabSections.General}>
-                            <TabList>
-                                <div className="flex flex-row border-b border-mineshaft-600 w-full">
-                                    <Tab value={TabSections.General}>General</Tab>
-                                    <Tab value={TabSections.Advanced}>Advanced</Tab>
-                                </div>
-                            </TabList>
-                            <TabPanel value={TabSections.General}>
-                                <motion.div
-                                    key="panel-1"
-                                    transition={{ duration: 0.15 }}
-                                    initial={{ opacity: 0, translateX: 30 }}
-                                    animate={{ opacity: 1, translateX: 0 }}
-                                    exit={{ opacity: 0, translateX: 30 }}
-                                >
-                                    <Controller
-                                        control={control}
-                                        defaultValue=""
-                                        name="name"
-                                        render={({ field, fieldState: { error } }) => (
-                                            <FormControl
-                                                label="Name"
-                                                isError={Boolean(error)}
-                                                errorText={error?.message}
-                                            >
-                                            <Input 
-                                                {...field} 
-                                                placeholder="My ST V3"
-                                            />
-                                            </FormControl>
-                                        )}
-                                    />
-                                    <Controller
-                                        control={control}
-                                        name="role"
-                                        defaultValue=""
-                                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                            <FormControl
-                                                label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Role`}
-                                                errorText={error?.message}
-                                                isError={Boolean(error)}
-                                                className="mt-4"
-                                            >
-                                                <Select
-                                                    defaultValue={field.value}
-                                                    {...field}
-                                                    onValueChange={(e) => onChange(e)}
-                                                    className="w-full"
-                                                >
-                                                    {(roles || []).map(({ name, slug }) => (
-                                                        <SelectItem value={slug} key={`st-role-${slug}`}>
-                                                            {name}
-                                                        </SelectItem>
-                                                    ))}
-                                                </Select>
-                                            </FormControl>
-                                        )}
-                                    />
-                                    <Controller
-                                        control={control}
-                                        name="expiresIn"
-                                        defaultValue=""
-                                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                            <FormControl
-                                                label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Refresh Token Expires In`}
-                                                errorText={error?.message}
-                                                isError={Boolean(error)}
-                                                className="mt-4"
-                                            >
-                                                <Select
-                                                    defaultValue={field.value}
-                                                    {...field}
-                                                    onValueChange={(e) => onChange(e)}
-                                                    className="w-full"
-                                                >
-                                                    {expirations.map(({ label, value }) => (
-                                                        <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
-                                                            {label}
-                                                        </SelectItem>
-                                                    ))}
-                                                </Select>
-                                            </FormControl>
-                                        )}
-                                    />
-                                </motion.div>
-                            </TabPanel>
-                            <TabPanel value={TabSections.Advanced}>
-                                <div>
-                                    {tokenTrustedIps.map(({ id }, index) => (
-                                        <div className="flex items-end space-x-2 mb-3" key={id}>
-                                            <Controller
-                                                control={control}
-                                                name={`trustedIps.${index}.ipAddress`}
-                                                defaultValue="0.0.0.0/0"
-                                                render={({ field, fieldState: { error } }) => {
-                                                    return (
-                                                        <FormControl
-                                                            className="mb-0 flex-grow"
-                                                            label={index === 0 ? "Trusted IP" : undefined}
-                                                            isError={Boolean(error)}
-                                                            errorText={error?.message}
-                                                        >
-                                                        <Input 
-                                                            value={field.value}
-                                                            onChange={(e) => {
-                                                                if (subscription?.ipAllowlisting) {
-                                                                    field.onChange(e);
-                                                                    return;
-                                                                }
-                                                                
-                                                                handlePopUpOpen("upgradePlan");
-                                                            }}
-                                                            placeholder="123.456.789.0" 
-                                                        />
-                                                        </FormControl>
-                                                    );
-                                                }}
-                                            />
-                                            <IconButton
-                                                onClick={() => {
-                                                    if (subscription?.ipAllowlisting) {
-                                                        removeTrustedIp(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) {
-                                                    appendTrustedIp({
-                                                        ipAddress: "0.0.0.0/0"
-                                                    })
-                                                    return;
-                                                }
-
-                                                handlePopUpOpen("upgradePlan");
-                                            }}
-                                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                                            size="xs"
-                                        >
-                                            Add IP Address
-                                        </Button>
-                                    </div>
-                                    <Controller
-                                        control={control}
-                                        defaultValue="7200"
-                                        name="accessTokenTTL"
-                                        render={({ field, fieldState: { error } }) => (
-                                            <FormControl
-                                                label="Access Token TTL (seconds)"
-                                                isError={Boolean(error)}
-                                                errorText={error?.message}
-                                            >
-                                            <Input 
-                                                {...field} 
-                                                placeholder="7200"
-                                            />
-                                            </FormControl>
-                                        )}
-                                    />
-                                    <div className="mt-8">
-                                        <Controller
-                                            control={control}
-                                            name="isRefreshTokenRotationEnabled"
-                                            render={({ field: { onChange, value } }) => (
-                                                <Switch
-                                                    id="label-refresh-token-rotation"
-                                                    onCheckedChange={(isChecked) => onChange(isChecked)}
-                                                    isChecked={value}
-                                                >
-                                                    Refresh Token Rotation
-                                                </Switch>
-                                            )}
-                                        />
-                                        <p className="mt-4 text-sm font-normal text-mineshaft-400">When enabled, as a result of exchanging a refresh token, a new refresh token will be issued and the existing token will be invalidated.</p>
-                                    </div>
-                                </div>
-                            </TabPanel>
-                        </Tabs>
-                        <div className="flex items-center">
-                            <Button
-                                className="mr-4"
-                                size="sm"
-                                type="submit"
-                                isLoading={isSubmitting}
-                                isDisabled={isSubmitting}
-                            >
-                                {popUp?.serviceTokenV3?.data ? "Update" : "Create"}
-                            </Button>
-                            <Button colorSchema="secondary" variant="plain">
-                                Cancel
-                            </Button>
-                        </div>
-                    </form>
-                ) : (
-                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                        <p className="mr-4 break-all">{newServiceTokenJSON}</p>
-                        <IconButton
-                            ariaLabel="copy icon"
-                            colorSchema="secondary"
-                            className="group relative"
-                            onClick={copyTokenToClipboard}
-                        >
-                            <FontAwesomeIcon icon={isServiceTokenJSONCopied ? faCheck : faCopy} />
-                            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                                Click to copy
-                            </span>
-                        </IconButton>
-                    </div>
-                )}
-                <UpgradePlanModal
-                    isOpen={popUp?.upgradePlan?.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                    text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-                />
-            </ModalContent>
-        </Modal>
-    );
-}

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenV3Section/ServiceTokenV3Section.tsx

@@ -1,98 +0,0 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { 
-  Button,
-  DeleteActionModal
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
-import {
-  useDeleteServiceTokenV3
-} from "@app/hooks/api";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-import { AddServiceTokenV3Modal } from "./AddServiceTokenV3Modal";
-import { ServiceTokenV3Table } from "./ServiceTokenV3Table";
-
-export const ServiceTokenV3Section = withProjectPermission(
-  () => {
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync: deleteMutateAsync } = useDeleteServiceTokenV3();
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-      "serviceTokenV3",
-      "deleteServiceTokenV3",
-      "upgradePlan"
-    ] as const);
-    
-    const onDeleteServiceTokenDataSubmit = async (serviceTokenDataId: string) => {
-      try {
-        await deleteMutateAsync({
-            serviceTokenDataId 
-        });
-        createNotification({
-            text: "Successfully deleted service token v3",
-            type: "success"
-        });
-        
-        handlePopUpClose("deleteServiceTokenV3");
-      } catch (err) {
-          console.error(err);
-          createNotification({
-              text: "Failed to delete service token v3",
-              type: "error"
-          });
-      }
-    }
-
-    return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="flex justify-between mb-8">
-            <p className="text-xl font-semibold text-mineshaft-100">
-              Service Tokens V3 (Beta)
-            </p>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Create}
-              a={ProjectPermissionSub.ServiceTokens}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="secondary"
-                  type="submit"
-                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                  onClick={() => handlePopUpOpen("serviceTokenV3")}
-                  isDisabled={!isAllowed}
-                >
-                  Create token
-                </Button>
-              )}
-            </ProjectPermissionCan>
-          </div>
-          <ServiceTokenV3Table 
-            handlePopUpOpen={handlePopUpOpen}
-          />
-          <AddServiceTokenV3Modal 
-            popUp={popUp}
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-          />
-          <DeleteActionModal
-            isOpen={popUp.deleteServiceTokenV3.isOpen}
-            title={`Are you sure want to delete ${
-              (popUp?.deleteServiceTokenV3?.data as { name: string })?.name || ""
-            }?`}
-            onChange={(isOpen) => handlePopUpToggle("deleteServiceTokenV3", isOpen)}
-            deleteKey="confirm"
-            onDeleteApproved={() => 
-              onDeleteServiceTokenDataSubmit(
-                (popUp?.deleteServiceTokenV3?.data as { serviceTokenDataId: string })?.serviceTokenDataId
-              )
-            }
-          />
-        </div>
-    );
-  },
-  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.ServiceTokens }
-);

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenV3Section/ServiceTokenV3Table.tsx

@@ -1,218 +0,0 @@
-import { faKey, faPencil,faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-    EmptyState,
-    IconButton,
-    Switch,
-    Table,
-    TableContainer,
-    TableSkeleton,
-    TBody,
-    Td,
-    Th,
-    THead,
-    Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub , useWorkspace } from "@app/context";
-import {
-    useGetWorkspaceServiceTokenDataV3,
-    useUpdateServiceTokenV3
-} from "@app/hooks/api";
-import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-    handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["deleteServiceTokenV3", "serviceTokenV3"]>,
-      data?: {
-        serviceTokenDataId?: string;
-        name?: string;
-        role?: string;
-        customRole?: {
-            name: string;
-            slug: string;
-        };
-        trustedIps?: ServiceTokenV3TrustedIp[];
-        accessTokenTTL?: number;
-        isRefreshTokenRotationEnabled?: boolean;
-      }
-    ) => void;
-  };
-
-export const ServiceTokenV3Table = ({
-    handlePopUpOpen
-}: Props) => {
-    const { createNotification } = useNotificationContext();
-    const { currentWorkspace } = useWorkspace();
-    const { data, isLoading } = useGetWorkspaceServiceTokenDataV3(currentWorkspace?._id || "");
-    const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
-
-    const handleToggleServiceTokenDataStatus = async ({
-        serviceTokenDataId,
-        isActive
-    }: {
-        serviceTokenDataId: string;
-        isActive: boolean;
-    }) => {
-        try {
-            await updateMutateAsync({
-                serviceTokenDataId,
-                isActive
-            });
-
-            createNotification({
-                text: `Successfully ${isActive ? "enabled" : "disabled"} service token v3`,
-                type: "success"
-              });
-        } catch (err) {
-            console.log(err);
-            createNotification({
-                text: `Failed to ${isActive ? "enable" : "disable"} service token v3`,
-                type: "error"
-            });
-        }
-    }
-      
-    return (
-        <TableContainer>
-            <Table>
-                <THead>
-                    <Tr>
-                        <Th>Name</Th>
-                        <Th>Status</Th>
-                        <Th>Role</Th>
-                        <Th>Trusted IPs</Th>
-                        <Th>Access Token TTL</Th>
-                        <Th>Created At</Th>
-                        <Th>Valid Until</Th>
-                        <Th className="w-5" />
-                    </Tr>
-                </THead>
-                <TBody>
-                    {isLoading && <TableSkeleton columns={7} innerKey="service-tokens" />}
-                    {!isLoading &&
-                    data &&
-                    data.length > 0 &&
-                    data.map(({
-                        _id,
-                        name,
-                        isActive,
-                        role,
-                        customRole,
-                        trustedIps,
-                        createdAt,
-                        expiresAt,
-                        accessTokenTTL,
-                        isRefreshTokenRotationEnabled
-                    }) => {
-                        return (
-                            <Tr className="h-10" key={`st-v3-${_id}`}>
-                                <Td>{name}</Td>
-                                <Td>
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Edit}
-                                        a={ProjectPermissionSub.ServiceTokens}
-                                    >
-                                        {(isAllowed) => (
-                                            <Switch
-                                                id={`enable-service-token-${_id}`}
-                                                onCheckedChange={(value) => handleToggleServiceTokenDataStatus({
-                                                    serviceTokenDataId: _id,
-                                                    isActive: value
-                                                })}
-                                                isChecked={isActive}
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <p className="w-12 mr-4">{isActive ? "Active" : "Inactive"}</p>
-                                            </Switch>
-                                        )}
-                                    </ProjectPermissionCan>
-                                </Td>
-                                <Td>{customRole?.slug ?? role}</Td> 
-                                <Td>
-                                    {trustedIps.map(({
-                                        _id: trustedIpId,
-                                        ipAddress,
-                                        prefix
-                                    }) => {
-                                        return (
-                                            <p key={`service-token-${_id}-}-trusted-ip-${trustedIpId}`}>
-                                                {`${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`}
-                                            </p>
-                                        );
-                                    })}
-                                </Td> 
-                                <Td>{accessTokenTTL}</Td>
-                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                                <Td>{expiresAt ? format(new Date(expiresAt), "yyyy-MM-dd") : "-"}</Td>
-                                <Td className="flex justify-end">
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Edit}
-                                        a={ProjectPermissionSub.ServiceTokens}
-                                    >
-                                        {(isAllowed) => (
-                                            <IconButton
-                                                onClick={async () => {
-                                                    handlePopUpOpen("serviceTokenV3", {
-                                                        serviceTokenDataId: _id,
-                                                        name,
-                                                        role,
-                                                        customRole,
-                                                        trustedIps,
-                                                        accessTokenTTL,
-                                                        isRefreshTokenRotationEnabled
-                                                    });
-                                                }}
-                                                size="lg"
-                                                colorSchema="primary"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <FontAwesomeIcon icon={faPencil} />
-                                            </IconButton>
-                                        )}
-                                    </ProjectPermissionCan>
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Delete}
-                                        a={ProjectPermissionSub.ServiceTokens}
-                                    >
-                                        {(isAllowed) => (
-                                            <IconButton
-                                                onClick={() => {
-                                                    handlePopUpOpen("deleteServiceTokenV3", {
-                                                        serviceTokenDataId: _id,
-                                                        name
-                                                    });
-                                                }}
-                                                size="lg"
-                                                colorSchema="danger"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                className="ml-4"
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <FontAwesomeIcon icon={faXmark} />
-                                            </IconButton>
-                                        )}
-                                    </ProjectPermissionCan>
-                                </Td>
-                            </Tr>
-                        );
-                    })}
-                    {!isLoading && data && data?.length === 0 && (
-                        <Tr>
-                            <Td colSpan={7}>
-                                <EmptyState title="No service token v3 on file" icon={faKey} />
-                            </Td>
-                        </Tr>
-                    )}
-                </TBody>
-            </Table>
-        </TableContainer>
-    );
-}

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenV3Section/index.tsx

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

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx

@@ -1,2 +1 @@
-export { ServiceTokenSection } from "./ServiceTokenSection";
-export { ServiceTokenV3Section } from "./ServiceTokenV3Section";
+export { ServiceTokenSection } from "./ServiceTokenSection";

frontend/src/views/Project/MembersPage/components/index.tsx

@@ -0,0 +1,4 @@
+export { IdentityTab } from "./IdentityTab";
+export { MemberListTab } from "./MemberListTab";
+export { ProjectRoleListTab } from "./ProjectRoleListTab";
+export { ServiceTokenTab } from "./ServiceTokenTab";