chore: revert license

improvement(access-requests): add access requests to single env view + general UI improvements

backend/src/ee/services/saml-config/saml-config-service.ts

@@ -410,7 +410,7 @@ export const samlConfigServiceFactory = ({
     }
     await licenseService.updateSubscriptionOrgMemberCount(organization.id);
 
-    const isUserCompleted = Boolean(user.isAccepted);
+    const isUserCompleted = Boolean(user.isAccepted && user.isEmailVerified);
     const userEnc = await userDAL.findUserEncKeyByUserId(user.id);
     const providerAuthToken = crypto.jwt().sign(
       {

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

@@ -2285,6 +2285,10 @@ export const AppConnections = {
     },
     CHECKLY: {
       apiKey: "The API key used to authenticate with Checkly."
+    },
+    SUPABASE: {
+      accessKey: "The Key used to access Supabase.",
+      instanceUrl: "The URL used to access Supabase."
     }
   }
 };
@@ -2494,6 +2498,10 @@ export const SecretSyncs = {
     },
     CHECKLY: {
       accountId: "The ID of the Checkly account to sync secrets to."
+    },
+    SUPABASE: {
+      projectId: "The ID of the Supabase project to sync secrets to.",
+      projectName: "The name of the Supabase project to sync secrets to."
     }
   }
 };

backend/src/server/routes/v1/app-connection-routers/app-connection-router.ts

@@ -83,6 +83,10 @@ import {
   RenderConnectionListItemSchema,
   SanitizedRenderConnectionSchema
 } from "@app/services/app-connection/render/render-connection-schema";
