Merge branch 'main' into feat/remindersImprovement

frontend/src/components/auth/UserInfoStep.tsx

@@ -5,9 +5,8 @@ import { useTranslation } from "react-i18next";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import jsrp from "jsrp";
-import nacl from "tweetnacl";
-import { encodeBase64 } from "tweetnacl-util";
 
+import { useServerConfig } from "@app/context";
 import { initProjectHelper } from "@app/helpers/project";
 import { completeAccountSignup, useSelectOrganization } from "@app/hooks/api/auth/queries";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
@@ -16,7 +15,7 @@ import { onRequestError } from "@app/hooks/api/reactQuery";
 import InputField from "../basic/InputField";
 import checkPassword from "../utilities/checks/password/checkPassword";
 import Aes256Gcm from "../utilities/cryptography/aes-256-gcm";
-import { deriveArgonKey } from "../utilities/cryptography/crypto";
+import { deriveArgonKey, generateKeyPair } from "../utilities/cryptography/crypto";
 import { saveTokenToLocalStorage } from "../utilities/saveTokenToLocalStorage";
 import SecurityClient from "../utilities/SecurityClient";
 import { Button, Input } from "../v2";
@@ -77,6 +76,7 @@ export default function UserInfoStep({
 }: UserInfoStepProps): JSX.Element {
   const [nameError, setNameError] = useState(false);
   const [organizationNameError, setOrganizationNameError] = useState(false);
+  const { config } = useServerConfig();
 
   const [errors, setErrors] = useState<Errors>({});
 
@@ -109,12 +109,9 @@ export default function UserInfoStep({
 
     if (!errorCheck) {
       // Generate a random pair of a public and a private key
-      const pair = nacl.box.keyPair();
-      const secretKeyUint8Array = pair.secretKey;
-      const publicKeyUint8Array = pair.publicKey;
-      const privateKey = encodeBase64(secretKeyUint8Array);
-      const publicKey = encodeBase64(publicKeyUint8Array);
-      localStorage.setItem("PRIVATE_KEY", privateKey);
+      const pair = await generateKeyPair(config.fipsEnabled);
+
+      localStorage.setItem("PRIVATE_KEY", pair.privateKey);
 
       client.init(
         {
@@ -145,7 +142,7 @@ export default function UserInfoStep({
                 iv: encryptedPrivateKeyIV,
                 tag: encryptedPrivateKeyTag
               } = Aes256Gcm.encrypt({
-                text: privateKey,
+                text: pair.privateKey,
                 secret: key
               });
 
@@ -168,7 +165,7 @@ export default function UserInfoStep({
                 protectedKey,
                 protectedKeyIV,
                 protectedKeyTag,
-                publicKey,
+                publicKey: pair.publicKey,
                 encryptedPrivateKey,
                 encryptedPrivateKeyIV,
                 encryptedPrivateKeyTag,
@@ -189,11 +186,11 @@ export default function UserInfoStep({
               }
 
               saveTokenToLocalStorage({
-                publicKey,
+                publicKey: pair.publicKey,
                 encryptedPrivateKey,
                 iv: encryptedPrivateKeyIV,
                 tag: encryptedPrivateKeyTag,
-                privateKey
+                privateKey: pair.privateKey
               });
 
               const userOrgs = await fetchOrganizations();

frontend/src/components/navigation/NavHeader.tsx

@@ -151,7 +151,7 @@ export default function NavHeader({
                 <div className="flex items-center space-x-2">
                   <span
                     className={twMerge(
-                      "text-sm font-semibold transition-all",
+                      "text-sm transition-all",
                       isHoveringCopyButton ? "text-bunker-200" : "text-bunker-300"
                     )}
                   >
@@ -198,7 +198,7 @@ export default function NavHeader({
                   }}
                   search={(query) => ({ ...query, secretPath: newSecretPath })}
                   className={twMerge(
-                    "text-sm font-semibold transition-all hover:text-primary",
+                    "text-sm transition-all hover:text-primary",
                     isHoveringCopyButton ? "text-primary" : "text-primary/80"
                   )}
                 >

frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx

@@ -38,7 +38,7 @@ export const SecretDashboardPathBreadcrumb = ({
         <div className="group flex items-center space-x-2">
           <span
             className={twMerge(
-              "text-sm font-semibold transition-all",
+              "text-sm transition-all",
               isCopying ? "text-bunker-200" : "text-bunker-300"
             )}
           >
@@ -77,7 +77,7 @@ export const SecretDashboardPathBreadcrumb = ({
           }}
           search={(query) => ({ ...query, secretPath: newSecretPath })}
           className={twMerge(
-            "text-sm font-semibold transition-all hover:text-primary",
+            "text-sm transition-all hover:text-primary",
             isCopying && "text-primary"
           )}
         >

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -63,6 +63,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
           const { image, name } = SECRET_SYNC_MAP[destination];
           return (
             <button
+              key={name}
               type="button"
               onClick={() =>
                 enterprise && !subscription.enterpriseSecretSyncs

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

@@ -60,7 +60,7 @@ export const CreateSecretSyncForm = ({ destination, onComplete, onCancel }: Prop
           ? undefined
           : SecretSyncInitialSyncBehavior.OverwriteDestination
       }
-    },
+    } as Partial<TSecretSyncForm>,
     reValidateMode: "onChange"
   });
 

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ChecklySyncFields.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 {
+  TChecklyAccount,
+  useChecklyConnectionListAccounts
+} from "@app/hooks/api/appConnections/checkly";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const ChecklySyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Checkly }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+
+  const { data: accounts = [], isPending: isAccountsLoading } = useChecklyConnectionListAccounts(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.accountId", "");
+          setValue("destinationConfig.accountName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.accountId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Select an account"
+            tooltipClassName="max-w-md"
+          >
+            <FilterableSelect
+              isLoading={isAccountsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={accounts.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TChecklyAccount>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.accountName", v?.name ?? "");
+              }}
+              options={accounts}
+              placeholder="Select an account..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

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

@@ -4,7 +4,7 @@ import { SingleValue } from "react-select";
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
 import { FilterableSelect, FormControl, Select, SelectItem } from "@app/components/v2";
 import {
-  TCloudflareProject,
+  TCloudflarePagesProject,
   useCloudflareConnectionListPagesProjects
 } from "@app/hooks/api/appConnections/cloudflare";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
@@ -52,7 +52,7 @@ export const CloudflarePagesSyncFields = () => {
               isDisabled={!connectionId}
               value={projects ? (projects.find((project) => project.name === value) ?? []) : []}
               onChange={(option) => {
-                onChange((option as SingleValue<TCloudflareProject>)?.name ?? null);
+                onChange((option as SingleValue<TCloudflarePagesProject>)?.name ?? null);
               }}
               options={projects}
               placeholder="Select a project..."

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

@@ -0,0 +1,59 @@
+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 {
+  TCloudflareWorkersScript,
+  useCloudflareConnectionListWorkersScripts
+} from "@app/hooks/api/appConnections/cloudflare";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const CloudflareWorkersSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.CloudflareWorkers }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+
+  const { data: scripts = [], isPending: isScriptsPending } =
+    useCloudflareConnectionListWorkersScripts(connectionId, {
+      enabled: Boolean(connectionId)
+    });
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.scriptId", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.scriptId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            label="Worker Script"
+          >
+            <FilterableSelect
+              isLoading={isScriptsPending && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={scripts?.find((script) => script.id === value) || []}
+              onChange={(option) => {
+                onChange((option as SingleValue<TCloudflareWorkersScript>)?.id ?? null);
+              }}
+              options={scripts}
+              placeholder="Select a worker script..."
+              getOptionLabel={(option) => option.id}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

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

@@ -10,7 +10,9 @@ import { AzureAppConfigurationSyncFields } from "./AzureAppConfigurationSyncFiel
 import { AzureDevOpsSyncFields } from "./AzureDevOpsSyncFields";
 import { AzureKeyVaultSyncFields } from "./AzureKeyVaultSyncFields";
 import { CamundaSyncFields } from "./CamundaSyncFields";
+import { ChecklySyncFields } from "./ChecklySyncFields";
 import { CloudflarePagesSyncFields } from "./CloudflarePagesSyncFields";
+import { CloudflareWorkersSyncFields } from "./CloudflareWorkersSyncFields";
 import { DatabricksSyncFields } from "./DatabricksSyncFields";
 import { FlyioSyncFields } from "./FlyioSyncFields";
 import { GcpSyncFields } from "./GcpSyncFields";
@@ -22,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";
@@ -78,10 +81,16 @@ export const SecretSyncDestinationFields = () => {
       return <GitLabSyncFields />;
     case SecretSync.CloudflarePages:
       return <CloudflarePagesSyncFields />;
+    case SecretSync.CloudflareWorkers:
+      return <CloudflareWorkersSyncFields />;
     case SecretSync.Zabbix:
       return <ZabbixSyncFields />;
     case SecretSync.Railway:
       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

@@ -58,8 +58,11 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Flyio:
     case SecretSync.GitLab:
     case SecretSync.CloudflarePages:
+    case SecretSync.CloudflareWorkers:
     case SecretSync.Zabbix:
     case SecretSync.Railway:
+    case SecretSync.Checkly:
+    case SecretSync.Supabase:
       AdditionalSyncOptionsFieldsComponent = null;
       break;
     default:

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

@@ -11,7 +11,9 @@ export const AzureDevOpsSyncReviewFields = () => {
 
   return (
     <>
-      <GenericFieldLabel label="Project">{devopsProjectName}</GenericFieldLabel>
+      {devopsProjectName && (
+        <GenericFieldLabel label="Project">{devopsProjectName}</GenericFieldLabel>
+      )}
       <GenericFieldLabel label="Project ID">{devopsProjectId}</GenericFieldLabel>
     </>
   );

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/ChecklySyncReviewFields.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 ChecklySyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Checkly }>();
+  const accountName = watch("destinationConfig.accountName");
+
+  return <GenericFieldLabel label="Account">{accountName}</GenericFieldLabel>;
+};

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

@@ -0,0 +1,14 @@
+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 CloudflareWorkersSyncReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.CloudflareWorkers }
+  >();
+  const scriptId = watch("destinationConfig.scriptId");
+
+  return <GenericFieldLabel label="Script">{scriptId}</GenericFieldLabel>;
+};

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

@@ -19,7 +19,9 @@ import { AzureAppConfigurationSyncReviewFields } from "./AzureAppConfigurationSy
 import { AzureDevOpsSyncReviewFields } from "./AzureDevOpsSyncReviewFields";
 import { AzureKeyVaultSyncReviewFields } from "./AzureKeyVaultSyncReviewFields";
 import { CamundaSyncReviewFields } from "./CamundaSyncReviewFields";
+import { ChecklySyncReviewFields } from "./ChecklySyncReviewFields";
 import { CloudflarePagesSyncReviewFields } from "./CloudflarePagesReviewFields";
+import { CloudflareWorkersSyncReviewFields } from "./CloudflareWorkersReviewFields";
 import { DatabricksSyncReviewFields } from "./DatabricksSyncReviewFields";
 import { FlyioSyncReviewFields } from "./FlyioSyncReviewFields";
 import { GcpSyncReviewFields } from "./GcpSyncReviewFields";
@@ -32,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";
@@ -126,12 +129,21 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.CloudflarePages:
       DestinationFieldsComponent = <CloudflarePagesSyncReviewFields />;
       break;
+    case SecretSync.CloudflareWorkers:
+      DestinationFieldsComponent = <CloudflareWorkersSyncReviewFields />;
+      break;
     case SecretSync.Zabbix:
       DestinationFieldsComponent = <ZabbixSyncReviewFields />;
       break;
     case SecretSync.Railway:
       DestinationFieldsComponent = <RailwaySyncReviewFields />;
       break;
+    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/azure-devops-sync-destination-schema.ts

@@ -8,10 +8,7 @@ export const AzureDevOpsSyncDestinationSchema = BaseSecretSyncSchema().merge(
     destination: z.literal(SecretSync.AzureDevOps),
     destinationConfig: z.object({
       devopsProjectId: z.string().trim().min(1, { message: "Azure DevOps Project ID is required" }),
-      devopsProjectName: z
-        .string()
-        .trim()
-        .min(1, { message: "Azure DevOps Project Name is required" })
+      devopsProjectName: z.string().trim().optional()
     })
   })
 );

frontend/src/components/secret-syncs/forms/schemas/checkly-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 ChecklySyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Checkly),
+    destinationConfig: z.object({
+      accountId: z.string(),
+      accountName: z.string()
+    })
+  })
+);

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

@@ -0,0 +1,18 @@
+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 CloudflareWorkersSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.CloudflareWorkers),
+    destinationConfig: z.object({
+      scriptId: z
+        .string()
+        .trim()
+        .min(1, "Script ID is required")
+        .max(64)
+        .regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/, "Invalid script ID format")
+    })
+  })
+);

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

@@ -7,7 +7,9 @@ import { AzureAppConfigurationSyncDestinationSchema } from "./azure-app-configur
 import { AzureDevOpsSyncDestinationSchema } from "./azure-devops-sync-destination-schema";
 import { AzureKeyVaultSyncDestinationSchema } from "./azure-key-vault-sync-destination-schema";
 import { CamundaSyncDestinationSchema } from "./camunda-sync-destination-schema";
+import { ChecklySyncDestinationSchema } from "./checkly-sync-destination-schema";
 import { CloudflarePagesSyncDestinationSchema } from "./cloudflare-pages-sync-destination-schema";
+import { CloudflareWorkersSyncDestinationSchema } from "./cloudflare-workers-sync-destination-schema";
 import { DatabricksSyncDestinationSchema } from "./databricks-sync-destination-schema";
 import { FlyioSyncDestinationSchema } from "./flyio-sync-destination-schema";
 import { GcpSyncDestinationSchema } from "./gcp-sync-destination-schema";
@@ -19,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";
@@ -48,8 +51,11 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   FlyioSyncDestinationSchema,
   GitlabSyncDestinationSchema,
   CloudflarePagesSyncDestinationSchema,
+  CloudflareWorkersSyncDestinationSchema,
+  SupabaseSyncDestinationSchema,
   ZabbixSyncDestinationSchema,
-  RailwaySyncDestinationSchema
+  RailwaySyncDestinationSchema,
+  ChecklySyncDestinationSchema
 ]);
 
 export const SecretSyncFormSchema = SecretSyncUnionSchema;

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/utilities/cryptography/crypto.ts

