feat(secret-sharing): server-side encryption

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

@@ -3,13 +3,21 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { secretSharingKeys } from "./queries";
-import { TCreateSharedSecretRequest, TDeleteSharedSecretRequest, TSharedSecret } from "./types";
+import {
+  TCreatedSharedSecret,
+  TCreateSharedSecretRequest,
+  TDeleteSharedSecretRequest,
+  TSharedSecret
+} from "./types";
 
 export const useCreateSharedSecret = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (inputData: TCreateSharedSecretRequest) => {
-      const { data } = await apiRequest.post<TSharedSecret>("/api/v1/secret-sharing", inputData);
+      const { data } = await apiRequest.post<TCreatedSharedSecret>(
+        "/api/v1/secret-sharing",
+        inputData
+      );
       return data;
     },
     onSuccess: () => queryClient.invalidateQueries(secretSharingKeys.allSharedSecrets())
@@ -20,7 +28,7 @@ export const useCreatePublicSharedSecret = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (inputData: TCreateSharedSecretRequest) => {
-      const { data } = await apiRequest.post<TSharedSecret>(
+      const { data } = await apiRequest.post<TCreatedSharedSecret>(
         "/api/v1/secret-sharing/public",
         inputData
       );

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

@@ -13,13 +13,15 @@ export type TSharedSecret = {
   tag: string;
 };
 
+export type TCreatedSharedSecret = {
+  id: string;
+  hashedHex: string;
+};
+
 export type TCreateSharedSecretRequest = {
   name?: string;
   password?: string;
-  encryptedValue: string;
-  hashedHex: string;
-  iv: string;
-  tag: string;
+  secretValue: string;
   expiresAt: Date;
   expiresAfterViews?: number;
   accessType?: SecretSharingAccessType;
@@ -28,6 +30,7 @@ export type TCreateSharedSecretRequest = {
 export type TViewSharedSecretResponse = {
   isPasswordProtected: boolean;
   secret: {
+    secretValue?: string;
     encryptedValue: string;
     iv: string;
     tag: string;
@@ -44,4 +47,3 @@ export enum SecretSharingAccessType {
   Anyone = "anyone",
   Organization = "organization"
 }
-

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

@@ -1,5 +1,3 @@
-import crypto from "crypto";
-
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy, faRedo } from "@fortawesome/free-solid-svg-icons";
@@ -8,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { encryptSymmetric } from "@app/components/utilities/cryptography/crypto";
 import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { useTimedReset } from "@app/hooks";
 import { useCreatePublicSharedSecret, useCreateSharedSecret } from "@app/hooks/api";
@@ -79,30 +76,16 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
     try {
       const expiresAt = new Date(new Date().getTime() + Number(expiresIn));
 
-      const key = crypto.randomBytes(16).toString("hex");
-      const hashedHex = crypto.createHash("sha256").update(key).digest("hex");
-      const { ciphertext, iv, tag } = encryptSymmetric({
-        plaintext: secret,
-        key
-      });
-
-      const { id } = await createSharedSecret.mutateAsync({
+      const { id, hashedHex } = await createSharedSecret.mutateAsync({
         name,
         password,
-        encryptedValue: ciphertext,
-        hashedHex,
-        iv,
-        tag,
+        secretValue: secret,
         expiresAt,
         expiresAfterViews: viewLimit === "-1" ? undefined : Number(viewLimit),
         accessType
       });
 
-      setSecretLink(
-        `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(
-          hashedHex
-        )}-${encodeURIComponent(key)}`
-      );
+      setSecretLink(`${window.location.origin}/shared/secret/${id}-${hashedHex}`);
       reset();
 
       setCopyTextSecret("secret");

frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx

@@ -1,23 +1,44 @@
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AxiosError } from "axios";
 
 import { useGetActiveSharedSecretById } from "@app/hooks/api/secretSharing";
 
-import { PasswordContainer,SecretContainer, SecretErrorContainer } from "./components";
+import { PasswordContainer, SecretContainer, SecretErrorContainer } from "./components";
+
+const extractDetailsFromUrl = (router: NextRouter) => {
+  const { id, key: urlEncodedKey } = router.query;
+
+  if (urlEncodedKey) {
+    const [hashedHex, key] = urlEncodedKey ? urlEncodedKey.toString().split("-") : ["", ""];
+
+    return {
+      id: id as string,
+      hashedHex,
+      key
+    };
+  }
+
+  // its like this {uuid}-{hex} so example: idpart1-idpart2-idpart3-idpart4-hex
+  const extractedId = id?.toString().split("-").slice(0, 5).join("-");
+  const extractedHex = id?.toString().split("-").slice(5).join("-");
+
+  return {
+    id: extractedId || "",
+    hashedHex: extractedHex || "",
+    key: null
+  };
+};
 
 export const ViewSecretPublicPage = () => {
   const router = useRouter();
   const [password, setPassword] = useState<string>();
-  const { id, key: urlEncodedPublicKey } = router.query;
 
-  const [hashedHex, key] = urlEncodedPublicKey
-    ? urlEncodedPublicKey.toString().split("-")
-    : ["", ""];
+  const { hashedHex, key, id } = extractDetailsFromUrl(router);
 
   const {
     data: fetchSecret,
@@ -25,7 +46,7 @@ export const ViewSecretPublicPage = () => {
     isLoading,
     isFetching
   } = useGetActiveSharedSecretById({
-    sharedSecretId: id as string,
+    sharedSecretId: id,
     hashedHex,
     password
   });
@@ -80,7 +101,7 @@ export const ViewSecretPublicPage = () => {
         )}
         {!isLoading && (
           <>
-            {!error && fetchSecret?.secret && key && (
+            {!error && fetchSecret?.secret && (
               <SecretContainer secret={fetchSecret.secret} secretKey={key} />
             )}
             {error && !isInvalidCredential && <SecretErrorContainer />}

frontend/src/views/ViewSecretPublicPage/components/SecretContainer.tsx

@@ -15,7 +15,7 @@ import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
 
 type Props = {
   secret: TViewSharedSecretResponse["secret"];
-  secretKey: string;
+  secretKey: string | null;
 };
 
 export const SecretContainer = ({ secret, secretKey: key }: Props) => {
@@ -25,6 +25,10 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
   });
 
   const decryptedSecret = useMemo(() => {
+    if (secret.secretValue) {
+      return secret.secretValue;
+    }
+
     if (secret && secret.encryptedValue && key) {
       const res = decryptSymmetric({
         ciphertext: secret.encryptedValue,