Merge pull request #1593 from kleros/feat/add-authentication-to-file-…

…uploads feat(web): add-authentication-to-file-uploads
kleros · May 29, 2024 · 83e46e3 · 83e46e3
2 parents a2ed358 + b216109
commit 83e46e3
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 56 deletions.
diff --git a/web/netlify/functions/uploadToIPFS.ts b/web/netlify/functions/uploadToIPFS.ts
@@ -1,9 +1,11 @@
 import { File, FilebaseClient } from "@filebase/client";
-import { Handler } from "@netlify/functions";
+import middy from "@middy/core";
 import amqp, { Connection } from "amqplib";
 import busboy from "busboy";
 
-const { FILEBASE_TOKEN, RABBITMQ_URL, FILEBASE_API_WRAPPER } = process.env;
+import { authMiddleware } from "../middleware/authMiddleware";
+
+const { FILEBASE_TOKEN, RABBITMQ_URL } = process.env;
 const filebase = new FilebaseClient({ token: FILEBASE_TOKEN ?? "" });
 
 type FormElement =
@@ -65,24 +67,17 @@ const pinToFilebase = async (data: FormData, operation: string): Promise<Array<s
   return cids;
 };
 
-export const handler: Handler = async (event) => {
+export const uploadToIPFS = async (event) => {
   const { queryStringParameters } = event;
 
-  if (!queryStringParameters || !queryStringParameters.key || !queryStringParameters.operation) {
+  if (!queryStringParameters?.operation) {
     return {
       statusCode: 400,
       body: JSON.stringify({ message: "Invalid query parameters" }),
     };
   }
 
-  const { key, operation } = queryStringParameters;
-
-  if (key !== FILEBASE_API_WRAPPER) {
-    return {
-      statusCode: 403,
-      body: JSON.stringify({ message: "Invalid API key" }),
-    };
-  }
+  const { operation } = queryStringParameters;
 
   try {
     const parsed = await parseMultipart(event);
@@ -102,3 +97,5 @@ export const handler: Handler = async (event) => {
     };
   }
 };
+
+export const handler = middy(uploadToIPFS).use(authMiddleware());
diff --git a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
@@ -11,6 +11,7 @@ import { prepareWriteEvidenceModule } from "hooks/contracts/generated";
 import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
 import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 
+import { EnsureAuth } from "components/EnsureAuth";
 import { EnsureChain } from "components/EnsureChain";
 
 const StyledModal = styled(Modal)`
@@ -67,35 +68,37 @@ const SubmitEvidenceModal: React.FC<{
       <ButtonArea>
         <Button variant="secondary" disabled={isSending} text="Return" onClick={close} />
         <EnsureChain>
-          <Button
-            text="Submit"
-            isLoading={isSending}
-            disabled={isSending}
-            onClick={async () => {
-              setIsSending(true);
-              toast.info("Uploading to IPFS", toastOptions);
-              const formData = await constructEvidence(message, file);
-              uploadFormDataToIPFS(formData)
-                .then(async (res) => {
-                  const response = await res.json();
-                  if (res.status === 200 && walletClient) {
-                    const cid = response["cids"][0];
-                    const { request } = await prepareWriteEvidenceModule({
-                      functionName: "submitEvidence",
-                      args: [BigInt(evidenceGroup), cid],
-                    });
-                    await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(
-                      () => {
-                        setMessage("");
-                        close();
-                      }
-                    );
-                  }
-                })
-                .catch()
-                .finally(() => setIsSending(false));
-            }}
-          />
+          <EnsureAuth>
+            <Button
+              text="Submit"
+              isLoading={isSending}
+              disabled={isSending}
+              onClick={async () => {
+                setIsSending(true);
+                toast.info("Uploading to IPFS", toastOptions);
+                const formData = await constructEvidence(message, file);
+                uploadFormDataToIPFS(formData)
+                  .then(async (res) => {
+                    const response = await res.json();
+                    if (res.status === 200 && walletClient) {
+                      const cid = response["cids"][0];
+                      const { request } = await prepareWriteEvidenceModule({
+                        functionName: "submitEvidence",
+                        args: [BigInt(evidenceGroup), cid],
+                      });
+                      await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(
+                        () => {
+                          setMessage("");
+                          close();
+                        }
+                      );
+                    }
+                  })
+                  .catch()
+                  .finally(() => setIsSending(false));
+              }}
+            />
+          </EnsureAuth>
         </EnsureChain>
       </ButtonArea>
     </StyledModal>

diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx
@@ -8,6 +8,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import ConnectWallet from "components/ConnectWallet";
+import { EnsureAuth } from "components/EnsureAuth";
 import HeroImage from "components/HeroImage";
 
 import Description from "./Briefing/Description";
@@ -41,6 +42,10 @@ const ConnectWalletContainer = styled.div`
   color: ${({ theme }) => theme.primaryText};
 `;
 
+const StyledEnsureAuth = styled(EnsureAuth)`
+  align-self: center;
+`;
+
 const MiddleContentContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -71,21 +76,23 @@ const DisputeResolver: React.FC = () => {
       <Container>
         {isConnected && !isPreviewPage ? <StyledLabel>Start a case</StyledLabel> : null}
         {isConnected ? (
-          <MiddleContentContainer>
-            {isConnected && !isPreviewPage ? <Timeline /> : null}
-            <Routes>
-              <Route index element={<Navigate to="title" replace />} />
-              <Route path="/title/*" element={<Title />} />
-              <Route path="/description/*" element={<Description />} />
-              <Route path="/court/*" element={<Court />} />
-              <Route path="/category/*" element={<Category />} />
-              <Route path="/jurors/*" element={<Jurors />} />
-              <Route path="/voting-options/*" element={<VotingOptions />} />
-              <Route path="/notable-persons/*" element={<NotablePersons />} />
-              <Route path="/policy/*" element={<Policy />} />
-              <Route path="/preview/*" element={<Preview />} />
-            </Routes>
-          </MiddleContentContainer>
+          <StyledEnsureAuth>
+            <MiddleContentContainer>
+              {isConnected && !isPreviewPage ? <Timeline /> : null}
+              <Routes>
+                <Route index element={<Navigate to="title" replace />} />
+                <Route path="/title/*" element={<Title />} />
+                <Route path="/description/*" element={<Description />} />
+                <Route path="/court/*" element={<Court />} />
+                <Route path="/category/*" element={<Category />} />
+                <Route path="/jurors/*" element={<Jurors />} />
+                <Route path="/voting-options/*" element={<VotingOptions />} />
+                <Route path="/notable-persons/*" element={<NotablePersons />} />
+                <Route path="/policy/*" element={<Policy />} />
+                <Route path="/preview/*" element={<Preview />} />
+              </Routes>
+            </MiddleContentContainer>
+          </StyledEnsureAuth>
         ) : (
           <ConnectWalletContainer>
             To create a new dispute, connect first

diff --git a/web/src/utils/uploadFormDataToIPFS.ts b/web/src/utils/uploadFormDataToIPFS.ts
@@ -3,9 +3,14 @@ import { toast } from "react-toastify";
 import { OPTIONS } from "utils/wrapWithToast";
 
 export function uploadFormDataToIPFS(formData: FormData, operation = "evidence"): Promise<Response> {
+  const authToken = sessionStorage.getItem("auth-token")?.replace(/"/g, "");
+
   return toast.promise<Response, Error>(
     fetch(`/.netlify/functions/uploadToIPFS?key=kleros-v2&operation=${operation}`, {
       method: "POST",
+      headers: {
+        "x-auth-token": authToken ?? "",
+      },
       body: formData,
     }).then(async (response) => {
       if (response.status !== 200) {