misc: migrated to react-state

feat: debounced main page search and rolled back to old input component

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

@@ -3,6 +3,7 @@ import "fastify";
 import { TUsers } from "@app/db/schemas";
 import { TAuditLogServiceFactory } from "@app/ee/services/audit-log/audit-log-service";
 import { TCreateAuditLogDTO } from "@app/ee/services/audit-log/audit-log-types";
+import { TAuditLogStreamServiceFactory } from "@app/ee/services/audit-log-stream/audit-log-stream-service";
 import { TDynamicSecretServiceFactory } from "@app/ee/services/dynamic-secret/dynamic-secret-service";
 import { TDynamicSecretLeaseServiceFactory } from "@app/ee/services/dynamic-secret-lease/dynamic-secret-lease-service";
 import { TGroupServiceFactory } from "@app/ee/services/group/group-service";
@@ -120,6 +121,7 @@ declare module "fastify" {
       scim: TScimServiceFactory;
       ldap: TLdapConfigServiceFactory;
       auditLog: TAuditLogServiceFactory;
+      auditLogStream: TAuditLogStreamServiceFactory;
       secretScanning: TSecretScanningServiceFactory;
       license: TLicenseServiceFactory;
       trustedIp: TTrustedIpServiceFactory;

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

@@ -7,6 +7,9 @@ import {
   TApiKeysUpdate,
   TAuditLogs,
   TAuditLogsInsert,
+  TAuditLogStreams,
+  TAuditLogStreamsInsert,
+  TAuditLogStreamsUpdate,
   TAuditLogsUpdate,
   TAuthTokens,
   TAuthTokenSessions,
@@ -404,6 +407,11 @@ declare module "knex/types/tables" {
     [TableName.LdapGroupMap]: Knex.CompositeTableType<TLdapGroupMaps, TLdapGroupMapsInsert, TLdapGroupMapsUpdate>;
     [TableName.OrgBot]: Knex.CompositeTableType<TOrgBots, TOrgBotsInsert, TOrgBotsUpdate>;
     [TableName.AuditLog]: Knex.CompositeTableType<TAuditLogs, TAuditLogsInsert, TAuditLogsUpdate>;
+    [TableName.AuditLogStream]: Knex.CompositeTableType<
+      TAuditLogStreams,
+      TAuditLogStreamsInsert,
+      TAuditLogStreamsUpdate
+    >;
     [TableName.GitAppInstallSession]: Knex.CompositeTableType<
       TGitAppInstallSessions,
       TGitAppInstallSessionsInsert,

backend/src/db/migrations/20240503101144_audit-log-stream.ts

@@ -0,0 +1,28 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+import { createOnUpdateTrigger, dropOnUpdateTrigger } from "../utils";
+
+export async function up(knex: Knex): Promise<void> {
+  if (!(await knex.schema.hasTable(TableName.AuditLogStream))) {
+    await knex.schema.createTable(TableName.AuditLogStream, (t) => {
+      t.uuid("id", { primaryKey: true }).defaultTo(knex.fn.uuid());
+      t.string("url").notNullable();
+      t.text("encryptedHeadersCiphertext");
+      t.text("encryptedHeadersIV");
+      t.text("encryptedHeadersTag");
+      t.string("encryptedHeadersAlgorithm");
+      t.string("encryptedHeadersKeyEncoding");
+      t.uuid("orgId").notNullable();
+      t.foreign("orgId").references("id").inTable(TableName.Organization).onDelete("CASCADE");
+      t.timestamps(true, true, true);
+    });
+  }
+
+  await createOnUpdateTrigger(knex, TableName.AuditLogStream);
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await dropOnUpdateTrigger(knex, TableName.AuditLogStream);
+  await knex.schema.dropTableIfExists(TableName.AuditLogStream);
+}

backend/src/db/schemas/audit-log-streams.ts

@@ -0,0 +1,25 @@
+// Code generated by automation script, DO NOT EDIT.
+// Automated by pulling database and generating zod schema
+// To update. Just run npm run generate:schema
+// Written by akhilmhdh.
+
+import { z } from "zod";
+
+import { TImmutableDBKeys } from "./models";
+
+export const AuditLogStreamsSchema = z.object({
+  id: z.string().uuid(),
+  url: z.string(),
+  encryptedHeadersCiphertext: z.string().nullable().optional(),
+  encryptedHeadersIV: z.string().nullable().optional(),
+  encryptedHeadersTag: z.string().nullable().optional(),
+  encryptedHeadersAlgorithm: z.string().nullable().optional(),
+  encryptedHeadersKeyEncoding: z.string().nullable().optional(),
+  orgId: z.string().uuid(),
+  createdAt: z.date(),
+  updatedAt: z.date()
+});
+
+export type TAuditLogStreams = z.infer<typeof AuditLogStreamsSchema>;
+export type TAuditLogStreamsInsert = Omit<z.input<typeof AuditLogStreamsSchema>, TImmutableDBKeys>;
+export type TAuditLogStreamsUpdate = Partial<Omit<z.input<typeof AuditLogStreamsSchema>, TImmutableDBKeys>>;

backend/src/db/schemas/index.ts

@@ -1,4 +1,5 @@
 export * from "./api-keys";
+export * from "./audit-log-streams";
 export * from "./audit-logs";
 export * from "./auth-token-sessions";
 export * from "./auth-tokens";

backend/src/db/schemas/models.ts

@@ -62,6 +62,7 @@ export enum TableName {
   LdapConfig = "ldap_configs",
   LdapGroupMap = "ldap_group_maps",
   AuditLog = "audit_logs",
+  AuditLogStream = "audit_log_streams",
   GitAppInstallSession = "git_app_install_sessions",
   GitAppOrg = "git_app_org",
   SecretScanningGitRisk = "secret_scanning_git_risks",

backend/src/ee/routes/v1/audit-log-stream-router.ts

@@ -0,0 +1,215 @@
+import { z } from "zod";
+
+import { AUDIT_LOG_STREAMS } from "@app/lib/api-docs";
+import { readLimit } from "@app/server/config/rateLimiter";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { SanitizedAuditLogStreamSchema } from "@app/server/routes/sanitizedSchemas";
+import { AuthMode } from "@app/services/auth/auth-type";
+
+export const registerAuditLogStreamRouter = async (server: FastifyZodProvider) => {
+  server.route({
+    method: "POST",
+    url: "/",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "Create an Audit Log Stream.",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      body: z.object({
+        url: z.string().min(1).describe(AUDIT_LOG_STREAMS.CREATE.url),
+        headers: z
+          .object({
+            key: z.string().min(1).trim().describe(AUDIT_LOG_STREAMS.CREATE.headers.key),
+            value: z.string().min(1).trim().describe(AUDIT_LOG_STREAMS.CREATE.headers.value)
+          })
+          .describe(AUDIT_LOG_STREAMS.CREATE.headers.desc)
+          .array()
+          .optional()
+      }),
+      response: {
+        200: z.object({
+          auditLogStream: SanitizedAuditLogStreamSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const auditLogStream = await server.services.auditLogStream.create({
+        actorId: req.permission.id,
+        actor: req.permission.type,
+        actorOrgId: req.permission.orgId,
+        actorAuthMethod: req.permission.authMethod,
+        url: req.body.url,
+        headers: req.body.headers
+      });
+
+      return { auditLogStream };
+    }
+  });
+
+  server.route({
+    method: "PATCH",
+    url: "/:id",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "Update an Audit Log Stream by ID.",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        id: z.string().describe(AUDIT_LOG_STREAMS.UPDATE.id)
+      }),
+      body: z.object({
+        url: z.string().optional().describe(AUDIT_LOG_STREAMS.UPDATE.url),
+        headers: z
+          .object({
+            key: z.string().min(1).trim().describe(AUDIT_LOG_STREAMS.UPDATE.headers.key),
+            value: z.string().min(1).trim().describe(AUDIT_LOG_STREAMS.UPDATE.headers.value)
+          })
+          .describe(AUDIT_LOG_STREAMS.UPDATE.headers.desc)
+          .array()
+          .optional()
+      }),
+      response: {
+        200: z.object({
+          auditLogStream: SanitizedAuditLogStreamSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const auditLogStream = await server.services.auditLogStream.updateById({
+        actorId: req.permission.id,
+        actor: req.permission.type,
+        actorOrgId: req.permission.orgId,
+        actorAuthMethod: req.permission.authMethod,
+        id: req.params.id,
+        url: req.body.url,
+        headers: req.body.headers
+      });
+
+      return { auditLogStream };
+    }
+  });
+
+  server.route({
+    method: "DELETE",
+    url: "/:id",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "Delete an Audit Log Stream by ID.",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        id: z.string().describe(AUDIT_LOG_STREAMS.DELETE.id)
+      }),
+      response: {
+        200: z.object({
+          auditLogStream: SanitizedAuditLogStreamSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const auditLogStream = await server.services.auditLogStream.deleteById({
+        actorId: req.permission.id,
+        actor: req.permission.type,
+        actorOrgId: req.permission.orgId,
+        actorAuthMethod: req.permission.authMethod,
+        id: req.params.id
+      });
+
+      return { auditLogStream };
+    }
+  });
+
+  server.route({
+    method: "GET",
+    url: "/:id",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "Get an Audit Log Stream by ID.",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      params: z.object({
+        id: z.string().describe(AUDIT_LOG_STREAMS.GET_BY_ID.id)
+      }),
+      response: {
+        200: z.object({
+          auditLogStream: SanitizedAuditLogStreamSchema.extend({
+            headers: z
+              .object({
+                key: z.string(),
+                value: z.string()
+              })
+              .array()
+              .optional()
+          })
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const auditLogStream = await server.services.auditLogStream.getById({
+        actorId: req.permission.id,
+        actor: req.permission.type,
+        actorOrgId: req.permission.orgId,
+        actorAuthMethod: req.permission.authMethod,
+        id: req.params.id
+      });
+
+      return { auditLogStream };
+    }
+  });
+
+  server.route({
+    method: "GET",
+    url: "/",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      description: "List Audit Log Streams.",
+      security: [
+        {
+          bearerAuth: []
+        }
+      ],
+      response: {
+        200: z.object({
+          auditLogStreams: SanitizedAuditLogStreamSchema.array()
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    handler: async (req) => {
+      const auditLogStreams = await server.services.auditLogStream.list({
+        actorId: req.permission.id,
+        actor: req.permission.type,
+        actorOrgId: req.permission.orgId,
+        actorAuthMethod: req.permission.authMethod
+      });
+
+      return { auditLogStreams };
+    }
+  });
+};

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

@@ -1,3 +1,4 @@
+import { registerAuditLogStreamRouter } from "./audit-log-stream-router";
 import { registerDynamicSecretLeaseRouter } from "./dynamic-secret-lease-router";
 import { registerDynamicSecretRouter } from "./dynamic-secret-router";
 import { registerGroupRouter } from "./group-router";
@@ -55,6 +56,7 @@ export const registerV1EERoutes = async (server: FastifyZodProvider) => {
   await server.register(registerSecretRotationRouter, { prefix: "/secret-rotations" });
   await server.register(registerSecretVersionRouter, { prefix: "/secret" });
   await server.register(registerGroupRouter, { prefix: "/groups" });
+  await server.register(registerAuditLogStreamRouter, { prefix: "/audit-log-streams" });
   await server.register(
     async (privilegeRouter) => {
       await privilegeRouter.register(registerUserAdditionalPrivilegeRouter, { prefix: "/users" });

backend/src/ee/services/audit-log-stream/audit-log-stream-dal.ts

@@ -0,0 +1,11 @@
+import { TDbClient } from "@app/db";
+import { TableName } from "@app/db/schemas";
+import { ormify } from "@app/lib/knex";
+
+export type TAuditLogStreamDALFactory = ReturnType<typeof auditLogStreamDALFactory>;
+
+export const auditLogStreamDALFactory = (db: TDbClient) => {
+  const orm = ormify(db, TableName.AuditLogStream);
+
+  return orm;
+};

backend/src/ee/services/audit-log-stream/audit-log-stream-service.ts

@@ -0,0 +1,233 @@
+import { ForbiddenError } from "@casl/ability";
+import { RawAxiosRequestHeaders } from "axios";
+
+import { SecretKeyEncoding } from "@app/db/schemas";
+import { request } from "@app/lib/config/request";
+import { infisicalSymmetricDecrypt, infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
+import { BadRequestError } from "@app/lib/errors";
+import { validateLocalIps } from "@app/lib/validator";
+
+import { AUDIT_LOG_STREAM_TIMEOUT } from "../audit-log/audit-log-queue";
+import { TLicenseServiceFactory } from "../license/license-service";
+import { OrgPermissionActions, OrgPermissionSubjects } from "../permission/org-permission";
+import { TPermissionServiceFactory } from "../permission/permission-service";
+import { TAuditLogStreamDALFactory } from "./audit-log-stream-dal";
+import {
+  LogStreamHeaders,
+  TCreateAuditLogStreamDTO,
+  TDeleteAuditLogStreamDTO,
+  TGetDetailsAuditLogStreamDTO,
+  TListAuditLogStreamDTO,
+  TUpdateAuditLogStreamDTO
+} from "./audit-log-stream-types";
+
+type TAuditLogStreamServiceFactoryDep = {
+  auditLogStreamDAL: TAuditLogStreamDALFactory;
+  permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
+  licenseService: Pick<TLicenseServiceFactory, "getPlan">;
+};
+
+export type TAuditLogStreamServiceFactory = ReturnType<typeof auditLogStreamServiceFactory>;
+
+export const auditLogStreamServiceFactory = ({
+  auditLogStreamDAL,
+  permissionService,
+  licenseService
+}: TAuditLogStreamServiceFactoryDep) => {
+  const create = async ({
+    url,
+    actor,
+    headers = [],
+    actorId,
+    actorOrgId,
+    actorAuthMethod
+  }: TCreateAuditLogStreamDTO) => {
+    if (!actorOrgId) throw new BadRequestError({ message: "Missing org id from token" });
+
+    const plan = await licenseService.getPlan(actorOrgId);
+    if (!plan.auditLogStreams)
+      throw new BadRequestError({
+        message: "Failed to create audit log streams due to plan restriction. Upgrade plan to create group."
+      });
+
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      actorOrgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Create, OrgPermissionSubjects.Settings);
+
+    validateLocalIps(url);
+
+    const totalStreams = await auditLogStreamDAL.find({ orgId: actorOrgId });
+    if (totalStreams.length >= plan.auditLogStreamLimit) {
+      throw new BadRequestError({
+        message:
+          "Failed to create audit log streams due to plan limit reached. Kindly contact Infisical to add more streams."
+      });
+    }
+
+    // testing connection first
+    const streamHeaders: RawAxiosRequestHeaders = { "Content-Type": "application/json" };
+    if (headers.length)
+      headers.forEach(({ key, value }) => {
+        streamHeaders[key] = value;
+      });
+    await request
+      .post(
+        url,
+        { ping: "ok" },
+        {
+          headers: streamHeaders,
+          // request timeout
+          timeout: AUDIT_LOG_STREAM_TIMEOUT,
+          // connection timeout
+          signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
+        }
+      )
+      .catch((err) => {
+        throw new Error(`Failed to connect with the source ${(err as Error)?.message}`);
+      });
+    const encryptedHeaders = headers ? infisicalSymmetricEncypt(JSON.stringify(headers)) : undefined;
+    const logStream = await auditLogStreamDAL.create({
+      orgId: actorOrgId,
+      url,
+      ...(encryptedHeaders
+        ? {
+            encryptedHeadersCiphertext: encryptedHeaders.ciphertext,
+            encryptedHeadersIV: encryptedHeaders.iv,
+            encryptedHeadersTag: encryptedHeaders.tag,
+            encryptedHeadersAlgorithm: encryptedHeaders.algorithm,
+            encryptedHeadersKeyEncoding: encryptedHeaders.encoding
+          }
+        : {})
+    });
+    return logStream;
+  };
+
+  const updateById = async ({
+    id,
+    url,
+    actor,
+    headers = [],
+    actorId,
+    actorOrgId,
+    actorAuthMethod
+  }: TUpdateAuditLogStreamDTO) => {
+    if (!actorOrgId) throw new BadRequestError({ message: "Missing org id from token" });
+
+    const plan = await licenseService.getPlan(actorOrgId);
+    if (!plan.auditLogStreams)
+      throw new BadRequestError({
+        message: "Failed to update audit log streams due to plan restriction. Upgrade plan to create group."
+      });
+
+    const logStream = await auditLogStreamDAL.findById(id);
+    if (!logStream) throw new BadRequestError({ message: "Audit log stream not found" });
+
+    const { orgId } = logStream;
+    const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Edit, OrgPermissionSubjects.Settings);
+
+    if (url) validateLocalIps(url);
+
+    // testing connection first
+    const streamHeaders: RawAxiosRequestHeaders = { "Content-Type": "application/json" };
+    if (headers.length)
+      headers.forEach(({ key, value }) => {
+        streamHeaders[key] = value;
+      });
+
+    await request
+      .post(
+        url || logStream.url,
+        { ping: "ok" },
+        {
+          headers: streamHeaders,
+          // request timeout
+          timeout: AUDIT_LOG_STREAM_TIMEOUT,
+          // connection timeout
+          signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
+        }
+      )
+      .catch((err) => {
+        throw new Error(`Failed to connect with the source ${(err as Error)?.message}`);
+      });
+
+    const encryptedHeaders = headers ? infisicalSymmetricEncypt(JSON.stringify(headers)) : undefined;
+    const updatedLogStream = await auditLogStreamDAL.updateById(id, {
+      url,
+      ...(encryptedHeaders
+        ? {
+            encryptedHeadersCiphertext: encryptedHeaders.ciphertext,
+            encryptedHeadersIV: encryptedHeaders.iv,
+            encryptedHeadersTag: encryptedHeaders.tag,
+            encryptedHeadersAlgorithm: encryptedHeaders.algorithm,
+            encryptedHeadersKeyEncoding: encryptedHeaders.encoding
+          }
+        : {})
+    });
+    return updatedLogStream;
+  };
+
+  const deleteById = async ({ id, actor, actorId, actorOrgId, actorAuthMethod }: TDeleteAuditLogStreamDTO) => {
+    if (!actorOrgId) throw new BadRequestError({ message: "Missing org id from token" });
+
+    const logStream = await auditLogStreamDAL.findById(id);
+    if (!logStream) throw new BadRequestError({ message: "Audit log stream not found" });
+
+    const { orgId } = logStream;
+    const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Delete, OrgPermissionSubjects.Settings);
+
+    const deletedLogStream = await auditLogStreamDAL.deleteById(id);
+    return deletedLogStream;
+  };
+
+  const getById = async ({ id, actor, actorId, actorOrgId, actorAuthMethod }: TGetDetailsAuditLogStreamDTO) => {
+    const logStream = await auditLogStreamDAL.findById(id);
+    if (!logStream) throw new BadRequestError({ message: "Audit log stream not found" });
+
+    const { orgId } = logStream;
+    const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Settings);
+
+    const headers =
+      logStream?.encryptedHeadersCiphertext && logStream?.encryptedHeadersIV && logStream?.encryptedHeadersTag
+        ? (JSON.parse(
+            infisicalSymmetricDecrypt({
+              tag: logStream.encryptedHeadersTag,
+              iv: logStream.encryptedHeadersIV,
+              ciphertext: logStream.encryptedHeadersCiphertext,
+              keyEncoding: logStream.encryptedHeadersKeyEncoding as SecretKeyEncoding
+            })
+          ) as LogStreamHeaders[])
+        : undefined;
+
+    return { ...logStream, headers };
+  };
+
+  const list = async ({ actor, actorId, actorOrgId, actorAuthMethod }: TListAuditLogStreamDTO) => {
+    const { permission } = await permissionService.getOrgPermission(
+      actor,
+      actorId,
+      actorOrgId,
+      actorAuthMethod,
+      actorOrgId
+    );
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Settings);
+
+    const logStreams = await auditLogStreamDAL.find({ orgId: actorOrgId });
+    return logStreams;
+  };
+
+  return {
+    create,
+    updateById,
+    deleteById,
+    getById,
+    list
+  };
+};

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

@@ -0,0 +1,27 @@
+import { TOrgPermission } from "@app/lib/types";
+
+export type LogStreamHeaders = {
+  key: string;
+  value: string;
+};
+
+export type TCreateAuditLogStreamDTO = Omit<TOrgPermission, "orgId"> & {
+  url: string;
+  headers?: LogStreamHeaders[];
+};
+
+export type TUpdateAuditLogStreamDTO = Omit<TOrgPermission, "orgId"> & {
+  id: string;
+  url?: string;
+  headers?: LogStreamHeaders[];
+};
+
+export type TDeleteAuditLogStreamDTO = Omit<TOrgPermission, "orgId"> & {
+  id: string;
+};
+
+export type TListAuditLogStreamDTO = Omit<TOrgPermission, "orgId">;
+
+export type TGetDetailsAuditLogStreamDTO = Omit<TOrgPermission, "orgId"> & {
+  id: string;
+};

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

@@ -1,13 +1,21 @@
+import { RawAxiosRequestHeaders } from "axios";
+
+import { SecretKeyEncoding } from "@app/db/schemas";
+import { request } from "@app/lib/config/request";
+import { infisicalSymmetricDecrypt } from "@app/lib/crypto/encryption";
 import { logger } from "@app/lib/logger";
 import { QueueJobs, QueueName, TQueueServiceFactory } from "@app/queue";
 import { TProjectDALFactory } from "@app/services/project/project-dal";
 
+import { TAuditLogStreamDALFactory } from "../audit-log-stream/audit-log-stream-dal";
+import { LogStreamHeaders } from "../audit-log-stream/audit-log-stream-types";
 import { TLicenseServiceFactory } from "../license/license-service";
 import { TAuditLogDALFactory } from "./audit-log-dal";
 import { TCreateAuditLogDTO } from "./audit-log-types";
 
 type TAuditLogQueueServiceFactoryDep = {
   auditLogDAL: TAuditLogDALFactory;
+  auditLogStreamDAL: Pick<TAuditLogStreamDALFactory, "find">;
   queueService: TQueueServiceFactory;
   projectDAL: Pick<TProjectDALFactory, "findById">;
   licenseService: Pick<TLicenseServiceFactory, "getPlan">;
@@ -15,11 +23,15 @@ type TAuditLogQueueServiceFactoryDep = {
 
 export type TAuditLogQueueServiceFactory = ReturnType<typeof auditLogQueueServiceFactory>;
 
+// keep this timeout 5s it must be fast because else the queue will take time to finish
+// audit log is a crowded queue thus needs to be fast
+export const AUDIT_LOG_STREAM_TIMEOUT = 5 * 1000;
 export const auditLogQueueServiceFactory = ({
   auditLogDAL,
   queueService,
   projectDAL,
-  licenseService
+  licenseService,
+  auditLogStreamDAL
 }: TAuditLogQueueServiceFactoryDep) => {
   const pushToLog = async (data: TCreateAuditLogDTO) => {
     await queueService.queue(QueueName.AuditLog, QueueJobs.AuditLog, data, {
@@ -47,7 +59,7 @@ export const auditLogQueueServiceFactory = ({
     // skip inserting if audit log retention is 0 meaning its not supported
     if (ttl === 0) return;
 
-    await auditLogDAL.create({
+    const auditLog = await auditLogDAL.create({
       actor: actor.type,
       actorMetadata: actor.metadata,
       userAgent,
@@ -59,6 +71,46 @@ export const auditLogQueueServiceFactory = ({
       eventMetadata: event.metadata,
       userAgentType
     });
+
+    const logStreams = orgId ? await auditLogStreamDAL.find({ orgId }) : [];
+    await Promise.allSettled(
+      logStreams.map(
+        async ({
+          url,
+          encryptedHeadersTag,
+          encryptedHeadersIV,
+          encryptedHeadersKeyEncoding,
+          encryptedHeadersCiphertext
+        }) => {
+          const streamHeaders =
+            encryptedHeadersIV && encryptedHeadersCiphertext && encryptedHeadersTag
+              ? (JSON.parse(
+                  infisicalSymmetricDecrypt({
+                    keyEncoding: encryptedHeadersKeyEncoding as SecretKeyEncoding,
+                    iv: encryptedHeadersIV,
+                    tag: encryptedHeadersTag,
+                    ciphertext: encryptedHeadersCiphertext
+                  })
+                ) as LogStreamHeaders[])
+              : [];
+
+          const headers: RawAxiosRequestHeaders = { "Content-Type": "application/json" };
+
+          if (streamHeaders.length)
+            streamHeaders.forEach(({ key, value }) => {
+              headers[key] = value;
+            });
+
+          return request.post(url, auditLog, {
+            headers,
+            // request timeout
+            timeout: AUDIT_LOG_STREAM_TIMEOUT,
+            // connection timeout
+            signal: AbortSignal.timeout(AUDIT_LOG_STREAM_TIMEOUT)
+          });
+        }
+      )
+    );
   });
 
   queueService.start(QueueName.AuditLogPrune, async () => {

backend/src/ee/services/license/licence-fns.ts

@@ -24,6 +24,8 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   customAlerts: false,
   auditLogs: false,
   auditLogsRetentionDays: 0,
+  auditLogStreams: false,
+  auditLogStreamLimit: 3,
   samlSSO: false,
   scim: false,
   ldap: false,

backend/src/ee/services/license/license-types.ts

@@ -40,6 +40,8 @@ export type TFeatureSet = {
   customAlerts: false;
   auditLogs: false;
   auditLogsRetentionDays: 0;
+  auditLogStreams: false;
+  auditLogStreamLimit: 3;
   samlSSO: false;
   scim: false;
   ldap: false;

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

@@ -272,6 +272,7 @@ export const SECRETS = {
 
 export const RAW_SECRETS = {
   LIST: {
+    expand: "Whether or not to expand secret references",
     recursive:
       "Whether or not to fetch all secrets from the specified base path, and all of its subdirectories. Note, the max depth is 20 deep.",
     workspaceId: "The ID of the project to list secrets from.",
@@ -614,3 +615,29 @@ export const INTEGRATION = {
     integrationId: "The ID of the integration object."
   }
 };
+
+export const AUDIT_LOG_STREAMS = {
+  CREATE: {
+    url: "The HTTP URL to push logs to.",
+    headers: {
+      desc: "The HTTP headers attached for the external prrovider requests.",
+      key: "The HTTP header key name.",
+      value: "The HTTP header value."
+    }
+  },
+  UPDATE: {
+    id: "The ID of the audit log stream to update.",
+    url: "The HTTP URL to push logs to.",
+    headers: {
+      desc: "The HTTP headers attached for the external prrovider requests.",
+      key: "The HTTP header key name.",
+      value: "The HTTP header value."
+    }
+  },
+  DELETE: {
+    id: "The ID of the audit log stream to delete."
+  },
+  GET_BY_ID: {
+    id: "The ID of the audit log stream to get details."
+  }
+};

backend/src/lib/config/env.ts

@@ -119,6 +119,7 @@ const envSchema = z
   })
   .transform((data) => ({
     ...data,
+    isCloud: Boolean(data.LICENSE_SERVER_KEY),
     isSmtpConfigured: Boolean(data.SMTP_HOST),
     isRedisConfigured: Boolean(data.REDIS_URL),
     isDevelopmentMode: data.NODE_ENV === "development",

backend/src/lib/types/index.ts

@@ -17,7 +17,7 @@ export type TOrgPermission = {
   actorId: string;
   orgId: string;
   actorAuthMethod: ActorAuthMethod;
-  actorOrgId: string | undefined;
+  actorOrgId: string;
 };
 
 export type TProjectPermission = {

backend/src/lib/validator/index.ts

@@ -1 +1,2 @@
 export { isDisposableEmail } from "./validate-email";
+export { validateLocalIps } from "./validate-url";

backend/src/lib/validator/validate-url.ts

@@ -0,0 +1,18 @@
+import { getConfig } from "../config/env";
+import { BadRequestError } from "../errors";
+
+export const validateLocalIps = (url: string) => {
+  const validUrl = new URL(url);
+  const appCfg = getConfig();
+  // on cloud local ips are not allowed
+  if (
+    appCfg.isCloud &&
+    (validUrl.host === "host.docker.internal" ||
+      validUrl.host.match(/^10\.\d+\.\d+\.\d+/) ||
+      validUrl.host.match(/^192\.168\.\d+\.\d+/))
+  )
+    throw new BadRequestError({ message: "Local IPs not allowed as URL" });
+
+  if (validUrl.host === "localhost" || validUrl.host === "127.0.0.1")
+    throw new BadRequestError({ message: "Localhost not allowed" });
+};

backend/src/server/routes/index.ts

@@ -5,6 +5,8 @@ import { registerV1EERoutes } from "@app/ee/routes/v1";
 import { auditLogDALFactory } from "@app/ee/services/audit-log/audit-log-dal";
 import { auditLogQueueServiceFactory } from "@app/ee/services/audit-log/audit-log-queue";
 import { auditLogServiceFactory } from "@app/ee/services/audit-log/audit-log-service";
+import { auditLogStreamDALFactory } from "@app/ee/services/audit-log-stream/audit-log-stream-dal";
+import { auditLogStreamServiceFactory } from "@app/ee/services/audit-log-stream/audit-log-stream-service";
 import { dynamicSecretDALFactory } from "@app/ee/services/dynamic-secret/dynamic-secret-dal";
 import { dynamicSecretServiceFactory } from "@app/ee/services/dynamic-secret/dynamic-secret-service";
 import { buildDynamicSecretProviders } from "@app/ee/services/dynamic-secret/providers";
@@ -193,6 +195,7 @@ export const registerRoutes = async (
   const identityUaClientSecretDAL = identityUaClientSecretDALFactory(db);
 
   const auditLogDAL = auditLogDALFactory(db);
+  const auditLogStreamDAL = auditLogStreamDALFactory(db);
   const trustedIpDAL = trustedIpDALFactory(db);
   const telemetryDAL = telemetryDALFactory(db);
 
@@ -243,9 +246,15 @@ export const registerRoutes = async (
     auditLogDAL,
     queueService,
     projectDAL,
-    licenseService
+    licenseService,
+    auditLogStreamDAL
   });
   const auditLogService = auditLogServiceFactory({ auditLogDAL, permissionService, auditLogQueue });
+  const auditLogStreamService = auditLogStreamServiceFactory({
+    licenseService,
+    permissionService,
+    auditLogStreamDAL
+  });
   const sapService = secretApprovalPolicyServiceFactory({
     projectMembershipDAL,
     projectEnvDAL,
@@ -715,6 +724,7 @@ export const registerRoutes = async (
     saml: samlService,
     ldap: ldapService,
     auditLog: auditLogService,
+    auditLogStream: auditLogStreamService,
     secretScanning: secretScanningService,
     license: licenseService,
     trustedIp: trustedIpService,

backend/src/server/routes/sanitizedSchemas.ts

@@ -69,3 +69,10 @@ export const SanitizedDynamicSecretSchema = DynamicSecretsSchema.omit({
   keyEncoding: true,
   algorithm: true
 });
+
+export const SanitizedAuditLogStreamSchema = z.object({
+  id: z.string(),
+  url: z.string(),
+  createdAt: z.date(),
+  updatedAt: z.date()
+});

backend/src/server/routes/v3/secret-router.ts

@@ -166,6 +166,11 @@ export const registerSecretRouter = async (server: FastifyZodProvider) => {
         workspaceSlug: z.string().trim().optional().describe(RAW_SECRETS.LIST.workspaceSlug),
         environment: z.string().trim().optional().describe(RAW_SECRETS.LIST.environment),
         secretPath: z.string().trim().default("/").transform(removeTrailingSlash).describe(RAW_SECRETS.LIST.secretPath),
+        expandSecretReferences: z
+          .enum(["true", "false"])
+          .default("false")
+          .transform((value) => value === "true")
+          .describe(RAW_SECRETS.LIST.expand),
         recursive: z
           .enum(["true", "false"])
           .default("false")
@@ -233,6 +238,7 @@ export const registerSecretRouter = async (server: FastifyZodProvider) => {
         actor: req.permission.type,
         actorOrgId: req.permission.orgId,
         environment,
+        expandSecretReferences: req.query.expandSecretReferences,
         actorAuthMethod: req.permission.authMethod,
         projectId: workspaceId,
         path: secretPath,

backend/src/services/auth/auth-signup-service.ts

@@ -82,7 +82,7 @@ export const authSignupServiceFactory = ({
     await smtpService.sendMail({
       template: SmtpTemplates.EmailVerification,
       subjectLine: "Infisical confirmation code",
-      recipients: [email],
+      recipients: [user.email as string],
       substitutions: {
         code: token
       }

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

@@ -27,6 +27,7 @@ import {
   fnSecretBlindIndexCheck,
   fnSecretBulkInsert,
   fnSecretBulkUpdate,
+  interpolateSecrets,
   recursivelyGetSecretPaths
 } from "./secret-fns";
 import { TSecretQueueFactory } from "./secret-queue";
@@ -885,6 +886,7 @@ export const secretServiceFactory = ({
     actorAuthMethod,
     environment,
     includeImports,
+    expandSecretReferences,
     recursive
   }: TGetSecretsRawDTO) => {
     const botKey = await projectBotService.getBotKey(projectId);
@@ -902,17 +904,66 @@ export const secretServiceFactory = ({
       recursive
     });
 
-    return {
-      secrets: secrets.map((el) => decryptSecretRaw(el, botKey)),
-      imports: (imports || [])?.map(({ secrets: importedSecrets, ...el }) => ({
-        ...el,
-        secrets: importedSecrets.map((sec) =>
-          decryptSecretRaw(
-            { ...sec, environment: el.environment, workspace: projectId, secretPath: el.secretPath },
-            botKey
-          )
+    const decryptedSecrets = secrets.map((el) => decryptSecretRaw(el, botKey));
+    const decryptedImports = (imports || [])?.map(({ secrets: importedSecrets, ...el }) => ({
+      ...el,
+      secrets: importedSecrets.map((sec) =>
+        decryptSecretRaw(
+          { ...sec, environment: el.environment, workspace: projectId, secretPath: el.secretPath },
+          botKey
         )
-      }))
+      )
+    }));
+
+    if (expandSecretReferences) {
+      const expandSecrets = interpolateSecrets({
+        folderDAL,
+        projectId,
+        secretDAL,
+        secretEncKey: botKey
+      });
+
+      const batchSecretsExpand = async (
+        secretBatch: {
+          secretKey: string;
+          secretValue: string;
+          secretComment?: string;
+        }[]
+      ) => {
+        const secretRecord: Record<
+          string,
+          {
+            value: string;
+            comment?: string;
+            skipMultilineEncoding?: boolean;
+          }
+        > = {};
+
+        secretBatch.forEach((decryptedSecret) => {
+          secretRecord[decryptedSecret.secretKey] = {
+            value: decryptedSecret.secretValue,
+            comment: decryptedSecret.secretComment
+          };
+        });
+
+        await expandSecrets(secretRecord);
+
+        secretBatch.forEach((decryptedSecret, index) => {
+          // eslint-disable-next-line no-param-reassign
+          secretBatch[index].secretValue = secretRecord[decryptedSecret.secretKey].value;
+        });
+      };
+
+      // expand secrets
+      await batchSecretsExpand(decryptedSecrets);
+
+      // expand imports by batch
+      await Promise.all(decryptedImports.map((decryptedImport) => batchSecretsExpand(decryptedImport.secrets)));
+    }
+
+    return {
+      secrets: decryptedSecrets,
+      imports: decryptedImports
     };
   };
 

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

@@ -138,6 +138,7 @@ export type TDeleteBulkSecretDTO = {
 } & TProjectPermission;
 
 export type TGetSecretsRawDTO = {
+  expandSecretReferences?: boolean;
   path: string;
   environment: string;
   includeImports?: boolean;

docs/documentation/platform/audit-log-streams.mdx

@@ -0,0 +1,82 @@
+---
+title: "Audit Log Streams"
+description: "Learn how to stream Infisical Audit Logs to external logging providers."
+---
+
+<Info>
+    Audit log streams is a paid feature.
+   
+    If you're using Infisical Cloud, then it is available under the **Enterprise Tier**. If you're self-hosting Infisical,
+    then you should contact team@infisical.com to purchase an enterprise license to use it.
+</Info>
+
+Infisical Audit Log Streaming enables you to transmit your organization's Audit Logs to external logging providers for monitoring and analysis. 
+
+The logs are formatted in JSON, requiring your logging provider to support JSON-based log parsing.
+
+
+## Overview
+
+<Steps>
+    <Step title="Navigate to Organization Settings in your sidebar." />
+    <Step title="Select Audit Log Streams Tab.">
+				![stream create](../../images/platform/audit-log-streams/stream-create.png)
+		</Step>
+		<Step title="Click on Create">
+		 ![stream create](../../images/platform/audit-log-streams/stream-inputs.png)
+
+		 Provide the following values
+		 <ParamField path="Endpoint URL" type="string" required>
+				The HTTPS endpoint URL of the logging provider that collects the JSON stream.
+     </ParamField>
+		 <ParamField path="Headers" type="string" >
+				The HTTP headers for the logging provider for identification and authentication.
+     </ParamField>
+		</Step>
+</Steps>
+
+![stream listt](../../images/platform/audit-log-streams/stream-list.png)
+Your Audit Logs are now ready to be streamed.
+
+## Example Providers
+
+### Better Stack
+
+<Steps>
+    <Step title="Select Connect Source">
+				![better stack connect source](../../images/platform/audit-log-streams/betterstack-create-source.png)
+		</Step>
+    <Step title="Provide a name and select platform"/>
+   <Step title="Provide Audit Log Stream inputs">
+				![better stack connect](../../images/platform/audit-log-streams/betterstack-source-details.png)
+
+				1. Copy the **endpoint** from Better Stack to the **Endpoint URL** field.
+				3. Create a new header with key **Authorization** and set the value as **Bearer \<source token from betterstack\>**.
+		</Step>
+</Steps>
+
+### Datadog
+
+<Steps>
+    <Step title="Navigate to API Keys section">
+				![api key create](../../images/platform/audit-log-streams/datadog-api-sidebar.png)
+		</Step>
+    <Step title="Select New Key and provide a key name">
+				![api key form](../../images/platform/audit-log-streams/data-create-api-key.png)
+				![api key form](../../images/platform/audit-log-streams/data-dog-api-key.png)
+		</Step>
+   <Step title="Find your Datadog region specific logging endpoint.">
+				![datadog url](../../images/platform/audit-log-streams/datadog-logging-endpoint.png)
+
+				1. Navigate to the [Datadog Send Logs API documentation](https://docs.datadoghq.com/api/latest/logs/?code-lang=curl&site=us5#send-logs).
+				2. Pick your Datadog account region.
+				3. Obtain your Datadog logging endpoint URL.
+	 </Step>
+   <Step title="Provide audit log stream inputs">
+				![datadog api key details](../../images/platform/audit-log-streams/datadog-source-details.png)
+
+				1. Copy the **logging endpoint** from Datadog to the **Endpoint URL** field.
+				2. Copy the **API Key** from previous step
+				3. Create a new header with key **DD-API-KEY** and set the value as **API Key**.
+		</Step>
+</Steps>

docs/mint.json

@@ -143,7 +143,8 @@
             "documentation/platform/dynamic-secrets/aws-iam"
           ]
         },
-        "documentation/platform/groups"
+        "documentation/platform/groups",
+        "documentation/platform/audit-log-streams"
       ]
     },
     {

docs/self-hosting/deployment-options/docker-compose.mdx

@@ -2,8 +2,7 @@
 title: "Docker Compose"
 description: "Read how to run Infisical with Docker Compose template."
 ---
-Install Infisical using Docker compose. This self hosting method contains all of the required components needed 
-to run a functional instance of Infisical.
+This self hosting guide will walk you though the steps to self host Infisical using Docker compose.
 
 ## Prerequisites
 - [Docker](https://docs.docker.com/engine/install/)
@@ -80,4 +79,4 @@ docker-compose -f docker-compose.prod.yml up
 
 Your Infisical instance should now be running on port `80`. To access your instance, visit `http://localhost:80`.
 
-![self host sign up](/images/self-hosting/applicable-to-all/selfhost-signup.png)
+![self host sign up](/images/self-hosting/applicable-to-all/selfhost-signup.png)

docs/self-hosting/deployment-options/docker-swarm.mdx

@@ -84,7 +84,7 @@ The [Docker stack file](https://github.com/Infisical/infisical/tree/main/docker-
 <Steps>
   <Step title="Initialize Docker Swarm on one of the VMs by running the following command">
     ```
-   docker swarm init --advertise-addr <MANAGER_NODE_IP>
+   docker swarm init 
    ```
 
    Replace `<MANAGER_NODE_IP>` with the IP address of the VM that will serve as the manager node. Remember to copy the join token returned by the this init command.

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

@@ -0,0 +1,6 @@
+export {
+  useCreateAuditLogStream,
+  useDeleteAuditLogStream,
+  useUpdateAuditLogStream
+} from "./mutations";
+export { useGetAuditLogStreamDetails, useGetAuditLogStreams } from "./queries";

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

@@ -0,0 +1,61 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { auditLogStreamKeys } from "./queries";
+import {
+  TAuditLogStream,
+  TCreateAuditLogStreamDTO,
+  TDeleteAuditLogStreamDTO,
+  TUpdateAuditLogStreamDTO
+} from "./types";
+
+export const useCreateAuditLogStream = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{ auditLogStream: TAuditLogStream }, {}, TCreateAuditLogStreamDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post<{ auditLogStream: TAuditLogStream }>(
+        "/api/v1/audit-log-streams",
+        dto
+      );
+      return data;
+    },
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(auditLogStreamKeys.list(orgId));
+    }
+  });
+};
+
+export const useUpdateAuditLogStream = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{ auditLogStream: TAuditLogStream }, {}, TUpdateAuditLogStreamDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.patch<{ auditLogStream: TAuditLogStream }>(
+        `/api/v1/audit-log-streams/${dto.id}`,
+        dto
+      );
+      return data;
+    },
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(auditLogStreamKeys.list(orgId));
+    }
+  });
+};
+
+export const useDeleteAuditLogStream = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{ auditLogStream: TAuditLogStream }, {}, TDeleteAuditLogStreamDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.delete<{ auditLogStream: TAuditLogStream }>(
+        `/api/v1/audit-log-streams/${dto.id}`
+      );
+      return data;
+    },
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(auditLogStreamKeys.list(orgId));
+    }
+  });
+};

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

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TAuditLogStream } from "./types";
+
+export const auditLogStreamKeys = {
+	list: (orgId: string) => ["audit-log-stream", { orgId }],
+	getById: (id: string) => ["audit-log-stream-details", { id }]
+};
+
+const fetchAuditLogStreams = async () => {
+	const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>(
+		"/api/v1/audit-log-streams"
+	);
+
+	return data.auditLogStreams;
+};
+
+export const useGetAuditLogStreams = (orgId: string) =>
+	useQuery({
+		queryKey: auditLogStreamKeys.list(orgId),
+		queryFn: () => fetchAuditLogStreams(),
+		enabled: Boolean(orgId)
+	});
+
+const fetchAuditLogStreamDetails = async (id: string) => {
+	const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStream }>(
+		`/api/v1/audit-log-streams/${id}`
+	);
+
+	return data.auditLogStream;
+};
+
+export const useGetAuditLogStreamDetails = (id: string) =>
+	useQuery({
+		queryKey: auditLogStreamKeys.getById(id),
+		queryFn: () => fetchAuditLogStreamDetails(id),
+		enabled: Boolean(id)
+	});

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

@@ -0,0 +1,28 @@
+export type LogStreamHeaders = {
+  key: string;
+  value: string;
+};
+
+export type TAuditLogStream = {
+  id: string;
+  url: string;
+  headers?: LogStreamHeaders[];
+};
+
+export type TCreateAuditLogStreamDTO = {
+  url: string;
+  headers?: LogStreamHeaders[];
+  orgId: string;
+};
+
+export type TUpdateAuditLogStreamDTO = {
+  id: string;
+  url?: string;
+  headers?: LogStreamHeaders[];
+  orgId: string;
+};
+
+export type TDeleteAuditLogStreamDTO = {
+  id: string;
+  orgId: string;
+};

frontend/src/hooks/api/index.tsx

@@ -1,6 +1,7 @@
 export * from "./admin";
 export * from "./apiKeys";
 export * from "./auditLogs";
+export * from "./auditLogStreams";
 export * from "./auth";
 export * from "./bots";
 export * from "./dynamicSecret";

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

@@ -94,7 +94,21 @@ export const useGetFoldersByEnv = ({
     [(folders || []).map((folder) => folder.data)]
   );
 
-  return { folders, folderNames, isFolderPresentInEnv };
+  const getFolderByNameAndEnv = useCallback(
+    (name: string, env: string) => {
+      const selectedEnvIndex = environments.indexOf(env);
+      if (selectedEnvIndex !== -1) {
+        return folders?.[selectedEnvIndex]?.data?.find(
+          ({ name: folderName }) => folderName === name
+        );
+      }
+
+      return undefined;
+    },
+    [(folders || []).map((folder) => folder.data)]
+  );
+
+  return { folders, folderNames, isFolderPresentInEnv, getFolderByNameAndEnv };
 };
 
 export const useCreateFolder = () => {

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

@@ -5,6 +5,8 @@ export type SubscriptionPlan = {
   auditLogs: boolean;
   dynamicSecret: boolean;
   auditLogsRetentionDays: number;
+  auditLogStreamLimit: number;
+  auditLogStreams: boolean;
   customAlerts: boolean;
   customRateLimits: boolean;
   pitRecovery: boolean;

frontend/src/hooks/api/types.ts

@@ -1,5 +1,6 @@
 import { ZodIssue } from "zod";
 
+export type { TAuditLogStream } from "./auditLogStreams/types";
 export type { GetAuthTokenAPI } from "./auth/types";
 export type { IncidentContact } from "./incidentContacts/types";
 export type { IntegrationAuth } from "./integrationAuth/types";
@@ -48,13 +49,13 @@ export enum ApiErrorTypes {
 
 export type TApiErrors =
   | {
-      error: ApiErrorTypes.ValidationError;
-      message: ZodIssue[];
-      statusCode: 403;
-    }
+    error: ApiErrorTypes.ValidationError;
+    message: ZodIssue[];
+    statusCode: 403;
+  }
   | { error: ApiErrorTypes.ForbiddenError; message: string; statusCode: 401 }
   | {
-      statusCode: 400;
-      message: string;
-      error: ApiErrorTypes.BadRequestError;
-    };
+    statusCode: 400;
+    message: string;
+    error: ApiErrorTypes.BadRequestError;
+  };

frontend/src/lib/fn/debounce.ts

@@ -0,0 +1,15 @@
+export const debounce = <F extends (...args: any[]) => any>(
+  func: F,
+  delay: number
+): ((...args: Parameters<F>) => void) => {
+  let timeoutId: ReturnType<typeof setTimeout> | null;
+  return function debounced(...args: Parameters<F>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func(...args);
+      timeoutId = null;
+    }, delay);
+  };
+};

frontend/src/pages/project/[id]/secrets/v2/[env].tsx

@@ -1,27 +0,0 @@
-import { useTranslation } from "react-i18next";
-import Head from "next/head";
-
-import { SecretMainPage } from "@app/views/SecretMainPage";
-
-const Dashboard = () => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Head>
-        <title>{t("common.head-title", { title: t("dashboard.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={String(t("dashboard.og-title"))} />
-        <meta name="og:description" content={String(t("dashboard.og-description"))} />
-      </Head>
-      <div className="h-full">
-        <SecretMainPage />
-      </div>
-    </>
-  );
-};
-
-export default Dashboard;
-
-Dashboard.requireAuth = true;

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { subject } from "@casl/ability";
 import {
   faAngleDown,
@@ -45,6 +46,7 @@ import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from
 import { usePopUp } from "@app/hooks";
 import { useCreateFolder, useDeleteSecretBatch } from "@app/hooks/api";
 import { DecryptedSecret, TImportedSecrets, WsTag } from "@app/hooks/api/types";
+import { debounce } from "@app/lib/fn/debounce";
 
 import {
   PopUpNames,
@@ -106,6 +108,7 @@ export const ActionBar = ({
   ] as const);
   const { subscription } = useSubscription();
   const { openPopUp } = usePopUpAction();
+  const [search, setSearch] = useState(filter.searchFilter);
 
   const { mutateAsync: createFolder } = useCreateFolder();
   const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
@@ -114,6 +117,8 @@ export const ActionBar = ({
   const { reset: resetSelectedSecret } = useSelectedSecretActions();
   const isMultiSelectActive = Boolean(Object.keys(selectedSecrets).length);
 
+  const debouncedOnSearch = debounce(onSearchChange, 500);
+
   const handleFolderCreate = async (folderName: string) => {
     try {
       await createFolder({
@@ -199,8 +204,11 @@ export const ActionBar = ({
             className="bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
             placeholder="Search by folder name, key name, comment..."
             leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            value={filter.searchFilter}
-            onChange={(evt) => onSearchChange(evt.target.value)}
+            value={search}
+            onChange={(evt) => {
+              setSearch(evt.target.value);
+              debouncedOnSearch(evt.target.value);
+            }}
           />
         </div>
         <div>

frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx

@@ -14,6 +14,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  SecretInput,
   Spinner,
   TextArea,
   Tooltip
@@ -48,7 +49,6 @@ import { memo, useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
 
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
@@ -263,12 +263,10 @@ export const SecretItem = memo(
                     key="value-overriden"
                     control={control}
                     render={({ field }) => (
-                      <InfisicalSecretInput
+                      <SecretInput
                         key="value-overriden"
                         isVisible={isVisible}
                         isReadOnly={isReadOnly}
-                        environment={environment}
-                        secretPath={secretPath}
                         {...field}
                         containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                       />
@@ -280,12 +278,10 @@ export const SecretItem = memo(
                     key="secret-value"
                     control={control}
                     render={({ field }) => (
-                      <InfisicalSecretInput
+                      <SecretInput
                         isReadOnly={isReadOnly}
                         key="secret-value"
                         isVisible={isVisible}
-                        environment={environment}
-                        secretPath={secretPath}
                         {...field}
                         containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                       />

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -70,6 +70,12 @@ import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSect
 import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
+import { SelectionPanel } from "./components/SelectionPanel/SelectionPanel";
+
+export enum EntryType {
+  FOLDER = "folder",
+  SECRET = "secret"
+}
 
 export const SecretOverviewPage = () => {
   const { t } = useTranslation();
@@ -82,15 +88,6 @@ export const SecretOverviewPage = () => {
   const [expandableTableWidth, setExpandableTableWidth] = useState(0);
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
 
-  useEffect(() => {
-    const handleParentTableWidthResize = () => {
-      setExpandableTableWidth(parentTableRef.current?.clientWidth || 0);
-    };
-
-    window.addEventListener("resize", handleParentTableWidthResize);
-    return () => window.removeEventListener("resize", handleParentTableWidthResize);
-  }, []);
-
   useEffect(() => {
     if (parentTableRef.current) {
       setExpandableTableWidth(parentTableRef.current.clientWidth);
@@ -105,6 +102,56 @@ export const SecretOverviewPage = () => {
   const [searchFilter, setSearchFilter] = useState("");
   const secretPath = (router.query?.secretPath as string) || "/";
 
+  const [selectedEntries, setSelectedEntries] = useState<{
+    [EntryType.FOLDER]: Record<string, boolean>;
+    [EntryType.SECRET]: Record<string, boolean>;
+  }>({
+    [EntryType.FOLDER]: {},
+    [EntryType.SECRET]: {}
+  });
+
+  const toggleSelectedEntry = useCallback(
+    (type: EntryType, key: string) => {
+      const isChecked = Boolean(selectedEntries[type]?.[key]);
+      const newChecks = { ...selectedEntries };
+
+      // remove selection if its present else add it
+      if (isChecked) {
+        delete newChecks[type][key];
+      } else {
+        newChecks[type][key] = true;
+      }
+
+      setSelectedEntries(newChecks);
+    },
+    [selectedEntries]
+  );
+
+  const resetSelectedEntries = useCallback(() => {
+    setSelectedEntries({
+      [EntryType.FOLDER]: {},
+      [EntryType.SECRET]: {}
+    });
+  }, []);
+
+  useEffect(() => {
+    const handleParentTableWidthResize = () => {
+      setExpandableTableWidth(parentTableRef.current?.clientWidth || 0);
+    };
+
+    const onRouteChangeStart = () => {
+      resetSelectedEntries();
+    };
+
+    router.events.on("routeChangeStart", onRouteChangeStart);
+
+    window.addEventListener("resize", handleParentTableWidthResize);
+    return () => {
+      window.removeEventListener("resize", handleParentTableWidthResize);
+      router.events.off("routeChangeStart", onRouteChangeStart);
+    };
+  }, []);
+
   useEffect(() => {
     if (!isWorkspaceLoading && !workspaceId && router.isReady) {
       router.push(`/org/${currentOrg?.id}/overview`);
@@ -129,7 +176,8 @@ export const SecretOverviewPage = () => {
     secretPath,
     decryptFileKey: latestFileKey!
   });
-  const { folders, folderNames, isFolderPresentInEnv } = useGetFoldersByEnv({
+
+  const { folders, folderNames, isFolderPresentInEnv, getFolderByNameAndEnv } = useGetFoldersByEnv({
     projectId: workspaceId,
     path: secretPath,
     environments: userAvailableEnvs.map(({ slug }) => slug)
@@ -543,6 +591,13 @@ export const SecretOverviewPage = () => {
             </div>
           </div>
         </div>
+        <SelectionPanel
+          secretPath={secretPath}
+          getSecretByKey={getSecretByKey}
+          getFolderByNameAndEnv={getFolderByNameAndEnv}
+          selectedEntries={selectedEntries}
+          resetSelectedEntries={resetSelectedEntries}
+        />
         <div className="thin-scrollbar mt-4" ref={parentTableRef}>
           <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
             <Table>
@@ -666,6 +721,8 @@ export const SecretOverviewPage = () => {
                     <SecretOverviewFolderRow
                       folderName={folderName}
                       isFolderPresentInEnv={isFolderPresentInEnv}
+                      isSelected={selectedEntries.folder[folderName]}
+                      onToggleFolderSelect={() => toggleSelectedEntry(EntryType.FOLDER, folderName)}
                       environments={visibleEnvs}
                       key={`overview-${folderName}-${index + 1}`}
                       onClick={handleFolderClick}
@@ -684,6 +741,8 @@ export const SecretOverviewPage = () => {
                   visibleEnvs?.length > 0 &&
                   filteredSecretNames.map((key, index) => (
                     <SecretOverviewTableRow
+                      isSelected={selectedEntries.secret[key]}
+                      onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
                       secretPath={secretPath}
                       isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
                       onSecretCreate={handleSecretCreate}

frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -2,20 +2,23 @@ import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Td, Tr } from "@app/components/v2";
+import { Checkbox, Td, Tr } from "@app/components/v2";
 
 type Props = {
   folderName: string;
   environments: { name: string; slug: string }[];
   isFolderPresentInEnv: (name: string, env: string) => boolean;
   onClick: (path: string) => void;
+  isSelected: boolean;
+  onToggleFolderSelect: (folderName: string) => void;
 };
 
 export const SecretOverviewFolderRow = ({
   folderName,
   environments = [],
   isFolderPresentInEnv,
-
+  isSelected,
+  onToggleFolderSelect,
   onClick
 }: Props) => {
   return (
@@ -23,7 +26,21 @@ export const SecretOverviewFolderRow = ({
       <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
         <div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
           <div className="text-yellow-700">
-            <FontAwesomeIcon icon={faFolder} />
+            <Checkbox
+              id={`checkbox-${folderName}`}
+              isChecked={isSelected}
+              onCheckedChange={() => {
+                onToggleFolderSelect(folderName);
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className={twMerge("hidden group-hover:flex", isSelected && "flex")}
+            />
+            <FontAwesomeIcon
+              className={twMerge("block group-hover:hidden", isSelected && "hidden")}
+              icon={faFolder}
+            />
           </div>
           <div>{folderName}</div>
         </div>

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -11,7 +11,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Button, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
+import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 
@@ -23,6 +23,8 @@ type Props = {
   secretPath: string;
   environments: { name: string; slug: string }[];
   expandableColWidth: number;
+  isSelected: boolean;
+  onToggleSecretSelect: (key: string) => void;
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
@@ -39,7 +41,9 @@ export const SecretOverviewTableRow = ({
   onSecretCreate,
   onSecretDelete,
   isImportedSecretPresentInEnv,
-  expandableColWidth
+  expandableColWidth,
+  onToggleSecretSelect,
+  isSelected
 }: Props) => {
   const [isFormExpanded, setIsFormExpanded] = useToggle();
   const totalCols = environments.length + 1; // secret key row
@@ -56,7 +60,21 @@ export const SecretOverviewTableRow = ({
           <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
               <div className="text-blue-300/70">
-                <FontAwesomeIcon icon={isFormExpanded ? faAngleDown : faKey} />
+                <Checkbox
+                  id={`checkbox-${secretKey}`}
+                  isChecked={isSelected}
+                  onCheckedChange={() => {
+                    onToggleSecretSelect(secretKey);
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className={twMerge("hidden group-hover:flex", isSelected && "flex")}
+                />
+                <FontAwesomeIcon
+                  className={twMerge("block group-hover:hidden", isSelected && "hidden")}
+                  icon={isFormExpanded ? faAngleDown : faKey}
+                />
               </div>
               <div title={secretKey}>{secretKey}</div>
             </div>

frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx

@@ -0,0 +1,184 @@
+import { subject } from "@casl/ability";
+import { faMinusSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteFolder, useDeleteSecretBatch } from "@app/hooks/api";
+import { DecryptedSecret, TDeleteSecretBatchDTO, TSecretFolder } from "@app/hooks/api/types";
+
+export enum EntryType {
+  FOLDER = "folder",
+  SECRET = "secret"
+}
+
+type Props = {
+  secretPath: string;
+  getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
+  getFolderByNameAndEnv: (name: string, env: string) => TSecretFolder | undefined;
+  resetSelectedEntries: () => void;
+  selectedEntries: {
+    [EntryType.FOLDER]: Record<string, boolean>;
+    [EntryType.SECRET]: Record<string, boolean>;
+  };
+};
+
+export const SelectionPanel = ({
+  getFolderByNameAndEnv,
+  getSecretByKey,
+  secretPath,
+  resetSelectedEntries,
+  selectedEntries
+}: Props) => {
+  const { permission } = useProjectPermission();
+
+  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+    "bulkDeleteEntries"
+  ] as const);
+
+  const selectedCount =
+    Object.keys(selectedEntries.folder).length + Object.keys(selectedEntries.secret).length;
+
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
+  const userAvailableEnvs = currentWorkspace?.environments || [];
+  const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
+  const { mutateAsync: deleteFolder } = useDeleteFolder();
+
+  const isMultiSelectActive = selectedCount > 0;
+
+  // user should have the ability to delete secrets/folders in at least one of the envs
+  const shouldShowDelete = userAvailableEnvs.some((env) =>
+    permission.can(
+      ProjectPermissionActions.Delete,
+      subject(ProjectPermissionSub.Secrets, { environment: env.slug, secretPath })
+    )
+  );
+
+  const handleBulkDelete = async () => {
+    let processedEntries = 0;
+
+    const promises = userAvailableEnvs.map(async (env) => {
+      // additional check: ensure that bulk delete is only executed on envs that user has access to
+      if (
+        permission.cannot(
+          ProjectPermissionActions.Delete,
+          subject(ProjectPermissionSub.Secrets, { environment: env.slug, secretPath })
+        )
+      ) {
+        return;
+      }
+
+      await Promise.all(
+        Object.keys(selectedEntries.folder).map(async (folderName) => {
+          const folder = getFolderByNameAndEnv(folderName, env.slug);
+          if (folder) {
+            processedEntries += 1;
+            await deleteFolder({
+              folderId: folder?.id,
+              path: secretPath,
+              environment: env.slug,
+              projectId: workspaceId
+            });
+          }
+        })
+      );
+
+      const secretsToDelete = Object.keys(selectedEntries.secret).reduce(
+        (accum: TDeleteSecretBatchDTO["secrets"], secretName) => {
+          const entry = getSecretByKey(env.slug, secretName);
+          if (entry) {
+            return [
+              ...accum,
+              {
+                secretName: entry.key,
+                type: "shared" as "shared"
+              }
+            ];
+          }
+          return accum;
+        },
+        []
+      );
+
+      if (secretsToDelete.length > 0) {
+        processedEntries += secretsToDelete.length;
+        await deleteBatchSecretV3({
+          secretPath,
+          workspaceId,
+          environment: env.slug,
+          secrets: secretsToDelete
+        });
+      }
+    });
+
+    const results = await Promise.allSettled(promises);
+    const areEntriesDeleted = results.some((result) => result.status === "fulfilled");
+    if (processedEntries === 0) {
+      handlePopUpClose("bulkDeleteEntries");
+      createNotification({
+        type: "info",
+        text: "You don't have access to delete selected items"
+      });
+    } else if (areEntriesDeleted) {
+      handlePopUpClose("bulkDeleteEntries");
+      resetSelectedEntries();
+      createNotification({
+        type: "success",
+        text: "Successfully deleted selected secrets and folders"
+      });
+    } else {
+      createNotification({
+        type: "error",
+        text: "Failed to delete selected secrets and folders"
+      });
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "h-0 flex-shrink-0 overflow-hidden transition-all",
+          isMultiSelectActive && "h-16"
+        )}
+      >
+        <div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-bunker-300">
+          <Tooltip content="Clear">
+            <IconButton variant="plain" ariaLabel="clear-selection" onClick={resetSelectedEntries}>
+              <FontAwesomeIcon icon={faMinusSquare} size="lg" />
+            </IconButton>
+          </Tooltip>
+          <div className="ml-4 flex-grow px-2 text-sm">{selectedCount} Selected</div>
+          {shouldShowDelete && (
+            <Button
+              variant="outline_bg"
+              colorSchema="danger"
+              leftIcon={<FontAwesomeIcon icon={faTrash} />}
+              className="ml-4"
+              onClick={() => handlePopUpOpen("bulkDeleteEntries")}
+              size="xs"
+            >
+              Delete
+            </Button>
+          )}
+        </div>
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.bulkDeleteEntries.isOpen}
+        deleteKey="delete"
+        title="Do you want to delete the selected secrets and folders across envs?"
+        onChange={(isOpen) => handlePopUpToggle("bulkDeleteEntries", isOpen)}
+        onDeleteApproved={handleBulkDelete}
+      />
+    </>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/AuditLogStreamTab/AuditLogStreamForm.tsx

@@ -0,0 +1,206 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, Spinner } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+	useCreateAuditLogStream,
+	useGetAuditLogStreamDetails,
+	useUpdateAuditLogStream
+} from "@app/hooks/api";
+
+type Props = {
+	id?: string;
+	onClose: () => void;
+};
+
+const formSchema = z.object({
+	url: z.string().url().min(1),
+	headers: z
+		.object({
+			key: z.string(),
+			value: z.string()
+		})
+		.array()
+		.optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+export const AuditLogStreamForm = ({ id = "", onClose }: Props) => {
+	const isEdit = Boolean(id);
+	const { currentOrg } = useOrganization();
+	const orgId = currentOrg?.id || "";
+
+	const auditLogStream = useGetAuditLogStreamDetails(id);
+	const createAuditLogStream = useCreateAuditLogStream();
+	const updateAuditLogStream = useUpdateAuditLogStream();
+
+	const {
+		handleSubmit,
+		control,
+		setValue,
+		getValues,
+		formState: { isSubmitting }
+	} = useForm<TForm>({
+		values: auditLogStream?.data,
+		defaultValues: {
+			headers: [{ key: "", value: "" }]
+		}
+	});
+
+	const headerFields = useFieldArray({
+		control,
+		name: "headers"
+	});
+
+	const handleAuditLogStreamEdit = async ({ headers, url }: TForm) => {
+		if (!id) return;
+		try {
+			await updateAuditLogStream.mutateAsync({
+				id,
+				orgId,
+				headers,
+				url
+			});
+			createNotification({
+				type: "success",
+				text: "Successfully updated stream"
+			});
+			onClose();
+		} catch (err) {
+			console.log(err);
+			createNotification({
+				type: "error",
+				text: "Failed to update stream"
+			});
+		}
+	};
+
+	const handleFormSubmit = async ({ headers = [], url }: TForm) => {
+		if (isSubmitting) return;
+		const sanitizedHeaders = headers.filter(({ key, value }) => Boolean(key) && Boolean(value));
+		const streamHeaders = sanitizedHeaders.length ? sanitizedHeaders : undefined;
+		if (isEdit) {
+			await handleAuditLogStreamEdit({ headers: streamHeaders, url });
+			return;
+		}
+		try {
+			await createAuditLogStream.mutateAsync({
+				orgId,
+				headers: streamHeaders,
+				url
+			});
+			createNotification({
+				type: "success",
+				text: "Successfully created stream"
+			});
+			onClose();
+		} catch (err) {
+			console.log(err);
+			createNotification({
+				type: "error",
+				text: "Failed to create stream"
+			});
+		}
+	};
+
+	if (isEdit && auditLogStream.isLoading) {
+		return (
+			<div className="flex items-center justify-center p-8">
+				<Spinner size="lg" />
+			</div>
+		);
+	}
+
+	return (
+		<form onSubmit={handleSubmit(handleFormSubmit)} autoComplete="off">
+			<div>
+				<Controller
+					control={control}
+					name="url"
+					render={({ field, fieldState: { error } }) => (
+						<FormControl
+							label="Endpoint URL"
+							isError={Boolean(error?.message)}
+							errorText={error?.message}
+						>
+							<Input {...field} />
+						</FormControl>
+					)}
+				/>
+				<FormLabel label="Headers" isOptional />
+				{headerFields.fields.map(({ id: headerFieldId }, i) => (
+					<div key={headerFieldId} className="flex space-x-2">
+						<Controller
+							control={control}
+							name={`headers.${i}.key`}
+							render={({ field, fieldState: { error } }) => (
+								<FormControl
+									isError={Boolean(error?.message)}
+									errorText={error?.message}
+									className="w-1/3"
+								>
+									<Input {...field} placeholder="Authorization" />
+								</FormControl>
+							)}
+						/>
+						<Controller
+							control={control}
+							name={`headers.${i}.value`}
+							render={({ field, fieldState: { error } }) => (
+								<FormControl
+									isError={Boolean(error?.message)}
+									errorText={error?.message}
+									className="flex-grow"
+								>
+									<Input
+										{...field}
+										type="password"
+										placeholder="Bearer <token>"
+										autoComplete="new-password"
+									/>
+								</FormControl>
+							)}
+						/>
+						<IconButton
+							ariaLabel="delete key"
+							className="h-9"
+							variant="outline_bg"
+							onClick={() => {
+								const header = getValues("headers");
+								if (header && header?.length > 1) {
+									headerFields.remove(i);
+								} else {
+									setValue("headers", [{ key: "", value: "" }]);
+								}
+							}}
+						>
+							<FontAwesomeIcon icon={faTrash} />
+						</IconButton>
+					</div>
+				))}
+				<div>
+					<Button
+						leftIcon={<FontAwesomeIcon icon={faPlus} />}
+						size="xs"
+						variant="outline_bg"
+						onClick={() => headerFields.append({ value: "", key: "" })}
+					>
+						Add Key
+					</Button>
+				</div>
+			</div>
+			<div className="mt-8 flex items-center">
+				<Button className="mr-4" type="submit" isLoading={isSubmitting}>
+					{isEdit ? "Save" : "Create"}
+				</Button>
+				<Button variant="plain" colorSchema="secondary" onClick={onClose}>
+					Cancel
+				</Button>
+			</div>
+		</form>
+	);
+};

frontend/src/views/Settings/OrgSettingsPage/components/AuditLogStreamTab/AuditLogStreamTab.tsx

@@ -0,0 +1,197 @@
+import { faPlug, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+	Button,
+	DeleteActionModal,
+	EmptyState,
+	Modal,
+	ModalContent,
+	Table,
+	TableContainer,
+	TableSkeleton,
+	TBody,
+	Td,
+	THead,
+	Tr,
+	UpgradePlanModal
+} from "@app/components/v2";
+import {
+	OrgPermissionActions,
+	OrgPermissionSubjects,
+	useOrganization,
+	useSubscription
+} from "@app/context";
+import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import { useDeleteAuditLogStream, useGetAuditLogStreams } from "@app/hooks/api";
+
+import { AuditLogStreamForm } from "./AuditLogStreamForm";
+
+export const AuditLogStreamsTab = withPermission(
+	() => {
+		const { currentOrg } = useOrganization();
+		const orgId = currentOrg?.id || "";
+		const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+			"auditLogStreamForm",
+			"deleteAuditLogStream",
+			"upgradePlan"
+		] as const);
+		const { subscription } = useSubscription();
+
+		const { data: auditLogStreams, isLoading: isAuditLogStreamsLoading } =
+			useGetAuditLogStreams(orgId);
+
+		// mutation
+		const { mutateAsync: deleteAuditLogStream } = useDeleteAuditLogStream();
+
+		const handleAuditLogStreamDelete = async () => {
+			try {
+				const auditLogStreamId = popUp?.deleteAuditLogStream?.data as string;
+				await deleteAuditLogStream({
+					id: auditLogStreamId,
+					orgId
+				});
+				handlePopUpClose("deleteAuditLogStream");
+				createNotification({
+					type: "success",
+					text: "Successfully deleted stream"
+				});
+			} catch (err) {
+				console.log(err);
+				createNotification({
+					type: "error",
+					text: "Failed to delete stream"
+				});
+			}
+		};
+
+		return (
+			<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+				<div className="flex justify-between">
+					<p className="text-xl font-semibold text-mineshaft-100">Audit Log Streams</p>
+					<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Settings}>
+						{(isAllowed) => (
+							<Button
+								onClick={() => {
+									if (subscription && !subscription?.auditLogStreams) {
+										handlePopUpOpen("upgradePlan");
+										return;
+									}
+									handlePopUpOpen("auditLogStreamForm");
+								}}
+								leftIcon={<FontAwesomeIcon icon={faPlus} />}
+								isDisabled={!isAllowed}
+							>
+								Create
+							</Button>
+						)}
+					</OrgPermissionCan>
+				</div>
+				<p className="mb-8 text-gray-400">
+					Send audit logs from Infisical to external logging providers via HTTP
+				</p>
+				<div>
+					<TableContainer>
+						<Table>
+							<THead>
+								<Tr>
+									<Td>URL</Td>
+									<Td className="text-right">Action</Td>
+								</Tr>
+							</THead>
+							<TBody>
+								{isAuditLogStreamsLoading && (
+									<TableSkeleton columns={2} innerKey="stream-loading" />
+								)}
+								{!isAuditLogStreamsLoading && auditLogStreams && auditLogStreams?.length === 0 && (
+									<Tr>
+										<Td colSpan={5}>
+											<EmptyState title="No audit log streams found" icon={faPlug} />
+										</Td>
+									</Tr>
+								)}
+								{!isAuditLogStreamsLoading &&
+									auditLogStreams?.map(({ id, url }) => (
+										<Tr key={id}>
+											<Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+												{url}
+											</Td>
+											<Td>
+												<div className="flex items-center justify-end space-x-2">
+													<OrgPermissionCan
+														I={OrgPermissionActions.Edit}
+														a={OrgPermissionSubjects.Settings}
+													>
+														{(isAllowed) => (
+															<Button
+																variant="outline_bg"
+																size="xs"
+																isDisabled={!isAllowed}
+																onClick={() => handlePopUpOpen("auditLogStreamForm", id)}
+															>
+																Edit
+															</Button>
+														)}
+													</OrgPermissionCan>
+													<OrgPermissionCan
+														I={OrgPermissionActions.Delete}
+														a={OrgPermissionSubjects.Settings}
+													>
+														{(isAllowed) => (
+															<Button
+																variant="outline_bg"
+																className="border-red-800 bg-red-800 hover:border-red-700 hover:bg-red-700"
+																colorSchema="danger"
+																size="xs"
+																isDisabled={!isAllowed}
+																onClick={() => handlePopUpOpen("deleteAuditLogStream", id)}
+															>
+																Delete
+															</Button>
+														)}
+													</OrgPermissionCan>
+												</div>
+											</Td>
+										</Tr>
+									))}
+							</TBody>
+						</Table>
+					</TableContainer>
+				</div>
+				<Modal
+					isOpen={popUp.auditLogStreamForm.isOpen}
+					onOpenChange={(isModalOpen) => {
+						handlePopUpToggle("auditLogStreamForm", isModalOpen);
+					}}
+				>
+					<ModalContent
+						title={`${popUp?.auditLogStreamForm?.data ? "Update" : "Create"} Audit Log Stream `}
+						subTitle="Continuously stream logs from Infisical to third-party logging providers."
+					>
+						<AuditLogStreamForm
+							id={popUp?.auditLogStreamForm?.data as string}
+							onClose={() => handlePopUpToggle("auditLogStreamForm")}
+						/>
+					</ModalContent>
+				</Modal>
+				<UpgradePlanModal
+					isOpen={popUp.upgradePlan.isOpen}
+					onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+					text="You can add audit log streams if you switch to Infisical's Enterprise  plan."
+				/>
+				<DeleteActionModal
+					isOpen={popUp.deleteAuditLogStream.isOpen}
+					deleteKey="delete"
+					title="Are you sure you want to remove this stream?"
+					onChange={(isOpen) => handlePopUpToggle("deleteAuditLogStream", isOpen)}
+					onClose={() => handlePopUpClose("deleteAuditLogStream")}
+					onDeleteApproved={handleAuditLogStreamDelete}
+				/>
+			</div>
+		);
+	},
+	{ action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Settings }
+);

frontend/src/views/Settings/OrgSettingsPage/components/AuditLogStreamTab/index.tsx

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

frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -1,12 +1,14 @@
 import { Fragment } from "react";
 import { Tab } from "@headlessui/react";
 
+import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
 
 const tabs = [
   { name: "General", key: "tab-org-general" },
-  { name: "Security", key: "tab-org-security" }
+  { name: "Security", key: "tab-org-security" },
+  { name: "Audit Log Streams", key: "tag-audit-log-streams" }
 ];
 export const OrgTabGroup = () => {
   return (
@@ -17,9 +19,8 @@ export const OrgTabGroup = () => {
             {({ selected }) => (
               <button
                 type="button"
-                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
-                  selected ? "border-b border-white text-white" : "text-mineshaft-400"
-                }`}
+                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"
+                  }`}
               >
                 {tab.name}
               </button>
@@ -34,6 +35,9 @@ export const OrgTabGroup = () => {
         <Tab.Panel>
           <OrgAuthTab />
         </Tab.Panel>
+        <Tab.Panel>
+          <AuditLogStreamsTab />
+        </Tab.Panel>
       </Tab.Panels>
     </Tab.Group>
   );

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -7,7 +7,7 @@ import { WebhooksTab } from "./components/WebhooksTab";
 
 const tabs = [
   { name: "General", key: "tab-project-general" },
-  { name: "Webhooks", key: "tab-project-webhooks" }
+  { name: "Webhooks", key: "tab-project-webhooks" },
 ];
 
 export const ProjectSettingsPage = () => {
@@ -25,9 +25,8 @@ export const ProjectSettingsPage = () => {
                 {({ selected }) => (
                   <button
                     type="button"
-                    className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
-                      selected ? "border-b border-white text-white" : "text-mineshaft-400"
-                    }`}
+                    className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"
+                      }`}
                   >
                     {tab.name}
                   </button>