IO-2348 add http auth for media.

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Tooltip } from "antd";
+import { Spin, Tooltip } from "antd";
 import i18n from "i18next";
 import moment from "moment";
 import React, { useEffect, useRef } from "react";
@@ -12,6 +12,8 @@ import {
 } from "react-virtualized";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import "./chat-message-list.styles.scss";
+import { useState } from "react";
+import axios from "axios";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtualizedListRef = useRef(null);
@@ -95,9 +97,7 @@ const MessageRender = (message) => {
               key={idx}
               style={{ display: "flex", justifyContent: "center" }}
             >
-              <a href={i} target="__blank">
+              <ImageDisplay src={i} />
-                <img alt="Received" className="message-img" src={i} />
-              </a>
             </div>
           ))}
         <div>{message.text}</div>
@@ -116,3 +116,21 @@ const StatusRender = (status) => {
       return null;
   }
 };
+
+const ImageDisplay = ({ src }) => {
+  const [state, setstate] = useState({ loading: true, url: null });
+
+  useEffect(() => {
+    axios
+
+      .post("/sms/fetchmedia", { mediaUrl: src })
+      .then(({ data }) => setstate({ loading: false, url: data }));
+  }, [src]);
+
+  if (state.loading === true) return <Spin />;
+  return (
+    <a href={i} target="__blank">
+      <img alt="Received" className="message-img" src={state.url} />
+    </a>
+  );
+};

package.json

@@ -53,7 +53,7 @@
     "socket.io": "^4.6.1",
     "ssh2-sftp-client": "^9.0.4",
     "stripe": "^9.15.0",
-    "twilio": "^4.8.0",
+    "twilio": "^4.13.0",
     "uuid": "^9.0.0",
     "xml2js": "^0.4.23",
     "xmlbuilder2": "^3.0.2"

server.js

@@ -123,6 +123,13 @@ app.post(
   twilio.webhook({ validate: process.env.NODE_ENV === "PRODUCTION" }),
   smsStatus.status
 );
+const smsFetchMedia = require("./server/sms/fetch-media");
+app.post(
+  "/sms/fetchmedia",
+  fb.validateFirebaseIdToken,
+  smsFetchMedia.fetchmedia
+);
+
 app.post(
   "/sms/markConversationRead",
   fb.validateFirebaseIdToken,

server/sms/fetch-media.js

@@ -0,0 +1,31 @@
+const path = require("path");
+require("dotenv").config({
+  path: path.resolve(
+    process.cwd(),
+    `.env.${process.env.NODE_ENV || "development"}`
+  ),
+});
+const twilio = require("twilio");
+const client = twilio(
+  process.env.TWILIO_AUTH_TOKEN,
+  process.env.TWILIO_AUTH_KEY
+);
+const logger = require("../utils/logger");
+
+exports.fetchmedia = async (req, res) => {
+  try {
+    const r = await client.request({
+      method: "get",
+      uri: req.body.mediaUrl, //|| "https://api.twilio.com/2010-04-01/Accounts/AC59171266556bbd507234b5fc6a23e4ee/Messages/MMa287a6e411c873e9177953e630f21df0/Media/ME18357bbec8c0092bfbc805aa8e6c6185",
+    });
+
+    res.send(r.headers.location);
+  } catch (error) {
+    console.log(error);
+    logger.log("sms-fetch-media-error", "ERROR", req.user?.email, null, {
+      // conversationid,
+      error: error.message,
+    });
+    res.sendStatus(500);
+  }
+};

yarn.lock

@@ -4338,10 +4338,10 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
 
-twilio@^4.8.0:
+twilio@^4.13.0:
-  version "4.10.0"
+  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/twilio/-/twilio-4.10.0.tgz#4a0e744045e54934c5cf69033df8e3c5193268a3"
+  resolved "https://registry.yarnpkg.com/twilio/-/twilio-4.13.0.tgz#6b8f9f14d4def821ca02abb2c561ed3e4dde7a4d"
-  integrity sha512-j6reVBUqwrGHBKnCIoL1hUDPl/Yw6EYVvkYLmFBpVQ74AGf/9BCKXnvlkAgIkwFXzZikpNuo0mqIY/k9oMiFsA==
+  integrity sha512-fecPGy2lXnULwle4iXcCH3rP5z4fgkirzp+rRIXsFi45+y3qjkY5DBZSzmYr5T4vUOzZ2djmODZJ2jpRfgIBSw==
   dependencies:
     axios "^0.26.1"
     dayjs "^1.8.29"