fix: resolved get secret failing when import is invalid

feat: add bypass reason on bypassed secret requests

backend/src/db/migrations/20240717184929_add-enforcement-level-secrets-policies.ts

@@ -0,0 +1,23 @@
+import { Knex } from "knex";
+
+import { EnforcementLevel } from "@app/lib/types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretApprovalPolicy, "enforcementLevel");
+  if (!hasColumn) {
+    await knex.schema.table(TableName.SecretApprovalPolicy, (table) => {
+      table.string("enforcementLevel", 10).notNullable().defaultTo(EnforcementLevel.Hard);
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretApprovalPolicy, "enforcementLevel");
+  if (hasColumn) {
+    await knex.schema.table(TableName.SecretApprovalPolicy, (table) => {
+      table.dropColumn("enforcementLevel");
+    });
+  }
+}

backend/src/db/migrations/20240717194958_add-enforcement-level-access-policies.ts

@@ -0,0 +1,23 @@
+import { Knex } from "knex";
+
+import { EnforcementLevel } from "@app/lib/types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.AccessApprovalPolicy, "enforcementLevel");
+  if (!hasColumn) {
+    await knex.schema.table(TableName.AccessApprovalPolicy, (table) => {
+      table.string("enforcementLevel", 10).notNullable().defaultTo(EnforcementLevel.Hard);
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.AccessApprovalPolicy, "enforcementLevel");
+  if (hasColumn) {
+    await knex.schema.table(TableName.AccessApprovalPolicy, (table) => {
+      table.dropColumn("enforcementLevel");
+    });
+  }
+}

backend/src/db/migrations/20240718170955_add-access-secret-sharing.ts

@@ -0,0 +1,23 @@
+import { Knex } from "knex";
+
+import { SecretSharingAccessType } from "@app/lib/types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretSharing, "accessType");
+  if (!hasColumn) {
+    await knex.schema.table(TableName.SecretSharing, (table) => {
+      table.string("accessType").notNullable().defaultTo(SecretSharingAccessType.Anyone);
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretSharing, "accessType");
+  if (hasColumn) {
+    await knex.schema.table(TableName.SecretSharing, (table) => {
+      table.dropColumn("accessType");
+    });
+  }
+}

backend/src/db/migrations/20240719182539_add-bypass-reason-secret-approval-requets.ts

@@ -0,0 +1,21 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretApprovalRequest, "bypassReason");
+  if (!hasColumn) {
+    await knex.schema.table(TableName.SecretApprovalRequest, (table) => {
+      table.string("bypassReason").nullable();
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasColumn = await knex.schema.hasColumn(TableName.SecretApprovalRequest, "bypassReason");
+  if (hasColumn) {
+    await knex.schema.table(TableName.SecretApprovalRequest, (table) => {
+      table.dropColumn("bypassReason");
+    });
+  }
+}

backend/src/db/schemas/access-approval-policies.ts

@@ -5,6 +5,8 @@
 
 import { z } from "zod";
 
+import { EnforcementLevel } from "@app/lib/types";
+
 import { TImmutableDBKeys } from "./models";
 
 export const AccessApprovalPoliciesSchema = z.object({
@@ -14,7 +16,8 @@ export const AccessApprovalPoliciesSchema = z.object({
   secretPath: z.string().nullable().optional(),
   envId: z.string().uuid(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
 });
 
 export type TAccessApprovalPolicies = z.infer<typeof AccessApprovalPoliciesSchema>;

backend/src/db/schemas/secret-approval-policies.ts

@@ -14,7 +14,8 @@ export const SecretApprovalPoliciesSchema = z.object({
   approvals: z.number().default(1),
   envId: z.string().uuid(),
   createdAt: z.date(),
-  updatedAt: z.date()
+  updatedAt: z.date(),
+  enforcementLevel: z.string().default("hard")
 });
 
 export type TSecretApprovalPolicies = z.infer<typeof SecretApprovalPoliciesSchema>;

backend/src/db/schemas/secret-approval-requests.ts

@@ -15,6 +15,7 @@ export const SecretApprovalRequestsSchema = z.object({
   conflicts: z.unknown().nullable().optional(),
   slug: z.string(),
   folderId: z.string().uuid(),
+  bypassReason: z.string().nullable().optional(),
   createdAt: z.date(),
   updatedAt: z.date(),
   isReplicated: z.boolean().nullable().optional(),

backend/src/db/schemas/secret-sharing.ts

@@ -5,6 +5,8 @@
 
 import { z } from "zod";
 
+import { SecretSharingAccessType } from "@app/lib/types";
+
 import { TImmutableDBKeys } from "./models";
 
 export const SecretSharingSchema = z.object({
@@ -16,6 +18,7 @@ export const SecretSharingSchema = z.object({
   expiresAt: z.date(),
   userId: z.string().uuid().nullable().optional(),
   orgId: z.string().uuid().nullable().optional(),
+  accessType: z.nativeEnum(SecretSharingAccessType).default(SecretSharingAccessType.Organization),
   createdAt: z.date(),
   updatedAt: z.date(),
   expiresAfterViews: z.number().nullable().optional()

backend/src/ee/routes/v1/access-approval-policy-router.ts

@@ -1,6 +1,7 @@
 import { nanoid } from "nanoid";
 import { z } from "zod";
 
+import { EnforcementLevel } from "@app/lib/types";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { sapPubSchema } from "@app/server/routes/sanitizedSchemas";
 import { AuthMode } from "@app/services/auth/auth-type";
@@ -17,7 +18,8 @@ export const registerAccessApprovalPolicyRouter = async (server: FastifyZodProvi
           secretPath: z.string().trim().default("/"),
           environment: z.string(),
           approvers: z.string().array().min(1),
-          approvals: z.number().min(1).default(1)
+          approvals: z.number().min(1).default(1),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
         })
         .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],
@@ -38,7 +40,8 @@ export const registerAccessApprovalPolicyRouter = async (server: FastifyZodProvi
         actorOrgId: req.permission.orgId,
         ...req.body,
         projectSlug: req.body.projectSlug,
-        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`
+        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`,
+        enforcementLevel: req.body.enforcementLevel
       });
       return { approval };
     }
@@ -115,7 +118,8 @@ export const registerAccessApprovalPolicyRouter = async (server: FastifyZodProvi
             .optional()
             .transform((val) => (val === "" ? "/" : val)),
           approvers: z.string().array().min(1),
-          approvals: z.number().min(1).default(1)
+          approvals: z.number().min(1).default(1),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
         })
         .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],

backend/src/ee/routes/v1/access-approval-request-router.ts

@@ -99,7 +99,8 @@ export const registerAccessApprovalRequestRouter = async (server: FastifyZodProv
               approvals: z.number(),
               approvers: z.string().array(),
               secretPath: z.string().nullish(),
-              envId: z.string()
+              envId: z.string(),
+              enforcementLevel: z.string()
             }),
             reviewers: z
               .object({

backend/src/ee/routes/v1/secret-approval-policy-router.ts

@@ -2,6 +2,7 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { removeTrailingSlash } from "@app/lib/fn";
+import { EnforcementLevel } from "@app/lib/types";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { sapPubSchema } from "@app/server/routes/sanitizedSchemas";
@@ -24,11 +25,13 @@ export const registerSecretApprovalPolicyRouter = async (server: FastifyZodProvi
             .string()
             .optional()
             .nullable()
+            .default("/")
             .transform((val) => (val ? removeTrailingSlash(val) : val)),
-          approverUserIds: z.string().array().min(1),
-          approvals: z.number().min(1).default(1)
+          approvers: z.string().array().min(1),
+          approvals: z.number().min(1).default(1),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard)
         })
-        .refine((data) => data.approvals <= data.approverUserIds.length, {
+        .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],
           message: "The number of approvals should be lower than the number of approvers."
         }),
@@ -47,7 +50,8 @@ export const registerSecretApprovalPolicyRouter = async (server: FastifyZodProvi
         actorOrgId: req.permission.orgId,
         projectId: req.body.workspaceId,
         ...req.body,
-        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`
+        name: req.body.name ?? `${req.body.environment}-${nanoid(3)}`,
+        enforcementLevel: req.body.enforcementLevel
       });
       return { approval };
     }
@@ -66,15 +70,17 @@ export const registerSecretApprovalPolicyRouter = async (server: FastifyZodProvi
       body: z
         .object({
           name: z.string().optional(),
-          approverUserIds: z.string().array().min(1),
+          approvers: z.string().array().min(1),
           approvals: z.number().min(1).default(1),
           secretPath: z
             .string()
             .optional()
             .nullable()
             .transform((val) => (val ? removeTrailingSlash(val) : val))
+            .transform((val) => (val === "" ? "/" : val)),
+          enforcementLevel: z.nativeEnum(EnforcementLevel).optional()
         })
-        .refine((data) => data.approvals <= data.approverUserIds.length, {
+        .refine((data) => data.approvals <= data.approvers.length, {
           path: ["approvals"],
           message: "The number of approvals should be lower than the number of approvers."
         }),

backend/src/ee/routes/v1/secret-approval-request-router.ts

@@ -49,7 +49,8 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
               name: z.string(),
               approvals: z.number(),
               approvers: z.string().array(),
-              secretPath: z.string().optional().nullable()
+              secretPath: z.string().optional().nullable(),
+              enforcementLevel: z.string()
             }),
             committerUser: approvalRequestUser,
             commits: z.object({ op: z.string(), secretId: z.string().nullable().optional() }).array(),
@@ -116,6 +117,9 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
       params: z.object({
         id: z.string()
       }),
+      body: z.object({
+        bypassReason: z.string().optional()
+      }),
       response: {
         200: z.object({
           approval: SecretApprovalRequestsSchema
@@ -129,7 +133,8 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
         actor: req.permission.type,
         actorAuthMethod: req.permission.authMethod,
         actorOrgId: req.permission.orgId,
-        approvalId: req.params.id
+        approvalId: req.params.id,
+        bypassReason: req.body.bypassReason
       });
       return { approval };
     }
@@ -248,7 +253,8 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
                 name: z.string(),
                 approvals: z.number(),
                 approvers: approvalRequestUser.array(),
-                secretPath: z.string().optional().nullable()
+                secretPath: z.string().optional().nullable(),
+                enforcementLevel: z.string()
               }),
               environment: z.string(),
               statusChangedByUser: approvalRequestUser.optional(),

backend/src/ee/services/access-approval-policy/access-approval-policy-service.ts

@@ -47,7 +47,8 @@ export const accessApprovalPolicyServiceFactory = ({
     approvals,
     approvers,
     projectSlug,
-    environment
+    environment,
+    enforcementLevel
   }: TCreateAccessApprovalPolicy) => {
     const project = await projectDAL.findProjectBySlug(projectSlug, actorOrgId);
     if (!project) throw new BadRequestError({ message: "Project not found" });
@@ -94,7 +95,8 @@ export const accessApprovalPolicyServiceFactory = ({
           envId: env.id,
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );
@@ -143,7 +145,8 @@ export const accessApprovalPolicyServiceFactory = ({
     actor,
     actorOrgId,
     actorAuthMethod,
-    approvals
+    approvals,
+    enforcementLevel
   }: TUpdateAccessApprovalPolicy) => {
     const accessApprovalPolicy = await accessApprovalPolicyDAL.findById(policyId);
     if (!accessApprovalPolicy) throw new BadRequestError({ message: "Secret approval policy not found" });
@@ -163,7 +166,8 @@ export const accessApprovalPolicyServiceFactory = ({
         {
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );

backend/src/ee/services/access-approval-policy/access-approval-policy-types.ts

@@ -1,4 +1,4 @@
-import { TProjectPermission } from "@app/lib/types";
+import { EnforcementLevel, TProjectPermission } from "@app/lib/types";
 import { ActorAuthMethod } from "@app/services/auth/auth-type";
 
 import { TPermissionServiceFactory } from "../permission/permission-service";
@@ -20,6 +20,7 @@ export type TCreateAccessApprovalPolicy = {
   approvers: string[];
   projectSlug: string;
   name: string;
+  enforcementLevel: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TUpdateAccessApprovalPolicy = {
@@ -28,6 +29,7 @@ export type TUpdateAccessApprovalPolicy = {
   approvers?: string[];
   secretPath?: string;
   name?: string;
+  enforcementLevel?: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TDeleteAccessApprovalPolicy = {

backend/src/ee/services/access-approval-request/access-approval-request-dal.ts

@@ -48,6 +48,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
           db.ref("name").withSchema(TableName.AccessApprovalPolicy).as("policyName"),
           db.ref("approvals").withSchema(TableName.AccessApprovalPolicy).as("policyApprovals"),
           db.ref("secretPath").withSchema(TableName.AccessApprovalPolicy).as("policySecretPath"),
+          db.ref("enforcementLevel").withSchema(TableName.AccessApprovalPolicy).as("policyEnforcementLevel"),
           db.ref("envId").withSchema(TableName.AccessApprovalPolicy).as("policyEnvId")
         )
 
@@ -98,6 +99,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
             name: doc.policyName,
             approvals: doc.policyApprovals,
             secretPath: doc.policySecretPath,
+            enforcementLevel: doc.policyEnforcementLevel,
             envId: doc.policyEnvId
           },
           privilege: doc.privilegeId
@@ -165,6 +167,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
         tx.ref("projectId").withSchema(TableName.Environment),
         tx.ref("slug").withSchema(TableName.Environment).as("environment"),
         tx.ref("secretPath").withSchema(TableName.AccessApprovalPolicy).as("policySecretPath"),
+        tx.ref("enforcementLevel").withSchema(TableName.AccessApprovalPolicy).as("policyEnforcementLevel"),
         tx.ref("approvals").withSchema(TableName.AccessApprovalPolicy).as("policyApprovals"),
         tx.ref("approverId").withSchema(TableName.AccessApprovalPolicyApprover)
       );
@@ -184,7 +187,8 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
             id: el.policyId,
             name: el.policyName,
             approvals: el.policyApprovals,
-            secretPath: el.policySecretPath
+            secretPath: el.policySecretPath,
+            enforcementLevel: el.policyEnforcementLevel
           }
         }),
         childrenMapper: [

backend/src/ee/services/secret-approval-policy/secret-approval-policy-service.ts

@@ -45,12 +45,13 @@ export const secretApprovalPolicyServiceFactory = ({
     actorOrgId,
     actorAuthMethod,
     approvals,
-    approverUserIds,
+    approvers,
     projectId,
     secretPath,
-    environment
+    environment,
+    enforcementLevel
   }: TCreateSapDTO) => {
-    if (approvals > approverUserIds.length)
+    if (approvals > approvers.length)
       throw new BadRequestError({ message: "Approvals cannot be greater than approvers" });
 
     const { permission } = await permissionService.getProjectPermission(
@@ -73,12 +74,13 @@ export const secretApprovalPolicyServiceFactory = ({
           envId: env.id,
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );
       await secretApprovalPolicyApproverDAL.insertMany(
-        approverUserIds.map((approverUserId) => ({
+        approvers.map((approverUserId) => ({
           approverUserId,
           policyId: doc.id
         })),
@@ -90,7 +92,7 @@ export const secretApprovalPolicyServiceFactory = ({
   };
 
   const updateSecretApprovalPolicy = async ({
-    approverUserIds,
+    approvers,
     secretPath,
     name,
     actorId,
@@ -98,7 +100,8 @@ export const secretApprovalPolicyServiceFactory = ({
     actorOrgId,
     actorAuthMethod,
     approvals,
-    secretPolicyId
+    secretPolicyId,
+    enforcementLevel
   }: TUpdateSapDTO) => {
     const secretApprovalPolicy = await secretApprovalPolicyDAL.findById(secretPolicyId);
     if (!secretApprovalPolicy) throw new BadRequestError({ message: "Secret approval policy not found" });
@@ -118,14 +121,15 @@ export const secretApprovalPolicyServiceFactory = ({
         {
           approvals,
           secretPath,
-          name
+          name,
+          enforcementLevel
         },
         tx
       );
-      if (approverUserIds) {
+      if (approvers) {
         await secretApprovalPolicyApproverDAL.delete({ policyId: doc.id }, tx);
         await secretApprovalPolicyApproverDAL.insertMany(
-          approverUserIds.map((approverUserId) => ({
+          approvers.map((approverUserId) => ({
             approverUserId,
             policyId: doc.id
           })),

backend/src/ee/services/secret-approval-policy/secret-approval-policy-types.ts

@@ -1,20 +1,22 @@
-import { TProjectPermission } from "@app/lib/types";
+import { EnforcementLevel, TProjectPermission } from "@app/lib/types";
 
 export type TCreateSapDTO = {
   approvals: number;
   secretPath?: string | null;
   environment: string;
-  approverUserIds: string[];
+  approvers: string[];
   projectId: string;
   name: string;
+  enforcementLevel: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TUpdateSapDTO = {
   secretPolicyId: string;
   approvals?: number;
   secretPath?: string | null;
-  approverUserIds: string[];
+  approvers: string[];
   name?: string;
+  enforcementLevel?: EnforcementLevel;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TDeleteSapDTO = {

backend/src/ee/services/secret-approval-request/secret-approval-request-dal.ts

@@ -94,6 +94,8 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
         tx.ref("projectId").withSchema(TableName.Environment),
         tx.ref("slug").withSchema(TableName.Environment).as("environment"),
         tx.ref("secretPath").withSchema(TableName.SecretApprovalPolicy).as("policySecretPath"),
+        tx.ref("envId").withSchema(TableName.SecretApprovalPolicy).as("policyEnvId"),
+        tx.ref("enforcementLevel").withSchema(TableName.SecretApprovalPolicy).as("policyEnforcementLevel"),
         tx.ref("approvals").withSchema(TableName.SecretApprovalPolicy).as("policyApprovals")
       );
 
@@ -128,7 +130,9 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
             id: el.policyId,
             name: el.policyName,
             approvals: el.policyApprovals,
-            secretPath: el.policySecretPath
+            secretPath: el.policySecretPath,
+            enforcementLevel: el.policyEnforcementLevel,
+            envId: el.policyEnvId
           }
         }),
         childrenMapper: [
@@ -282,6 +286,7 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
             `DENSE_RANK() OVER (partition by ${TableName.Environment}."projectId" ORDER BY ${TableName.SecretApprovalRequest}."id" DESC) as rank`
           ),
           db.ref("secretPath").withSchema(TableName.SecretApprovalPolicy).as("policySecretPath"),
+          db.ref("enforcementLevel").withSchema(TableName.SecretApprovalPolicy).as("policyEnforcementLevel"),
           db.ref("approvals").withSchema(TableName.SecretApprovalPolicy).as("policyApprovals"),
           db.ref("approverUserId").withSchema(TableName.SecretApprovalPolicyApprover),
           db.ref("email").withSchema("committerUser").as("committerUserEmail"),
@@ -308,7 +313,8 @@ export const secretApprovalRequestDALFactory = (db: TDbClient) => {
             id: el.policyId,
             name: el.policyName,
             approvals: el.policyApprovals,
-            secretPath: el.policySecretPath
+            secretPath: el.policySecretPath,
+            enforcementLevel: el.policyEnforcementLevel
           },
           committerUser: {
             userId: el.committerUserId,

backend/src/ee/services/secret-approval-request/secret-approval-request-service.ts

@@ -7,13 +7,16 @@ import {
   SecretType,
   TSecretApprovalRequestsSecretsInsert
 } from "@app/db/schemas";
+import { getConfig } from "@app/lib/config/env";
 import { decryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
 import { BadRequestError, UnauthorizedError } from "@app/lib/errors";
 import { groupBy, pick, unique } from "@app/lib/fn";
 import { alphaNumericNanoId } from "@app/lib/nanoid";
+import { EnforcementLevel } from "@app/lib/types";
 import { ActorType } from "@app/services/auth/auth-type";
 import { TProjectDALFactory } from "@app/services/project/project-dal";
 import { TProjectBotServiceFactory } from "@app/services/project-bot/project-bot-service";
+import { TProjectEnvDALFactory } from "@app/services/project-env/project-env-dal";
 import { TSecretDALFactory } from "@app/services/secret/secret-dal";
 import {
   fnSecretBlindIndexCheck,
@@ -30,6 +33,8 @@ import { TSecretVersionTagDALFactory } from "@app/services/secret/secret-version
 import { TSecretBlindIndexDALFactory } from "@app/services/secret-blind-index/secret-blind-index-dal";
 import { TSecretFolderDALFactory } from "@app/services/secret-folder/secret-folder-dal";
 import { TSecretTagDALFactory } from "@app/services/secret-tag/secret-tag-dal";
+import { SmtpTemplates, TSmtpService } from "@app/services/smtp/smtp-service";
+import { TUserDALFactory } from "@app/services/user/user-dal";
 
 import { TPermissionServiceFactory } from "../permission/permission-service";
 import { ProjectPermissionActions, ProjectPermissionSub } from "../permission/project-permission";
@@ -62,8 +67,11 @@ type TSecretApprovalRequestServiceFactoryDep = {
   snapshotService: Pick<TSecretSnapshotServiceFactory, "performSnapshot">;
   secretVersionDAL: Pick<TSecretVersionDALFactory, "findLatestVersionMany" | "insertMany">;
   secretVersionTagDAL: Pick<TSecretVersionTagDALFactory, "insertMany">;
-  projectDAL: Pick<TProjectDALFactory, "checkProjectUpgradeStatus">;
+  projectDAL: Pick<TProjectDALFactory, "checkProjectUpgradeStatus" | "findProjectById">;
   secretQueueService: Pick<TSecretQueueFactory, "syncSecrets" | "removeSecretReminder">;
+  smtpService: Pick<TSmtpService, "sendMail">;
+  userDAL: Pick<TUserDALFactory, "find" | "findOne">;
+  projectEnvDAL: Pick<TProjectEnvDALFactory, "findOne">;
 };
 
 export type TSecretApprovalRequestServiceFactory = ReturnType<typeof secretApprovalRequestServiceFactory>;
@@ -82,7 +90,10 @@ export const secretApprovalRequestServiceFactory = ({
   snapshotService,
   secretVersionDAL,
   secretQueueService,
-  projectBotService
+  projectBotService,
+  smtpService,
+  userDAL,
+  projectEnvDAL
 }: TSecretApprovalRequestServiceFactoryDep) => {
   const requestCount = async ({ projectId, actor, actorId, actorOrgId, actorAuthMethod }: TApprovalRequestCountDTO) => {
     if (actor === ActorType.SERVICE) throw new BadRequestError({ message: "Cannot use service token" });
@@ -257,7 +268,8 @@ export const secretApprovalRequestServiceFactory = ({
     actor,
     actorId,
     actorOrgId,
-    actorAuthMethod
+    actorAuthMethod,
+    bypassReason
   }: TMergeSecretApprovalRequestDTO) => {
     const secretApprovalRequest = await secretApprovalRequestDAL.findById(approvalId);
     if (!secretApprovalRequest) throw new BadRequestError({ message: "Secret approval request not found" });
@@ -289,7 +301,10 @@ export const secretApprovalRequestServiceFactory = ({
         ({ userId: approverId }) => reviewers[approverId.toString()] === ApprovalStatus.APPROVED
       ).length;
 
-    if (!hasMinApproval) throw new BadRequestError({ message: "Doesn't have minimum approvals needed" });
+    const isSoftEnforcement = secretApprovalRequest.policy.enforcementLevel === EnforcementLevel.Soft;
+
+    if (!hasMinApproval && !isSoftEnforcement)
+      throw new BadRequestError({ message: "Doesn't have minimum approvals needed" });
     const secretApprovalSecrets = await secretApprovalRequestSecretDAL.findByRequestId(secretApprovalRequest.id);
     if (!secretApprovalSecrets) throw new BadRequestError({ message: "No secrets found" });
 
@@ -466,7 +481,8 @@ export const secretApprovalRequestServiceFactory = ({
           conflicts: JSON.stringify(conflicts),
           hasMerged: true,
           status: RequestState.Closed,
-          statusChangedByUserId: actorId
+          statusChangedByUserId: actorId,
+          bypassReason
         },
         tx
       );
@@ -485,6 +501,35 @@ export const secretApprovalRequestServiceFactory = ({
       actorId,
       actor
     });
+
+    if (isSoftEnforcement) {
+      const cfg = getConfig();
+      const project = await projectDAL.findProjectById(projectId);
+      const env = await projectEnvDAL.findOne({ id: policy.envId });
+      const requestedByUser = await userDAL.findOne({ id: actorId });
+      const approverUsers = await userDAL.find({
+        $in: {
+          id: policy.approvers.map((approver: { userId: string }) => approver.userId)
+        }
+      });
+
+      await smtpService.sendMail({
+        recipients: approverUsers.filter((approver) => approver.email).map((approver) => approver.email!),
+        subjectLine: "Infisical Secret Change Policy Bypassed",
+
+        substitutions: {
+          projectName: project.name,
+          requesterFullName: `${requestedByUser.firstName} ${requestedByUser.lastName}`,
+          requesterEmail: requestedByUser.email,
+          bypassReason,
+          secretPath: policy.secretPath,
+          environment: env.name,
+          approvalUrl: `${cfg.SITE_URL}/project/${project.id}/approval`
+        },
+        template: SmtpTemplates.AccessSecretRequestBypassed
+      });
+    }
+
     return mergeStatus;
   };
 

backend/src/ee/services/secret-approval-request/secret-approval-request-types.ts

@@ -39,6 +39,7 @@ export type TGenerateSecretApprovalRequestDTO = {
 
 export type TMergeSecretApprovalRequestDTO = {
   approvalId: string;
+  bypassReason?: string;
 } & Omit<TProjectPermission, "projectId">;
 
 export type TStatusChangeDTO = {

backend/src/lib/types/index.ts

@@ -42,3 +42,13 @@ export type RequiredKeys<T> = {
 }[keyof T];
 
 export type PickRequired<T> = Pick<T, RequiredKeys<T>>;
+
+export enum EnforcementLevel {
+  Hard = "hard",
+  Soft = "soft"
+}
+
+export enum SecretSharingAccessType {
+  Anyone = "anyone",
+  Organization = "organization"
+}

backend/src/server/routes/index.ts

@@ -737,7 +737,8 @@ export const registerRoutes = async (
 
   const secretSharingService = secretSharingServiceFactory({
     permissionService,
-    secretSharingDAL
+    secretSharingDAL,
+    orgDAL
   });
 
   const secretApprovalRequestService = secretApprovalRequestServiceFactory({
@@ -754,7 +755,10 @@ export const registerRoutes = async (
     secretApprovalRequestDAL,
     snapshotService,
     secretVersionTagDAL,
-    secretQueueService
+    secretQueueService,
+    smtpService,
+    userDAL,
+    projectEnvDAL
   });
 
   const accessApprovalPolicyService = accessApprovalPolicyServiceFactory({

backend/src/server/routes/v1/secret-sharing-router.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 import { SecretSharingSchema } from "@app/db/schemas";
+import { SecretSharingAccessType } from "@app/lib/types";
 import {
   publicEndpointLimit,
   publicSecretShareCreationLimit,
@@ -55,14 +56,18 @@ export const registerSecretSharingRouter = async (server: FastifyZodProvider) =>
           iv: true,
           tag: true,
           expiresAt: true,
-          expiresAfterViews: true
+          expiresAfterViews: true,
+          accessType: true
+        }).extend({
+          orgName: z.string().optional()
         })
       }
     },
     handler: async (req) => {
       const sharedSecret = await req.server.services.secretSharing.getActiveSharedSecretByIdAndHashedHex(
         req.params.id,
-        req.query.hashedHex
+        req.query.hashedHex,
+        req.permission?.orgId
       );
       if (!sharedSecret) return undefined;
       return {
@@ -70,7 +75,9 @@ export const registerSecretSharingRouter = async (server: FastifyZodProvider) =>
         iv: sharedSecret.iv,
         tag: sharedSecret.tag,
         expiresAt: sharedSecret.expiresAt,
-        expiresAfterViews: sharedSecret.expiresAfterViews
+        expiresAfterViews: sharedSecret.expiresAfterViews,
+        accessType: sharedSecret.accessType,
+        orgName: sharedSecret.orgName
       };
     }
   });
@@ -104,7 +111,8 @@ export const registerSecretSharingRouter = async (server: FastifyZodProvider) =>
         tag,
         hashedHex,
         expiresAt: new Date(expiresAt),
-        expiresAfterViews
+        expiresAfterViews,
+        accessType: SecretSharingAccessType.Anyone
       });
       return { id: sharedSecret.id };
     }
@@ -123,7 +131,8 @@ export const registerSecretSharingRouter = async (server: FastifyZodProvider) =>
         tag: z.string(),
         hashedHex: z.string(),
         expiresAt: z.string(),
-        expiresAfterViews: z.number()
+        expiresAfterViews: z.number(),
+        accessType: z.nativeEnum(SecretSharingAccessType).default(SecretSharingAccessType.Organization)
       }),
       response: {
         200: z.object({
@@ -145,7 +154,8 @@ export const registerSecretSharingRouter = async (server: FastifyZodProvider) =>
         tag,
         hashedHex,
         expiresAt: new Date(expiresAt),
-        expiresAfterViews
+        expiresAfterViews,
+        accessType: req.body.accessType
       });
       return { id: sharedSecret.id };
     }

backend/src/services/secret-import/secret-import-fns.ts

@@ -90,7 +90,7 @@ export const fnSecretsFromImports = async ({
   const secretsFromdeeperImportGroupedByFolderId = groupBy(secretsFromDeeperImports, (i) => i.importFolderId);
 
   const secrets = allowedImports.map(({ importPath, importEnv, id, folderId }, i) => {
-    const sourceImportFolder = importedFolderGroupBySourceImport[`${importEnv.id}-${importPath}`][0];
+    const sourceImportFolder = importedFolderGroupBySourceImport?.[`${importEnv.id}-${importPath}`]?.[0];
     const folderDeeperImportSecrets =
       secretsFromdeeperImportGroupedByFolderId?.[sourceImportFolder?.id || ""]?.[0]?.secrets || [];
 

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

@@ -1,6 +1,8 @@
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { BadRequestError, UnauthorizedError } from "@app/lib/errors";
+import { SecretSharingAccessType } from "@app/lib/types";
 
+import { TOrgDALFactory } from "../org/org-dal";
 import { TSecretSharingDALFactory } from "./secret-sharing-dal";
 import {
   TCreatePublicSharedSecretDTO,
@@ -12,13 +14,15 @@ import {
 type TSecretSharingServiceFactoryDep = {
   permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
   secretSharingDAL: TSecretSharingDALFactory;
+  orgDAL: TOrgDALFactory;
 };
 
 export type TSecretSharingServiceFactory = ReturnType<typeof secretSharingServiceFactory>;
 
 export const secretSharingServiceFactory = ({
   permissionService,
-  secretSharingDAL
+  secretSharingDAL,
+  orgDAL
 }: TSecretSharingServiceFactoryDep) => {
   const createSharedSecret = async (createSharedSecretInput: TCreateSharedSecretDTO) => {
     const {
@@ -30,6 +34,7 @@ export const secretSharingServiceFactory = ({
       encryptedValue,
       iv,
       tag,
+      accessType,
       hashedHex,
       expiresAt,
       expiresAfterViews
@@ -62,13 +67,14 @@ export const secretSharingServiceFactory = ({
       expiresAt,
       expiresAfterViews,
       userId: actorId,
-      orgId
+      orgId,
+      accessType
     });
     return { id: newSharedSecret.id };
   };
 
   const createPublicSharedSecret = async (createSharedSecretInput: TCreatePublicSharedSecretDTO) => {
-    const { encryptedValue, iv, tag, hashedHex, expiresAt, expiresAfterViews } = createSharedSecretInput;
+    const { encryptedValue, iv, tag, hashedHex, expiresAt, expiresAfterViews, accessType } = createSharedSecretInput;
     if (new Date(expiresAt) < new Date()) {
       throw new BadRequestError({ message: "Expiration date cannot be in the past" });
     }
@@ -92,7 +98,8 @@ export const secretSharingServiceFactory = ({
       tag,
       hashedHex,
       expiresAt,
-      expiresAfterViews
+      expiresAfterViews,
+      accessType
     });
     return { id: newSharedSecret.id };
   };
@@ -105,9 +112,21 @@ export const secretSharingServiceFactory = ({
     return userSharedSecrets;
   };
 
-  const getActiveSharedSecretByIdAndHashedHex = async (sharedSecretId: string, hashedHex: string) => {
+  const getActiveSharedSecretByIdAndHashedHex = async (sharedSecretId: string, hashedHex: string, orgId?: string) => {
     const sharedSecret = await secretSharingDAL.findOne({ id: sharedSecretId, hashedHex });
     if (!sharedSecret) return;
+
+    const orgName = sharedSecret.orgId ? (await orgDAL.findOrgById(sharedSecret.orgId))?.name : "";
+    // Support organization level access for secret sharing
+    if (sharedSecret.accessType === SecretSharingAccessType.Organization && orgId !== sharedSecret.orgId) {
+      return {
+        ...sharedSecret,
+        encryptedValue: "",
+        iv: "",
+        tag: "",
+        orgName
+      };
+    }
     if (sharedSecret.expiresAt && sharedSecret.expiresAt < new Date()) {
       return;
     }
@@ -118,7 +137,10 @@ export const secretSharingServiceFactory = ({
       }
       await secretSharingDAL.updateById(sharedSecretId, { $decr: { expiresAfterViews: 1 } });
     }
-    return sharedSecret;
+    if (sharedSecret.accessType === SecretSharingAccessType.Organization && orgId === sharedSecret.orgId) {
+      return { ...sharedSecret, orgName };
+    }
+    return { ...sharedSecret, orgName: undefined };
   };
 
   const deleteSharedSecretById = async (deleteSharedSecretInput: TDeleteSharedSecretDTO) => {

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

@@ -1,3 +1,5 @@
+import { SecretSharingAccessType } from "@app/lib/types";
+
 import { ActorAuthMethod, ActorType } from "../auth/auth-type";
 
 export type TSharedSecretPermission = {
@@ -6,6 +8,7 @@ export type TSharedSecretPermission = {
   actorAuthMethod: ActorAuthMethod;
   actorOrgId: string;
   orgId: string;
+  accessType?: SecretSharingAccessType;
 };
 
 export type TCreatePublicSharedSecretDTO = {
@@ -15,6 +18,7 @@ export type TCreatePublicSharedSecretDTO = {
   hashedHex: string;
   expiresAt: Date;
   expiresAfterViews: number;
+  accessType: SecretSharingAccessType;
 };
 
 export type TCreateSharedSecretDTO = TSharedSecretPermission & TCreatePublicSharedSecretDTO;

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

@@ -23,6 +23,7 @@ export enum SmtpTemplates {
   EmailMfa = "emailMfa.handlebars",
   UnlockAccount = "unlockAccount.handlebars",
   AccessApprovalRequest = "accessApprovalRequest.handlebars",
+  AccessSecretRequestBypassed = "accessSecretRequestBypassed.handlebars",
   HistoricalSecretList = "historicalSecretLeakIncident.handlebars",
   NewDeviceJoin = "newDevice.handlebars",
   OrgInvite = "organizationInvitation.handlebars",

backend/src/services/smtp/templates/accessSecretRequestBypassed.handlebars

@@ -0,0 +1,28 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Secret Approval Request Policy Bypassed</title>
+  </head>
+
+  <body>
+    <h1>Infisical</h1>
+    <h2>Secret Approval Request Bypassed</h2>
+    <p>A secret approval request has been bypassed in the project "{{projectName}}".</p>
+
+    <p>
+      {{requesterFullName}} ({{requesterEmail}}) has merged
+      a secret to environment {{environment}} at secret path {{secretPath}}
+      without obtaining the required approvals.
+    </p>
+    <p>
+      The following reason was provided for bypassing the policy:
+      <em>{{bypassReason}}</em>
+    </p>
+
+    <p>
+      To review this action, please visit the request panel
+      <a href="{{approvalUrl}}">here</a>.
+    </p>
+  </body>
+</html>

docs/documentation/platform/access-controls/access-requests.mdx

@@ -6,7 +6,7 @@ description: "Learn how to request access to sensitive resources in Infisical."
 In certain situations, developers need to expand their access to a certain new project or a sensitive environment. For those use cases, it is helpful to utilize Infisical's **Access Requests** functionality. 
 
 This functionality works in the following way: 
-1. A project administrator sets up a policy that assigns access managers (also known as eligible approvers) to a certain sensitive folder or environment. 
+1. A project administrator sets up an access policy that assigns access managers (also known as eligible approvers) to a certain sensitive folder or environment. 
 ![Create Access Request Policy Modal](/images/platform/access-controls/create-access-request-policy.png)
 ![Access Request Policies](/images/platform/access-controls/access-request-policies.png)
 
@@ -14,9 +14,14 @@ This functionality works in the following way:
 ![Access Request Create](/images/platform/access-controls/request-access.png)
 ![Access Request Dashboard](/images/platform/access-controls/access-requests-pending.png)
 
-3. An eligible approver can approve or reject the access request. 
-![Access Request Review](/images/platform/access-controls/review-access-request.png)
+4. An eligible approver can approve or reject the access request.
+{/* ![Access Request Review](/images/platform/access-controls/review-access-request.png) */}
+![Access Request Bypass](/images/platform/access-controls/access-request-bypass.png)
 
-4. As soon as the request is approved, developer is able to access the sought resources. 
+<Info>
+ If the access request matches with a policy that has a **Soft** enforcement level, the requester may bypass the policy and get access to the resource without full approval.
+</Info>
+
+5. As soon as the request is approved, developer is able to access the sought resources. 
 ![Access Request Dashboard](/images/platform/access-controls/access-requests-completed.png)
 

docs/documentation/platform/pr-workflows.mdx

@@ -18,16 +18,26 @@ In a similar way, to solve the above-mentioned issues, Infisical provides a feat
 
 ### Setting a policy
 
-First, you would need to create a set of policies for a certain environment. In the example below, a generic policy for a production environment is shown. In this case, any user who submits a change to `prod` would first have to get an approval by a predefined approver (or multiple approvers).
+First, you would need to create a set of policies for a certain environment. In the example below, a generic change policy for a production environment is shown. In this case, any user who submits a change to `prod` would first have to get an approval by a predefined approver (or multiple approvers).
 
 ![create secret update policy](../../images/platform/pr-workflows/secret-update-policy.png)
 
+### Policy enforcement levels
+
+The enforcement level determines how strict the policy is. A **Hard** enforcement level means that any change that matches the policy will need full approval prior merging. A **Soft** enforcement level allows for break glass functionality on the request. If a change request is bypassed, the approvers will be notified via email.
+
+### Example of creating a change policy
+
+When creating a policy, you can choose the type of policy you want to create. In this case, we will be creating a `Change Policy`. Other types of policies include `Access Policy` that creates policies for **[Access Requests](/documentation/platform/access-controls/access-requests)**.
+
+![create panel secret update policy](../../images/platform/pr-workflows/create-change-policy.png)
+
 ### Example of updating secrets with Approval workflows
 
 When a user submits a change to an enviropnment that is under a particular policy, a corresponsing change request will go to a predefined approver (or multiple approvers). 
 
 ![secret update change requests](../../images/platform/pr-workflows/secret-update-request.png)
 
-An approver is notified by email and/or Slack as soon as the request is initiated. In the Infisical Dashboard, they will be able to `approve` and `merge` (or `deny`) a request for a change in a particular environment. After that, depending on the workflows setup, the change will be automatically propagated to the right applications (e.g., using [Infisical Kubernetes Operator](https://infisical.com/docs/integrations/platforms/kubernetes)).
+Approvers are notified by email and/or Slack as soon as the request is initiated. In the Infisical Dashboard, they will be able to `approve` and `merge` (or `deny`) a request for a change in a particular environment. After that, depending on the workflows setup, the change will be automatically propagated to the right applications (e.g., using [Infisical Kubernetes Operator](https://infisical.com/docs/integrations/platforms/kubernetes)).
 
 ![secrets update pull request](../../images/platform/pr-workflows/secret-update-pr.png)

docs/documentation/platform/secret-sharing.mdx

@@ -21,7 +21,8 @@ With its zero-knowledge architecture, secrets shared via Infisical remain unread
   zero knowledge architecture.
 </Note>
 
-3. Click on the **Share Secret** button. Set the secret, its expiration time as well as the number of views allowed. It expires as soon as any of the conditions are met.
+3. Click on the **Share Secret** button. Set the secret, its expiration time and specify if the secret can be viewed only once. It expires as soon as any of the conditions are met.
+Also, specify if the secret can be accessed by anyone or only people within your organization.
 
    ![Add View-Bound Sharing Secret](../../images/platform/secret-sharing/create-new-secret.png)
 

docs/mint.json

@@ -217,7 +217,14 @@
       "pages": [
         "self-hosting/overview",
         {
-          "group": "Installation methods",
+          "group": "Native installation methods",
+          "pages": [
+            "self-hosting/deployment-options/native/standalone-binary",
+            "self-hosting/deployment-options/native/high-availability"
+          ]
+        },
+        {
+          "group": "Containerized installation methods",
           "pages": [
             "self-hosting/deployment-options/standalone-infisical",
             "self-hosting/deployment-options/docker-swarm",

docs/self-hosting/configuration/envars.mdx

@@ -328,6 +328,27 @@ SMTP_FROM_NAME=Infisical
   </Info>
 </Accordion>
 
+<Accordion title="SMTP2Go"> 
+1. Create an account and configure [SMTP2Go](https://www.smtp2go.com/) to send emails.
+2. Turn on SMTP authentication  
+```
+SMTP_HOST=mail.smtp2go.com
+SMTP_PORT=You can use one of the following ports: 2525, 80, 25, 8025, or 587
+SMTP_USERNAME=username #Your SMTP2GO account's SMTP username
+SMTP_PASSWORD=password #Your SMTP2GO account's SMTP password
+SMTP_FROM_ADDRESS=hey@example.com # your email address being used to send out emails
+SMTP_FROM_NAME=Infisical
+```
+{" "}
+
+<Note> 
+Optional (for TLS/SSL):
+
+TLS: Available on the same ports (2525, 80, 25, 8025, or 587)
+SSL: Available on ports 465, 8465, and 443
+</Note>
+</Accordion> 
+
 ## Authentication
 
 By default, users can only login via email/password based login method.

docs/self-hosting/deployment-options/native/high-availability.mdx

@@ -0,0 +1,520 @@
+---
+title: "Automatically deploy Infisical with High Availability"
+sidebarTitle: "High Availability"
+---
+
+
+# Self-Hosting Infisical with a native High Availability (HA) deployment
+
+This page describes the Infisical architecture designed to provide high availability (HA) and how to deploy Infisical with high availability. The high availability deployment is designed to ensure that Infisical services are always available and can handle service failures gracefully, without causing service disruptions.
+
+<Info>
+  This deployment option is currently only available for Debian-based nodes (e.g., Ubuntu, Debian).
+  We plan on adding support for other operating systems in the future.
+</Info>
+
+## High availability architecture
+| Service                          | Nodes          | Configuration                | GCP           | AWS          |
+|----------------------------------|----------------|------------------------------|---------------|--------------|
+| External load balancer$^1$       | 1              | 4 vCPU, 3.6 GB memory        | n1-highcpu-4  | c5n.xlarge   |
+| Internal load balancer$^2$       | 1              | 4 vCPU, 3.6 GB memory        | n1-highcpu-4  | c5n.xlarge   |
+| Etcd cluster$^3$                 | 3              | 4 vCPU, 3.6 GB memory        | n1-highcpu-4  | c5n.xlarge   |
+| PostgreSQL$^4$                   | 3              | 2 vCPU, 7.5 GB memory        | n1-standard-2 | m5.large     |
+| Sentinel$^4$                     | 3              | 2 vCPU, 7.5 GB memory        | n1-standard-2 | m5.large     |
+| Redis$^4$                        | 3              | 2 vCPU, 7.5 GB memory        | n1-standard-2 | m5.large     |
+| Infisical Core                   | 3              | 8 vCPU, 7.2 GB memory        | n1-highcpu-8  | c5.2xlarge   |
+
+**Footnotes:**
+1. External load balancer: If you wish to have multiple instances of the internal load balancer, you will need to use an external load balancer to distribute incoming traffic across multiple internal load balancers.
+   Using multiple internal load balancers is recommended for high-traffic environments. In the following guide we will use a single internal load balancer, as external load balancing falls outside the scope of this guide.
+2. Internal load balancer: The internal load balancer (a HAProxy instance) is used to distribute incoming traffic across multiple Infisical Core instances, Postgres nodes, and Redis nodes. The internal load balancer exposes a set of ports _(80 for Infiscial, 5000 for Read/Write postgres, 5001 for Read-only postgres, and 6379 for Redis)_. Where these ports route to is determained by the internal load balancer based on the availability and health of the service nodes.
+   The internal load balancer is only accessible from within the same network, and is not exposed to the public internet.
+3. Etcd cluster: Etcd is a distributed key-value store used to store and distribute data between the PostgreSQL nodes. Etcd is dependent on high disk I/O performance, therefore it is highly recommended to use highly performant SSD disks for the Etcd nodes, with _at least_ 80GB of disk space.
+4. The Redis and PostgreSQL nodes will automatically be configured for high availability and used in your Infisical Core instances. However, you can optionally choose to bring your own database (BYOD), and skip these nodes. See more on how to [provide your own databases](#provide-your-own-databases).
+
+<Info>
+ For all services that require multiple nodes, it is recommended to deploy them across multiple availability zones (AZs) to ensure high availability and fault tolerance. This will help prevent service disruptions in the event of an AZ failure.
+</Info>
+
+![High availability stack](../../images/self-hosting/deployment-options/native/ha-stack.png)
+The image above shows how a high availability deployment of Infisical is structured. In this example, an external load balancer is used to distribute incoming traffic across multiple internal load balancers. The internal load balancers. The external load balancer isn't required, and it will require additional configuration to set up.
+
+###  Fault Tolerance
+This setup provides N+1 redundancy, meaning it can tolerate the failure of any single node without service interruption.
+
+## Ansible
+### What is Ansible
+Ansible is an open-source automation tool that simplifies application deployment, configuration management, and task automation.
+At Infisical, we use Ansible to automate the deployment of Infisical services. The Ansible roles are designed to make it easy to deploy Infisical services in a high availability environment.
+
+### Installing Ansible
+<Steps>
+  <Step title="Install using the pipx Python package manager">
+    ```bash
+      pipx install --include-deps ansible
+    ```
+  </Step>
+  <Step title="Verify the installation">
+    ```bash
+      ansible --version
+    ```
+  </Step>
+</Steps>
+
+
+### Understanding Ansible Concepts
+
+* Inventory _(inventory.ini)_: A file that lists your target hosts.
+* Playbook _(playbook.yml)_: YAML file containing a set of tasks to be executed on hosts.
+* Roles: Reusable units of organization for playbooks. Roles are used to group tasks together in a structured and reusable manner.
+
+
+### Basic Ansible Commands
+Running a playbook with with an invetory file:
+```bash
+  ansible-playbook -i inventory.ini playbook.yml
+```
+
+This is how you would run the playbook containing the roles for setting up Infisical in a high availability environment.
+
+### Installing the Infisical High Availability Deployment Ansible Role
+The Infisical Ansible role is available on Ansible Galaxy. You can install the role by running the following command:
+```bash
+  ansible-galaxy collection install infisical.infisical_core_ha_deployment
+```
+
+
+## Set up components
+1. External load balancer (optional, and not covered in this guide)
+2. [Configure Etcd cluster](#configure-etcd-cluster)
+3. [Configure PostgreSQL database](#configure-postgresql-database)
+4. [Configure Redis/Sentinel](#configure-redis-and-sentinel)
+5. [Configure Infisical Core](#configure-infisical-core)
+
+
+The servers start on the same 52.1.0.0/24 private network range, and can connect to each other freely on these addresses.
+
+The following list includes descriptions of each server and its assigned IP:
+
+52.1.0.1:   External Load Balancer
+52.1.0.2:   Internal Load Balancer
+52.1.0.3:   Etcd 1
+52.1.0.4:   Etcd 2
+52.1.0.5:   Etcd 3
+52.1.0.6:   PostgreSQL 1
+52.1.0.7:   PostgreSQL 2
+52.1.0.8:   PostgreSQL 3
+52.1.0.9:   Redis 1
+52.1.0.10:  Redis 2
+52.1.0.11:  Redis 3
+52.1.0.12:  Sentinel 1
+52.1.0.13:  Sentinel 2
+52.1.0.14:  Sentinel 3
+52.1.0.15: Infisical Core 1
+52.1.0.16: Infisical Core 2
+52.1.0.17: Infisical Core 3
+
+
+
+### Configure Etcd cluster
+
+Configuring the ETCD cluster is the first step in setting up a high availability deployment of Infisical.
+The ETCD cluster is used to store and distribute data between the PostgreSQL nodes. The ETCD cluster is a distributed key-value store that is highly available and fault-tolerant.
+
+```yaml example.playbook.yml
+  - hosts: all
+    gather_facts: true
+
+  - name: Set up etcd cluster
+    hosts: etcd
+    become: true
+    collections:
+      - infisical.infisical_core_ha_deployment
+    roles:
+      - role: etcd
+```
+
+```ini example.inventory.ini
+  [etcd]
+  etcd1 ansible_host=52.1.0.3
+  etcd2 ansible_host=52.1.0.4
+  etcd3 ansible_host=52.1.0.5
+
+  [etcd:vars]
+  ansible_user=ubuntu
+  ansible_ssh_private_key_file=./ssh-key.pem
+  ansible_ssh_common_args='-o StrictHostKeyChecking=no'
+```
+
+### Configure PostgreSQL database
+
+The Postgres role takes a set of parameters that are used to configure your PostgreSQL database.
+
+Make sure to set the following variables in your playbook.yml file:
+- `postgres_super_user_password`: The password for the 'postgres' database user.
+- `postgres_db_name`: The name of the database that will be created on the leader node and replicated to the secondary nodes.
+- `postgres_user`: The name of the user that will be created on the leader node and replicated to the secondary nodes.
+- `postgres_user_password`: The password for the user that will be created on the leader node and replicated to the secondary nodes.
+- `etcd_hosts`: The list of etcd hosts that the PostgreSQL nodes will use to communicate with etcd. By default you want to keep this value set to `"{{ groups['etcd'] }}"`
+
+```yaml example.playbook.yml
+  - hosts: all
+    gather_facts: true
+
+  - name: Set up PostgreSQL with Patroni
+    hosts: postgres
+    become: true
+    collections:
+      - infisical.infisical_core_ha_deployment
+    roles:
+      - role: postgres
+        vars:
+          postgres_super_user_password: "your-super-user-password"
+          postgres_user: infisical-user
+          postgres_user_password: "your-password"
+          postgres_db_name: infisical-db
+
+          etcd_hosts: "{{ groups['etcd'] }}"
+```
+
+```ini example.inventory.ini
+  [postgres]
+  postgres1 ansible_host=52.1.0.6
+  postgres2 ansible_host=52.1.0.7
+  postgres3 ansible_host=52.1.0.8
+```
+
+### Configure Redis and Sentinel
+
+The Redis role takes a single variable as input, which is the redis password.
+The Sentinel and Redis hosts will run the same role, therefore we are running the task for both the sentinel and redis hosts, `hosts: redis:sentinel`.
+
+- `redis_password`: The password that will be set for the Redis instance.
+  
+```yaml example.playbook.yml
+    - hosts: all
+      gather_facts: true
+  
+    - name: Setup Redis and Sentinel
+      hosts: redis:sentinel
+      become: true
+      collections:
+        - infisical.infisical_core_ha_deployment
+      roles:
+        - role: redis
+          vars:
+            redis_password: "REDIS_PASSWORD"
+```
+
+```ini example.inventory.ini
+    [redis]
+    redis1 ansible_host=52.1.0.9
+    redis2 ansible_host=52.1.0.10
+    redis3 ansible_host=52.1.0.11
+
+    [sentinel]
+    sentinel1 ansible_host=52.1.0.12
+    sentinel2 ansible_host=52.1.0.13
+    sentinel3 ansible_host=52.1.0.14
+```
+
+### Configure Internal Load Balancer
+
+The internal load balancer used is HAProxy. HAProxy will expose a set of ports as listed below. Each port will route to a different service based on the availability and health of the service nodes.
+
+- Port 80: Infisical Core
+- Port 5000: Read/Write PostgreSQL
+- Port 5001: Read-only PostgreSQL
+- Port 6379: Redis
+- Port 7000: HAProxy monitoring
+These ports will need to be exposed on your network to become accessible from the outside world.
+
+The HAProxy configuration file is generated by the Infisical Core role, and is located at `/etc/haproxy/haproxy.cfg` on your internal load balancer node.
+
+The HAProxy setup comes with a monitoring panel. You have to set the username/password combination for the monitoring panel by setting the `stats_user` and `stats_password` variables in the HAProxy role.
+
+
+Once the HAProxy role has fully executed, you can monitor your HA setup by navigating to `http://52.1.0.2:7000/haproxy?stats` in your browser.
+
+```ini example.inventory.ini
+[haproxy]
+internal_lb ansible_host=52.1.0.2
+```
+
+```yaml example.playbook.yml
+- name: Set up HAProxy
+  hosts: haproxy
+  become: true
+  collections:
+    - infisical.infisical_core_ha_deployment
+  roles:
+    - role: haproxy
+      vars:
+        stats_user: "stats-username"
+        stats_password: "stats-password!"
+
+        postgres_servers: "{{ groups['postgres'] }}"
+        infisical_servers: "{{ groups['infisical'] }}"
+        redis_servers: "{{ groups['redis'] }}"
+```
+
+
+
+### Configure Infisical Core
+
+The Infisical Core role will set up your actual Infisical instances.
+
+The `env_vars` variable is used to set the environment variables that Infisical will use. The minimum required environment variables are `ENCRYPTION_KEY` and `AUTH_SECRET`. You can find a list of all available environment variables [here](/docs/self-hosting/configuration/envars#general-platform).
+The `DB_CONNECTION_URI` and `REDIS_URL` variables will automatically be set if you're running the full playbook. However, you can choose to set them yourself, and skip the Postgres, etcd, redis/sentinel roles entirely.
+
+<Info>
+ If you later need to add new environment varibles to your Infisical deployments, it's important you add the variables to **all** your Infisical nodes.<br/>
+ You can find the environment file for Infisical at `/etc/infisical/environment`.<br/>
+ After editing the environment file, you need to reload the Infisical service by doing `systemctl restart infisical`.
+</Info>
+
+```yaml example.playbook.yml
+  - hosts: all
+    gather_facts: true
+
+  - name: Setup Infisical
+    hosts: infisical
+    become: true
+    collections:
+      - infisical.infisical_core_ha_deployment
+    roles:
+      - role: infisical
+        env_vars:
+          ENCRYPTION_KEY: "YOUR_ENCRYPTION_KEY" # openssl rand -hex 16
+          AUTH_SECRET: "YOUR_AUTH_SECRET" # openssl rand -base64 32
+```
+
+```ini example.inventory.ini
+  [infisical]
+  infisical1 ansible_host=52.1.0.15
+  infisical2 ansible_host=52.1.0.16
+  infisical3 ansible_host=52.1.0.17
+```
+
+## Provide your own databases
+Bringing your own database is an option using the Infisical Core deployment role.
+By bringing your own database, you're able to skip the Etcd, Postgres, and Redis/Sentinel roles entirely.
+
+To bring your own database, you need to set the `DB_CONNECTION_URI` and `REDIS_URL` environment variables in the Infisical Core role.
+
+```yaml example.playbook.yml
+  - hosts: all
+    gather_facts: true
+
+  - name: Setup Infisical
+    hosts: infisical
+    become: true
+    collections:
+      - infisical.infisical_core_ha_deployment
+    roles:
+      - role: infisical
+        env_vars:
+          ENCRYPTION_KEY: "YOUR_ENCRYPTION_KEY" # openssl rand -hex 16
+          AUTH_SECRET: "YOUR_AUTH_SECRET" # openssl rand -base64 32
+          DB_CONNECTION_URI: "postgres://user:password@localhost:5432/infisical"
+          REDIS_URL: "redis://localhost:6379"
+```
+
+```ini example.inventory.ini
+  [infisical]
+  infisical1 ansible_host=52.1.0.15
+  infisical2 ansible_host=52.1.0.16
+  infisical3 ansible_host=52.1.0.17
+```
+
+## Full deployment example
+To make it easier to get started, we've provided a full deployment example that you can use to deploy Infisical in a high availability environment.
+
+- This deployment does not use an external load balancer.
+- You **must** change the environment variables defined in the `playbook.yml` example.
+- You have update the IP addresses in the `inventory.ini` file to match your own network configuration.
+- You need to set the SSH key and ssh user in the `inventory.ini` file.
+
+<Steps>
+  <Step title="Install Ansible">
+    Install Ansible using the pipx Python package manager.
+  ```bash
+    pipx install --include-deps ansible
+  ```
+
+  </Step>
+  <Step title="Install the Infisical deployment Ansible Role">
+    Install the Infisical deployment role from Ansible Galaxy.
+  ```bash
+    ansible-galaxy collection install infisical.infisical_core_ha_deployment
+  ```
+  </Step>
+  <Step title="Setup your hosts">
+
+    Create an `inventory.ini` file, and define your hosts and their IP addresses. You can use the example below as a template, and update the IP addresses to match your own network configuration.
+    Make sure to set the SSH key and ssh user in the `inventory.ini` file. Please see the example below.
+
+    ```ini example.inventory.ini
+      [etcd]
+      etcd1 ansible_host=52.1.0.3
+      etcd2 ansible_host=52.1.0.4
+      etcd3 ansible_host=52.1.0.5
+
+      [postgres]
+      postgres1 ansible_host=52.1.0.6
+      postgres2 ansible_host=52.1.0.7
+      postgres3 ansible_host=52.1.0.8
+
+      [infisical]
+      infisical1 ansible_host=52.1.0.15
+      infisical2 ansible_host=52.1.0.16
+      infisical3 ansible_host=52.1.0.17
+
+      [redis]
+      redis1 ansible_host=52.1.0.9
+      redis2 ansible_host=52.1.0.10
+      redis3 ansible_host=52.1.0.11
+
+      [sentinel]
+      sentinel1 ansible_host=52.1.0.12
+      sentinel2 ansible_host=52.1.0.13
+      sentinel3 ansible_host=52.1.0.14
+
+      [haproxy]
+      internal_lb ansible_host=52.1.0.2
+
+      ; This can be defined individually for each host, or globally for all hosts.
+      ; In this case the credentials are the same for all hosts, so we define them globally as seen below ([all:vars]).
+      [all:vars]
+      ansible_user=ubuntu
+      ansible_ssh_private_key_file=./your-ssh-key.pem
+      ansible_ssh_common_args='-o StrictHostKeyChecking=no'
+    ```
+  </Step>
+  <Step title="Setup your Ansible playbook">
+    The Ansible playbook is where you define which roles/tasks to execute on which hosts.
+
+    ```yaml example.playbook.yml
+      ---
+      # Important, we must gather facts from all hosts prior to running the roles to ensure we have all the information we need.
+      - hosts: all
+        gather_facts: true
+
+      - name: Set up etcd cluster
+        hosts: etcd
+        become: true
+        collections:
+          - infisical.infisical_core_ha_deployment
+        roles:
+          - role: etcd
+
+      - name: Set up PostgreSQL with Patroni
+        hosts: postgres
+        become: true
+        collections:
+          - infisical.infisical_core_ha_deployment
+        roles:
+          - role: postgres
+            vars:
+              postgres_super_user_password: "<ENTER_SUPERUSER_PASSWORD>" # Password for the 'postgres' database user
+
+              # A database with these credentials will be created on the leader node, and replicated to the secondary nodes.
+              postgres_db_name: <ENTER_DB_NAME>
+              postgres_user: <ENTER_DB_USER>
+              postgres_user_password: <ENTER_DB_USER_PASSWORD>
+
+              etcd_hosts: "{{ groups['etcd'] }}"
+
+      - name: Setup Redis and Sentinel
+        hosts: redis:sentinel
+        become: true
+        collections:
+          - infisical.infisical_core_ha_deployment
+        roles:
+          - role: redis
+            vars:
+              redis_password: "<ENTER_REDIS_PASSWORD>"
+
+      - name: Set up HAProxy
+        hosts: haproxy
+        become: true
+        collections:
+          - infisical.infisical_core_ha_deployment
+        roles:
+          - role: haproxy
+            vars:
+              stats_user: "<ENTER_HAPROXY_STATS_USERNAME>"
+              stats_password: "<ENTER_HAPROXY_STATS_PASSWORD>"
+
+              postgres_servers: "{{ groups['postgres'] }}"
+              infisical_servers: "{{ groups['infisical'] }}"
+              redis_servers: "{{ groups['redis'] }}"
+      - name: Setup Infisical
+        hosts: infisical
+        become: true
+        collections:
+          - infisical.infisical_core_ha_deployment
+        roles:
+          - role: infisical
+            env_vars:
+              ENCRYPTION_KEY: "YOUR_ENCRYPTION_KEY" # openssl rand -hex 16
+              AUTH_SECRET: "YOUR_AUTH_SECRET" # openssl rand -base64 32
+  ```
+  </Step>
+  <Step title="Run the Ansible playbook">
+    After creating the `playbook.yml` and `inventory.ini` files, you can run the playbook using the following command
+  ```bash
+      ansible-playbook -i inventory.ini playbook.yml
+  ```
+
+  This step may take upwards of 10 minutes to complete, depending on the number of nodes and the network speed.
+  Once the playbook has completed, you should have a fully deployed high availability Infisical environment.
+
+  To access Infisical, you can try navigating to `http://52.1.0.2`, in order to view your newly deployed Infisical instance.
+  </Step>
+</Steps>
+
+
+## Post-deployment steps
+After deploying Infisical in a high availability environment, you should perform the following post-deployment steps:
+- Check your deployment to ensure that all services are running as expected. You can use the HAProxy monitoring panel to check the status of your services (http://52.1.0.2:7000/haproxy?stats)
+- Attempt to access the Infisical Core instances to ensure that they are accessible from the internal load balancer. (http://52.1.0.2)
+
+A HAProxy stats page indicating success will look like the image below
+![HAProxy stats page](../../images/self-hosting/deployment-options/native/haproxy-stats.png)
+
+
+## Security Considerations
+### Network Security
+Secure the network that your instances run on. While this falls outside the scope of Infisical deployment, it's crucial for overall security.
+AWS-specific recommendations:
+
+Use Virtual Private Cloud (VPC) to isolate your infrastructure.
+Configure security groups to restrict inbound and outbound traffic.
+Use Network Access Control Lists (NACLs) for additional network-level security.
+
+<Note>
+  Please take note that the Infisical team cannot provide infrastructure support for **free self-hosted** deployments.<br/>If you need help with infrastructure, we recommend upgrading to a [paid plan](https://infisical.com/pricing) which includes infrastructure support.
+
+  You can also join our community [Slack](https://infisical.com/slack) for help and support from the community. 
+</Note>
+
+
+### Troubleshooting
+<Accordion title="Ansible: Failed to set permissions on the temporary files Ansible needs to create when becoming an unprivileged user">
+  If you encounter this issue, please update your ansible config (`ansible.cfg`) file with the following configuration:
+  ```ini
+    [defaults]
+    allow_world_readable_tmpfiles = true
+  ```
+
+  You can read more about the solution [here](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/sh_shell.html#parameter-world_readable_temp)
+</Accordion>
+
+<Accordion title="I'm unable to connect to access the Infisical instance on the web">
+  This issue can be caused by a number of reasons, mostly realted to  the network configuration. Here are a few things you can check:
+  1. Ensure that the firewall is not blocking the connection. You can check this by running `ufw status`. Ensure that port 80 is open.
+  2. If you're using a cloud provider like AWS or GCP, ensure that the security group allows traffic on port 80.
+  3. Ensure that the HAProxy service is running. You can check this by running `systemctl status haproxy`.
+  4. Ensure that the Infisical service is running. You can check this by running `systemctl status infisical`.
+</Accordion>

docs/self-hosting/deployment-options/native/standalone-binary.mdx

@@ -0,0 +1,203 @@
+---
+title: "Standalone"
+description: "Learn how to deploy Infisical in a standalone environment."
+---
+
+# Self-Hosting Infisical with Standalone Infisical
+
+Deploying Infisical in a standalone environment is a great way to get started with Infisical without having to use containers. This guide will walk you through the process of deploying Infisical in a standalone environment.
+This is one of the easiest ways to deploy Infisical. It is a single executable, currently only supported on Debian-based systems.
+
+The standalone deployment implements the "bring your own database" (BYOD) approach. This means that you will need to provide your own databases (specifically Postgres and Redis) for the Infisical services to use. The standalone deployment does not include any databases.
+
+If you wish to streamline the deployment process, we recommend using the Ansible role for Infisical. The Ansible role automates the deployment process and includes the databases:
+- [Automated Deployment](https://google.com)
+- [Automated Deployment with high availability (HA)](https://google.com)
+
+
+## Prerequisites
+- A server running a Debian-based operating system (e.g., Ubuntu, Debian)
+- A Postgres database
+- A Redis database
+
+## Installing Infisical
+Installing Infisical is as simple as running a single command. You can install Infisical by running the following command:
+
+```bash
+  $ curl -1sLf 'https://dl.cloudsmith.io/public/infisical/infisical-core/cfg/setup/bash.deb.sh' | sudo bash && sudo apt-get install -y infisical-core
+```
+
+## Running Infisical
+Running Infisical and serving it to the web has a few steps. Below are the steps to get you started with running Infisical in a standalone environment.
+  * Setup environment variables
+  * Running Postgres migrations
+  * Create system daemon
+  * Exposing Infisical to the internet
+
+
+<Steps>
+  <Step title="Setup environment variables">
+    To use Infisical you'll need to configure the environment variables beforehand. You can acheive this by creating an environment file to be used by Infisical.
+
+
+    #### Create environment file
+    ```bash
+      $ mkdir -p /etc/infisical && touch /etc/infisical/environment
+    ```
+
+    After creating the environment file, you'll need to fill it out with your environment variables.
+
+    #### Edit environment file
+    ```bash
+      $ nano /etc/infisical/environment
+    ```
+
+    ```bash
+      DB_CONNECTION_URI=postgres://user:password@localhost:5432/infisical # Replace with your Postgres database connection URI
+      REDIS_URL=redis://localhost:6379 # Replace with your Redis connection URI
+      ENCRYPTION_KEY=your_encryption_key # Replace with your encryption key (can be generated with: openssl rand -hex 16)
+      AUTH_SECRET=your_auth_secret # Replace with your auth secret (can be generated with: openssl rand -base64 32)
+    ```
+
+    <Info>
+    The minimum required environment variables are `DB_CONNECTION_URI`, `REDIS_URL`, `ENCRYPTION_KEY`, and `AUTH_SECRET`. We recommend You take a look at our [list of all available environment variables](/docs/self-hosting/configuration/envars#general-platform), and configure the ones you need.
+    </Info>
+  </Step>
+  <Step title="Running Postgres migrations">
+
+    Assuming you're starting with a fresh Postgres database, you'll need to run the Postgres migrations to syncronize the database schema.
+    The migration command will use the environment variables you configured in the previous step.
+
+
+    ```bash
+      $ eval $(cat /etc/infisical/environment) infisical-core migration:latest
+    ```
+
+    <Info>
+      This step will need to be repeated if you update Infisical in the future.
+    </Info>
+
+  </Step>
+
+  <Step title="Create service file">
+    ```bash
+      $ nano /etc/systemd/system/infisical.service
+    ```
+  </Step>
+  <Step title="Create Infisical service">
+
+    Create a systemd service file for Infisical. Creating a systemd service file will allow Infisical to start automatically when the system boots or in case of a crash.
+
+    ```bash
+      $ nano /etc/systemd/system/infisical.service
+    ```
+
+    ```ini
+      [Unit]
+      Description=Infisical Service
+      After=network.target
+
+      [Service]
+      # The path to the environment file we created in the previous step
+      EnvironmentFile=/etc/infisical/environment
+      Type=simple
+      # Change the user to the user you want to run Infisical as
+      User=root
+      ExecStart=/usr/local/bin/infisical-core
+      Restart=always
+      RestartSec=30
+
+      [Install]
+      WantedBy=multi-user.target
+    ```
+
+    Now we need to reload the systemd daemon and start the Infisical service.
+
+    ```bash
+      $ systemctl daemon-reload
+      $ systemctl start infisical
+      $ systemctl enable infisical
+    ```
+
+    <Info>
+      You can check the status of the Infisical service by running `systemctl status infisical`.
+      It is also a good idea to check the logs for any errors by running `journalctl --no-pager -u infisical`.
+    </Info>
+  </Step>
+  <Step title="Exposing Infisical to the internet">
+    Exposing Infisical to the internet requires setting up a reverse proxy. You can use any reverse proxy of your choice, but we recommend using HAProxy or Nginx. Below is an example of how to set up a reverse proxy using HAProxy.
+
+    #### Install HAProxy
+    ```bash
+      $ apt-get install -y haproxy
+    ```
+
+    #### Edit HAProxy configuration
+    ```bash
+      $ nano /etc/haproxy/haproxy.cfg
+    ```
+
+    ```ini
+      global
+          log /dev/log local0
+          log /dev/log local1 notice
+          chroot /var/lib/haproxy
+          stats socket /run/haproxy/admin.sock mode 660 level admin expose-fd listeners
+          stats timeout 30s
+          user haproxy
+          group haproxy
+          daemon
+
+      defaults
+          log global
+          mode http
+          option httplog
+          option dontlognull
+          timeout connect 5000
+          timeout client  50000
+          timeout server  50000
+
+      frontend http-in
+          bind *:80
+          default_backend infisical
+
+      backend infisical
+          server infisicalapp 127.0.0.1:8080 check
+    ```
+
+    <Warning>
+      If you decide to use Nginx, then please be aware that the configuration will be different. **Infisical listens on port 8080**.
+    </Warning>
+
+    #### Restart HAProxy
+    ```bash
+      $ systemctl restart haproxy
+    ```
+
+  </Step>
+</Steps>
+
+And that's it! You have successfully deployed Infisical in a standalone environment. You can now access Infisical by visiting `http://your-server-ip`.
+
+<Note>
+  Please take note that the Infisical team cannot provide infrastructure support for **free self-hosted** deployments.<br/>If you need help with infrastructure, we recommend upgrading to a [paid plan](https://infisical.com/pricing) which includes infrastructure support.
+
+  You can also join our community [Slack](https://infisical.com/slack) for help and support from the community. 
+</Note>
+
+## Troubleshooting
+
+<Accordion title="I'm getting a error related to the HAProxy (Missing LF on last line, file might have been truncated at position X)">
+  This is a common issue related to the HAProxy configuration file. The error is caused by the missing newline character at the end of the file. You can fix this by adding a newline character at the end of the file.
+
+  ```bash
+    $ echo "" >> /etc/haproxy/haproxy.cfg
+  ```
+</Accordion>
+<Accordion title="I'm unable to connect to access the Infisical instance on the web">
+  This issue can be caused by a number of reasons, mostly realted to  the network configuration. Here are a few things you can check:
+  1. Ensure that the firewall is not blocking the connection. You can check this by running `ufw status`. Ensure that port 80 is open.
+  2. If you're using a cloud provider like AWS or GCP, ensure that the security group allows traffic on port 80.
+  3. Ensure that the HAProxy service is running. You can check this by running `systemctl status haproxy`.
+  4. Ensure that the Infisical service is running. You can check this by running `systemctl status infisical`.
+</Accordion>

docs/self-hosting/overview.mdx

@@ -33,3 +33,21 @@ Choose from a number of deployment options listed below to get started.
   Use our Helm chart to Install Infisical on your Kubernetes cluster.
   </Card>
 </CardGroup>
+<CardGroup cols={2}>
+  <Card
+    title="Native Deployment"
+    color="#000000"
+    icon="box"
+    href="deployment-options/native/standalone-binary"
+  >
+    Install Infisical on your Debian-based system without containers using our standalone binary.
+  </Card>
+  <Card
+    title="Native Deployment, High Availability"
+    color="#000000"
+    icon="boxes-stacked"
+    href="deployment-options/native/high-availability"
+  >
+    Install Infisical on your Debian-based instances without containers using our standalone binary with high availability out of the box.
+  </Card>
+</CardGroup>

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -21,7 +21,7 @@ export const EmptyState = ({
 }: Props) => (
   <div
     className={twMerge(
-      "flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-6 text-bunker-300",
+      "flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-4 text-bunker-300",
       className
     )}
   >

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -1,9 +1,11 @@
 import { cloneElement, ReactNode } from "react";
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationTriangle, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Label from "@radix-ui/react-label";
 import { twMerge } from "tailwind-merge";
 
+import { Tooltip } from "../Tooltip";
+
 export type FormLabelProps = {
   id?: string;
   isRequired?: boolean;
@@ -11,9 +13,10 @@ export type FormLabelProps = {
   label?: ReactNode;
   icon?: ReactNode;
   className?: string;
+  tooltipText?: string;
 };
 
-export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }: FormLabelProps) => (
+export const FormLabel = ({ id, label, isRequired, icon, className,isOptional, tooltipText }: FormLabelProps) => (
   <Label.Root
     className={twMerge(
       "mb-0.5 ml-1 flex items-center text-sm font-normal text-mineshaft-400",
@@ -24,11 +27,20 @@ export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }:
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
     {isOptional && <span className="ml-1 text-gray-500 italic text-xs">- Optional</span>}
-    {icon && (
+    {icon && !tooltipText && (
       <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}
+    {tooltipText && (
+      <Tooltip content={tooltipText}>
+          <FontAwesomeIcon
+            icon={faQuestionCircle}
+            size="1x"
+            className="ml-2"
+          />
+      </Tooltip>
+    )}
   </Label.Root>
 );
 
@@ -64,6 +76,7 @@ export type FormControlProps = {
   children: JSX.Element;
   className?: string;
   icon?: ReactNode;
+  tooltipText?: string;
 };
 
 export const FormControl = ({
@@ -76,7 +89,8 @@ export const FormControl = ({
   id,
   isError,
   icon,
-  className
+  className,
+  tooltipText
 }: FormControlProps): JSX.Element => {
   return (
     <div className={twMerge("mb-4", className)}>
@@ -87,6 +101,7 @@ export const FormControl = ({
           isRequired={isRequired}
           id={id}
           icon={icon}
+          tooltipText={tooltipText}
         />
       ) : (
         label

frontend/src/helpers/policies.ts

@@ -0,0 +1,12 @@
+import { PolicyType } from "@app/hooks/api/policies/enums";
+
+export const policyDetails: Record<PolicyType, { name: string; className: string }> = {
+  [PolicyType.AccessPolicy]: {
+    className: "bg-lime-900 text-lime-100",
+    name: "Access Policy"
+  },
+  [PolicyType.ChangePolicy]: {
+    className: "bg-indigo-900 text-indigo-100",
+    name: "Change Policy"
+  }
+};

frontend/src/hooks/api/accessApproval/mutation.tsx

@@ -16,14 +16,15 @@ export const useCreateAccessApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateAccessPolicyDTO>({
-    mutationFn: async ({ environment, projectSlug, approvals, approvers, name, secretPath }) => {
+    mutationFn: async ({ environment, projectSlug, approvals, approvers, name, secretPath, enforcementLevel }) => {
       const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
         environment,
         projectSlug,
         approvals,
         approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },
@@ -37,12 +38,13 @@ export const useUpdateAccessApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateAccessPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, name, secretPath }) => {
+    mutationFn: async ({ id, approvers, approvals, name, secretPath, enforcementLevel }) => {
       const { data } = await apiRequest.patch(`/api/v1/access-approvals/policies/${id}`, {
         approvals,
         approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },

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

@@ -1,3 +1,4 @@
+import { EnforcementLevel, PolicyType } from "../policies/enums";
 import { TProjectPermission } from "../roles/types";
 import { WorkspaceEnv } from "../workspace/types";
 
@@ -11,6 +12,11 @@ export type TAccessApprovalPolicy = {
   environment: WorkspaceEnv;
   projectId: string;
   approvers: string[];
+  policyType: PolicyType;
+  approversRequired: boolean;
+  enforcementLevel: EnforcementLevel;
+  updatedAt: Date;
+  userApprovers?: { userId: string }[];
 };
 
 export type TAccessApprovalRequest = {
@@ -47,6 +53,7 @@ export type TAccessApprovalRequest = {
     approvers: string[];
     secretPath?: string | null;
     envId: string;
+    enforcementLevel: EnforcementLevel;
   };
 
   reviewers: {
@@ -119,6 +126,7 @@ export type TCreateAccessPolicyDTO = {
   approvers?: string[];
   approvals?: number;
   secretPath?: string;
+  enforcementLevel?: EnforcementLevel;
 };
 
 export type TUpdateAccessPolicyDTO = {
@@ -128,6 +136,7 @@ export type TUpdateAccessPolicyDTO = {
   secretPath?: string;
   environment?: string;
   approvals?: number;
+  enforcementLevel?: EnforcementLevel;
   // for invalidating list
   projectSlug: string;
 };

frontend/src/hooks/api/policies/enums.ts

@@ -0,0 +1,9 @@
+export enum EnforcementLevel {
+    Hard = "hard",
+    Soft = "soft"
+}
+
+export enum PolicyType {
+    ChangePolicy = "change",
+    AccessPolicy = "access"
+}

frontend/src/hooks/api/secretApproval/mutation.tsx

@@ -9,14 +9,15 @@ export const useCreateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateSecretPolicyDTO>({
-    mutationFn: async ({ environment, workspaceId, approvals, approverUserIds, secretPath, name }) => {
+    mutationFn: async ({ environment, workspaceId, approvals, approvers, secretPath, name, enforcementLevel }) => {
       const { data } = await apiRequest.post("/api/v1/secret-approvals", {
         environment,
         workspaceId,
         approvals,
-        approverUserIds,
+        approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },
@@ -30,12 +31,13 @@ export const useUpdateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateSecretPolicyDTO>({
-    mutationFn: async ({ id, approverUserIds, approvals, secretPath, name }) => {
+    mutationFn: async ({ id, approvers, approvals, secretPath, name, enforcementLevel }) => {
       const { data } = await apiRequest.patch(`/api/v1/secret-approvals/${id}`, {
         approvals,
-        approverUserIds,
+        approvers,
         secretPath,
-        name
+        name,
+        enforcementLevel
       });
       return data;
     },

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

@@ -1,3 +1,4 @@
+import { EnforcementLevel } from "../policies/enums";
 import { WorkspaceEnv } from "../workspace/types";
 
 export type TSecretApprovalPolicy = {
@@ -9,6 +10,8 @@ export type TSecretApprovalPolicy = {
   secretPath?: string;
   approvals: number;
   userApprovers: { userId: string }[];
+  updatedAt: Date;
+  enforcementLevel: EnforcementLevel;
 };
 
 export type TGetSecretApprovalPoliciesDTO = {
@@ -26,16 +29,18 @@ export type TCreateSecretPolicyDTO = {
   name?: string;
   environment: string;
   secretPath?: string | null;
-  approverUserIds?: string[];
+  approvers?: string[];
   approvals?: number;
+  enforcementLevel: EnforcementLevel;
 };
 
 export type TUpdateSecretPolicyDTO = {
   id: string;
   name?: string;
-  approverUserIds?: string[];
+  approvers?: string[];
   secretPath?: string | null;
   approvals?: number;
+  enforcementLevel?: EnforcementLevel;
   // for invalidating list
   workspaceId: string;
 };

frontend/src/hooks/api/secretApprovalRequest/mutation.tsx

@@ -46,8 +46,10 @@ export const usePerformSecretApprovalRequestMerge = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TPerformSecretApprovalRequestMerge>({
-    mutationFn: async ({ id }) => {
-      const { data } = await apiRequest.post(`/api/v1/secret-approval-requests/${id}/merge`);
+    mutationFn: async ({ id, bypassReason }) => {
+      const { data } = await apiRequest.post(`/api/v1/secret-approval-requests/${id}/merge`, {
+        bypassReason
+      });
       return data;
     },
     onSuccess: (_, { id, workspaceId }) => {

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

@@ -133,4 +133,5 @@ export type TUpdateSecretApprovalRequestStatusDTO = {
 export type TPerformSecretApprovalRequestMerge = {
   id: string;
   workspaceId: string;
+  bypassReason?: string;
 };

frontend/src/hooks/api/secretSharing/queries.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { TSharedSecret, TViewSharedSecretResponse } from "./types";
+import { SecretSharingAccessType, TSharedSecret, TViewSharedSecretResponse } from "./types";
 
 export const useGetSharedSecrets = () => {
   return useQuery({
@@ -17,7 +17,7 @@ export const useGetSharedSecrets = () => {
 export const useGetActiveSharedSecretByIdAndHashedHex = (id: string, hashedHex: string) => {
   return useQuery<TViewSharedSecretResponse, [string]>({
     queryFn: async () => {
-      if(!id || !hashedHex) return Promise.resolve({ encryptedValue: "", iv: "", tag: "" });
+      if(!id || !hashedHex) return Promise.resolve({ encryptedValue: "", iv: "", tag: "", accessType: SecretSharingAccessType.Organization, orgName: "" });
       const { data } = await apiRequest.get<TViewSharedSecretResponse>(
         `/api/v1/secret-sharing/public/${id}?hashedHex=${hashedHex}`
       );
@@ -25,6 +25,8 @@ export const useGetActiveSharedSecretByIdAndHashedHex = (id: string, hashedHex:
         encryptedValue: data.encryptedValue,
         iv: data.iv,
         tag: data.tag,
+        accessType: data.accessType,
+        orgName: data.orgName
       };
     }
   });

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

@@ -13,14 +13,22 @@ export type TCreateSharedSecretRequest = {
   hashedHex: string;
   expiresAt: Date;
   expiresAfterViews: number;
+  accessType: SecretSharingAccessType;
 };
 
 export type TViewSharedSecretResponse = {
   encryptedValue: string;
   iv: string;
   tag: string;
+  accessType: SecretSharingAccessType;
+  orgName?: string;
 };
 
 export type TDeleteSharedSecretRequest = {
   sharedSecretId: string;
 };
+
+export enum SecretSharingAccessType {
+  Anyone = "anyone",
+  Organization = "organization"
+}

frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx

@@ -3,25 +3,31 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { Divider } from "@app/components/v2/Divider";
+import { Badge } from "@app/components/v2/Badge";
 import { useWorkspace } from "@app/context";
+import { useGetAccessRequestsCount, useGetSecretApprovalRequestCount } from "@app/hooks/api";
 
-import { AccessApprovalPolicyList } from "./components/AccessApprovalPolicyList";
 import { AccessApprovalRequest } from "./components/AccessApprovalRequest";
-import { SecretApprovalPolicyList } from "./components/SecretApprovalPolicyList";
+import { ApprovalPolicyList } from "./components/ApprovalPolicyList";
 import { SecretApprovalRequest } from "./components/SecretApprovalRequest";
 
 enum TabSection {
   SecretApprovalRequests = "approval-requests",
   SecretPolicies = "approval-rules",
   ResourcePolicies = "resource-rules",
-  ResourceApprovalRequests = "resource-requests"
+  ResourceApprovalRequests = "resource-requests",
+  Policies = "policies"
 }
 
 export const SecretApprovalPage = () => {
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
+  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId: projectId });
+  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
+  const defaultTab = (accessApprovalRequestCount?.pendingCount || 0) > (secretApprovalReqCount?.open || 0)
+    ? TabSection.ResourceApprovalRequests
+    : TabSection.SecretApprovalRequests;
 
   return (
     <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
@@ -45,25 +51,26 @@ export const SecretApprovalPage = () => {
           </Link>
         </div>
       </div>
-      <Tabs defaultValue={TabSection.SecretApprovalRequests}>
+      <Tabs defaultValue={defaultTab}>
         <TabList>
-          <Tab value={TabSection.SecretApprovalRequests}>Secret Requests</Tab>
-          <Tab value={TabSection.SecretPolicies}>Secret Policies</Tab>
-          <Divider />
-          <Tab value={TabSection.ResourceApprovalRequests}>Access Requests</Tab>
-          <Tab value={TabSection.ResourcePolicies}>Access Request Policies</Tab>
+          <Tab value={TabSection.SecretApprovalRequests}>
+            Secret Requests
+            {Boolean(secretApprovalReqCount?.open) && (<Badge className="ml-2">{secretApprovalReqCount?.open}</Badge>)}
+          </Tab>
+          <Tab value={TabSection.ResourceApprovalRequests}>
+            Access Requests
+            {Boolean(accessApprovalRequestCount?.pendingCount) && <Badge className="ml-2">{accessApprovalRequestCount?.pendingCount}</Badge>}
+          </Tab>
+          <Tab value={TabSection.Policies}>Policies</Tab>
         </TabList>
-        <TabPanel value={TabSection.SecretPolicies}>
-          <SecretApprovalPolicyList workspaceId={projectId} />
-        </TabPanel>
         <TabPanel value={TabSection.SecretApprovalRequests}>
           <SecretApprovalRequest />
         </TabPanel>
         <TabPanel value={TabSection.ResourceApprovalRequests}>
           <AccessApprovalRequest projectId={projectId} projectSlug={projectSlug} />
         </TabPanel>
-        <TabPanel value={TabSection.ResourcePolicies}>
-          <AccessApprovalPolicyList workspaceId={projectId} />
+        <TabPanel value={TabSection.Policies}>
+          <ApprovalPolicyList workspaceId={projectId} />
         </TabPanel>
       </Tabs>
     </div>

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/AccessApprovalPolicyList.tsx

@@ -1,174 +0,0 @@
-import { faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  UpgradePlanModal
-} from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useSubscription,
-  useWorkspace
-} from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { useDeleteAccessApprovalPolicy, useGetWorkspaceUsers } from "@app/hooks/api";
-import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
-import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-
-import { AccessApprovalPolicyRow } from "./components/AccessApprovalPolicyRow";
-import { AccessPolicyForm } from "./components/AccessPolicyModal";
-
-interface IProps {
-  workspaceId: string;
-}
-
-export const AccessApprovalPolicyList = ({ workspaceId }: IProps) => {
-  const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
-    "secretPolicyForm",
-    "deletePolicy",
-    "upgradePlan"
-  ] as const);
-  const { permission } = useProjectPermission();
-  const { subscription } = useSubscription();
-  const { currentWorkspace } = useWorkspace();
-
-  const { data: members } = useGetWorkspaceUsers(workspaceId);
-  const { data: policies, isLoading: isPoliciesLoading } = useGetAccessApprovalPolicies({
-    projectSlug: currentWorkspace?.slug as string,
-    options: {
-      enabled:
-        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
-        !!currentWorkspace?.slug
-    }
-  });
-
-  const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteAccessApprovalPolicy();
-
-  const handleDeletePolicy = async () => {
-    const { id } = popUp.deletePolicy.data as TAccessApprovalPolicy;
-    if (!currentWorkspace?.slug) return;
-
-    try {
-      await deleteSecretApprovalPolicy({
-        projectSlug: currentWorkspace?.slug,
-        id
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully deleted policy"
-      });
-      handlePopUpClose("deletePolicy");
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed  to delete policy"
-      });
-    }
-  };
-
-  return (
-    <div>
-      <div className="mb-6 flex items-end justify-between">
-        <div className="flex flex-col">
-          <span className="text-xl font-semibold text-mineshaft-100">Access Request Policies</span>
-          <div className="mt-2 text-sm text-bunker-300">
-            Implement secret request policies for specific secrets and environments.
-          </div>
-        </div>
-        <div>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
-            a={ProjectPermissionSub.SecretApproval}
-          >
-            {(isAllowed) => (
-              <Button
-                onClick={() => {
-                  if (subscription && !subscription?.secretApproval) {
-                    handlePopUpOpen("upgradePlan");
-                    return;
-                  }
-                  handlePopUpOpen("secretPolicyForm");
-                }}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                isDisabled={!isAllowed}
-              >
-                Create policy
-              </Button>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Environment</Th>
-              <Th>Secret Path</Th>
-              <Th>Eligible Approvers</Th>
-              <Th>Approval Required</Th>
-              <Th />
-            </Tr>
-          </THead>
-          <TBody>
-            {isPoliciesLoading && (
-              <TableSkeleton columns={6} innerKey="secret-policies" className="bg-mineshaft-700" />
-            )}
-            {!isPoliciesLoading && !policies?.length && (
-              <Tr>
-                <Td colSpan={6}>
-                  <EmptyState title="No policies found" icon={faFileShield} />
-                </Td>
-              </Tr>
-            )}
-            {!!currentWorkspace &&
-              policies?.map((policy) => (
-                <AccessApprovalPolicyRow
-                  projectSlug={currentWorkspace.slug}
-                  policy={policy}
-                  key={policy.id}
-                  members={members}
-                  onEdit={() => handlePopUpOpen("secretPolicyForm", policy)}
-                  onDelete={() => handlePopUpOpen("deletePolicy", policy)}
-                />
-              ))}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <AccessPolicyForm
-        projectSlug={currentWorkspace?.slug!}
-        isOpen={popUp.secretPolicyForm.isOpen}
-        onToggle={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-        members={members}
-        editValues={popUp.secretPolicyForm.data as TAccessApprovalPolicy}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deletePolicy.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this policy?"
-        onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
-        onDeleteApproved={handleDeletePolicy}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add secret approval policy if you switch to Infisical's Enterprise  plan."
-      />
-    </div>
-  );
-};

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessApprovalPolicyRow.tsx

@@ -1,146 +0,0 @@
-import { useState } from "react";
-import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  IconButton,
-  Input,
-  Td,
-  Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
-import { useUpdateAccessApprovalPolicy } from "@app/hooks/api";
-import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  policy: TAccessApprovalPolicy;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  onEdit: () => void;
-  onDelete: () => void;
-};
-
-export const AccessApprovalPolicyRow = ({
-  policy,
-  members = [],
-  projectSlug,
-  onEdit,
-  onDelete
-}: Props) => {
-  const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
-  const { mutate: updateAccessApprovalPolicy, isLoading } = useUpdateAccessApprovalPolicy();
-  const { permission } = useProjectPermission();
-
-  return (
-    <Tr>
-      <Td>{policy.name}</Td>
-      <Td>{policy.environment.slug}</Td>
-      <Td>{policy.secretPath || "*"}</Td>
-      <Td>
-        <DropdownMenu
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              updateAccessApprovalPolicy(
-                {
-                  projectSlug,
-                  id: policy.id,
-                  approvers: selectedApprovers
-                },
-                {
-                  onSettled: () => {
-                    setSelectedApprovers([]);
-                  }
-                }
-              );
-            } else {
-              setSelectedApprovers(policy.approvers);
-            }
-          }}
-        >
-          <DropdownMenuTrigger
-            asChild
-            disabled={
-              isLoading ||
-              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
-            }
-          >
-            <Input
-              isReadOnly
-              value={policy.approvers?.length ? `${policy.approvers.length} selected` : "None"}
-              className="text-left"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-            align="start"
-          >
-            <DropdownMenuLabel>
-              Select members that are allowed to approve changes
-            </DropdownMenuLabel>
-            {members?.map(({ id, user }) => {
-              const isChecked = selectedApprovers.includes(id);
-              return (
-                <DropdownMenuItem
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== id) : [...state, id]
-                    );
-                  }}
-                  key={`create-policy-members-${id}`}
-                  iconPos="right"
-                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                >
-                  {user.username}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </Td>
-      <Td>{policy.approvals}</Td>
-      <Td>
-        <div className="flex items-center justify-end space-x-4">
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Edit"
-          >
-            {(isAllowed) => (
-              <IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}>
-                <FontAwesomeIcon icon={faPencil} size="lg" />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Delete}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Delete"
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="danger"
-                size="lg"
-                ariaLabel="edit"
-                onClick={onDelete}
-                isDisabled={!isAllowed}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </Td>
-    </Tr>
-  );
-};

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -1,266 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import {
-  useCreateAccessApprovalPolicy,
-  useUpdateAccessApprovalPolicy
-} from "@app/hooks/api/accessApproval";
-import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  isOpen?: boolean;
-  onToggle: (isOpen: boolean) => void;
-  members?: TWorkspaceUser[];
-  projectSlug: string;
-  editValues?: TAccessApprovalPolicy;
-};
-
-const formSchema = z
-  .object({
-    environment: z.string(),
-    name: z.string().optional(),
-    secretPath: z.string().optional(),
-    approvals: z.number().min(1),
-    approvers: z.string().array().min(1)
-  })
-  .refine((data) => data.approvals <= data.approvers.length, {
-    path: ["approvals"],
-    message: "The number of approvals should be lower than the number of approvers."
-  });
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const AccessPolicyForm = ({
-  isOpen,
-  onToggle,
-  members = [],
-  projectSlug,
-  editValues
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
-  });
-  const { currentWorkspace } = useWorkspace();
-
-  const environments = currentWorkspace?.environments || [];
-  useEffect(() => {
-    if (!isOpen) reset({});
-  }, [isOpen]);
-
-  const isEditMode = Boolean(editValues);
-
-  const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
-  const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
-
-  const handleCreatePolicy = async (data: TFormSchema) => {
-    if (!projectSlug) return;
-
-    try {
-      await createAccessApprovalPolicy({
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to create policy"
-      });
-    }
-  };
-
-  const handleUpdatePolicy = async (data: TFormSchema) => {
-    if (!projectSlug) return;
-    if (!editValues?.id) return;
-
-    try {
-      await updateAccessApprovalPolicy({
-        id: editValues?.id,
-        ...data,
-        projectSlug
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "failed  to update policy"
-      });
-    }
-  };
-
-  const handleFormSubmit = async (data: TFormSchema) => {
-    if (isEditMode) {
-      await handleUpdatePolicy(data);
-    } else {
-      await handleCreatePolicy(data);
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onToggle}>
-      <ModalContent title={isEditMode ? "Edit Access Policy" : "Create Access Policy"}>
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="environment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Environment"
-                isRequired
-                className="mt-4"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  isDisabled={isEditMode}
-                  value={value}
-                  onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-                    >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="approvers"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Approvers Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Input
-                      isReadOnly
-                      value={value?.length ? `${value.length} selected` : "None"}
-                      className="text-left"
-                    />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-                    align="start"
-                  >
-                    <DropdownMenuLabel>
-                      Select members that are allowed to approve changes
-                    </DropdownMenuLabel>
-                    {members.map(({ id, user }) => {
-                      const isChecked = value?.includes(id);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            onChange(
-                              isChecked ? value?.filter((el) => el !== id) : [...(value || []), id]
-                            );
-                          }}
-                          key={`create-policy-members-${id}`}
-                          iconPos="right"
-                          icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                        >
-                          {user.username}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approvals"
-            defaultValue={1}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Approvals Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input
-                  {...field}
-                  type="number"
-                  onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center space-x-4">
-            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-              Save
-            </Button>
-            <Button onClick={() => onToggle(false)} variant="outline_bg">
-              Close
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-};

frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/index.tsx

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

frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -40,6 +40,7 @@ import {
   useGetAccessRequestsCount
 } from "@app/hooks/api/accessApproval/queries";
 import { TAccessApprovalRequest } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
 import { ApprovalStatus, TWorkspaceUser } from "@app/hooks/api/types";
 import { queryClient } from "@app/reactQuery";
 
@@ -80,7 +81,12 @@ export const AccessApprovalRequest = ({
   projectId: string;
 }) => {
   const [selectedRequest, setSelectedRequest] = useState<
-    (TAccessApprovalRequest & { user: TWorkspaceUser["user"] | null }) | null
+    (TAccessApprovalRequest & {
+      user: TWorkspaceUser["user"] | null;
+      isRequestedByCurrentUser: boolean;
+      isApprover: boolean;
+    })
+    | null
   >(null);
 
   const { handlePopUpOpen, popUp, handlePopUpClose } = usePopUp([
@@ -141,6 +147,8 @@ export const AccessApprovalRequest = ({
     );
     const isApprover = request.policy.approvers.indexOf(membership.id || "") !== -1;
     const isAccepted = request.isApproved;
+    const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
+    const isRequestedByCurrentUser = request.requestedBy === membership.id;
 
     const userReviewStatus = request.reviewers.find(
       ({ member }) => member === membership.id
@@ -178,7 +186,9 @@ export const AccessApprovalRequest = ({
       isRejectedByAnyone,
       isApprover,
       userReviewStatus,
-      isAccepted
+      isAccepted,
+      isSoftEnforcement,
+      isRequestedByCurrentUser
     };
   };
 
@@ -331,16 +341,24 @@ export const AccessApprovalRequest = ({
                     tabIndex={0}
                     onClick={() => {
                       if (
-                        !details.isApprover ||
-                        details.isReviewedByUser ||
-                        details.isRejectedByAnyone ||
-                        details.isAccepted
+                        (
+                          !details.isApprover
+                          || details.isReviewedByUser
+                          || details.isRejectedByAnyone
+                          || details.isAccepted
+                        ) && !(
+                          details.isSoftEnforcement
+                          && details.isRequestedByCurrentUser
+                          && !details.isAccepted
+                        )
                       )
                         return;
 
                       setSelectedRequest({
                         ...request,
-                        user: membersGroupById?.[request.requestedBy].user!
+                        user: membersGroupById?.[request.requestedBy].user!,
+                        isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+                        isApprover: details.isApprover
                       });
                       handlePopUpOpen("reviewRequest");
                     }}
@@ -355,7 +373,9 @@ export const AccessApprovalRequest = ({
                       if (evt.key === "Enter") {
                         setSelectedRequest({
                           ...request,
-                          user: membersGroupById?.[request.requestedBy].user!
+                          user: membersGroupById?.[request.requestedBy].user!,
+                          isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+                          isApprover: details.isApprover
                         });
                         handlePopUpOpen("reviewRequest");
                       }

frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -2,11 +2,12 @@ import { useCallback, useMemo, useState } from "react";
 import ms from "ms";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Modal, ModalContent } from "@app/components/v2";
+import { Button, Checkbox, Modal, ModalContent } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
 import { ProjectPermissionActions } from "@app/context";
 import { useReviewAccessRequest } from "@app/hooks/api";
 import { TAccessApprovalRequest } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
 import { TWorkspaceUser } from "@app/hooks/api/types";
 
 export const ReviewAccessRequestModal = ({
@@ -19,12 +20,18 @@ export const ReviewAccessRequestModal = ({
 }: {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  request: TAccessApprovalRequest & { user: TWorkspaceUser["user"] | null };
+  request: TAccessApprovalRequest & {
+    user: TWorkspaceUser["user"] | null;
+    isRequestedByCurrentUser: boolean;
+    isApprover: boolean;
+  };
   projectSlug: string;
   selectedRequester: string | undefined;
   selectedEnvSlug: string | undefined;
 }) => {
   const [isLoading, setIsLoading] = useState<"approved" | "rejected" | null>(null);
+  const [byPassApproval, setByPassApproval] = useState(false);
+  const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
 
   const accessDetails = {
     env: request.environmentName,
@@ -134,10 +141,14 @@ export const ReviewAccessRequestModal = ({
           <div className="space-x-2">
             <Button
               isLoading={isLoading === "approved"}
-              isDisabled={!!isLoading}
+              isDisabled={
+                !!isLoading ||
+                (!request.isApprover && !byPassApproval && isSoftEnforcement)
+              }
               onClick={() => handleReview("approved")}
               className="mt-4"
               size="sm"
+              colorSchema={!request.isApprover && isSoftEnforcement ? "danger" : "primary"}
             >
               Approve Request
             </Button>
@@ -151,6 +162,21 @@ export const ReviewAccessRequestModal = ({
               Reject Request
             </Button>
           </div>
+          {isSoftEnforcement && request.isRequestedByCurrentUser && !request.isApprover && (
+            <div className="mt-4">
+              <Checkbox
+                onCheckedChange={(checked) => setByPassApproval(checked === true)}
+                isChecked={byPassApproval}
+                id="byPassApproval"
+                checkIndicatorBg="text-white"
+                className={byPassApproval ? "bg-red hover:bg-red-600 border-red" : ""}
+              >
+                <span className="text-red text-sm">
+                  Approve without waiting for requirements to be met (bypass policy protection)
+                </span>
+              </Checkbox>
+            </div>
+          )}
         </div>
       </ModalContent>
     </Modal>

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx

@@ -0,0 +1,262 @@
+import { useMemo,useState } from "react";
+import { faCheckCircle,faChevronDown, faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  TProjectPermission,
+  useProjectPermission,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteAccessApprovalPolicy, useDeleteSecretApprovalPolicy, useGetSecretApprovalPolicies, useGetWorkspaceUsers } from "@app/hooks/api";
+import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
+import { PolicyType } from "@app/hooks/api/policies/enums";
+import { TAccessApprovalPolicy, Workspace } from "@app/hooks/api/types";
+
+import { AccessPolicyForm } from "./components/AccessPolicyModal";
+import { ApprovalPolicyRow } from "./components/ApprovalPolicyRow";
+
+interface IProps {
+  workspaceId: string;
+}
+
+const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?: Workspace) => {
+  const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies({
+    projectSlug: currentWorkspace?.slug as string,
+    options: {
+      enabled:
+        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
+        !!currentWorkspace?.slug
+    }
+  });
+  const { data: secretPolicies, isLoading: isSecretPoliciesLoading } = useGetSecretApprovalPolicies({
+    workspaceId: currentWorkspace?.id as string,
+    options: {
+      enabled:
+        permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
+        !!currentWorkspace?.id
+    }
+  });
+
+  // merge data sorted by updatedAt
+  const policies = [
+    ...(accessPolicies?.map(policy => ({ ...policy, policyType: PolicyType.AccessPolicy })) || []),
+    ...(secretPolicies?.map(policy => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
+  ].sort((a, b) => {
+    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+  });
+
+  return {
+    policies,
+    isLoading: isAccessPoliciesLoading || isSecretPoliciesLoading
+  };
+};
+
+export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
+  const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
+    "policyForm",
+    "deletePolicy",
+    "upgradePlan"
+  ] as const);
+  const { permission } = useProjectPermission();
+  const { subscription } = useSubscription();
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: members } = useGetWorkspaceUsers(workspaceId);
+  const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(permission, currentWorkspace);
+
+  const [filterType, setFilterType] = useState<string | null>(null);
+
+  const filteredPolicies = useMemo(() => {
+    return filterType
+      ? policies.filter(policy => policy.policyType === filterType)
+      : policies;
+  }, [policies, filterType]);
+
+  const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
+  const { mutateAsync: deleteAccessApprovalPolicy } = useDeleteAccessApprovalPolicy();
+
+  const handleDeletePolicy = async () => {
+    const { id, policyType } = popUp.deletePolicy.data as TAccessApprovalPolicy;
+    if (!currentWorkspace?.slug) return;
+
+    try {
+      if (policyType === PolicyType.ChangePolicy) {
+        await deleteSecretApprovalPolicy({
+          workspaceId,
+          id
+        });
+      } else {
+        await deleteAccessApprovalPolicy({
+          projectSlug: currentWorkspace?.slug,
+          id
+        });
+      }
+      createNotification({
+        type: "success",
+        text: "Successfully deleted policy"
+      });
+      handlePopUpClose("deletePolicy");
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to delete policy"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-6 flex items-end justify-between">
+        <div className="flex flex-col">
+          <span className="text-xl font-semibold text-mineshaft-100">Policies</span>
+          <div className="mt-2 text-sm text-bunker-300">
+            Implement granular policies for access requests and secrets management.
+          </div>
+        </div>
+        <div>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SecretApproval}
+          >
+            {(isAllowed) => (
+              <Button
+                onClick={() => {
+                  if (subscription && !subscription?.secretApproval) {
+                    handlePopUpOpen("upgradePlan");
+                    return;
+                  }
+                  handlePopUpOpen("policyForm");
+                }}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                isDisabled={!isAllowed}
+              >
+                Create policy
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+      </div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Environment</Th>
+              <Th>Secret Path</Th>
+              <Th>Eligible Approvers</Th>
+              <Th>Approval Required</Th>
+              <Th>
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <Button
+                      variant="plain"
+                      colorSchema="secondary"
+                      className="text-bunker-300 uppercase text-xs font-semibold"
+                      rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
+                    >
+                      Type
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuLabel>Select a type</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      onClick={() => setFilterType(null)}
+                      icon={!filterType && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      All
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => setFilterType(PolicyType.AccessPolicy)}
+                      icon={filterType === PolicyType.AccessPolicy && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      Access Policy
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => setFilterType(PolicyType.ChangePolicy)}
+                      icon={filterType === PolicyType.ChangePolicy && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      Change Policy
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPoliciesLoading && (
+              <TableSkeleton columns={6} innerKey="secret-policies" className="bg-mineshaft-700" />
+            )}
+            {!isPoliciesLoading && !filteredPolicies?.length && (
+              <Tr>
+                <Td colSpan={6}>
+                  <EmptyState title="No policies found" icon={faFileShield} />
+                </Td>
+              </Tr>
+            )}
+            {!!currentWorkspace &&
+              filteredPolicies?.map((policy) => (
+                <ApprovalPolicyRow
+                  projectSlug={currentWorkspace.slug}
+                  policy={policy}
+                  workspaceId={workspaceId}
+                  key={policy.id}
+                  members={members}
+                  onEdit={() => handlePopUpOpen("policyForm", policy)}
+                  onDelete={() => handlePopUpOpen("deletePolicy", policy)}
+                />
+              ))}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <AccessPolicyForm
+        projectSlug={currentWorkspace?.slug!}
+        isOpen={popUp.policyForm.isOpen}
+        onToggle={(isOpen) => handlePopUpToggle("policyForm", isOpen)}
+        members={members}
+        editValues={popUp.policyForm.data as TAccessApprovalPolicy}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deletePolicy.isOpen}
+        deleteKey="remove"
+        title="Do you want to remove this policy?"
+        onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
+        onDeleteApproved={handleDeletePolicy}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can add secret approval policy if you switch to Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -0,0 +1,369 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+	Button,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+	FormControl,
+	Input,
+	Modal,
+	ModalContent,
+	Select,
+	SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { policyDetails } from "@app/helpers/policies";
+import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
+import {
+	useCreateAccessApprovalPolicy,
+	useUpdateAccessApprovalPolicy
+} from "@app/hooks/api/accessApproval";
+import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
+import { TWorkspaceUser } from "@app/hooks/api/users/types";
+
+type Props = {
+	isOpen?: boolean;
+	onToggle: (isOpen: boolean) => void;
+	members?: TWorkspaceUser[];
+	projectSlug: string;
+	editValues?: TAccessApprovalPolicy;
+};
+
+const formSchema = z
+.object({
+	environment: z.string(),
+	name: z.string().optional(),
+	secretPath: z.string().optional(),
+	approvals: z.number().min(1),
+	approvers: z.string().array().min(1),
+	policyType: z.nativeEnum(PolicyType),
+	enforcementLevel: z.nativeEnum(EnforcementLevel)
+})
+.refine((data) => data.approvals <= data.approvers.length, {
+	path: ["approvals"],
+	message: "The number of approvals should be lower than the number of approvers."
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+export const AccessPolicyForm = ({
+	isOpen,
+	onToggle,
+	members = [],
+	projectSlug,
+	editValues
+}: Props) => {
+	const {
+		control,
+		handleSubmit,
+		reset,
+		watch,
+		formState: { isSubmitting }
+	} = useForm<TFormSchema>({
+		resolver: zodResolver(formSchema),
+		values: editValues ? { 
+			...editValues, 
+			environment: editValues.environment.slug, 
+			approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+		} : undefined
+	});
+	const { currentWorkspace } = useWorkspace();
+	
+	const environments = currentWorkspace?.environments || [];
+	const isEditMode = Boolean(editValues);
+	
+	useEffect(() => {
+		if (!isOpen || !isEditMode) reset({});
+	}, [isOpen, isEditMode]);
+	
+	const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
+	const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
+	
+	const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
+	const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
+
+	const policyName = policyDetails[watch("policyType")]?.name || "Policy";
+	
+	const handleCreatePolicy = async (data: TFormSchema) => {
+		if (!projectSlug) return;
+		
+		try {
+			if (data.policyType === PolicyType.ChangePolicy) {
+				await createSecretApprovalPolicy({
+					...data,
+					workspaceId: currentWorkspace?.id || ""
+				});
+			} else {
+				await createAccessApprovalPolicy({
+					...data,
+					projectSlug
+				});
+			}
+			createNotification({
+				type: "success",
+				text: "Successfully created policy"
+			});
+			onToggle(false);
+		} catch (err) {
+			console.log(err);
+			createNotification({
+				type: "error",
+				text: "Failed to create policy"
+			});
+		}
+	};
+	
+	const handleUpdatePolicy = async (data: TFormSchema) => {
+		if (!projectSlug) return;
+		if (!editValues?.id) return;
+		
+		try {
+			if (data.policyType === PolicyType.ChangePolicy) {
+				await updateSecretApprovalPolicy({
+					id: editValues?.id,
+					...data,
+					workspaceId: currentWorkspace?.id || ""
+				});
+			} else {
+				await updateAccessApprovalPolicy({
+					id: editValues?.id,
+					...data,
+					projectSlug
+				});
+			}
+			createNotification({
+				type: "success",
+				text: "Successfully updated policy"
+			});
+			onToggle(false);
+		} catch (err) {
+			console.log(err);
+			createNotification({
+				type: "error",
+				text: "failed  to update policy"
+			});
+		}
+	};
+	
+	const handleFormSubmit = async (data: TFormSchema) => {
+		if (isEditMode) {
+			await handleUpdatePolicy(data);
+		} else {
+			await handleCreatePolicy(data);
+		}
+	};
+
+	const formatEnforcementLevel = (level: EnforcementLevel) => {
+		if (level === EnforcementLevel.Hard) return "Hard";
+		if (level === EnforcementLevel.Soft) return "Soft";
+		return level;
+	};
+	
+	return (
+		<Modal isOpen={isOpen} onOpenChange={onToggle}>
+			<ModalContent title={isEditMode ? `Edit ${policyName}` : "Create Policy"}>
+				<div className="flex flex-col space-y-3">
+					<form onSubmit={handleSubmit(handleFormSubmit)}>
+						<Controller
+						control={control}
+						name="policyType"
+						defaultValue={PolicyType.ChangePolicy}
+						
+						render={({ field: { value, onChange }, fieldState: { error } }) => (
+							<FormControl
+							label="Policy Type"
+							isRequired
+							isError={Boolean(error)}
+							tooltipText="Change polices govern secret changes within a given environment and secret path. Access polices allow underprivileged user to request access to environment/secret path."
+							errorText={error?.message}
+							>
+							<Select
+							isDisabled={isEditMode}
+							value={value}
+							onValueChange={(val) => onChange(val as PolicyType)}
+							className="w-full border border-mineshaft-500"
+							>
+							{Object.values(PolicyType).map((policyType) => {
+								return (
+									<SelectItem value={policyType} key={`policy-type-${policyType}`}>
+									{policyDetails[policyType].name}
+									</SelectItem>
+								);
+							})}
+							</Select>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="name"
+						render={({ field, fieldState: { error } }) => (
+							<FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
+							<Input {...field} value={field.value || ""} />
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="environment"
+						defaultValue={environments[0]?.slug}
+						render={({ field: { value, onChange }, fieldState: { error } }) => (
+							<FormControl
+							label="Environment"
+							isRequired
+							className="mt-4"
+							isError={Boolean(error)}
+							errorText={error?.message}
+							>
+							<Select
+							isDisabled={isEditMode}
+							value={value}
+							onValueChange={(val) => onChange(val)}
+							className="w-full border border-mineshaft-500"
+							>
+							{environments.map((sourceEnvironment) => (
+								<SelectItem
+								value={sourceEnvironment.slug}
+								key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+								>
+								{sourceEnvironment.name}
+								</SelectItem>
+							))}
+							</Select>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="secretPath"
+						render={({ field, fieldState: { error } }) => (
+							<FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
+							<Input {...field} value={field.value || ""} />
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="approvers"
+						render={({ field: { value, onChange }, fieldState: { error } }) => (
+							<FormControl
+							label="Required Approvers"
+							isRequired
+							isError={Boolean(error)}
+							errorText={error?.message}
+							>
+							<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Input
+								isReadOnly
+								value={value?.length ? `${value.length} selected` : "None"}
+								className="text-left"
+								/>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+							style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+							align="start"
+							>
+							<DropdownMenuLabel>
+							Select members that are allowed to approve requests
+							</DropdownMenuLabel>
+							{members.map(({ id, user }) => {
+								const userId = watch("policyType") === PolicyType.ChangePolicy ? user.id : id;
+								const isChecked = value?.includes(userId);
+								return (
+									<DropdownMenuItem
+									onClick={(evt) => {
+										evt.preventDefault();
+										onChange(
+											isChecked ? value?.filter((el: string) => el !== userId) : [...(value || []), userId]
+										);
+									}}
+									key={`create-policy-members-${userId}`}
+									iconPos="right"
+									icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+									>
+									{user.username}
+									</DropdownMenuItem>
+								);
+							})}
+							</DropdownMenuContent>
+							</DropdownMenu>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="approvals"
+						defaultValue={1}
+						render={({ field, fieldState: { error } }) => (
+							<FormControl
+							label="Minimum Approvals Required"
+							isError={Boolean(error)}
+							errorText={error?.message}
+							>
+							<Input
+							{...field}
+							type="number"
+							min={1}
+							onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
+							/>
+							</FormControl>
+						)}
+						/>
+						<Controller
+						control={control}
+						name="enforcementLevel"
+						defaultValue={EnforcementLevel.Hard}
+						render={({ field, fieldState: { error } }) => (
+							<FormControl
+							label="Enforcement Level"
+							isError={Boolean(error)}
+							errorText={error?.message}
+							tooltipText="Determines the level of enforcement for required approvers of a request"
+							helperText={
+								field.value === EnforcementLevel.Hard
+								? "All approvers must approve the request."
+								: "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
+							}
+							>
+								<Select
+								value={field.value}
+								onValueChange={(val) => field.onChange(val as EnforcementLevel)}
+								className="w-full border border-mineshaft-500"
+								>
+									{Object.values(EnforcementLevel).map((level) => {
+										return (
+											<SelectItem value={level} key={`enforcement-level-${level}`} className="text-xs">
+											{formatEnforcementLevel(level)}
+											</SelectItem>
+										);
+									})}
+								</Select>
+							</FormControl>
+						)}
+						/>
+						<div className="mt-8 flex items-center space-x-4">
+							<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+								Save
+							</Button>
+							<Button onClick={() => onToggle(false)} variant="outline_bg">
+								Close
+							</Button>
+						</div>
+					</form>
+				</div>
+			</ModalContent>
+		</Modal>
+	);
+};
+

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import { faCheckCircle, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Input,
+  Td,
+  Tr
+} from "@app/components/v2";
+import { Badge } from "@app/components/v2/Badge";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { policyDetails } from "@app/helpers/policies";
+import { useUpdateAccessApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
+import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
+import { WorkspaceEnv } from "@app/hooks/api/types";
+import { TWorkspaceUser } from "@app/hooks/api/users/types";
+
+interface IPolicy {
+  id: string;
+  name: string;
+  environment: WorkspaceEnv;
+  projectId?: string;
+  secretPath?: string;
+  approvals: number;
+  approvers?: string[];
+  userApprovers?: { userId: string }[];
+  updatedAt: Date;
+  policyType: PolicyType;
+  enforcementLevel: EnforcementLevel;
+};
+
+type Props = {
+  policy: IPolicy;
+  members?: TWorkspaceUser[];
+  projectSlug: string;
+  workspaceId: string;
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+export const ApprovalPolicyRow = ({
+  policy,
+  members = [],
+  projectSlug,
+  workspaceId,
+  onEdit,
+  onDelete
+}: Props) => {
+  const [selectedApprovers, setSelectedApprovers] = useState<string[]>(policy.userApprovers?.map(({ userId }) => userId) || policy.approvers || []);
+  const { mutate: updateAccessApprovalPolicy, isLoading: isAccessApprovalPolicyLoading } = useUpdateAccessApprovalPolicy();
+  const { mutate: updateSecretApprovalPolicy, isLoading: isSecretApprovalPolicyLoading } = useUpdateSecretApprovalPolicy();
+  const isLoading = isAccessApprovalPolicyLoading || isSecretApprovalPolicyLoading;
+
+  const { permission } = useProjectPermission();
+
+  return (
+    <Tr>
+      <Td>{policy.name}</Td>
+      <Td>{policy.environment.slug}</Td>
+      <Td>{policy.secretPath || "*"}</Td>
+      <Td>
+        <DropdownMenu
+          onOpenChange={(isOpen) => {
+            if (!isOpen) {
+              if (policy.policyType === PolicyType.AccessPolicy) {
+                updateAccessApprovalPolicy(
+                  {
+                    projectSlug,
+                    id: policy.id,
+                    approvers: selectedApprovers
+                  },
+                  { onSettled: () => {} }
+                );
+              } else {
+                updateSecretApprovalPolicy(
+                  {
+                    workspaceId,
+                    id: policy.id,
+                    approvers: selectedApprovers
+                  },
+                  { onSettled: () => {} }
+                );
+              }
+            } else {
+              setSelectedApprovers(policy.policyType === PolicyType.ChangePolicy
+                ? policy?.userApprovers?.map(({ userId }) => userId) || []
+                : policy?.approvers || []
+              );
+            }
+          }}
+      >
+          <DropdownMenuTrigger
+            asChild
+            disabled={
+              isLoading ||
+              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
+            }
+          >
+            <Input
+              isReadOnly
+              value={selectedApprovers.length ? `${selectedApprovers.length} selected` : "None"}
+              className="text-left"
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+            align="start"
+          >
+            <DropdownMenuLabel>
+              Select members that are allowed to approve changes
+            </DropdownMenuLabel>
+            {members?.map(({ id, user }) => {
+              const userId = policy.policyType === PolicyType.ChangePolicy ? user.id : id;
+              const isChecked = selectedApprovers.includes(userId);
+              return (
+                <DropdownMenuItem
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    setSelectedApprovers((state) =>
+                      isChecked ? state.filter((el) => el !== userId) : [...state, userId]
+                    );
+                  }}
+                  key={`create-policy-members-${userId}`}
+                  iconPos="right"
+                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                >
+                  {user.username}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+      <Td>{policy.approvals}</Td>
+      <Td>
+        <Badge className={policyDetails[policy.policyType].className}>
+          {policyDetails[policy.policyType].name}
+        </Badge>
+      </Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg cursor-pointer">
+            <div className="flex justify-center items-center hover:text-primary-400 data-[state=open]:text-primary-400 hover:scale-125 data-[state=open]:scale-125 transition-transform duration-300 ease-in-out">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="center" className="p-1 min-w-[100%]">
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.SecretApproval}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Edit Policy
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.SecretApproval}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    isAllowed
+                      ? "hover:!bg-red-500 hover:!text-white"
+                      : "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete();
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Delete Policy
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/index.tsx

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

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx

@@ -1,178 +0,0 @@
-import { faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  Modal,
-  ModalContent,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
-  UpgradePlanModal
-} from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useSubscription
-} from "@app/context";
-import { usePopUp } from "@app/hooks";
-import {
-  useDeleteSecretApprovalPolicy,
-  useGetSecretApprovalPolicies,
-  useGetWorkspaceUsers
-} from "@app/hooks/api";
-import { TSecretApprovalPolicy } from "@app/hooks/api/types";
-
-import { SecretApprovalPolicyRow } from "./components/SecretApprovalPolicyRow";
-import { SecretPolicyForm } from "./components/SecretPolicyForm";
-
-type Props = {
-  workspaceId: string;
-};
-
-export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
-  const { handlePopUpToggle, handlePopUpOpen, handlePopUpClose, popUp } = usePopUp([
-    "secretPolicyForm",
-    "deletePolicy",
-    "upgradePlan"
-  ] as const);
-  const { permission } = useProjectPermission();
-  const { subscription } = useSubscription();
-
-  const { data: members } = useGetWorkspaceUsers(workspaceId);
-  const { data: policies, isLoading: isPoliciesLoading } = useGetSecretApprovalPolicies({
-    workspaceId,
-    options: {
-      enabled: permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval)
-    }
-  });
-
-  const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
-
-  const handleDeletePolicy = async () => {
-    const { id } = popUp.deletePolicy.data as TSecretApprovalPolicy;
-    try {
-      await deleteSecretApprovalPolicy({
-        workspaceId,
-        id
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully deleted policy"
-      });
-      handlePopUpClose("deletePolicy");
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed  to delete policy"
-      });
-    }
-  };
-
-  return (
-    <div>
-      <div className="mb-6 flex justify-between">
-        <div className="flex flex-col">
-          <span className="text-xl font-semibold text-mineshaft-100">Approval Policies</span>
-          <div className="mt-2 text-sm text-bunker-300">
-            Implement policies to prevent unauthorized secret changes.
-          </div>
-        </div>
-        <div>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
-            a={ProjectPermissionSub.SecretApproval}
-          >
-            {(isAllowed) => (
-              <Button
-                onClick={() => {
-                  if (subscription && !subscription?.secretApproval) {
-                    handlePopUpOpen("upgradePlan");
-                    return;
-                  }
-                  handlePopUpOpen("secretPolicyForm");
-                }}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                isDisabled={!isAllowed}
-              >
-                Create policy
-              </Button>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Environment</Th>
-              <Th>Secret Path</Th>
-              <Th>Eligible Approvers</Th>
-              <Th>Approval Required</Th>
-            </Tr>
-          </THead>
-          <TBody>
-            {isPoliciesLoading && (
-              <TableSkeleton columns={4} innerKey="secret-policies" className="bg-mineshaft-700" />
-            )}
-            {!isPoliciesLoading && !policies?.length && (
-              <Tr>
-                <Td colSpan={5}>
-                  <EmptyState title="No policies found" icon={faFileShield} />
-                </Td>
-              </Tr>
-            )}
-            {policies?.map((policy) => (
-              <SecretApprovalPolicyRow
-                workspaceId={workspaceId}
-                policy={policy}
-                key={policy.id}
-                members={members}
-                onEdit={() => handlePopUpOpen("secretPolicyForm", policy)}
-                onDelete={() => handlePopUpOpen("deletePolicy", policy)}
-              />
-            ))}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <Modal
-        isOpen={popUp.secretPolicyForm.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-      >
-        <ModalContent title={popUp.secretPolicyForm.data ? "Edit policy" : "Create policy"}>
-          <SecretPolicyForm
-            workspaceId={workspaceId}
-            isOpen={popUp.secretPolicyForm.isOpen}
-            onToggle={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-            members={members}
-            editValues={popUp.secretPolicyForm.data as TSecretApprovalPolicy}
-          />
-        </ModalContent>
-      </Modal>
-      <DeleteActionModal
-        isOpen={popUp.deletePolicy.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this polciy?"
-        onChange={(isOpen) => handlePopUpToggle("deletePolicy", isOpen)}
-        onDeleteApproved={handleDeletePolicy}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add secret approval policy if you switch to Infisical's Enterprise  plan."
-      />
-    </div>
-  );
-};

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretApprovalPolicyRow.tsx

@@ -1,148 +0,0 @@
-import { useState } from "react";
-import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  IconButton,
-  Input,
-  Td,
-  Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
-import { useUpdateSecretApprovalPolicy } from "@app/hooks/api";
-import { TSecretApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  policy: TSecretApprovalPolicy;
-  members?: TWorkspaceUser[];
-  workspaceId: string;
-  onEdit: () => void;
-  onDelete: () => void;
-};
-
-export const SecretApprovalPolicyRow = ({
-  policy,
-  members = [],
-  workspaceId,
-  onEdit,
-  onDelete
-}: Props) => {
-  const [selectedApprovers, setSelectedApprovers] = useState<string[]>([]);
-  const { mutate: updateSecretApprovalPolicy, isLoading } = useUpdateSecretApprovalPolicy();
-  const { permission } = useProjectPermission();
-
-  return (
-    <Tr>
-      <Td>{policy.name}</Td>
-      <Td>{policy.environment.slug}</Td>
-      <Td>{policy.secretPath || "*"}</Td>
-      <Td>
-        <DropdownMenu
-          onOpenChange={(isOpen) => {
-            if (!isOpen) {
-              updateSecretApprovalPolicy(
-                {
-                  workspaceId,
-                  id: policy.id,
-                  approverUserIds: selectedApprovers
-                },
-                {
-                  onSettled: () => {
-                    setSelectedApprovers([]);
-                  }
-                }
-              );
-            } else {
-              setSelectedApprovers(policy.userApprovers.map(({ userId }) => userId));
-            }
-          }}
-        >
-          <DropdownMenuTrigger
-            asChild
-            disabled={
-              isLoading ||
-              permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.SecretApproval)
-            }
-          >
-            <Input
-              isReadOnly
-              value={
-                policy?.userApprovers.length ? `${policy.userApprovers.length} selected` : "None"
-              }
-              className="text-left"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-            align="start"
-          >
-            <DropdownMenuLabel>
-              Select members that are allowed to approve changes
-            </DropdownMenuLabel>
-            {members?.map(({ user }) => {
-              const isChecked = selectedApprovers.includes(user.id);
-              return (
-                <DropdownMenuItem
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== user.id) : [...state, user.id]
-                    );
-                  }}
-                  key={`create-policy-members-${user.id}`}
-                  iconPos="right"
-                  icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                >
-                  {user.username}
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </Td>
-      <Td>{policy.approvals}</Td>
-      <Td>
-        <div className="flex items-center justify-end space-x-4">
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Edit}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Edit"
-          >
-            {(isAllowed) => (
-              <IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}>
-                <FontAwesomeIcon icon={faPencil} size="lg" />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Delete}
-            a={ProjectPermissionSub.SecretApproval}
-            renderTooltip
-            allowedLabel="Delete"
-          >
-            {(isAllowed) => (
-              <IconButton
-                variant="plain"
-                colorSchema="danger"
-                size="lg"
-                ariaLabel="edit"
-                onClick={onDelete}
-                isDisabled={!isAllowed}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-              </IconButton>
-            )}
-          </ProjectPermissionCan>
-        </div>
-      </Td>
-    </Tr>
-  );
-};

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx

@@ -1,262 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  FormControl,
-  Input,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { SecretPathInput } from "@app/components/v2/SecretPathInput";
-import { useWorkspace } from "@app/context";
-import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
-import { TSecretApprovalPolicy } from "@app/hooks/api/types";
-import { TWorkspaceUser } from "@app/hooks/api/users/types";
-
-type Props = {
-  isOpen?: boolean;
-  onToggle: (isOpen: boolean) => void;
-  members?: TWorkspaceUser[];
-  workspaceId: string;
-  editValues?: TSecretApprovalPolicy;
-};
-
-const formSchema = z
-  .object({
-    environment: z.string(),
-    name: z.string().optional(),
-    secretPath: z.string().optional().nullable(),
-    approvals: z.number().min(1),
-    approverUserIds: z.string().array().min(1)
-  })
-  .refine((data) => data.approvals <= data.approverUserIds.length, {
-    path: ["approvals"],
-    message: "The number of approvals should be lower than the number of approvers."
-  });
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const SecretPolicyForm = ({
-  onToggle,
-  members = [],
-  workspaceId,
-  editValues
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    watch,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    values: editValues
-      ? {
-        ...editValues,
-        approverUserIds: editValues.userApprovers.map(({ userId }) => userId),
-        environment: editValues.environment.slug
-      }
-      : undefined
-  });
-  const { currentWorkspace } = useWorkspace();
-  const selectedEnvironment = watch("environment");
-
-  const environments = currentWorkspace?.environments || [];
-
-  const isEditMode = Boolean(editValues);
-
-  const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
-  const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
-
-  const handleCreatePolicy = async (data: TFormSchema) => {
-    try {
-      await createSecretApprovalPolicy({
-        ...data,
-        workspaceId
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully created policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed  to create policy"
-      });
-    }
-  };
-
-  const handleUpdatePolicy = async (data: TFormSchema) => {
-    if (!editValues?.id) return;
-    try {
-      await updateSecretApprovalPolicy({
-        id: editValues?.id,
-        ...data,
-        secretPath: data.secretPath || null,
-        workspaceId
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated policy"
-      });
-      onToggle(false);
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "failed  to update policy"
-      });
-    }
-  };
-
-  const handleFormSubmit = async (data: TFormSchema) => {
-    if (isEditMode) {
-      await handleUpdatePolicy(data);
-    } else {
-      await handleCreatePolicy(data);
-    }
-  };
-
-  return (
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} value={field.value || ""} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="environment"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Environment"
-                isRequired
-                className="mt-4"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Select
-                  isDisabled={isEditMode}
-                  value={value}
-                  onValueChange={(val) => onChange(val)}
-                  className="w-full border border-mineshaft-500"
-                >
-                  {environments.map((sourceEnvironment) => (
-                    <SelectItem
-                      value={sourceEnvironment.slug}
-                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-                    >
-                      {sourceEnvironment.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="secretPath"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
-                <SecretPathInput
-                  {...field}
-                  value={field.value || ""}
-                  environment={selectedEnvironment}
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approverUserIds"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                label="Approvers Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Input
-                      isReadOnly
-                      value={value?.length ? `${value.length} selected` : "None"}
-                      className="text-left"
-                    />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
-                    align="start"
-                  >
-                    <DropdownMenuLabel>
-                      Select members that are allowed to approve changes
-                    </DropdownMenuLabel>
-                    {members.map(({ user }) => {
-                      const isChecked = value?.includes(user.id);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            onChange(
-                              isChecked
-                                ? value?.filter((el) => el !== user.id)
-                                : [...(value || []), user.id]
-                            );
-                          }}
-                          key={`create-policy-members-${user.id}`}
-                          iconPos="right"
-                          icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
-                        >
-                          {user.username}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="approvals"
-            defaultValue={1}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Approvals Required"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input
-                  {...field}
-                  type="number"
-                  onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center space-x-4">
-            <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-              Save
-            </Button>
-            <Button onClick={() => onToggle(false)} variant="outline_bg">
-              Close
-            </Button>
-          </div>
-        </form>
- 
-  );
-};

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/index.tsx

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

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -1,20 +1,23 @@
+import React, { useState } from "react";
 import {
   faCheck,
   faClose,
+  faLandMineOn,
   faLockOpen,
   faSquareCheck,
   faSquareXmark,
-  faUserLock
-} from "@fortawesome/free-solid-svg-icons";
+  faTriangleExclamation,
+  faUserLock} 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 } from "@app/components/v2";
+import { Button, Checkbox, FormControl, Input } from "@app/components/v2";
 import {
   usePerformSecretApprovalRequestMerge,
   useUpdateSecretApprovalRequestStatus
 } from "@app/hooks/api";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
 
 type Props = {
   approvalRequestId: string;
@@ -25,6 +28,7 @@ type Props = {
   canApprove?: boolean;
   statusChangeByEmail?: string;
   workspaceId: string;
+  enforcementLevel: EnforcementLevel;
 };
 
 export const SecretApprovalRequestAction = ({
@@ -34,7 +38,8 @@ export const SecretApprovalRequestAction = ({
   isMergable,
   approvals,
   statusChangeByEmail,
-  workspaceId,
+  workspaceId,  
+  enforcementLevel,
   canApprove
 }: Props) => {
   const { mutateAsync: performSecretApprovalMerge, isLoading: isMerging } =
@@ -43,11 +48,20 @@ export const SecretApprovalRequestAction = ({
   const { mutateAsync: updateSecretStatusChange, isLoading: isStatusChanging } =
     useUpdateSecretApprovalRequestStatus();
 
+  const [byPassApproval, setByPassApproval] = useState(false);
+  const [bypassReason, setBypassReason] = useState("");
+
+  const isValidBypassReason = (value: string) => {
+    const trimmedValue = value.trim();
+    return trimmedValue.length >= 10;
+  };
+
   const handleSecretApprovalRequestMerge = async () => {
     try {
       await performSecretApprovalMerge({
         id: approvalRequestId,
-        workspaceId
+        workspaceId,
+        bypassReason: byPassApproval ? bypassReason : undefined
       });
       createNotification({
         type: "success",
@@ -82,9 +96,11 @@ export const SecretApprovalRequestAction = ({
     }
   };
 
+  const isSoftEnforcement = enforcementLevel === EnforcementLevel.Soft;
+
   if (!hasMerged && status === "open") {
     return (
-      <div className="flex w-full items-center justify-between">
+      <div className="flex w-full items-start justify-between transition-all">
         <div className="flex items-start space-x-4">
           <FontAwesomeIcon
             icon={isMergable ? faSquareCheck : faSquareXmark}
@@ -96,10 +112,40 @@ export const SecretApprovalRequestAction = ({
               At least {approvals} approving review required
               {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
             </span>
+            {!canApprove && isSoftEnforcement && (
+              <div className="mt-2 flex flex-col space-y-2">
+                <Checkbox
+                  onCheckedChange={(checked) => setByPassApproval(checked === true)}
+                  isChecked={byPassApproval}
+                  id="byPassApproval"
+                  checkIndicatorBg="text-white"
+                  className={twMerge("mr-2", byPassApproval ? "bg-red hover:bg-red-600 border-red" : "")}
+                >
+                  <span className="text-red text-xs">
+                    Merge without waiting for approval (bypass secret change policy)
+                  </span>
+                </Checkbox>
+                {byPassApproval && (
+                  <FormControl
+                    label="Reason for bypass"
+                    className="mt-2"
+                    isRequired
+                    tooltipText="Enter a reason for bypassing the secret change policy"
+                  >
+                    <Input
+                      value={bypassReason}
+                      onChange={(e) => setBypassReason(e.target.value)}
+                      placeholder="Enter reason for bypass (min 10 chars)"
+                      leftIcon={<FontAwesomeIcon icon={faTriangleExclamation} />}
+                    />
+                  </FormControl>
+                )}
+              </div>
+            )}
           </span>
         </div>
         <div className="flex items-center space-x-2">
-          {canApprove ? (
+          {canApprove || isSoftEnforcement ? (
             <>
               <Button
                 onClick={() => handleSecretApprovalStatusChange("close")}
@@ -111,11 +157,14 @@ export const SecretApprovalRequestAction = ({
                 Close request
               </Button>
               <Button
-                leftIcon={<FontAwesomeIcon icon={faCheck} />}
-                isDisabled={!isMergable}
+                leftIcon={<FontAwesomeIcon icon={!canApprove ? faLandMineOn : faCheck} />}
+                isDisabled={
+                  (!isMergable && canApprove)
+                  || (!canApprove && isSoftEnforcement && (!byPassApproval || !isValidBypassReason(bypassReason)))
+                }
                 isLoading={isMerging}
                 onClick={handleSecretApprovalRequestMerge}
-                colorSchema="primary"
+                colorSchema={isSoftEnforcement && !canApprove ? "danger" : "primary"}
                 variant="solid"
               >
                 Merge

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -252,6 +252,7 @@ export const SecretApprovalRequestChanges = ({
             status={secretApprovalRequestDetails.status}
             isMergable={isMergable}
             statusChangeByEmail={secretApprovalRequestDetails.statusChangedByUser?.email}
+            enforcementLevel={secretApprovalRequestDetails.policy.enforcementLevel}
             workspaceId={workspaceId}
           />
         </div>

frontend/src/views/ShareSecretPage/components/AddShareSecretForm.tsx

@@ -1,5 +1,6 @@
 import crypto from "crypto";
 
+import { useEffect, useRef } from "react";
 import { Controller } from "react-hook-form";
 import { AxiosError } from "axios";
 import * as yup from "yup";
@@ -7,13 +8,14 @@ import * as yup from "yup";
 import { createNotification } from "@app/components/notifications";
 import { encryptSymmetric } from "@app/components/utilities/cryptography/crypto";
 import { Button, Checkbox, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
-import { useCreatePublicSharedSecret, useCreateSharedSecret } from "@app/hooks/api/secretSharing";
+import { SecretSharingAccessType, useCreatePublicSharedSecret, useCreateSharedSecret } from "@app/hooks/api/secretSharing";
 
 const schema = yup.object({
   value: yup.string().max(10000).required().label("Shared Secret Value"),
   expiresAfterSingleView: yup.boolean().required().label("Expires After Views"),
   expiresInValue: yup.number().min(1).required().label("Expiration Value"),
-  expiresInUnit: yup.string().required().label("Expiration Unit")
+  expiresInUnit: yup.string().required().label("Expiration Unit"),
+  accessType: yup.string().required().label("General Access")
 });
 
 export type FormData = yup.InferType<typeof schema>;
@@ -35,6 +37,14 @@ export const AddShareSecretForm = ({
   setNewSharedSecret: (value: string) => void;
   isInputDisabled?: boolean;
 }) => {
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   const publicSharedSecretCreator = useCreatePublicSharedSecret();
   const privateSharedSecretCreator = useCreateSharedSecret();
   const createSharedSecret = isPublic ? publicSharedSecretCreator : privateSharedSecretCreator;
@@ -65,7 +75,8 @@ export const AddShareSecretForm = ({
     value,
     expiresInValue,
     expiresInUnit,
-    expiresAfterSingleView
+    expiresAfterSingleView,
+    accessType
   }: FormData) => {
     try {
       const key = crypto.randomBytes(16).toString("hex");
@@ -89,18 +100,21 @@ export const AddShareSecretForm = ({
         tag,
         hashedHex,
         expiresAt,
-        expiresAfterViews: expiresAfterSingleView ? 1 : 1000
+        expiresAfterViews: expiresAfterSingleView ? 1 : 1000,
+        accessType: accessType as SecretSharingAccessType
       });
-      setNewSharedSecret(
-        `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(
-          hashedHex
-        )}-${encodeURIComponent(key)}`
-      );
 
-      createNotification({
-        text: "Successfully created a shared secret",
-        type: "success"
-      });
+      if (isMounted.current) {
+        setNewSharedSecret(
+          `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(
+            hashedHex
+          )}-${encodeURIComponent(key)}`
+        );
+        createNotification({
+          text: "Successfully created a shared secret",
+          type: "success"
+        });
+      }
     } catch (err) {
       console.error(err);
       const axiosError = err as AxiosError;
@@ -143,7 +157,7 @@ export const AddShareSecretForm = ({
             )}
           />
         </div>
-        <div className="flex w-full flex-col md:flex-row justify-start">
+        <div className="flex w-full flex-col md:flex-row justify-stretch">
           <div className="flex justify-start">
             <div className="flex justify-start">
               <div className="flex w-full justify-center pr-2">
@@ -188,8 +202,8 @@ export const AddShareSecretForm = ({
               </div>
             </div>
           </div>
-          <div className="sm:w-1/7 mx-auto items-center justify-center px-6 hidden md:flex">
-            <p className="px-4 mt-2 text-sm text-gray-400">AND</p>
+          <div className="sm:w-1/7 mx-auto items-center justify-center hidden md:flex">
+            <p className="mt-2 text-sm text-gray-400">AND</p>
           </div>
           <div className="items-center pb-4 md:pb-0 md:pt-2 flex">
             <Controller
@@ -227,7 +241,25 @@ export const AddShareSecretForm = ({
             </div>
           </div>
         </div>
-        <div className={`flex items-center ${!inModal && "justify-start pt-2"}`}>
+        {!isPublic && (
+          <Controller
+            control={control}
+            name="accessType"
+            defaultValue="organization"
+            render={({ field: { onChange, ...field } }) => (
+              <FormControl label="General Access">
+                <Select
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                >
+                  <SelectItem value="organization">People within your organization</SelectItem>
+                  <SelectItem value="anyone">Anyone</SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+        )}
+        <div className={`flex items-center space-x-4 pt-2 ${!inModal && ""}`}>
           <Button className="mr-0" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
             {inModal ? "Create" : "Share Secret"}
           </Button>

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -20,12 +20,14 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
   const [hashedHex, key] = urlEncodedPublicKey
     ? urlEncodedPublicKey.toString().split("-")
     : ["", ""];
-
+  
   const publicKey = decodeURIComponent(urlEncodedPublicKey as string);
   const { isLoading, data } = useGetActiveSharedSecretByIdAndHashedHex(
     id as string,
     hashedHex as string
   );
+  const accessType = data?.accessType;
+  const orgName = data?.orgName;
 
   const decryptedSecret = useMemo(() => {
     if (data && data.encryptedValue && publicKey) {
@@ -87,6 +89,8 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
                 decryptedSecret={decryptedSecret}
                 isUrlCopied={isUrlCopied}
                 copyUrlToClipboard={copyUrlToClipboard}
+                accessType={accessType}
+                orgName={orgName}
               />
             )}
           </div>

frontend/src/views/ShareSecretPublicPage/components/SecretTable.tsx

@@ -1,14 +1,17 @@
-import { faCheck, faCopy, faEye, faEyeSlash, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faCheck, faCopy, faEye, faEyeSlash, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { EmptyState, IconButton, Td, Tr } from "@app/components/v2";
+import { Button, EmptyState, IconButton, Td, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
+import { SecretSharingAccessType } from "@app/hooks/api/secretSharing/types";
 
 type Props = {
   isLoading: boolean;
   decryptedSecret: string;
   isUrlCopied: boolean;
   copyUrlToClipboard: () => void;
+  accessType?: SecretSharingAccessType;
+  orgName?: string;
 };
 
 const replaceContentWithDot = (str: string) => {
@@ -24,20 +27,49 @@ export const SecretTable = ({
   isLoading,
   decryptedSecret,
   isUrlCopied,
-  copyUrlToClipboard
+  copyUrlToClipboard,
+  accessType,
+  orgName
 }: Props) => {
   const [isVisible, setIsVisible] = useToggle(false);
+  const title = orgName
+    ? (<p>Someone from <strong>{orgName}</strong> organization has shared a secret with you</p>)
+    : (<p>You need to be logged in to view this secret</p>);
 
   return (
     <div className="flex w-full items-center justify-center rounded-md border border-solid border-mineshaft-700 bg-mineshaft-800 p-2">
       {isLoading && <div className="bg-mineshaft-800 text-center text-bunker-400">Loading...</div>}
-      {!isLoading && !decryptedSecret && (
+      {!isLoading && !decryptedSecret && accessType !== SecretSharingAccessType.Organization && (
         <Tr>
           <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
             <EmptyState title="Secret has either expired or does not exist!" icon={faKey} />
           </Td>
         </Tr>
       )}
+      {!isLoading && !decryptedSecret && accessType === SecretSharingAccessType.Organization && (
+        <Tr>
+          <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-4000">
+            <EmptyState title={title} icon={faKey}>
+              <div className="flex flex-1 flex-col items-center justify-center pt-6">
+                <a
+                  href="/login"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button
+                    colorSchema="primary"
+                    size="sm"
+                    onClick={() => {}}
+                    rightIcon={<FontAwesomeIcon icon={faArrowRight} className="ml-2" />}
+                  >
+                    Login into <strong>{orgName}</strong> to view this secret
+                  </Button>
+                </a>
+              </div>
+            </EmptyState>
+          </Td>
+        </Tr>
+      )}
       {!isLoading && decryptedSecret && (
         <div className="dark relative flex h-full w-full items-center overflow-y-auto rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 pr-2 md:p-3">
           <div