@@ -2,48 +2,55 @@
 // eslint-disable-next-line
 import argon2 from "argon2-browser/dist/argon2-bundled.min.js";
 import nacl from "tweetnacl";
-import { decodeBase64, decodeUTF8, encodeBase64, encodeUTF8 } from "tweetnacl-util";
-
+import { encodeBase64 as naclEncodeBase64 } from "tweetnacl-util";
 import aes from "./aes-256-gcm";
 
-/**
- * Return new base64, NaCl, public-private key pair.
- * @returns {Object} obj
- * @returns {String} obj.publicKey - base64, NaCl, public key
- * @returns {String} obj.privateKey - base64, NaCl, private key
- */
-const generateKeyPair = () => {
+const encodeBase64 = (uint8Array: Uint8Array) => btoa(String.fromCharCode(...uint8Array));
+const decodeBase64 = (base64String: string) =>
+  new Uint8Array([...atob(base64String)].map((c) => c.charCodeAt(0)));
+
+const generateKeyPair = async (fipsEnabled: boolean) => {
+  if (fipsEnabled) {
+    if (!crypto || !crypto.subtle) {
+      throw new Error("Web Crypto API not available");
+    }
+
+    // browser version of how the key format we expect on the backend for asymmetric encryption
+    const result = await crypto.subtle.generateKey(
+      {
+        name: "X25519"
+      },
+      true, // extractable
+      ["deriveKey", "deriveBits"]
+    );
+
+    // Type guard
+    if (!("publicKey" in result)) {
+      throw new Error("Expected CryptoKeyPair but got CryptoKey");
+    }
+
+    const keyPair = result as CryptoKeyPair;
+    const publicKeyBytes = await crypto.subtle.exportKey("spki", keyPair.publicKey);
+    const privateKeyBytes = await crypto.subtle.exportKey("pkcs8", keyPair.privateKey);
+
+    return {
+      publicKey: btoa(String.fromCharCode(...new Uint8Array(publicKeyBytes))),
+      privateKey: btoa(String.fromCharCode(...new Uint8Array(privateKeyBytes)))
+    };
+  }
+
   const pair = nacl.box.keyPair();
+  const secretKeyUint8Array = pair.secretKey;
+  const publicKeyUint8Array = pair.publicKey;
+  const privateKey = naclEncodeBase64(secretKeyUint8Array);
+  const publicKey = naclEncodeBase64(publicKeyUint8Array);
 
   return {
-    publicKey: encodeBase64(pair.publicKey),
-    privateKey: encodeBase64(pair.secretKey)
+    publicKey,
+    privateKey
   };
 };
 
-type EncryptAsymmetricProps = {
-  plaintext: string;
-  publicKey: string;
-  privateKey: string;
-};
-
-/**
- * Verify that private key [privateKey] is the one that corresponds to
- * the public key [publicKey]
- * @param {Object}
- * @param {String} - base64-encoded Nacl private key
- * @param {String} - base64-encoded Nacl public key
- */
-const verifyPrivateKey = ({ privateKey, publicKey }: { privateKey: string; publicKey: string }) => {
-  const derivedPublicKey = encodeBase64(
-    nacl.box.keyPair.fromSecretKey(decodeBase64(privateKey)).publicKey
-  );
-
-  if (derivedPublicKey !== publicKey) {
-    throw new Error("Failed to verify private key");
-  }
-};
-
 /**
  * Derive a key from password [password] and salt [salt] using Argon2id
  * @param {Object} obj
@@ -88,71 +95,6 @@ const deriveArgonKey = async ({
   return derivedKey;
 };
 
-/**
- * Return assymmetrically encrypted [plaintext] using [publicKey] where
- * [publicKey] likely belongs to the recipient.
- * @param {Object} obj
- * @param {String} obj.plaintext - plaintext to encrypt
- * @param {String} obj.publicKey - public key of the recipient
- * @param {String} obj.privateKey - private key of the sender (current user)
- * @returns {Object} obj
- * @returns {String} ciphertext - base64-encoded ciphertext
- * @returns {String} nonce - base64-encoded nonce
- */
-const encryptAssymmetric = ({
-  plaintext,
-  publicKey,
-  privateKey
-}: EncryptAsymmetricProps): {
-  ciphertext: string;
-  nonce: string;
-} => {
-  const nonce = nacl.randomBytes(24);
-  const ciphertext = nacl.box(
-    decodeUTF8(plaintext),
-    nonce,
-    decodeBase64(publicKey),
-    decodeBase64(privateKey)
-  );
-
-  return {
-    ciphertext: encodeBase64(ciphertext),
-    nonce: encodeBase64(nonce)
-  };
-};
-
-type DecryptAsymmetricProps = {
-  ciphertext: string;
-  nonce: string;
-  publicKey: string;
-  privateKey: string;
-};
-
-/**
- * Return assymmetrically decrypted [ciphertext] using [privateKey] where
- * [privateKey] likely belongs to the recipient.
- * @param {Object} obj
- * @param {String} obj.ciphertext - ciphertext to decrypt
- * @param {String} obj.nonce - nonce
- * @param {String} obj.publicKey - base64-encoded public key of the sender
- * @param {String} obj.privateKey - base64-encoded private key of the receiver (current user)
- */
-const decryptAssymmetric = ({
-  ciphertext,
-  nonce,
-  publicKey,
-  privateKey
-}: DecryptAsymmetricProps): string => {
-  const plaintext = nacl.box.open(
-    decodeBase64(ciphertext),
-    decodeBase64(nonce),
-    decodeBase64(publicKey),
-    decodeBase64(privateKey)
-  );
-
-  return encodeUTF8(plaintext!);
-};
-
 type EncryptSymmetricProps = {
   plaintext: string;
   key: string;
@@ -226,11 +168,10 @@ const decryptSymmetric = ({ ciphertext, iv, tag, key }: DecryptSymmetricProps):
 };
 
 export {
-  decryptAssymmetric,
+  decodeBase64,
   decryptSymmetric,
   deriveArgonKey,
-  encryptAssymmetric,
+  encodeBase64,
   encryptSymmetric,
-  generateKeyPair,
-  verifyPrivateKey
+  generateKeyPair
 };

frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { faEllipsis, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, ReactNode } from "@tanstack/react-router";
 import { LinkComponentProps } from "node_modules/@tanstack/react-router/dist/esm/link";
@@ -27,7 +27,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
     <ol
       ref={ref}
       className={twMerge(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-bunker-100 sm:gap-2.5",
+        "flex flex-wrap items-center break-words text-sm text-bunker-100",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={twMerge("transition-colors hover:text-primary-400", className)}
+      className={twMerge("transition-colors hover:text-primary", className)}
       {...props}
     />
   );
@@ -79,7 +79,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
   <li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
-    {children ?? <p className="px-2 text-lg text-mineshaft-400/70">/</p>}
+    {children ?? <p className="px-3 text-lg text-mineshaft-400/70">/</p>}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -121,7 +121,7 @@ export type TBreadcrumbFormat =
     };
 
 const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[] }) => (
-  <div className="mx-auto max-w-7xl py-4 text-white">
+  <div className="mx-auto max-w-7xl text-white">
     <Breadcrumb>
       <BreadcrumbList>
         {(breadcrumbs as TBreadcrumbFormat[]).map((el, index) => {
@@ -134,12 +134,17 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
                 <DropdownMenu>
                   <DropdownMenuTrigger>
                     <BreadcrumbItem>
-                      <BreadcrumbSegment className="rounded-md px-2 py-1 py-2 hover:bg-mineshaft-600">
-                        {el.label} <FontAwesomeIcon icon={faSort} size="sm" />
+                      <BreadcrumbSegment className="rounded-md py-1 py-2">
+                        {el.label}{" "}
+                        <FontAwesomeIcon
+                          icon={faCaretDown}
+                          size="sm"
+                          className="ml-2 text-bunker-300"
+                        />
                       </BreadcrumbSegment>
                     </BreadcrumbItem>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent side="right" align="start">
+                  <DropdownMenuContent side="bottom" sideOffset={8} align="start">
                     {el?.dropdownTitle && <DropdownMenuLabel>{el.dropdownTitle}</DropdownMenuLabel>}
                     {el.links.map((i, dropIndex) => (
                       <Link

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -42,7 +42,7 @@ export const Checkbox = ({
         className={twMerge(
           "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400/50 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
-          isChecked && "border-primary/30 bg-primary/10",
+          isChecked && "border-primary/50 bg-primary/30",
           Boolean(children) && "mr-3",
           className
         )}