+import {
+  SanitizedSupabaseConnectionSchema,
+  SupabaseConnectionListItemSchema
+} from "@app/services/app-connection/supabase";
 import {
   SanitizedTeamCityConnectionSchema,
   TeamCityConnectionListItemSchema
@@ -133,7 +137,8 @@ const SanitizedAppConnectionSchema = z.union([
   ...SanitizedBitbucketConnectionSchema.options,
   ...SanitizedZabbixConnectionSchema.options,
   ...SanitizedRailwayConnectionSchema.options,
-  ...SanitizedChecklyConnectionSchema.options
+  ...SanitizedChecklyConnectionSchema.options,
+  ...SanitizedSupabaseConnectionSchema.options
 ]);
 
 const AppConnectionOptionsSchema = z.discriminatedUnion("app", [
@@ -169,7 +174,8 @@ const AppConnectionOptionsSchema = z.discriminatedUnion("app", [
   BitbucketConnectionListItemSchema,
   ZabbixConnectionListItemSchema,
   RailwayConnectionListItemSchema,
-  ChecklyConnectionListItemSchema
+  ChecklyConnectionListItemSchema,
+  SupabaseConnectionListItemSchema
 ]);
 
 export const registerAppConnectionRouter = async (server: FastifyZodProvider) => {

backend/src/server/routes/v1/app-connection-routers/index.ts

@@ -28,6 +28,7 @@ import { registerMySqlConnectionRouter } from "./mysql-connection-router";
 import { registerPostgresConnectionRouter } from "./postgres-connection-router";
 import { registerRailwayConnectionRouter } from "./railway-connection-router";
 import { registerRenderConnectionRouter } from "./render-connection-router";
+import { registerSupabaseConnectionRouter } from "./supabase-connection-router";
 import { registerTeamCityConnectionRouter } from "./teamcity-connection-router";
 import { registerTerraformCloudConnectionRouter } from "./terraform-cloud-router";
 import { registerVercelConnectionRouter } from "./vercel-connection-router";
@@ -70,5 +71,6 @@ export const APP_CONNECTION_REGISTER_ROUTER_MAP: Record<AppConnection, (server:
     [AppConnection.Bitbucket]: registerBitbucketConnectionRouter,
     [AppConnection.Zabbix]: registerZabbixConnectionRouter,
     [AppConnection.Railway]: registerRailwayConnectionRouter,
-    [AppConnection.Checkly]: registerChecklyConnectionRouter
+    [AppConnection.Checkly]: registerChecklyConnectionRouter,
+    [AppConnection.Supabase]: registerSupabaseConnectionRouter
   };

backend/src/server/routes/v1/app-connection-routers/supabase-connection-router.ts

@@ -0,0 +1,55 @@
+import { z } from "zod";
+
+import { readLimit } from "@app/server/config/rateLimiter";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { AppConnection } from "@app/services/app-connection/app-connection-enums";
+import {
+  CreateSupabaseConnectionSchema,
+  SanitizedSupabaseConnectionSchema,
+  UpdateSupabaseConnectionSchema
+} from "@app/services/app-connection/supabase";
+import { AuthMode } from "@app/services/auth/auth-type";
+
+import { registerAppConnectionEndpoints } from "./app-connection-endpoints";
+
+export const registerSupabaseConnectionRouter = async (server: FastifyZodProvider) => {
+  registerAppConnectionEndpoints({
+    app: AppConnection.Supabase,
+    server,
+    sanitizedResponseSchema: SanitizedSupabaseConnectionSchema,
+    createSchema: CreateSupabaseConnectionSchema,
+    updateSchema: UpdateSupabaseConnectionSchema
+  });
+
+  // The below endpoints are not exposed and for Infisical App use
+  server.route({
+    method: "GET",
+    url: `/:connectionId/projects`,
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      params: z.object({
+        connectionId: z.string().uuid()
+      }),
+      response: {
+        200: z.object({
+          projects: z
+            .object({
+              name: z.string(),
+              id: z.string()
+            })
+            .array()
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      const { connectionId } = req.params;
+
+      const projects = await server.services.appConnection.supabase.listProjects(connectionId, req.permission);
+
+      return { projects };
+    }
+  });
+};

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

@@ -28,7 +28,17 @@ export const registerIdentityOciAuthRouter = async (server: FastifyZodProvider)
           .object({
             authorization: z.string(),
             host: z.string(),
-            "x-date": z.string()
+            "x-date": z.string().optional(),
+            date: z.string().optional()
+          })
+          .superRefine((val, ctx) => {
+            if (!val.date && !val["x-date"]) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: "Either date or x-date must be provided",
+                path: ["headers", "date"]
+              });
+            }
           })
           .describe(OCI_AUTH.LOGIN.headers)
       }),

backend/src/server/routes/v1/secret-sync-routers/index.ts

@@ -21,6 +21,7 @@ import { registerHerokuSyncRouter } from "./heroku-sync-router";
 import { registerHumanitecSyncRouter } from "./humanitec-sync-router";
 import { registerRailwaySyncRouter } from "./railway-sync-router";
 import { registerRenderSyncRouter } from "./render-sync-router";
+import { registerSupabaseSyncRouter } from "./supabase-sync-router";
 import { registerTeamCitySyncRouter } from "./teamcity-sync-router";
 import { registerTerraformCloudSyncRouter } from "./terraform-cloud-sync-router";
 import { registerVercelSyncRouter } from "./vercel-sync-router";
@@ -53,7 +54,7 @@ export const SECRET_SYNC_REGISTER_ROUTER_MAP: Record<SecretSync, (server: Fastif
   [SecretSync.GitLab]: registerGitLabSyncRouter,
   [SecretSync.CloudflarePages]: registerCloudflarePagesSyncRouter,
   [SecretSync.CloudflareWorkers]: registerCloudflareWorkersSyncRouter,
-
+  [SecretSync.Supabase]: registerSupabaseSyncRouter,
   [SecretSync.Zabbix]: registerZabbixSyncRouter,
   [SecretSync.Railway]: registerRailwaySyncRouter,
   [SecretSync.Checkly]: registerChecklySyncRouter

backend/src/server/routes/v1/secret-sync-routers/secret-sync-router.ts

@@ -41,6 +41,7 @@ import { HerokuSyncListItemSchema, HerokuSyncSchema } from "@app/services/secret
 import { HumanitecSyncListItemSchema, HumanitecSyncSchema } from "@app/services/secret-sync/humanitec";
 import { RailwaySyncListItemSchema, RailwaySyncSchema } from "@app/services/secret-sync/railway/railway-sync-schemas";
 import { RenderSyncListItemSchema, RenderSyncSchema } from "@app/services/secret-sync/render/render-sync-schemas";
+import { SupabaseSyncListItemSchema, SupabaseSyncSchema } from "@app/services/secret-sync/supabase";
 import { TeamCitySyncListItemSchema, TeamCitySyncSchema } from "@app/services/secret-sync/teamcity";
 import { TerraformCloudSyncListItemSchema, TerraformCloudSyncSchema } from "@app/services/secret-sync/terraform-cloud";
 import { VercelSyncListItemSchema, VercelSyncSchema } from "@app/services/secret-sync/vercel";
@@ -71,7 +72,7 @@ const SecretSyncSchema = z.discriminatedUnion("destination", [
   GitLabSyncSchema,
   CloudflarePagesSyncSchema,
   CloudflareWorkersSyncSchema,
-
+  SupabaseSyncSchema,
   ZabbixSyncSchema,
   RailwaySyncSchema,
   ChecklySyncSchema
@@ -104,7 +105,8 @@ const SecretSyncOptionsSchema = z.discriminatedUnion("destination", [
 
   ZabbixSyncListItemSchema,
   RailwaySyncListItemSchema,
-  ChecklySyncListItemSchema
+  ChecklySyncListItemSchema,
+  SupabaseSyncListItemSchema
 ]);
 
 export const registerSecretSyncRouter = async (server: FastifyZodProvider) => {

backend/src/server/routes/v1/secret-sync-routers/supabase-sync-router.ts

@@ -0,0 +1,17 @@
+import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
+import {
+  CreateSupabaseSyncSchema,
+  SupabaseSyncSchema,
+  UpdateSupabaseSyncSchema
+} from "@app/services/secret-sync/supabase";
+
+import { registerSyncSecretsEndpoints } from "./secret-sync-endpoints";
+
+export const registerSupabaseSyncRouter = async (server: FastifyZodProvider) =>
+  registerSyncSecretsEndpoints({
+    destination: SecretSync.Supabase,
+    server,
+    responseSchema: SupabaseSyncSchema,
+    createSchema: CreateSupabaseSyncSchema,
+    updateSchema: UpdateSupabaseSyncSchema
+  });

backend/src/services/app-connection/app-connection-enums.ts

@@ -31,7 +31,8 @@ export enum AppConnection {
   Zabbix = "zabbix",
   Railway = "railway",
   Bitbucket = "bitbucket",
-  Checkly = "checkly"
+  Checkly = "checkly",
+  Supabase = "supabase"
 }
 
 export enum AWSRegion {

backend/src/services/app-connection/app-connection-fns.ts

@@ -95,6 +95,11 @@ import { getPostgresConnectionListItem, PostgresConnectionMethod } from "./postg
 import { getRailwayConnectionListItem, validateRailwayConnectionCredentials } from "./railway";
 import { RenderConnectionMethod } from "./render/render-connection-enums";
 import { getRenderConnectionListItem, validateRenderConnectionCredentials } from "./render/render-connection-fns";
+import {
+  getSupabaseConnectionListItem,
+  SupabaseConnectionMethod,
+  validateSupabaseConnectionCredentials
+} from "./supabase";
 import {
   getTeamCityConnectionListItem,
   TeamCityConnectionMethod,
@@ -148,7 +153,8 @@ export const listAppConnectionOptions = () => {
     getZabbixConnectionListItem(),
     getRailwayConnectionListItem(),
     getBitbucketConnectionListItem(),
-    getChecklyConnectionListItem()
+    getChecklyConnectionListItem(),
+    getSupabaseConnectionListItem()
   ].sort((a, b) => a.name.localeCompare(b.name));
 };
 
@@ -232,7 +238,8 @@ export const validateAppConnectionCredentials = async (
     [AppConnection.Zabbix]: validateZabbixConnectionCredentials as TAppConnectionCredentialsValidator,
     [AppConnection.Railway]: validateRailwayConnectionCredentials as TAppConnectionCredentialsValidator,
     [AppConnection.Bitbucket]: validateBitbucketConnectionCredentials as TAppConnectionCredentialsValidator,
-    [AppConnection.Checkly]: validateChecklyConnectionCredentials as TAppConnectionCredentialsValidator
+    [AppConnection.Checkly]: validateChecklyConnectionCredentials as TAppConnectionCredentialsValidator,
+    [AppConnection.Supabase]: validateSupabaseConnectionCredentials as TAppConnectionCredentialsValidator
   };
 
   return VALIDATE_APP_CONNECTION_CREDENTIALS_MAP[appConnection.app](appConnection);
@@ -292,6 +299,8 @@ export const getAppConnectionMethodName = (method: TAppConnection["method"]) =>
     case RenderConnectionMethod.ApiKey:
     case ChecklyConnectionMethod.ApiKey:
       return "API Key";
+    case SupabaseConnectionMethod.AccessToken:
+      return "Access Token";
     default:
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
       throw new Error(`Unhandled App Connection Method: ${method}`);
@@ -355,7 +364,8 @@ export const TRANSITION_CONNECTION_CREDENTIALS_TO_PLATFORM: Record<
   [AppConnection.Zabbix]: platformManagedCredentialsNotSupported,
   [AppConnection.Railway]: platformManagedCredentialsNotSupported,
   [AppConnection.Bitbucket]: platformManagedCredentialsNotSupported,
-  [AppConnection.Checkly]: platformManagedCredentialsNotSupported
+  [AppConnection.Checkly]: platformManagedCredentialsNotSupported,
+  [AppConnection.Supabase]: platformManagedCredentialsNotSupported
 };
 
 export const enterpriseAppCheck = async (

backend/src/services/app-connection/app-connection-maps.ts

@@ -33,7 +33,8 @@ export const APP_CONNECTION_NAME_MAP: Record<AppConnection, string> = {
   [AppConnection.Zabbix]: "Zabbix",
   [AppConnection.Railway]: "Railway",
   [AppConnection.Bitbucket]: "Bitbucket",
-  [AppConnection.Checkly]: "Checkly"
+  [AppConnection.Checkly]: "Checkly",
+  [AppConnection.Supabase]: "Supabase"
 };
 
 export const APP_CONNECTION_PLAN_MAP: Record<AppConnection, AppConnectionPlanType> = {
@@ -69,5 +70,6 @@ export const APP_CONNECTION_PLAN_MAP: Record<AppConnection, AppConnectionPlanTyp
   [AppConnection.Zabbix]: AppConnectionPlanType.Regular,
   [AppConnection.Railway]: AppConnectionPlanType.Regular,
   [AppConnection.Bitbucket]: AppConnectionPlanType.Regular,
-  [AppConnection.Checkly]: AppConnectionPlanType.Regular
+  [AppConnection.Checkly]: AppConnectionPlanType.Regular,
+  [AppConnection.Supabase]: AppConnectionPlanType.Regular
 };

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

@@ -78,6 +78,8 @@ import { ValidateRailwayConnectionCredentialsSchema } from "./railway";
 import { railwayConnectionService } from "./railway/railway-connection-service";
 import { ValidateRenderConnectionCredentialsSchema } from "./render/render-connection-schema";
 import { renderConnectionService } from "./render/render-connection-service";
+import { ValidateSupabaseConnectionCredentialsSchema } from "./supabase";
+import { supabaseConnectionService } from "./supabase/supabase-connection-service";
 import { ValidateTeamCityConnectionCredentialsSchema } from "./teamcity";
 import { teamcityConnectionService } from "./teamcity/teamcity-connection-service";
 import { ValidateTerraformCloudConnectionCredentialsSchema } from "./terraform-cloud";
@@ -131,7 +133,8 @@ const VALIDATE_APP_CONNECTION_CREDENTIALS_MAP: Record<AppConnection, TValidateAp
   [AppConnection.Zabbix]: ValidateZabbixConnectionCredentialsSchema,
   [AppConnection.Railway]: ValidateRailwayConnectionCredentialsSchema,
   [AppConnection.Bitbucket]: ValidateBitbucketConnectionCredentialsSchema,
-  [AppConnection.Checkly]: ValidateChecklyConnectionCredentialsSchema
+  [AppConnection.Checkly]: ValidateChecklyConnectionCredentialsSchema,
+  [AppConnection.Supabase]: ValidateSupabaseConnectionCredentialsSchema
 };
 
 export const appConnectionServiceFactory = ({
@@ -545,6 +548,7 @@ export const appConnectionServiceFactory = ({
     zabbix: zabbixConnectionService(connectAppConnectionById),
     railway: railwayConnectionService(connectAppConnectionById),
     bitbucket: bitbucketConnectionService(connectAppConnectionById),
-    checkly: checklyConnectionService(connectAppConnectionById)
+    checkly: checklyConnectionService(connectAppConnectionById),
+    supabase: supabaseConnectionService(connectAppConnectionById)
   };
 };

backend/src/services/app-connection/app-connection-types.ts

@@ -159,6 +159,12 @@ import {
   TRenderConnectionInput,
   TValidateRenderConnectionCredentialsSchema
 } from "./render/render-connection-types";
+import {
+  TSupabaseConnection,
+  TSupabaseConnectionConfig,
+  TSupabaseConnectionInput,
+  TValidateSupabaseConnectionCredentialsSchema
+} from "./supabase";
 import {
   TTeamCityConnection,
   TTeamCityConnectionConfig,
@@ -224,6 +230,7 @@ export type TAppConnection = { id: string } & (
   | TZabbixConnection
   | TRailwayConnection
   | TChecklyConnection
+  | TSupabaseConnection
 );
 
 export type TAppConnectionRaw = NonNullable<Awaited<ReturnType<TAppConnectionDALFactory["findById"]>>>;
@@ -264,6 +271,7 @@ export type TAppConnectionInput = { id: string } & (
   | TZabbixConnectionInput
   | TRailwayConnectionInput
   | TChecklyConnectionInput
+  | TSupabaseConnectionInput
 );
 
 export type TSqlConnectionInput =
@@ -311,7 +319,8 @@ export type TAppConnectionConfig =
   | TBitbucketConnectionConfig
   | TZabbixConnectionConfig
   | TRailwayConnectionConfig
-  | TChecklyConnectionConfig;
+  | TChecklyConnectionConfig
+  | TSupabaseConnectionConfig;
 
 export type TValidateAppConnectionCredentialsSchema =
   | TValidateAwsConnectionCredentialsSchema
@@ -346,7 +355,8 @@ export type TValidateAppConnectionCredentialsSchema =
   | TValidateBitbucketConnectionCredentialsSchema
   | TValidateZabbixConnectionCredentialsSchema
   | TValidateRailwayConnectionCredentialsSchema
-  | TValidateChecklyConnectionCredentialsSchema;
+  | TValidateChecklyConnectionCredentialsSchema
+  | TValidateSupabaseConnectionCredentialsSchema;
 
 export type TListAwsConnectionKmsKeys = {
   connectionId: string;

backend/src/services/app-connection/github/github-connection-fns.ts

@@ -145,12 +145,20 @@ export const getGitHubEnvironments = async (appConnection: TGitHubConnection, ow
 };
 
 type TokenRespData = {
-  access_token: string;
+  access_token?: string;
   scope: string;
   token_type: string;
   error?: string;
 };
 
+function isErrorResponse(data: TokenRespData): data is TokenRespData & {
+  error: string;
+  error_description: string;
+  error_uri: string;
+} {
+  return "error" in data;
+}
+
 export const validateGitHubConnectionCredentials = async (config: TGitHubConnectionConfig) => {
   const { credentials, method } = config;
 
@@ -198,7 +206,17 @@ export const validateGitHubConnectionCredentials = async (config: TGitHubConnect
         "Accept-Encoding": "application/json"
       }
     });
+
+    if (isErrorResponse(tokenResp?.data)) {
+      throw new BadRequestError({
+        message: `Unable to validate credentials: GitHub responded with an error: ${tokenResp.data.error} - ${tokenResp.data.error_description}`
+      });
+    }
   } catch (e: unknown) {
+    if (e instanceof BadRequestError) {
+      throw e;
+    }
+
     throw new BadRequestError({
       message: `Unable to validate connection: verify credentials`
     });
@@ -211,6 +229,10 @@ export const validateGitHubConnectionCredentials = async (config: TGitHubConnect
   }
 
   if (method === GitHubConnectionMethod.App) {
+    if (!tokenResp.data.access_token) {
+      throw new InternalServerError({ message: `Missing access token: ${tokenResp.data.error}` });
+    }
+
     const installationsResp = await request.get<{
       installations: {
         id: number;
@@ -239,10 +261,6 @@ export const validateGitHubConnectionCredentials = async (config: TGitHubConnect
     }
   }
 
-  if (!tokenResp.data.access_token) {
-    throw new InternalServerError({ message: `Missing access token: ${tokenResp.data.error}` });
-  }
-
   switch (method) {
     case GitHubConnectionMethod.App:
       return {

backend/src/services/app-connection/supabase/index.ts

@@ -0,0 +1,4 @@
+export * from "./supabase-connection-constants";
+export * from "./supabase-connection-fns";
+export * from "./supabase-connection-schemas";
+export * from "./supabase-connection-types";

backend/src/services/app-connection/supabase/supabase-connection-constants.ts

@@ -0,0 +1,3 @@
+export enum SupabaseConnectionMethod {
+  AccessToken = "access-token"
+}

backend/src/services/app-connection/supabase/supabase-connection-fns.ts

@@ -0,0 +1,58 @@
+/* eslint-disable no-await-in-loop */
+import { AxiosError } from "axios";
+
+import { BadRequestError } from "@app/lib/errors";
+import { AppConnection } from "@app/services/app-connection/app-connection-enums";
+
+import { SupabaseConnectionMethod } from "./supabase-connection-constants";
+import { SupabasePublicAPI } from "./supabase-connection-public-client";
+import { TSupabaseConnection, TSupabaseConnectionConfig } from "./supabase-connection-types";
+
+export const getSupabaseConnectionListItem = () => {
+  return {
+    name: "Supabase" as const,
+    app: AppConnection.Supabase as const,
+    methods: Object.values(SupabaseConnectionMethod)
+  };
+};
+
+export const validateSupabaseConnectionCredentials = async (config: TSupabaseConnectionConfig) => {
+  const { credentials } = config;
+
+  try {
+    await SupabasePublicAPI.healthcheck(config);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      throw new BadRequestError({
+        message: `Failed to validate credentials: ${error.message || "Unknown error"}`
+      });
+    }
+
+    throw new BadRequestError({
+      message: "Unable to validate connection - verify credentials"
+    });
+  }
+
+  return credentials;
+};
+
+export const listProjects = async (appConnection: TSupabaseConnection) => {
+  try {
+    return await SupabasePublicAPI.getProjects(appConnection);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      throw new BadRequestError({
+        message: `Failed to list projects: ${error.message || "Unknown error"}`
+      });
+    }
+
+    if (error instanceof BadRequestError) {
+      throw error;
+    }
+
+    throw new BadRequestError({
+      message: "Unable to list projects",
+      error
+    });
+  }
+};

backend/src/services/app-connection/supabase/supabase-connection-public-client.ts

@@ -0,0 +1,133 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable class-methods-use-this */
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse, HttpStatusCode } from "axios";
+
+import { createRequestClient } from "@app/lib/config/request";
+import { delay } from "@app/lib/delay";
+import { removeTrailingSlash } from "@app/lib/fn";
+import { blockLocalAndPrivateIpAddresses } from "@app/lib/validator";
+
+import { SupabaseConnectionMethod } from "./supabase-connection-constants";
+import { TSupabaseConnectionConfig, TSupabaseProject, TSupabaseSecret } from "./supabase-connection-types";
+
+export const getSupabaseInstanceUrl = async (config: TSupabaseConnectionConfig) => {
+  const instanceUrl = config.credentials.instanceUrl
+    ? removeTrailingSlash(config.credentials.instanceUrl)
+    : "https://api.supabase.com";
+
+  await blockLocalAndPrivateIpAddresses(instanceUrl);
+
+  return instanceUrl;
+};
+
+export function getSupabaseAuthHeaders(connection: TSupabaseConnectionConfig): Record<string, string> {
+  switch (connection.method) {
+    case SupabaseConnectionMethod.AccessToken:
+      return {
+        Authorization: `Bearer ${connection.credentials.accessKey}`
+      };
+    default:
+      throw new Error(`Unsupported Supabase connection method`);
+  }
+}
+
+export function getSupabaseRatelimiter(response: AxiosResponse): {
+  maxAttempts: number;
+  isRatelimited: boolean;
+  wait: () => Promise<void>;
+} {
+  const wait = () => {
+    return delay(60 * 1000);
+  };
+
+  return {
+    isRatelimited: response.status === HttpStatusCode.TooManyRequests,
+    wait,
+    maxAttempts: 3
+  };
+}
+
+class SupabasePublicClient {
+  private client: AxiosInstance;
+
+  constructor() {
+    this.client = createRequestClient({
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+  }
+
+  async send<T>(
+    connection: TSupabaseConnectionConfig,
+    config: AxiosRequestConfig,
+    retryAttempt = 0
+  ): Promise<T | undefined> {
+    const response = await this.client.request<T>({
+      ...config,
+      baseURL: await getSupabaseInstanceUrl(connection),
+      validateStatus: (status) => (status >= 200 && status < 300) || status === HttpStatusCode.TooManyRequests,
+      headers: getSupabaseAuthHeaders(connection)
+    });
+
+    const limiter = getSupabaseRatelimiter(response);
+
+    if (limiter.isRatelimited && retryAttempt <= limiter.maxAttempts) {
+      await limiter.wait();
+      return this.send(connection, config, retryAttempt + 1);
+    }
+
+    return response.data;
+  }
+
+  async healthcheck(connection: TSupabaseConnectionConfig) {
+    switch (connection.method) {
+      case SupabaseConnectionMethod.AccessToken:
+        return void (await this.getProjects(connection));
+      default:
+        throw new Error(`Unsupported Supabase connection method`);
+    }
+  }
+
+  async getVariables(connection: TSupabaseConnectionConfig, projectRef: string) {
+    const res = await this.send<TSupabaseSecret[]>(connection, {
+      method: "GET",
+      url: `/v1/projects/${projectRef}/secrets`
+    });
+
+    return res;
+  }
+
+  // Supabase does not support updating variables directly
+  // Instead, just call create again with the same key and it will overwrite the existing variable
+  async createVariables(connection: TSupabaseConnectionConfig, projectRef: string, ...variables: TSupabaseSecret[]) {
+    const res = await this.send<TSupabaseSecret>(connection, {
+      method: "POST",
+      url: `/v1/projects/${projectRef}/secrets`,
+      data: variables
+    });
+
+    return res;
+  }
+
+  async deleteVariables(connection: TSupabaseConnectionConfig, projectRef: string, ...variables: string[]) {
+    const res = await this.send(connection, {
+      method: "DELETE",
+      url: `/v1/projects/${projectRef}/secrets`,
+      data: variables
+    });
+
+    return res;
+  }
+
+  async getProjects(connection: TSupabaseConnectionConfig) {
+    const res = await this.send<TSupabaseProject[]>(connection, {
+      method: "GET",
+      url: `/v1/projects`
+    });
+
+    return res;
+  }
+}
+
+export const SupabasePublicAPI = new SupabasePublicClient();

backend/src/services/app-connection/supabase/supabase-connection-schemas.ts

@@ -0,0 +1,70 @@
+import z from "zod";
+
+import { AppConnections } from "@app/lib/api-docs";
+import { AppConnection } from "@app/services/app-connection/app-connection-enums";
+import {
+  BaseAppConnectionSchema,
+  GenericCreateAppConnectionFieldsSchema,
+  GenericUpdateAppConnectionFieldsSchema
+} from "@app/services/app-connection/app-connection-schemas";
+
+import { SupabaseConnectionMethod } from "./supabase-connection-constants";
+
+export const SupabaseConnectionMethodSchema = z
+  .nativeEnum(SupabaseConnectionMethod)
+  .describe(AppConnections.CREATE(AppConnection.Supabase).method);
+
+export const SupabaseConnectionAccessTokenCredentialsSchema = z.object({
+  accessKey: z
+    .string()
+    .trim()
+    .min(1, "Access Key required")
+    .max(255)
+    .describe(AppConnections.CREDENTIALS.SUPABASE.accessKey),
+  instanceUrl: z.string().trim().url().max(255).describe(AppConnections.CREDENTIALS.SUPABASE.instanceUrl).optional()
+});
+
+const BaseSupabaseConnectionSchema = BaseAppConnectionSchema.extend({
+  app: z.literal(AppConnection.Supabase)
+});
+
+export const SupabaseConnectionSchema = BaseSupabaseConnectionSchema.extend({
+  method: SupabaseConnectionMethodSchema,
+  credentials: SupabaseConnectionAccessTokenCredentialsSchema
+});
+
+export const SanitizedSupabaseConnectionSchema = z.discriminatedUnion("method", [
+  BaseSupabaseConnectionSchema.extend({
+    method: SupabaseConnectionMethodSchema,
+    credentials: SupabaseConnectionAccessTokenCredentialsSchema.pick({
+      instanceUrl: true
+    })
+  })
+]);
+
+export const ValidateSupabaseConnectionCredentialsSchema = z.discriminatedUnion("method", [
+  z.object({
+    method: SupabaseConnectionMethodSchema,
+    credentials: SupabaseConnectionAccessTokenCredentialsSchema.describe(
+      AppConnections.CREATE(AppConnection.Supabase).credentials
+    )
+  })
+]);
+
+export const CreateSupabaseConnectionSchema = ValidateSupabaseConnectionCredentialsSchema.and(
+  GenericCreateAppConnectionFieldsSchema(AppConnection.Supabase)
+);
+
+export const UpdateSupabaseConnectionSchema = z
+  .object({
+    credentials: SupabaseConnectionAccessTokenCredentialsSchema.optional().describe(
+      AppConnections.UPDATE(AppConnection.Supabase).credentials
+    )
+  })
+  .and(GenericUpdateAppConnectionFieldsSchema(AppConnection.Supabase));
+
+export const SupabaseConnectionListItemSchema = z.object({
+  name: z.literal("Supabase"),
+  app: z.literal(AppConnection.Supabase),
+  methods: z.nativeEnum(SupabaseConnectionMethod).array()
+});

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

@@ -0,0 +1,30 @@
+import { logger } from "@app/lib/logger";
+import { OrgServiceActor } from "@app/lib/types";
+
+import { AppConnection } from "../app-connection-enums";
+import { listProjects as getSupabaseProjects } from "./supabase-connection-fns";
+import { TSupabaseConnection } from "./supabase-connection-types";
+
+type TGetAppConnectionFunc = (
+  app: AppConnection,
+  connectionId: string,
+  actor: OrgServiceActor
+) => Promise<TSupabaseConnection>;
+
+export const supabaseConnectionService = (getAppConnection: TGetAppConnectionFunc) => {
+  const listProjects = async (connectionId: string, actor: OrgServiceActor) => {
+    const appConnection = await getAppConnection(AppConnection.Supabase, connectionId, actor);
+    try {
+      const projects = await getSupabaseProjects(appConnection);
+
+      return projects ?? [];
+    } catch (error) {
+      logger.error(error, "Failed to establish connection with Supabase");
+      return [];
+    }
+  };
+
+  return {
+    listProjects
+  };
+};

backend/src/services/app-connection/supabase/supabase-connection-types.ts

@@ -0,0 +1,44 @@
+import z from "zod";
+
+import { DiscriminativePick } from "@app/lib/types";
+
+import { AppConnection } from "../app-connection-enums";
+import {
+  CreateSupabaseConnectionSchema,
+  SupabaseConnectionSchema,
+  ValidateSupabaseConnectionCredentialsSchema
+} from "./supabase-connection-schemas";
+
+export type TSupabaseConnection = z.infer<typeof SupabaseConnectionSchema>;
+
+export type TSupabaseConnectionInput = z.infer<typeof CreateSupabaseConnectionSchema> & {
+  app: AppConnection.Supabase;
+};
+
+export type TValidateSupabaseConnectionCredentialsSchema = typeof ValidateSupabaseConnectionCredentialsSchema;
+
+export type TSupabaseConnectionConfig = DiscriminativePick<TSupabaseConnection, "method" | "app" | "credentials"> & {
+  orgId: string;
+};
+
+export type TSupabaseProject = {
+  id: string;
+  organization_id: string;
+  name: string;
+  region: string;
+  created_at: Date;
+  status: string;
+  database: TSupabaseDatabase;
+};
+
+type TSupabaseDatabase = {
+  host: string;
+  version: string;
+  postgres_engine: string;
+  release_channel: string;
+};
+
+export type TSupabaseSecret = {
+  name: string;
+  value: string;
+};

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

@@ -6,7 +6,8 @@ export type TLoginOciAuthDTO = {
   headers: {
     authorization: string;
     host: string;
-    "x-date": string;
+    "x-date"?: string;
+    date?: string;
   };
 };
 

backend/src/services/secret-sync/secret-sync-enums.ts

@@ -22,7 +22,7 @@ export enum SecretSync {
   GitLab = "gitlab",
   CloudflarePages = "cloudflare-pages",
   CloudflareWorkers = "cloudflare-workers",
-
+  Supabase = "supabase",
   Zabbix = "zabbix",
   Railway = "railway",
   Checkly = "checkly"

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

@@ -46,6 +46,7 @@ import { RAILWAY_SYNC_LIST_OPTION } from "./railway/railway-sync-constants";
 import { RailwaySyncFns } from "./railway/railway-sync-fns";
 import { RENDER_SYNC_LIST_OPTION, RenderSyncFns } from "./render";
 import { SECRET_SYNC_PLAN_MAP } from "./secret-sync-maps";
+import { SUPABASE_SYNC_LIST_OPTION, SupabaseSyncFns } from "./supabase";
 import { TEAMCITY_SYNC_LIST_OPTION, TeamCitySyncFns } from "./teamcity";
 import { TERRAFORM_CLOUD_SYNC_LIST_OPTION, TerraformCloudSyncFns } from "./terraform-cloud";
 import { VERCEL_SYNC_LIST_OPTION, VercelSyncFns } from "./vercel";
@@ -76,7 +77,7 @@ const SECRET_SYNC_LIST_OPTIONS: Record<SecretSync, TSecretSyncListItem> = {
   [SecretSync.GitLab]: GITLAB_SYNC_LIST_OPTION,
   [SecretSync.CloudflarePages]: CLOUDFLARE_PAGES_SYNC_LIST_OPTION,
   [SecretSync.CloudflareWorkers]: CLOUDFLARE_WORKERS_SYNC_LIST_OPTION,
-
+  [SecretSync.Supabase]: SUPABASE_SYNC_LIST_OPTION,
   [SecretSync.Zabbix]: ZABBIX_SYNC_LIST_OPTION,
   [SecretSync.Railway]: RAILWAY_SYNC_LIST_OPTION,
   [SecretSync.Checkly]: CHECKLY_SYNC_LIST_OPTION
@@ -255,6 +256,8 @@ export const SecretSyncFns = {
         return RailwaySyncFns.syncSecrets(secretSync, schemaSecretMap);
       case SecretSync.Checkly:
         return ChecklySyncFns.syncSecrets(secretSync, schemaSecretMap);
+      case SecretSync.Supabase:
+        return SupabaseSyncFns.syncSecrets(secretSync, schemaSecretMap);
       default:
         throw new Error(
           `Unhandled sync destination for sync secrets fns: ${(secretSync as TSecretSyncWithCredentials).destination}`
@@ -359,6 +362,9 @@ export const SecretSyncFns = {
       case SecretSync.Checkly:
         secretMap = await ChecklySyncFns.getSecrets(secretSync);
         break;
+      case SecretSync.Supabase:
+        secretMap = await SupabaseSyncFns.getSecrets(secretSync);
+        break;
       default:
         throw new Error(
           `Unhandled sync destination for get secrets fns: ${(secretSync as TSecretSyncWithCredentials).destination}`
@@ -444,6 +450,8 @@ export const SecretSyncFns = {
         return RailwaySyncFns.removeSecrets(secretSync, schemaSecretMap);
       case SecretSync.Checkly:
         return ChecklySyncFns.removeSecrets(secretSync, schemaSecretMap);
+      case SecretSync.Supabase:
+        return SupabaseSyncFns.removeSecrets(secretSync, schemaSecretMap);
       default:
         throw new Error(
           `Unhandled sync destination for remove secrets fns: ${(secretSync as TSecretSyncWithCredentials).destination}`

backend/src/services/secret-sync/secret-sync-maps.ts

@@ -25,7 +25,7 @@ export const SECRET_SYNC_NAME_MAP: Record<SecretSync, string> = {
   [SecretSync.GitLab]: "GitLab",
   [SecretSync.CloudflarePages]: "Cloudflare Pages",
   [SecretSync.CloudflareWorkers]: "Cloudflare Workers",
-
+  [SecretSync.Supabase]: "Supabase",
   [SecretSync.Zabbix]: "Zabbix",
   [SecretSync.Railway]: "Railway",
   [SecretSync.Checkly]: "Checkly"
@@ -55,7 +55,7 @@ export const SECRET_SYNC_CONNECTION_MAP: Record<SecretSync, AppConnection> = {
   [SecretSync.GitLab]: AppConnection.GitLab,
   [SecretSync.CloudflarePages]: AppConnection.Cloudflare,
   [SecretSync.CloudflareWorkers]: AppConnection.Cloudflare,
-
+  [SecretSync.Supabase]: AppConnection.Supabase,
   [SecretSync.Zabbix]: AppConnection.Zabbix,
   [SecretSync.Railway]: AppConnection.Railway,
   [SecretSync.Checkly]: AppConnection.Checkly
@@ -85,7 +85,7 @@ export const SECRET_SYNC_PLAN_MAP: Record<SecretSync, SecretSyncPlanType> = {
   [SecretSync.GitLab]: SecretSyncPlanType.Regular,
   [SecretSync.CloudflarePages]: SecretSyncPlanType.Regular,
   [SecretSync.CloudflareWorkers]: SecretSyncPlanType.Regular,
-
+  [SecretSync.Supabase]: SecretSyncPlanType.Regular,
   [SecretSync.Zabbix]: SecretSyncPlanType.Regular,
   [SecretSync.Railway]: SecretSyncPlanType.Regular,
   [SecretSync.Checkly]: SecretSyncPlanType.Regular

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

@@ -118,6 +118,12 @@ import {
   TRenderSyncListItem,
   TRenderSyncWithCredentials
 } from "./render/render-sync-types";
+import {
+  TSupabaseSync,
+  TSupabaseSyncInput,
+  TSupabaseSyncListItem,
+  TSupabaseSyncWithCredentials
+} from "./supabase/supabase-sync-types";
 import {
   TTeamCitySync,
   TTeamCitySyncInput,
@@ -159,7 +165,8 @@ export type TSecretSync =
   | TCloudflareWorkersSync
   | TZabbixSync
   | TRailwaySync
-  | TChecklySync;
+  | TChecklySync
+  | TSupabaseSync;
 
 export type TSecretSyncWithCredentials =
   | TAwsParameterStoreSyncWithCredentials
@@ -187,7 +194,8 @@ export type TSecretSyncWithCredentials =
   | TCloudflareWorkersSyncWithCredentials
   | TZabbixSyncWithCredentials
   | TRailwaySyncWithCredentials
-  | TChecklySyncWithCredentials;
+  | TChecklySyncWithCredentials
+  | TSupabaseSyncWithCredentials;
 
 export type TSecretSyncInput =
   | TAwsParameterStoreSyncInput
@@ -215,7 +223,8 @@ export type TSecretSyncInput =
   | TCloudflareWorkersSyncInput
   | TZabbixSyncInput
   | TRailwaySyncInput
-  | TChecklySyncInput;
+  | TChecklySyncInput
+  | TSupabaseSyncInput;
 
 export type TSecretSyncListItem =
   | TAwsParameterStoreSyncListItem
@@ -243,7 +252,8 @@ export type TSecretSyncListItem =
   | TCloudflareWorkersSyncListItem
   | TZabbixSyncListItem
   | TRailwaySyncListItem
-  | TChecklySyncListItem;
+  | TChecklySyncListItem
+  | TSupabaseSyncListItem;
 
 export type TSyncOptionsConfig = {
   canImportSecrets: boolean;

backend/src/services/secret-sync/supabase/index.ts

@@ -0,0 +1,4 @@
+export * from "./supabase-sync-constants";
+export * from "./supabase-sync-fns";
+export * from "./supabase-sync-schemas";
+export * from "./supabase-sync-types";

backend/src/services/secret-sync/supabase/supabase-sync-constants.ts

@@ -0,0 +1,10 @@
+import { AppConnection } from "@app/services/app-connection/app-connection-enums";
+import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
+import { TSecretSyncListItem } from "@app/services/secret-sync/secret-sync-types";
+
+export const SUPABASE_SYNC_LIST_OPTION: TSecretSyncListItem = {
+  name: "Supabase",
+  destination: SecretSync.Supabase,
+  connection: AppConnection.Supabase,
+  canImportSecrets: false
+};

backend/src/services/secret-sync/supabase/supabase-sync-fns.ts

@@ -0,0 +1,102 @@
+/* eslint-disable no-continue */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import { chunkArray } from "@app/lib/fn";
+import { TSupabaseSecret } from "@app/services/app-connection/supabase";
+import { SupabasePublicAPI } from "@app/services/app-connection/supabase/supabase-connection-public-client";
+import { matchesSchema } from "@app/services/secret-sync/secret-sync-fns";
+
+import { SecretSyncError } from "../secret-sync-errors";
+import { SECRET_SYNC_NAME_MAP } from "../secret-sync-maps";
+import { TSecretMap } from "../secret-sync-types";
+import { TSupabaseSyncWithCredentials } from "./supabase-sync-types";
+
+const SUPABASE_INTERNAL_SECRETS = ["SUPABASE_URL", "SUPABASE_ANON_KEY", "SUPABASE_SERVICE_ROLE_KEY", "SUPABASE_DB_URL"];
+
+export const SupabaseSyncFns = {
+  async getSecrets(secretSync: TSupabaseSyncWithCredentials) {
+    throw new Error(`${SECRET_SYNC_NAME_MAP[secretSync.destination]} does not support importing secrets.`);
+  },
+
+  async syncSecrets(secretSync: TSupabaseSyncWithCredentials, secretMap: TSecretMap) {
+    const {
+      environment,
+      syncOptions: { disableSecretDeletion, keySchema }
+    } = secretSync;
+    const config = secretSync.destinationConfig;
+
+    const variables = await SupabasePublicAPI.getVariables(secretSync.connection, config.projectId);
+
+    const supabaseSecrets = new Map(variables!.map((variable) => [variable.name, variable]));
+
+    const toCreate: TSupabaseSecret[] = [];
+
+    for (const key of Object.keys(secretMap)) {
+      const variable: TSupabaseSecret = { name: key, value: secretMap[key].value ?? "" };
+      toCreate.push(variable);
+    }
+
+    for await (const batch of chunkArray(toCreate, 100)) {
+      try {
+        await SupabasePublicAPI.createVariables(secretSync.connection, config.projectId, ...batch);
+      } catch (error) {
+        throw new SecretSyncError({
+          error,
+          secretKey: batch[0].name // Use the first key in the batch for error reporting
+        });
+      }
+    }
+
+    if (disableSecretDeletion) return;
+
+    const toDelete: string[] = [];
+
+    for (const key of supabaseSecrets.keys()) {
+      // eslint-disable-next-line no-continue
+      if (!matchesSchema(key, environment?.slug || "", keySchema) || SUPABASE_INTERNAL_SECRETS.includes(key)) continue;
+
+      if (!secretMap[key]) {
+        toDelete.push(key);
+      }
+    }
+
+    for await (const batch of chunkArray(toDelete, 100)) {
+      try {
+        await SupabasePublicAPI.deleteVariables(secretSync.connection, config.projectId, ...batch);
+      } catch (error) {
+        throw new SecretSyncError({
+          error,
+          secretKey: batch[0] // Use the first key in the batch for error reporting
+        });
+      }
+    }
+  },
+
+  async removeSecrets(secretSync: TSupabaseSyncWithCredentials, secretMap: TSecretMap) {
+    const config = secretSync.destinationConfig;
+
+    const variables = await SupabasePublicAPI.getVariables(secretSync.connection, config.projectId);
+
+    const supabaseSecrets = new Map(variables!.map((variable) => [variable.name, variable]));
+
+    const toDelete: string[] = [];
+
+    for (const key of supabaseSecrets.keys()) {
+      if (SUPABASE_INTERNAL_SECRETS.includes(key) || !(key in secretMap)) continue;
+
+      toDelete.push(key);
+    }
+
+    for await (const batch of chunkArray(toDelete, 100)) {
+      try {
+        await SupabasePublicAPI.deleteVariables(secretSync.connection, config.projectId, ...batch);
+      } catch (error) {
+        throw new SecretSyncError({
+          error,
+          secretKey: batch[0] // Use the first key in the batch for error reporting
+        });
+      }
+    }
+  }
+};

backend/src/services/secret-sync/supabase/supabase-sync-schemas.ts

@@ -0,0 +1,43 @@
+import { z } from "zod";
+
+import { AppConnection } from "@app/services/app-connection/app-connection-enums";
+import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
+import {
+  BaseSecretSyncSchema,
+  GenericCreateSecretSyncFieldsSchema,
+  GenericUpdateSecretSyncFieldsSchema
+} from "@app/services/secret-sync/secret-sync-schemas";
+import { TSyncOptionsConfig } from "@app/services/secret-sync/secret-sync-types";
+
+const SupabaseSyncDestinationConfigSchema = z.object({
+  projectId: z.string().max(255).min(1, "Project ID is required"),
+  projectName: z.string().max(255).min(1, "Project Name is required")
+});
+
+const SupabaseSyncOptionsConfig: TSyncOptionsConfig = { canImportSecrets: false };
+
+export const SupabaseSyncSchema = BaseSecretSyncSchema(SecretSync.Supabase, SupabaseSyncOptionsConfig).extend({
+  destination: z.literal(SecretSync.Supabase),
+  destinationConfig: SupabaseSyncDestinationConfigSchema
+});
+
+export const CreateSupabaseSyncSchema = GenericCreateSecretSyncFieldsSchema(
+  SecretSync.Supabase,
+  SupabaseSyncOptionsConfig
+).extend({
+  destinationConfig: SupabaseSyncDestinationConfigSchema
+});
+
+export const UpdateSupabaseSyncSchema = GenericUpdateSecretSyncFieldsSchema(
+  SecretSync.Supabase,
+  SupabaseSyncOptionsConfig
+).extend({
+  destinationConfig: SupabaseSyncDestinationConfigSchema.optional()
+});
+
+export const SupabaseSyncListItemSchema = z.object({
+  name: z.literal("Supabase"),
+  connection: z.literal(AppConnection.Supabase),
+  destination: z.literal(SecretSync.Supabase),
+  canImportSecrets: z.literal(false)
+});

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

@@ -0,0 +1,21 @@
+import z from "zod";
+
+import { TSupabaseConnection } from "@app/services/app-connection/supabase";
+
+import { CreateSupabaseSyncSchema, SupabaseSyncListItemSchema, SupabaseSyncSchema } from "./supabase-sync-schemas";
+
+export type TSupabaseSyncListItem = z.infer<typeof SupabaseSyncListItemSchema>;
+
+export type TSupabaseSync = z.infer<typeof SupabaseSyncSchema>;
+
+export type TSupabaseSyncInput = z.infer<typeof CreateSupabaseSyncSchema>;
+
+export type TSupabaseSyncWithCredentials = TSupabaseSync & {
+  connection: TSupabaseConnection;
+};
+
+export type TSupabaseVariablesGraphResponse = {
+  data: {
+    variables: Record<string, string>;
+  };
+};

company/documentation/engineering/how-to-write-design-doc.mdx

@@ -33,6 +33,7 @@ Every feature/problem is unique, but your design docs should generally include t
    - A high-level summary of the problem and proposed solution. Keep it brief (max 3 paragraphs).
 3. **Context**
    - Explain the problem's background, why it's important to solve now, and any constraints (e.g., technical, sales, or timeline-related). What do we get out of solving this problem? (needed to close a deal, scale, performance, etc.).
+   - Consider whether this feature has notable sales implications (e.g., affects pricing, customer commitments, go-to-market strategy, or competitive positioning) that would require Sales team input and approval.
 4. **Solution**
 
    - Provide a big-picture explanation of the solution, followed by detailed technical architecture.
@@ -76,3 +77,11 @@ Before sharing your design docs with others, review your design doc as if you we
    - Ask a relevant engineer(s) to review your document. Their role is to identify blind spots, challenge assumptions, and ensure everything is clear. Once you and the reviewer are on the same page on the approach, update the document with any missing details they brought up.
 4. **Team Review and Feedback**
    - Invite the relevant engineers to a design doc review meeting and give them 10-15 minutes to read through the document. After everyone has had a chance to review it, open the floor up for discussion. Address any feedback or concerns raised during this meeting. If significant points were overlooked during your initial planning, you may need to revisit the drawing board. Your goal is to think about the feature holistically and minimize the need for drastic changes to your design doc later on.
+5. **Sales Approval (When Applicable)**
+   - If your design document has notable sales implications, get explicit approval from the Sales team before proceeding to implementation. This includes features that:
+     - Affect pricing models or billing structures
+     - Impact customer commitments or contractual obligations
+     - Change core product functionality that's actively being sold
+     - Introduce new capabilities that could affect competitive positioning
+     - Modify user experience in ways that could impact customer acquisition or retention
+   - Share the design document with the Sales team to ensure alignment between the proposed technical approach and sales strategy, pricing models, and market positioning.

docs/api-reference/endpoints/app-connections/supabase/available.mdx

@@ -0,0 +1,4 @@
+---
+title: "Available"
+openapi: "GET /api/v1/app-connections/supabase/available"
+---

docs/api-reference/endpoints/app-connections/supabase/create.mdx

@@ -0,0 +1,8 @@
+---
+title: "Create"
+openapi: "POST /api/v1/app-connections/supabase"
+---
+
+<Note>
+    Check out the configuration docs for [Supabase Connections](/integrations/app-connections/supabase) to learn how to obtain the required credentials.
+</Note>

docs/api-reference/endpoints/app-connections/supabase/delete.mdx

@@ -0,0 +1,4 @@
+---
+title: "Delete"
+openapi: "DELETE /api/v1/app-connections/supabase/{connectionId}"
+---

docs/api-reference/endpoints/app-connections/supabase/get-by-id.mdx

@@ -0,0 +1,4 @@
+---
+title: "Get by ID"
+openapi: "GET /api/v1/app-connections/supabase/{connectionId}"
+---

docs/api-reference/endpoints/app-connections/supabase/get-by-name.mdx

@@ -0,0 +1,4 @@
+---
+title: "Get by Name"
+openapi: "GET /api/v1/app-connections/supabase/connection-name/{connectionName}"
+---

docs/api-reference/endpoints/app-connections/supabase/list.mdx

@@ -0,0 +1,4 @@
+---
+title: "List"
+openapi: "GET /api/v1/app-connections/supabase"
+---

docs/api-reference/endpoints/app-connections/supabase/update.mdx

@@ -0,0 +1,8 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/app-connections/supabase/{connectionId}"
+---
+
+<Note>
+    Check out the configuration docs for [Supabase Connections](/integrations/app-connections/supabase) to learn how to obtain the required credentials.
+</Note>

docs/api-reference/endpoints/secret-syncs/supabase/create.mdx

@@ -0,0 +1,4 @@
+---
+title: "Create"
+openapi: "POST /api/v1/secret-syncs/supabase"
+---

docs/api-reference/endpoints/secret-syncs/supabase/delete.mdx

@@ -0,0 +1,4 @@
+---
+title: "Delete"
+openapi: "DELETE /api/v1/secret-syncs/supabase/{syncId}"
+---

docs/api-reference/endpoints/secret-syncs/supabase/get-by-id.mdx

@@ -0,0 +1,4 @@
+---
+title: "Get by ID"
+openapi: "GET /api/v1/secret-syncs/supabase/{syncId}"
+---

docs/api-reference/endpoints/secret-syncs/supabase/get-by-name.mdx

@@ -0,0 +1,4 @@
+---
+title: "Get by Name"
+openapi: "GET /api/v1/secret-syncs/supabase/sync-name/{syncName}"
+---

docs/api-reference/endpoints/secret-syncs/supabase/list.mdx

@@ -0,0 +1,4 @@
+---
+title: "List"
+openapi: "GET /api/v1/secret-syncs/supabase"
+---

docs/api-reference/endpoints/secret-syncs/supabase/remove-secrets.mdx

@@ -0,0 +1,4 @@
+---
+title: "Remove Secrets"
+openapi: "POST /api/v1/secret-syncs/supabase/{syncId}/remove-secrets"
+---

docs/api-reference/endpoints/secret-syncs/supabase/sync-secrets.mdx

@@ -0,0 +1,4 @@
+---
+title: "Sync Secrets"
+openapi: "POST /api/v1/secret-syncs/supabase/{syncId}/sync-secrets"
+---

docs/api-reference/endpoints/secret-syncs/supabase/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/secret-syncs/supabase/{syncId}"
+---

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

@@ -2,3 +2,8 @@
 title: "Login"
 openapi: "POST /api/v1/auth/tls-cert-auth/login"
 ---
+
+<Warning>
+  Infisical US/EU and dedicated instances are deployed with AWS ALB. TLS Certificate Auth must flow through our ALB mTLS pass-through in order to authenticate.
+  When you are authenticating with TLS Certificate Auth, you must use the port `8443` instead of the default `443`. Example: `https://app.infisical.com:8443/api/v1/auth/tls-cert-auth/login`
+</Warning>

docs/docs.json

@@ -78,10 +78,7 @@
               },
               {
                 "group": "Infisical SSH",
-                "pages": [
-                  "documentation/platform/ssh/overview",
-                  "documentation/platform/ssh/host-groups"
-                ]
+                "pages": ["documentation/platform/ssh/overview", "documentation/platform/ssh/host-groups"]
               },
               {
                 "group": "Key Management (KMS)",
@@ -378,10 +375,7 @@
               },
               {
                 "group": "Architecture",
-                "pages": [
-                  "internals/architecture/components",
-                  "internals/architecture/cloud"
-                ]
+                "pages": ["internals/architecture/components", "internals/architecture/cloud"]
               },
               "internals/security",
               "internals/service-tokens"
@@ -491,6 +485,7 @@
                   "integrations/app-connections/postgres",
                   "integrations/app-connections/railway",
                   "integrations/app-connections/render",
+                  "integrations/app-connections/supabase",
                   "integrations/app-connections/teamcity",
                   "integrations/app-connections/terraform-cloud",
                   "integrations/app-connections/vercel",
@@ -528,6 +523,7 @@
                   "integrations/secret-syncs/oci-vault",
                   "integrations/secret-syncs/railway",
                   "integrations/secret-syncs/render",
+                  "integrations/secret-syncs/supabase",
                   "integrations/secret-syncs/teamcity",
                   "integrations/secret-syncs/terraform-cloud",
                   "integrations/secret-syncs/vercel",
@@ -555,10 +551,7 @@
               "integrations/cloud/gcp-secret-manager",
               {
                 "group": "Cloudflare",
-                "pages": [
-                  "integrations/cloud/cloudflare-pages",
-                  "integrations/cloud/cloudflare-workers"
-                ]
+                "pages": ["integrations/cloud/cloudflare-pages", "integrations/cloud/cloudflare-workers"]
               },
               "integrations/cloud/terraform-cloud",
               "integrations/cloud/databricks",
@@ -670,11 +663,7 @@
                   "cli/commands/reset",
                   {
                     "group": "infisical scan",
-                    "pages": [
-                      "cli/commands/scan",
-                      "cli/commands/scan-git-changes",
-                      "cli/commands/scan-install"
-                    ]
+                    "pages": ["cli/commands/scan", "cli/commands/scan-git-changes", "cli/commands/scan-install"]
                   }
                 ]
               },
@@ -998,9 +987,7 @@
                 "pages": [
                   {
                     "group": "Kubernetes",
-                    "pages": [
-                      "api-reference/endpoints/dynamic-secrets/kubernetes/create-lease"
-                    ]
+                    "pages": ["api-reference/endpoints/dynamic-secrets/kubernetes/create-lease"]
                   },
                   "api-reference/endpoints/dynamic-secrets/create",
                   "api-reference/endpoints/dynamic-secrets/update",
@@ -1557,6 +1544,18 @@
                       "api-reference/endpoints/app-connections/render/delete"
                     ]
                   },
+                  {
+                    "group": "Supabase",
+                    "pages": [
+                      "api-reference/endpoints/app-connections/supabase/list",
+                      "api-reference/endpoints/app-connections/supabase/available",
+                      "api-reference/endpoints/app-connections/supabase/get-by-id",
+                      "api-reference/endpoints/app-connections/supabase/get-by-name",
+                      "api-reference/endpoints/app-connections/supabase/create",
+                      "api-reference/endpoints/app-connections/supabase/update",
+                      "api-reference/endpoints/app-connections/supabase/delete"
+                    ]
+                  },
                   {
                     "group": "TeamCity",
                     "pages": [
@@ -1908,6 +1907,19 @@
                       "api-reference/endpoints/secret-syncs/render/remove-secrets"
                     ]
                   },
+                  {
+                    "group": "Supabase",
+                    "pages": [
+                      "api-reference/endpoints/secret-syncs/supabase/list",
+                      "api-reference/endpoints/secret-syncs/supabase/get-by-id",
+                      "api-reference/endpoints/secret-syncs/supabase/get-by-name",
+                      "api-reference/endpoints/secret-syncs/supabase/create",
+                      "api-reference/endpoints/secret-syncs/supabase/update",
+                      "api-reference/endpoints/secret-syncs/supabase/delete",
+                      "api-reference/endpoints/secret-syncs/supabase/sync-secrets",
+                      "api-reference/endpoints/secret-syncs/supabase/remove-secrets"
+                    ]
+                  },
                   {
                     "group": "TeamCity",
                     "pages": [

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

@@ -42,10 +42,14 @@ To be more specific:
   Most of the time, the Infisical server will be behind a load balancer or
   proxy. To propagate the TLS certificate from the load balancer to the
   instance, you can configure the TLS to send the client certificate as a header
-  that is set as an [environment
-  variable](/self-hosting/configuration/envars#param-identity-tls-cert-auth-client-certificate-header-key).
+  that is set as an [environment variable](/self-hosting/configuration/envars#param-identity-tls-cert-auth-client-certificate-header-key).
 </Accordion>
 
+<Note>
+  Infisical US/EU and dedicated instances are deployed with AWS ALB. TLS Certificate Auth must flow through our ALB mTLS pass-through in order to authenticate.
+  When you are authenticating with TLS Certificate Auth, you must use the port `8443` instead of the default `443`. Example: `https://app.infisical.com:8443/api/v1/auth/tls-cert-auth/login`
+</Note>
+
 ## Guide
 
 In the following steps, we explore how to create and use identities for your workloads and applications on TLS Certificate to
@@ -123,7 +127,7 @@ try {
   const clientCertificate = fs.readFileSync("client-cert.pem", "utf8");
   const clientKeyCertificate = fs.readFileSync("client-key.pem", "utf8");
 
-  const infisicalUrl = "https://app.infisical.com"; // or your self-hosted Infisical URL
+  const infisicalUrl = "https://app.infisical.com:8443"; // or your self-hosted Infisical URL
   const identityId = "<your-identity-id>";
 
   // Create HTTPS agent with client certificate and key

docs/integrations/app-connections/supabase.mdx

@@ -0,0 +1,107 @@
+---
+title: "Supabase Connection"
+description: "Learn how to configure a Supabase Connection for Infisical."
+---
+
+Infisical supports the use of [Personal Access Tokens](https://supabase.com/dashboard/account/tokens) to connect with Supabase.
+
+## Create a Supabase Personal Access Token
+
+<Steps>
+  <Step title="Click the profile image in the top-right corner and select 'Account Preferences'">
+    ![Account Preferences](/images/app-connections/supabase/app-connection-user-settings.png)
+  </Step>
+  <Step title="In the sidebar, select 'Access Tokens'">
+    ![Settings Page](/images/app-connections/supabase/app-connection-api-keys.png)
+  </Step>
+   <Step title="In the access tokens page, click on 'Generate New Token'">
+    ![Access Tokens Page](/images/app-connections/supabase/app-connection-create-api-key.png)
+  </Step>
+  <Step title="Enter a token name and click on 'Generate Token'">
+    Provide a descriptive name for the token.
+
+    ![Enter Name](/images/app-connections/supabase/app-connection-create-form.png)
+
+  </Step>
+  <Step title="Copy the generated token and save it">
+    ![Create Token](/images/app-connections/supabase/app-connection-key-generated.png)
+  </Step>
+</Steps>
+
+## Create a Supabase Connection in Infisical
+
+<Tabs>
+  <Tab title="Infisical UI">
+    <Steps>
+      <Step title="Navigate to App Connections">
+        In your Infisical dashboard, go to **Organization Settings** and open the [**App Connections**](https://app.infisical.com/organization/app-connections) tab.
+
+        ![App Connections Tab](/images/app-connections/general/add-connection.png)
+      </Step>
+      <Step title="Select Supabase Connection">
+        Click **+ Add Connection** and choose **Supabase Connection** from the list of integrations.
+
+        ![Select Supabase Connection](/images/app-connections/supabase/app-connection-option.png)
+      </Step>
+      <Step title="Fill out the Supabase Connection form">
+        Complete the form by providing:
+        - A descriptive name for the connection
+        - An optional description
+        - Supabase instance URL (e.g., `https://your-domain.com` or `https://api.supabase.com`)
+        - The Access Token value from the previous step
+
+        ![Supabase Connection Modal](/images/app-connections/supabase/app-connection-form.png)
+      </Step>
+      <Step title="Connection created">
+        After submitting the form, your **Supabase Connection** will be successfully created and ready to use with your Infisical projects.
+
+        ![Supabase Connection Created](/images/app-connections/supabase/app-connection-generated.png)
+      </Step>
+    </Steps>
+
+  </Tab>
+
+  <Tab title="API">
+    To create a Supabase Connection via API, send a request to the [Create Supabase Connection](/api-reference/endpoints/app-connections/supabase/create) endpoint.
+
+    ### Sample request
+
+    ```bash Request
+    curl    --request POST \
+            --url https://app.infisical.com/api/v1/app-connections/supabase \
+            --header 'Content-Type: application/json' \
+            --data '{
+                "name": "my-supabase-connection",
+                "method": "access-token",
+                "credentials": {
+                    "accessToken": "[Access Token]",
+                    "instanceUrl": "https://api.supabase.com"
+                }
+            }'
+    ```
+
+    ### Sample response
+
+    ```bash Response
+    {
+      "appConnection": {
+          "id": "e5d18aca-86f7-4026-a95e-efb8aeb0d8e6",
+          "name": "my-supabase-connection",
+          "description": null,
+          "version": 1,
+          "orgId": "6f03caa1-a5de-43ce-b127-95a145d3464c",
+          "createdAt": "2025-04-23T19:46:34.831Z",
+          "updatedAt": "2025-04-23T19:46:34.831Z",
+          "isPlatformManagedCredentials": false,
+          "credentialsHash": "7c2d371dec195f82a6a0d5b41c970a229cfcaf88e894a5b6395e2dbd0280661f",
+          "app": "supabase",
+          "method": "access-token",
+          "credentials": {
+            "instanceUrl": "https://api.supabase.com"
+          }
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>

docs/integrations/secret-syncs/supabase.mdx

@@ -0,0 +1,163 @@
+---
+title: "Supabase Sync"
+description: "Learn how to configure a Supabase Sync for Infisical."
+---
+
+**Prerequisites:**
+
+- Create a [Supabase Connection](/integrations/app-connections/supabase)
+
+<Tabs>
+    <Tab title="Infisical UI">
+        <Steps>
+            <Step title="Add Sync">
+                Navigate to **Project** > **Integrations** and select the **Secret Syncs** tab. Click on the **Add Sync** button.
+
+                ![Secret Syncs Tab](/images/secret-syncs/general/secret-sync-tab.png)
+            </Step>
+            <Step title="Select 'Supabase'">
+                ![Select Supabase](/images/secret-syncs/supabase/select-option.png)
+            </Step>
+            <Step title="Configure source">
+                Configure the **Source** from where secrets should be retrieved, then click **Next**.
+
+                ![Configure Source](/images/secret-syncs/supabase/sync-source.png)
+
+                - **Environment**: The project environment to retrieve secrets from.
+                - **Secret Path**: The folder path to retrieve secrets from.
+
+                <Tip>
+                    If you need to sync secrets from multiple folder locations, check out [secret imports](/documentation/platform/secret-reference#secret-imports).
+                </Tip>
+            </Step>
+            <Step title="Configure destination">
+                Configure the **Destination** to where secrets should be deployed, then click **Next**.
+
+                ![Configure Destination](/images/secret-syncs/supabase/sync-destination.png)
+
+                - **Supabase Connection**: The Supabase Connection to authenticate with.
+                - **Project**: The Supabase project to sync secrets to.
+            </Step>
+            <Step title="Configure Sync Options">
+                Configure the **Sync Options** to specify how secrets should be synced, then click **Next**.
+
+                ![Configure Options](/images/secret-syncs/supabase/sync-options.png)
+
+                - **Initial Sync Behavior**: Determines how Infisical should resolve the initial sync.
+                    - **Overwrite Destination Secrets**: Removes any secrets at the destination endpoint not present in Infisical.
+                    <Note>
+                        Supabase does not support importing secrets.
+                    </Note>
+                - **Key Schema**: Template that determines how secret names are transformed when syncing, using `{{secretKey}}` as a placeholder for the original secret name and `{{environment}}` for the environment.
+                <Note>
+                    We highly recommend using a Key Schema to ensure that Infisical only manages the specific keys you intend, keeping everything else untouched.
+                </Note>
+                - **Auto-Sync Enabled**: If enabled, secrets will automatically be synced from the source location when changes occur. Disable to enforce manual syncing only.
+                - **Disable Secret Deletion**: If enabled, Infisical will not remove secrets from the sync destination. Enable this option if you intend to manage some secrets manually outside of Infisical.
+            </Step>
+            <Step title="Configure details">
+                Configure the **Details** of your Supabase Sync, then click **Next**.
+
+                ![Configure Details](/images/secret-syncs/supabase/sync-details.png)
+
+                - **Name**: The name of your sync. Must be slug-friendly.
+                - **Description**: An optional description for your sync.
+            </Step>
+            <Step title="Review configuration">
+                Review your Supabase Sync configuration, then click **Create Sync**.
+
+                ![Review Configuration](/images/secret-syncs/supabase/sync-review.png)
+            </Step>
+            <Step title="Sync created">
+                If enabled, your Supabase Sync will begin syncing your secrets to the destination endpoint.
+
+                ![Sync Created](/images/secret-syncs/supabase/sync-created.png)
+            </Step>
+        </Steps>
+    </Tab>
+    <Tab title="API">
+        To create a **Supabase Sync**, make an API request to the [Create Supabase Sync](/api-reference/endpoints/secret-syncs/supabase/create) API endpoint.
+
+        ### Sample request
+
+        ```bash Request
+        curl    --request POST \
+                --url https://app.infisical.com/api/v1/secret-syncs/supabase \
+                --header 'Content-Type: application/json' \
+                --data '{
+                    "name": "my-supabase-sync",
+                    "projectId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                    "description": "an example sync",
+                    "connectionId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                    "environment": "dev",
+                    "secretPath": "/my-secrets",
+                    "isEnabled": true,
+                    "syncOptions": {
+                        "initialSyncBehavior": "overwrite-destination",
+                        "autoSyncEnabled": true,
+                        "disableSecretDeletion": false
+                    },
+                    "destinationConfig": {
+                        "projectId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                        "projectName": "Example Project"
+                    }
+                }'
+        ```
+
+        ### Sample response
+
+        ```bash Response
+        {
+            "secretSync": {
+                "id": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                "name": "my-supabase-sync",
+                "description": "an example sync",
+                "isEnabled": true,
+                "version": 1,
+                "folderId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                "connectionId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                "createdAt": "2023-11-07T05:31:56Z",
+                "updatedAt": "2023-11-07T05:31:56Z",
+                "syncStatus": "succeeded",
+                "lastSyncJobId": "123",
+                "lastSyncMessage": null,
+                "lastSyncedAt": "2023-11-07T05:31:56Z",
+                "importStatus": null,
+                "lastImportJobId": null,
+                "lastImportMessage": null,
+                "lastImportedAt": null,
+                "removeStatus": null,
+                "lastRemoveJobId": null,
+                "lastRemoveMessage": null,
+                "lastRemovedAt": null,
+                "syncOptions": {
+                    "initialSyncBehavior": "overwrite-destination",
+                    "autoSyncEnabled": true,
+                    "disableSecretDeletion": false
+                },
+                "projectId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                "connection": {
+                    "app": "supabase",
+                    "name": "my-supabase-connection",
+                    "id": "3c90c3cc-0d44-4b50-8888-8dd25736052a"
+                },
+                "environment": {
+                    "slug": "dev",
+                    "name": "Development",
+                    "id": "3c90c3cc-0d44-4b50-8888-8dd25736052a"
+                },
+                "folder": {
+                    "id": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                    "path": "/my-secrets"
+                },
+                "destination": "supabase",
+                "destinationConfig": {
+                    "projectId": "3c90c3cc-0d44-4b50-8888-8dd25736052a",
+                    "projectName": "Example Project"
+                }
+            }
+        }
+        ```
+    </Tab>
+
+</Tabs>

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

@@ -24,6 +24,7 @@ import { HumanitecSyncFields } from "./HumanitecSyncFields";
 import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
 import { RailwaySyncFields } from "./RailwaySyncFields";
 import { RenderSyncFields } from "./RenderSyncFields";
+import { SupabaseSyncFields } from "./SupabaseSyncFields";
 import { TeamCitySyncFields } from "./TeamCitySyncFields";
 import { TerraformCloudSyncFields } from "./TerraformCloudSyncFields";
 import { VercelSyncFields } from "./VercelSyncFields";
@@ -88,6 +89,8 @@ export const SecretSyncDestinationFields = () => {
       return <RailwaySyncFields />;
     case SecretSync.Checkly:
       return <ChecklySyncFields />;
+    case SecretSync.Supabase:
+      return <SupabaseSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

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

@@ -0,0 +1,65 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl } from "@app/components/v2";
+import {
+  TSupabaseProject,
+  useSupabaseConnectionListProjects
+} from "@app/hooks/api/appConnections/supabase";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const SupabaseSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Supabase }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+
+  const { data: projects = [], isPending: isProjectsLoading } = useSupabaseConnectionListProjects(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.projectName", "");
+          setValue("destinationConfig.projectId", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.projectId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Select a project"
+            tooltipClassName="max-w-md"
+          >
+            <FilterableSelect
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={projects.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TSupabaseProject>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.projectName", v?.name ?? "");
+              }}
+              options={projects}
+              placeholder="Select project..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -62,6 +62,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Zabbix:
     case SecretSync.Railway:
     case SecretSync.Checkly:
+    case SecretSync.Supabase:
       AdditionalSyncOptionsFieldsComponent = null;
       break;
     default:

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -34,6 +34,7 @@ import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
 import { OnePassSyncReviewFields } from "./OnePassSyncReviewFields";
 import { RailwaySyncReviewFields } from "./RailwaySyncReviewFields";
 import { RenderSyncReviewFields } from "./RenderSyncReviewFields";
+import { SupabaseSyncReviewFields } from "./SupabaseSyncReviewFields";
 import { TeamCitySyncReviewFields } from "./TeamCitySyncReviewFields";
 import { TerraformCloudSyncReviewFields } from "./TerraformCloudSyncReviewFields";
 import { VercelSyncReviewFields } from "./VercelSyncReviewFields";
@@ -140,6 +141,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.Checkly:
       DestinationFieldsComponent = <ChecklySyncReviewFields />;
       break;
+    case SecretSync.Supabase:
+      DestinationFieldsComponent = <SupabaseSyncReviewFields />;
+      break;
     default:
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SupabaseSyncReviewFields.tsx

@@ -0,0 +1,12 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const SupabaseSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Supabase }>();
+  const projectName = watch("destinationConfig.projectName");
+
+  return <GenericFieldLabel label="Project">{projectName}</GenericFieldLabel>;
+};

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -21,6 +21,7 @@ import { HumanitecSyncDestinationSchema } from "./humanitec-sync-destination-sch
 import { OCIVaultSyncDestinationSchema } from "./oci-vault-sync-destination-schema";
 import { RailwaySyncDestinationSchema } from "./railway-sync-destination-schema";
 import { RenderSyncDestinationSchema } from "./render-sync-destination-schema";
+import { SupabaseSyncDestinationSchema } from "./supabase-sync-destination-schema";
 import { TeamCitySyncDestinationSchema } from "./teamcity-sync-destination-schema";
 import { TerraformCloudSyncDestinationSchema } from "./terraform-cloud-destination-schema";
 import { VercelSyncDestinationSchema } from "./vercel-sync-destination-schema";
@@ -51,7 +52,7 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   GitlabSyncDestinationSchema,
   CloudflarePagesSyncDestinationSchema,
   CloudflareWorkersSyncDestinationSchema,
-
+  SupabaseSyncDestinationSchema,
   ZabbixSyncDestinationSchema,
   RailwaySyncDestinationSchema,
   ChecklySyncDestinationSchema

frontend/src/components/secret-syncs/forms/schemas/supabase-sync-destination-schema.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const SupabaseSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Supabase),
+    destinationConfig: z.object({
+      projectId: z.string().max(255).min(1, "Project ID is required"),
+      projectName: z.string().max(255).min(1, "Project Name is required")
+    })
+  })
+);

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -18,6 +18,7 @@ export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   popUpProps: PopoverProps;
   popUpContentProps: PopoverContentProps;
   dateFormat?: "PPP" | "PP" | "P"; // extend as needed
+  buttonClassName?: string;
 };
 
 // Doc: https://react-day-picker.js.org/
@@ -27,6 +28,7 @@ export const DatePicker = ({
   popUpProps,
   popUpContentProps,
   dateFormat = "PPP",
+  buttonClassName,
   ...props
 }: DatePickerProps) => {
   const [timeValue, setTimeValue] = useState<string>(value ? format(value, "HH:mm") : "00:00");
@@ -57,7 +59,11 @@ export const DatePicker = ({
   return (
     <Popover {...popUpProps}>
       <PopoverTrigger asChild>
-        <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
+        <Button
+          className={buttonClassName}
+          variant="outline_bg"
+          leftIcon={<FontAwesomeIcon icon={faCalendar} />}
+        >
           {value ? format(value, dateFormat) : "Pick a date and time"}
         </Button>
       </PopoverTrigger>

frontend/src/components/v2/Select/Select.tsx

@@ -19,6 +19,7 @@ type Props = {
   icon?: IconProp;
   isMulti?: boolean;
   iconClassName?: string;
+  dropdownContainerStyle?: React.CSSProperties;
 };
 
 export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;
@@ -35,6 +36,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       position,
       containerClassName,
       iconClassName,
+      dropdownContainerStyle,
       ...props
     },
     ref
@@ -82,7 +84,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                 dropdownContainerClassName
               )}
               position={position}
-              style={{ width: "var(--radix-select-trigger-width)" }}
+              style={dropdownContainerStyle ?? { width: "var(--radix-select-trigger-width)" }}
             >
               <SelectPrimitive.ScrollUpButton>
                 <div className="flex items-center justify-center">

frontend/src/helpers/appConnections.ts

@@ -46,6 +46,7 @@ import { HerokuConnectionMethod } from "@app/hooks/api/appConnections/types/hero
 import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-connection";
 import { RailwayConnectionMethod } from "@app/hooks/api/appConnections/types/railway-connection";
 import { RenderConnectionMethod } from "@app/hooks/api/appConnections/types/render-connection";
+import { SupabaseConnectionMethod } from "@app/hooks/api/appConnections/types/supabase-connection";
 
 export const APP_CONNECTION_MAP: Record<
   AppConnection,
@@ -96,7 +97,8 @@ export const APP_CONNECTION_MAP: Record<
   [AppConnection.Zabbix]: { name: "Zabbix", image: "Zabbix.png" },
   [AppConnection.Railway]: { name: "Railway", image: "Railway.png" },
   [AppConnection.Bitbucket]: { name: "Bitbucket", image: "Bitbucket.png" },
-  [AppConnection.Checkly]: { name: "Checkly", image: "Checkly.png" }
+  [AppConnection.Checkly]: { name: "Checkly", image: "Checkly.png" },
+  [AppConnection.Supabase]: { name: "Supabase", image: "Supabase.png" }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -151,6 +153,7 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case HerokuConnectionMethod.AuthToken:
       return { name: "Auth Token", icon: faKey };
     case RailwayConnectionMethod.AccountToken:
+    case SupabaseConnectionMethod.AccessToken:
       return { name: "Account Token", icon: faKey };
     case RailwayConnectionMethod.TeamToken:
       return { name: "Team Token", icon: faKey };

frontend/src/helpers/secretSyncs.ts

@@ -97,6 +97,10 @@ export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }
   [SecretSync.Checkly]: {
     name: "Checkly",
     image: "Checkly.png"
+  },
+  [SecretSync.Supabase]: {
+    name: "Supabase",
+    image: "Supabase.png"
   }
 };
 
@@ -124,7 +128,7 @@ export const SECRET_SYNC_CONNECTION_MAP: Record<SecretSync, AppConnection> = {
   [SecretSync.GitLab]: AppConnection.Gitlab,
   [SecretSync.CloudflarePages]: AppConnection.Cloudflare,
   [SecretSync.CloudflareWorkers]: AppConnection.Cloudflare,
-
+  [SecretSync.Supabase]: AppConnection.Supabase,
   [SecretSync.Zabbix]: AppConnection.Zabbix,
   [SecretSync.Railway]: AppConnection.Railway,
   [SecretSync.Checkly]: AppConnection.Checkly

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

@@ -31,5 +31,6 @@ export enum AppConnection {
   Bitbucket = "bitbucket",
   Zabbix = "zabbix",
   Railway = "railway",
-  Checkly = "checkly"
+  Checkly = "checkly",
+  Supabase = "supabase"
 }

frontend/src/hooks/api/appConnections/supabase/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/appConnections/supabase/queries.tsx

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { appConnectionKeys } from "@app/hooks/api/appConnections";
+
+import { TSupabaseProject } from "./types";
+
+const supabaseConnectionKeys = {
+  all: [...appConnectionKeys.all, "supabase"] as const,
+  listProjects: (connectionId: string) =>
+    [...supabaseConnectionKeys.all, "workspace-scopes", connectionId] as const
+};
+
+export const useSupabaseConnectionListProjects = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TSupabaseProject[],
+      unknown,
+      TSupabaseProject[],
+      ReturnType<typeof supabaseConnectionKeys.listProjects>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: supabaseConnectionKeys.listProjects(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ projects: TSupabaseProject[] }>(
+        `/api/v1/app-connections/supabase/${connectionId}/projects`
+      );
+
+      return data.projects;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/supabase/types.ts

@@ -0,0 +1,4 @@
+export type TSupabaseProject = {
+  id: string;
+  name: string;
+};

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -148,6 +148,10 @@ export type TChecklyConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Checkly;
 };
 
+export type TSupabaseConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Supabase;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
@@ -215,4 +219,5 @@ export type TAppConnectionOptionMap = {
   [AppConnection.Zabbix]: TZabbixConnectionOption;
   [AppConnection.Railway]: TRailwayConnectionOption;
   [AppConnection.Checkly]: TChecklyConnectionOption;
+  [AppConnection.Supabase]: TSupabaseConnectionOption;
 };

frontend/src/hooks/api/appConnections/types/index.ts

@@ -28,6 +28,7 @@ import { TOracleDBConnection } from "./oracledb-connection";
 import { TPostgresConnection } from "./postgres-connection";
 import { TRailwayConnection } from "./railway-connection";
 import { TRenderConnection } from "./render-connection";
+import { TSupabaseConnection } from "./supabase-connection";
 import { TTeamCityConnection } from "./teamcity-connection";
 import { TTerraformCloudConnection } from "./terraform-cloud-connection";
 import { TVercelConnection } from "./vercel-connection";
@@ -99,7 +100,8 @@ export type TAppConnection =
   | TBitbucketConnection
   | TZabbixConnection
   | TRailwayConnection
-  | TChecklyConnection;
+  | TChecklyConnection
+  | TSupabaseConnection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
 
@@ -160,4 +162,5 @@ export type TAppConnectionMap = {
   [AppConnection.Zabbix]: TZabbixConnection;
   [AppConnection.Railway]: TRailwayConnection;
   [AppConnection.Checkly]: TChecklyConnection;
+  [AppConnection.Supabase]: TSupabaseConnection;
 };

frontend/src/hooks/api/appConnections/types/supabase-connection.ts

@@ -0,0 +1,15 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum SupabaseConnectionMethod {
+  AccessToken = "access-token"
+}
+
+export type TSupabaseConnection = TRootAppConnection & {
+  app: AppConnection.Supabase;
+  method: SupabaseConnectionMethod.AccessToken;
+  credentials: {
+    instanceUrl?: string;
+    accessKey: string;
+  };
+};

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

@@ -57,6 +57,7 @@ export const useGetAuditLogs = (
     },
     getNextPageParam: (lastPage, pages) =>
       lastPage.length !== 0 ? pages.length * filters.limit : undefined,
+    placeholderData: (prev) => prev,
     ...options
   });
 };

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

@@ -22,7 +22,7 @@ export enum SecretSync {
   GitLab = "gitlab",
   CloudflarePages = "cloudflare-pages",
   CloudflareWorkers = "cloudflare-workers",
-
+  Supabase = "supabase",
   Zabbix = "zabbix",
   Railway = "railway",
   Checkly = "checkly"

frontend/src/hooks/api/secretSyncs/types/index.ts

@@ -22,6 +22,7 @@ import { THerokuSync } from "./heroku-sync";
 import { THumanitecSync } from "./humanitec-sync";
 import { TOCIVaultSync } from "./oci-vault-sync";
 import { TRailwaySync } from "./railway-sync";
+import { TSupabaseSync } from "./supabase";
 import { TTeamCitySync } from "./teamcity-sync";
 import { TTerraformCloudSync } from "./terraform-cloud-sync";
 import { TVercelSync } from "./vercel-sync";
@@ -61,7 +62,8 @@ export type TSecretSync =
   | TCloudflareWorkersSync
   | TZabbixSync
   | TRailwaySync
-  | TChecklySync;
+  | TChecklySync
+  | TSupabaseSync;
 
 export type TListSecretSyncs = { secretSyncs: TSecretSync[] };
 

frontend/src/hooks/api/secretSyncs/types/supabase.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
+
+export type TSupabaseSync = TRootSecretSync & {
+  destination: SecretSync.Supabase;
+  destinationConfig: {
+    projectId: string;
+    projectName: string;
+  };
+  connection: {
+    app: AppConnection.Supabase;
+    name: string;
+    id: string;
+  };
+};

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

@@ -17,8 +17,8 @@ export type SubscriptionPlan = {
   rbac: boolean;
   secretVersioning: boolean;
   slug: string;
-  secretApproval: string;
-  secretRotation: string;
+  secretApproval: boolean;
+  secretRotation: boolean;
   tier: number;
   workspaceLimit: number;
   workspacesUsed: number;

frontend/src/hooks/usePathAccessPolicies.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+
+import { useSubscription, useWorkspace } from "@app/context";
+import { useGetAccessApprovalPolicies } from "@app/hooks/api";
+
+const matchesPath = (folderPath: string, pattern: string) => {
+  const normalizedPath = folderPath === "/" ? "/" : folderPath.replace(/\/$/, "");
+  const normalizedPattern = pattern === "/" ? "/" : pattern.replace(/\/$/, "");
+
+  if (normalizedPath === normalizedPattern) {
+    return true;
+  }
+
+  if (normalizedPattern.endsWith("/**")) {
+    const basePattern = normalizedPattern.slice(0, -3); // Remove "/**"
+
+    // Handle root wildcard "/**"
+    if (basePattern === "") {
+      return true;
+    }
+
+    // Check if path starts with the base pattern
+    if (normalizedPath === basePattern) {
+      return true;
+    }
+
+    // Check if path is a subdirectory of the base pattern
+    return normalizedPath.startsWith(`${basePattern}/`);
+  }
+
+  return false;
+};
+
+type Params = {
+  secretPath: string;
+  environment: string;
+};
+
+export const usePathAccessPolicies = ({ secretPath, environment }: Params) => {
+  const { currentWorkspace } = useWorkspace();
+  const { subscription } = useSubscription();
+  const { data: policies } = useGetAccessApprovalPolicies({
+    projectSlug: currentWorkspace.slug,
+    options: {
+      enabled: subscription.secretApproval
+    }
+  });
+
+  return useMemo(() => {
+    const pathPolicies = policies?.filter(
+      (policy) =>
+        policy.environment.slug === environment && matchesPath(secretPath, policy.secretPath)
+    );
+
+    return {
+      hasPathPolicies: subscription.secretApproval && Boolean(pathPolicies?.length),
+      pathPolicies
+    };
+  }, [secretPath, environment, policies, subscription.secretApproval]);
+};

frontend/src/pages/cert-manager/AlertingPage/components/PkiAlertModal.tsx

@@ -31,10 +31,10 @@ enum TimeUnit {
 
 const schema = z.object({
   name: z.string().trim().min(1),
-  pkiCollectionId: z.string(),
-  alertBefore: z.string(),
+  pkiCollectionId: z.string().min(1),
+  alertBefore: z.string().min(1),
   alertUnit: z.nativeEnum(TimeUnit),
-  emails: z.string().trim()
+  emails: z.string().trim().min(1)
 });
 
 const convertToDays = (unit: TimeUnit, value: number) => {

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -37,6 +37,7 @@ import { OracleDBConnectionForm } from "./OracleDBConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
 import { RailwayConnectionForm } from "./RailwayConnectionForm";
 import { RenderConnectionForm } from "./RenderConnectionForm";
+import { SupabaseConnectionForm } from "./SupabaseConnectionForm";
 import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
 import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
 import { VercelConnectionForm } from "./VercelConnectionForm";
@@ -146,6 +147,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <RailwayConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Checkly:
       return <ChecklyConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Supabase:
+      return <SupabaseConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -248,6 +251,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <RailwayConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Checkly:
       return <ChecklyConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Supabase:
+      return <SupabaseConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     default:
       throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
   }

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/SupabaseConnectionForm.tsx

@@ -0,0 +1,159 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import {
+  SupabaseConnectionMethod,
+  TSupabaseConnection
+} from "@app/hooks/api/appConnections/types/supabase-connection";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TSupabaseConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Supabase)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(SupabaseConnectionMethod.AccessToken),
+    credentials: z.object({
+      accessKey: z.string().trim().min(1, "Access Key required"),
+      instanceUrl: z.string().url().optional()
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const SupabaseConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Supabase,
+      method: SupabaseConnectionMethod.AccessToken
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="credentials.instanceUrl"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              isOptional
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Instance URL"
+              tooltipClassName="max-w-sm"
+              tooltipText="Will default to Supabase Cloud if not specified."
+            >
+              <Input
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder="https://api.supabase.com"
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The type of token you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Supabase].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Token Type"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(SupabaseConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.accessKey"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Access Key Value"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Supabase"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx

@@ -18,7 +18,7 @@ export const AuditLogsPage = () => {
             title="Audit logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />
-          <LogsSection />
+          <LogsSection pageView />
         </div>
       </div>
     </div>

frontend/src/pages/organization/AuditLogsPage/components/LogsDateFilter.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faArrowRight, faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faCalendar, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
@@ -22,15 +22,26 @@ import {
 import {
   auditLogDateFilterFormSchema,
   AuditLogDateFilterType,
-  TAuditLogDateFilterFormData
+  TAuditLogDateFilterFormData,
+  Timezone
 } from "./types";
 
 type Props = {
   setFilter: (data: TAuditLogDateFilterFormData) => void;
   filter: TAuditLogDateFilterFormData;
+  setTimezone: (timezone: Timezone) => void;
+  timezone: Timezone;
 };
 const RELATIVE_VALUES = ["5m", "30m", "1h", "3h", "12h"];
-export const LogsDateFilter = ({ setFilter, filter }: Props) => {
+
+const RELATIVE_OPTIONS = [
+  { label: "Minutes", unit: "m", values: [5, 10, 15, 30, 45] },
+  { label: "Hours", unit: "h", values: [1, 2, 3, 6, 8, 12] },
+  { label: "Days", unit: "d", values: [1, 2, 3, 4, 5, 6] },
+  { label: "Weeks", unit: "w", values: [1, 2, 3, 4] }
+];
+
+export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Props) => {
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
   const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
   const [isPopupOpen, setIsPopOpen] = useState(false);
@@ -59,154 +70,244 @@ export const LogsDateFilter = ({ setFilter, filter }: Props) => {
   };
 
   return (
-    <DropdownMenu open={isPopupOpen} onOpenChange={(el) => setIsPopOpen(el)}>
-      <div className="mr-2 flex items-center">
-        {filter.type === AuditLogDateFilterType.Relative ? (
-          <>
-            {RELATIVE_VALUES.map((el) => (
-              <Button
-                variant="outline_bg"
-                className={twMerge(
-                  "rounded-none px-3 py-2 first:rounded-l-md",
-                  filter.type === AuditLogDateFilterType.Relative &&
-                    filter.relativeModeValue === el &&
-                    "border-primary/40 bg-primary/[0.1]"
-                )}
-                key={`${el}-relative`}
-                onClick={() =>
-                  setFilter({
-                    relativeModeValue: el,
-                    type: AuditLogDateFilterType.Relative,
-                    endDate: new Date(),
-                    startDate: new Date(Number(new Date()) - ms(el))
-                  })
-                }
-              >
-                {el}
-              </Button>
-            ))}
-          </>
-        ) : (
-          <>
-            <div className="rounded-l-md border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
-              {format(filter.startDate, "yyyy-MM-dd HH:mm")}
-            </div>
-            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
-              <FontAwesomeIcon icon={faChevronRight} />
-            </div>
-            <div className="border border-transparent bg-mineshaft-600 px-3 py-2 text-sm text-bunker-200">
-              {format(filter.endDate, "yyyy-MM-dd HH:mm")}
-            </div>
-          </>
-        )}
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="outline_bg"
-            className={twMerge(
-              "rounded-none rounded-r-md px-3 py-2",
-              (filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
-                "border-primary/40 bg-primary/[0.1]"
-            )}
-          >
-            <FontAwesomeIcon icon={faCalendar} />
-            {filter.type === AuditLogDateFilterType.Relative && isCustomRelative && (
-              <span className="ml-1">({filter.relativeModeValue})</span>
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-      </div>
-      <DropdownMenuContent className="min-w-80 p-4" align="center" alignOffset={16}>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Controller
-            control={control}
-            name="type"
-            render={({ field }) => (
-              <FormControl className="mb-2 w-full">
-                <Select
-                  value={field.value}
-                  onValueChange={(el) => field.onChange(el)}
-                  className="w-full"
+    <>
+      <DropdownMenu open={isPopupOpen} onOpenChange={(el) => setIsPopOpen(el)}>
+        <div className="flex items-center">
+          {filter.type === AuditLogDateFilterType.Relative ? (
+            <>
+              {RELATIVE_VALUES.map((el) => (
+                <Button
+                  variant="outline_bg"
+                  className={twMerge(
+                    "w-[3.82rem] rounded-none px-3 py-2 font-normal first:rounded-l-md",
+                    filter.type === AuditLogDateFilterType.Relative &&
+                      filter.relativeModeValue === el &&
+                      "border-primary/40 bg-primary/[0.1]"
+                  )}
+                  key={`${el}-relative`}
+                  onClick={() =>
+                    setFilter({
+                      relativeModeValue: el,
+                      type: AuditLogDateFilterType.Relative,
+                      endDate: new Date(),
+                      startDate: new Date(Number(new Date()) - ms(el))
+                    })
+                  }
                 >
-                  <SelectItem value={AuditLogDateFilterType.Relative}>Relative</SelectItem>
-                  <SelectItem value={AuditLogDateFilterType.Absolute}>Absolute</SelectItem>
-                </Select>
-              </FormControl>
-            )}
-          />
-          {selectType === AuditLogDateFilterType.Relative && (
+                  {el}
+                </Button>
+              ))}
+            </>
+          ) : (
+            <div className="flex w-[19.1rem] items-center justify-between rounded-l-md border border-transparent bg-mineshaft-600 px-5 py-2 text-sm text-bunker-200">
+              <div>{format(filter.startDate, "yyyy-MM-dd HH:mm")}</div>
+              <div>
+                <FontAwesomeIcon className="text-bunker-300" size="sm" icon={faChevronRight} />
+              </div>
+              <div>{format(filter.endDate, "yyyy-MM-dd HH:mm")}</div>
+            </div>
+          )}
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline_bg"
+              className={twMerge(
+                "w-[8rem] rounded-none rounded-r-md px-3 py-2 font-normal",
+                (filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
+                  "border-primary/40 bg-primary/[0.1]"
+              )}
+            >
+              <span>Custom</span> <FontAwesomeIcon className="ml-1" icon={faCalendar} />
+              {filter.type === AuditLogDateFilterType.Relative && isCustomRelative && (
+                <span className="ml-1">({filter.relativeModeValue})</span>
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+        </div>
+        <DropdownMenuContent
+          className="!min-w-[434px] bg-mineshaft-800 p-4"
+          align="end"
+          sideOffset={8}
+        >
+          <form onSubmit={handleSubmit(onSubmit)}>
             <Controller
               control={control}
-              name="relativeModeValue"
+              name="type"
               render={({ field }) => (
-                <FormControl className="mb-0 w-full" helperText="Example: 1h, 1d, 2d">
-                  <Input {...field} value={field.value || ""} />
-                </FormControl>
+                <div className="mb-7">
+                  <Button
+                    onClick={() => field.onChange(AuditLogDateFilterType.Absolute)}
+                    variant="outline_bg"
+                    className={twMerge(
+                      "h-8 rounded-r-none font-normal",
+                      field.value === AuditLogDateFilterType.Absolute &&
+                        "border-primary/40 bg-primary/[0.1]"
+                    )}
+                  >
+                    Absolute
+                  </Button>
+                  <Button
+                    onClick={() => field.onChange(AuditLogDateFilterType.Relative)}
+                    variant="outline_bg"
+                    className={twMerge(
+                      "h-8 rounded-l-none font-normal",
+                      field.value === AuditLogDateFilterType.Relative &&
+                        "border-primary/40 bg-primary/[0.1]"
+                    )}
+                  >
+                    Relative
+                  </Button>
+                </div>
               )}
             />
-          )}
-          {selectType === AuditLogDateFilterType.Absolute && (
-            <div className="mb-2 flex h-10 w-full items-center justify-between gap-2">
+            {selectType === AuditLogDateFilterType.Relative && (
               <Controller
-                name="startDate"
                 control={control}
-                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                name="relativeModeValue"
+                render={({ field }) => {
+                  const duration = field.value?.substring(0, field.value.length - 1);
+                  const unitOfTime = field.value?.at(-1);
                   return (
-                    <FormControl
-                      className="relative top-2"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <DatePicker
-                        value={field.value || undefined}
-                        onChange={onChange}
-                        dateFormat="P"
-                        popUpProps={{
-                          open: isStartDatePickerOpen,
-                          onOpenChange: setIsStartDatePickerOpen
-                        }}
-                        popUpContentProps={{}}
-                      />
-                    </FormControl>
+                    <div className="flex flex-col gap-4">
+                      {RELATIVE_OPTIONS.map(({ label, unit, values }) => (
+                        <div key={unit} className="flex items-center gap-2">
+                          <div className="w-16">{label}</div>
+                          {values.map((v) => {
+                            const value = `${v}${unit}`;
+                            return (
+                              <Button
+                                key={value}
+                                variant="outline_bg"
+                                onClick={() => field.onChange(value)}
+                                className={twMerge(
+                                  "h-8 w-12",
+                                  field.value === value && "border-primary/40 bg-primary/[0.1]"
+                                )}
+                              >
+                                {v}
+                              </Button>
+                            );
+                          })}
+                        </div>
+                      ))}
+                      <div className="flex items-center gap-2">
+                        <FormControl className="mb-0 w-28" label="Duration">
+                          <Input
+                            type="number"
+                            value={duration || "1"}
+                            onChange={(val) => field.onChange(`${val}${unitOfTime}`)}
+                            max={60}
+                            min={1}
+                          />
+                        </FormControl>
+                        <FormControl className="mb-0 w-36" label="Unit of Time">
+                          <Select
+                            value={unitOfTime}
+                            onValueChange={(val) => field.onChange(`${duration}${val}`)}
+                            className="w-full"
+                            position="popper"
+                          >
+                            {RELATIVE_OPTIONS.map((opt) => (
+                              <SelectItem value={opt.unit}>{opt.label}</SelectItem>
+                            ))}
+                          </Select>
+                        </FormControl>
+                      </div>
+                    </div>
                   );
                 }}
               />
-              <div className="flex items-center -space-x-3">
-                <div className="h-[2px] w-[20px] rounded-full bg-mineshaft-500" />
-                <FontAwesomeIcon icon={faArrowRight} className="text-mineshaft-500" />
+            )}
+            {selectType === AuditLogDateFilterType.Absolute && (
+              <div className="flex h-10 w-full items-center justify-between gap-2">
+                <Controller
+                  name="startDate"
+                  control={control}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        className="relative top-2"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        label="Start Date"
+                      >
+                        <DatePicker
+                          value={field.value || undefined}
+                          onChange={onChange}
+                          dateFormat="P"
+                          buttonClassName="w-44 h-8 font-normal"
+                          popUpProps={{
+                            open: isStartDatePickerOpen,
+                            onOpenChange: setIsStartDatePickerOpen
+                          }}
+                          popUpContentProps={{}}
+                        />
+                      </FormControl>
+                    );
+                  }}
+                />
+                <FontAwesomeIcon
+                  icon={faChevronRight}
+                  size="xs"
+                  className="mt-6 text-mineshaft-400"
+                />
+                <Controller
+                  name="endDate"
+                  control={control}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        className="relative top-2"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        label="End Date"
+                      >
+                        <DatePicker
+                          value={field.value || undefined}
+                          onChange={onChange}
+                          dateFormat="P"
+                          buttonClassName="w-44 h-8 font-normal"
+                          popUpProps={{
+                            open: isEndDatePickerOpen,
+                            onOpenChange: setIsEndDatePickerOpen
+                          }}
+                          popUpContentProps={{}}
+                        />
+                      </FormControl>
+                    );
+                  }}
+                />
               </div>
-              <Controller
-                name="endDate"
-                control={control}
-                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-                  return (
-                    <FormControl
-                      className="relative top-2"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <DatePicker
-                        value={field.value || undefined}
-                        onChange={onChange}
-                        dateFormat="P"
-                        popUpProps={{
-                          open: isEndDatePickerOpen,
-                          onOpenChange: setIsEndDatePickerOpen
-                        }}
-                        popUpContentProps={{}}
-                      />
-                    </FormControl>
-                  );
-                }}
-              />
+            )}
+            <div className="mt-8 w-full justify-end">
+              <Button
+                size="sm"
+                type="submit"
+                className="h-9 w-24 font-normal"
+                variant="outline_bg"
+                isDisabled={!formState.isDirty}
+              >
+                Apply
+              </Button>
             </div>
-          )}
-          <div className="mt-4">
-            <Button size="xs" type="submit" isDisabled={!formState.isDirty}>
-              Apply
-            </Button>
-          </div>
-        </form>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          </form>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Select
+        value={timezone}
+        onValueChange={(val) => setTimezone(val as Timezone)}
+        className="w-[10.6rem] border !border-mineshaft-500 !bg-mineshaft-600 capitalize"
+        dropdownContainerClassName="max-w-none"
+        position="popper"
+        dropdownContainerStyle={{
+          width: "100%"
+        }}
+      >
+        {Object.values(Timezone).map((tz) => (
+          <SelectItem value={tz} className="capitalize" key={tz}>
+            {tz} Timezone
+          </SelectItem>
+        ))}
+      </Select>
+    </>
   );
 };

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -13,17 +15,19 @@ import {
   AuditLogDateFilterType,
   Presets,
   TAuditLogDateFilterFormData,
-  TAuditLogFilterFormData
+  TAuditLogFilterFormData,
+  Timezone
 } from "./types";
 
 type Props = {
   presets?: Presets;
   refetchInterval?: number;
   showFilters?: boolean;
+  pageView?: boolean;
 };
 
 export const LogsSection = withPermission(
-  ({ presets, refetchInterval, showFilters = true }: Props) => {
+  ({ presets, refetchInterval, showFilters = true, pageView = false }: Props) => {
     const { subscription } = useSubscription();
 
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
@@ -31,6 +35,8 @@ export const LogsSection = withPermission(
       eventType: presets?.eventType || [],
       actor: presets?.actorId
     });
+    const [timezone, setTimezone] = useState<Timezone>(Timezone.Local);
+
     const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>({
       startDate: new Date(Number(new Date()) - ms("1h")),
       endDate: new Date(),
@@ -43,10 +49,85 @@ export const LogsSection = withPermission(
         handlePopUpOpen("upgradePlan");
       }
     }, [subscription]);
+
+    if (pageView)
+      return (
+        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
+            <div>
+              <div className="flex items-center gap-1 whitespace-nowrap">
+                <p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
+                <a
+                  href="https://infisical.com/docs/documentation/platform/audit-logs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <div className="ml-1 mt-[0.1rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                    <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                    <span>Docs</span>
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      className="mb-[0.07rem] ml-1.5 text-[10px]"
+                    />
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+              {showFilters && (
+                <LogsDateFilter
+                  filter={dateFilter}
+                  setFilter={setDateFilter}
+                  timezone={timezone}
+                  setTimezone={setTimezone}
+                />
+              )}
+              {showFilters && (
+                <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
+              )}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <LogsTable
+              refetchInterval={refetchInterval}
+              filter={{
+                secretPath: logFilter.secretPath || undefined,
+                secretKey: logFilter.secretKey || undefined,
+                eventMetadata: logFilter?.eventMetadata,
+                projectId: logFilter?.project?.id,
+                actorType: presets?.actorType,
+                limit: 15,
+                eventType: logFilter?.eventType,
+                userAgentType: logFilter?.userAgentType,
+                startDate: dateFilter?.startDate,
+                endDate: dateFilter?.endDate,
+                environment: logFilter?.environment?.slug,
+                actor: logFilter?.actor
+              }}
+              timezone={timezone}
+            />
+            <UpgradePlanModal
+              isOpen={popUp.upgradePlan.isOpen}
+              onOpenChange={(isOpen) => {
+                handlePopUpToggle("upgradePlan", isOpen);
+              }}
+              text="You can use audit logs if you switch to a paid Infisical plan."
+            />
+          </div>
+        </div>
+      );
+
     return (
       <div className="space-y-2">
         <div className="flex w-full justify-end">
-          {showFilters && <LogsDateFilter filter={dateFilter} setFilter={setDateFilter} />}
+          {showFilters && (
+            <LogsDateFilter
+              filter={dateFilter}
+              setFilter={setDateFilter}
+              timezone={timezone}
+              setTimezone={setTimezone}
+            />
+          )}
           {showFilters && (
             <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
           )}
@@ -67,6 +148,7 @@ export const LogsSection = withPermission(
             environment: logFilter?.environment?.slug,
             actor: logFilter?.actor
           }}
+          timezone={timezone}
         />
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}

frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from "react";
-import { faFile, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFile } from "@fortawesome/free-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
 
 import {
@@ -14,22 +13,23 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
 import { useGetAuditLogs } from "@app/hooks/api";
 import { TGetAuditLogsFilter } from "@app/hooks/api/auditLogs/types";
 
 import { LogsTableRow } from "./LogsTableRow";
+import { Timezone } from "./types";
 
 type Props = {
   filter: TGetAuditLogsFilter;
   refetchInterval?: number;
+  timezone: Timezone;
 };
 
 const AUDIT_LOG_LIMIT = 30;
 
-export const LogsTable = ({ filter, refetchInterval }: Props) => {
+export const LogsTable = ({ filter, refetchInterval, timezone }: Props) => {
   // Determine the project ID for filtering
   const filterProjectId =
     // Use the projectId from the filter if it exists
@@ -57,16 +57,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
               <Th className="w-24">
                 <Spinner size="xs" className={twMerge(isPending ? "opacity-100" : "opacity-0")} />
               </Th>
-              <Th className="w-64">
-                Timestamp
-                <Tooltip
-                  className="normal-case"
-                  content="Time displayed in your system's time zone."
-                  sideOffset={10}
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} className="ml-1" />
-                </Tooltip>
-              </Th>
+              <Th className="w-64">Timestamp</Th>
               <Th>Event</Th>
             </Tr>
           </THead>
@@ -79,6 +70,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
                       rowNumber={index + i * AUDIT_LOG_LIMIT + 1}
                       auditLog={auditLog}
                       key={`audit-log-${auditLog.id}`}
+                      timezone={timezone}
                     />
                   ))}
                 </Fragment>
@@ -96,7 +88,7 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
       </TableContainer>
       {!isEmpty && (
         <Button
-          className="mb-20 mt-4 px-4 py-3 text-sm"
+          className="mt-4 px-4 py-3 text-sm"
           isFullWidth
           variant="outline_bg"
           isLoading={isFetchingNextPage}

frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx

@@ -7,9 +7,12 @@ import { useToggle } from "@app/hooks";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
 import { AuditLog } from "@app/hooks/api/auditLogs/types";
 
+import { Timezone } from "./types";
+
 type Props = {
   auditLog: AuditLog;
   rowNumber: number;
+  timezone: Timezone;
 };
 
 type TagProps = {
@@ -27,7 +30,17 @@ const Tag = ({ label, value }: TagProps) => {
   );
 };
 
-export const LogsTableRow = ({ auditLog, rowNumber }: Props) => {
+const formatDateTime = (timestamp: string | Date, timezone: Timezone) => {
+  const date = new Date(timestamp);
+
+  if (timezone === Timezone.UTC) {
+    const utcDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
+    return `${format(utcDate, "MMM do yyyy, hh:mm a")} UTC`;
+  }
+  return format(date, "MMM do yyyy, hh:mm a");
+};
+
+export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
   const [isOpen, setIsOpen] = useToggle();
 
   return (
@@ -46,9 +59,7 @@ export const LogsTableRow = ({ auditLog, rowNumber }: Props) => {
           <FontAwesomeIcon icon={isOpen ? faCaretDown : faCaretRight} />
           {rowNumber}
         </Td>
-        <Td className="align-top">
-          {format(new Date(auditLog.createdAt), "MMM do yyyy, hh:mm a")}
-        </Td>
+        <Td className="align-top">{formatDateTime(auditLog.createdAt, timezone)}</Td>
         <Td>
           <div className="flex flex-wrap gap-4 text-sm">
             <Tag label="event" value={auditLog.event.type} />