diff --git a/backend/api/auth/validateAPIKey.ts b/backend/api/auth/validateAPIKey.ts
new file mode 100644
index 00000000..d16aca6f
--- /dev/null
+++ b/backend/api/auth/validateAPIKey.ts
@@ -0,0 +1,55 @@
+// mysql connection
+var { mysql_pool } = require("../../database/database.ts");
+
+// validateAPIKey
+exports.validateAPIKey = (req, res, next) => {
+  // input: key
+  // output: api authentication error
+
+  var error = "";
+  var results = [];
+  var responseCode = 500;
+  const developerKey = req.header("X-API-Key");
+
+  mysql_pool.getConnection(function (err, connection) {
+    if (err) {
+      console.log(err);
+      // return with error
+      res.status(responseCode).json({
+        result: results,
+        error: "Unauthorized: API Authentication Error",
+      });
+    } else {
+      connection.query(
+        "SELECT * FROM developers WHERE developerKey=?",
+        [developerKey],
+        function (err, result) {
+          if (err) {
+            error = "Unauthorized: API Authentication Error";
+            responseCode = 401;
+            console.log(err);
+            sendData();
+          } else {
+            if (result[0]) {
+              next();
+            } else {
+              error = "Unauthorized: API Authentication Error";
+              responseCode = 401;
+              sendData();
+            }
+          }
+          function sendData() {
+            // package data
+            var ret = {
+              result: results,
+              error: error,
+            };
+            // send data
+            res.status(responseCode).json(ret);
+          }
+          connection.release();
+        }
+      );
+    }
+  });
+};
diff --git a/backend/api/controllers/contentControllers/getHomefeedContentInBatchesController.ts b/backend/api/controllers/contentControllers/getHomefeedContentInBatchesController.ts
index a471573c..59bad5f8 100644
--- a/backend/api/controllers/contentControllers/getHomefeedContentInBatchesController.ts
+++ b/backend/api/controllers/contentControllers/getHomefeedContentInBatchesController.ts
@@ -38,7 +38,8 @@ exports.getHomefeedContentInBatches = async (req, res) => {
   if (tagArray && tagArray.length > 0) {
     insertString += "INNER JOIN (SELECT * FROM contentTag WHERE ";
     for (var tag of tagArray) {
-      insertString += "tagID=" + tag.id + " OR ";
+      insertString += "tagID=? OR ";
+      insertArray.push(tag.id);
     }
     insertString = insertString.slice(0, -3);
     insertString += ") AS ct1 ON ct1.contentID=content.id ";
@@ -66,7 +67,8 @@ exports.getHomefeedContentInBatches = async (req, res) => {
       insertString += "WHERE ";
       for (var contentT of contentTypeArray) {
         if (contentT !== "contest") {
-          insertString += `contentType='${contentT}' OR `;
+          insertString += `contentType=? OR `;
+          insertArray.push(contentT);
         }
       }
       insertString += " isContest=1 ";
@@ -106,7 +108,7 @@ exports.getHomefeedContentInBatches = async (req, res) => {
           responseCode = 200;
         } else {
           error = "Content does not exist";
-          responseCode = 500;
+          responseCode = 200;
         }
       }
       var ret = {
diff --git a/backend/api/controllers/contentControllers/updateContentController.ts b/backend/api/controllers/contentControllers/updateContentController.ts
index bcbb23d9..9b7511fe 100644
--- a/backend/api/controllers/contentControllers/updateContentController.ts
+++ b/backend/api/controllers/contentControllers/updateContentController.ts
@@ -307,7 +307,9 @@ exports.updateContent = async (req, res) => {
                           var updatedTagsStringUsedForDeletion = "";
                           for (var i = 0; i < tagArray.length; ++i) {
                             updatedTagsStringUsedForDeletion +=
-                              "tagID=" + tagArray[i].id + " OR ";
+                              "tagID=" +
+                              connection.escape(tagArray[i].id) +
+                              " OR ";
                             sqlQuery(i);
                             function sqlQuery(index) {
                               mysql_pool.getConnection(function (
diff --git a/backend/api/routes/commentRoutes.ts b/backend/api/routes/commentRoutes.ts
index bb726af2..92e2b75f 100644
--- a/backend/api/routes/commentRoutes.ts
+++ b/backend/api/routes/commentRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for comments
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -10,15 +11,40 @@ const getCommentsController = require("../controllers/commentControllers/getComm
 const approveCommentController = require("../controllers/commentControllers/approveCommentController.ts");
 const getCommentsForContentController = require("../controllers/commentControllers/getCommentsForContentController.ts");
 
-router.post("/api/createComment", createCommentController.createComment);
-router.post("/api/readComment", readCommentController.readComment);
+router.post(
+  "/api/createComment",
+  apiAuth.validateAPIKey,
+  createCommentController.createComment
+);
+router.post(
+  "/api/readComment",
+  apiAuth.validateAPIKey,
+  readCommentController.readComment
+);
 router.post(
   "/api/getCommentsForContent",
+  apiAuth.validateAPIKey,
   getCommentsForContentController.getCommentsForContent
 );
-router.patch("/api/updateComment", updateCommentController.updateComment);
-router.patch("/api/approveComment", approveCommentController.approveComment);
-router.delete("/api/deleteComment", deleteCommentController.deleteComment);
-router.get("/api/getComments", getCommentsController.getComments);
+router.patch(
+  "/api/updateComment",
+  apiAuth.validateAPIKey,
+  updateCommentController.updateComment
+);
+router.patch(
+  "/api/approveComment",
+  apiAuth.validateAPIKey,
+  approveCommentController.approveComment
+);
+router.delete(
+  "/api/deleteComment",
+  apiAuth.validateAPIKey,
+  deleteCommentController.deleteComment
+);
+router.get(
+  "/api/getComments",
+  apiAuth.validateAPIKey,
+  getCommentsController.getComments
+);
 
 module.exports = router;
diff --git a/backend/api/routes/contentRoutes.ts b/backend/api/routes/contentRoutes.ts
index 928c37de..7fb26088 100644
--- a/backend/api/routes/contentRoutes.ts
+++ b/backend/api/routes/contentRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for content
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -14,33 +15,59 @@ const getContentByTypeInBatchesController = require("../controllers/contentContr
 const getHomefeedContentInBatchesController = require("../controllers/contentControllers/getHomefeedContentInBatchesController.ts");
 const createContentWithTagsController = require("../controllers/contentControllers/createContentWithTagsController.ts");
 
-router.post("/api/createContent", createContentController.createContent);
+router.post(
+  "/api/createContent",
+  apiAuth.validateAPIKey,
+  createContentController.createContent
+);
 router.post(
   "/api/createContentAndTag",
+  apiAuth.validateAPIKey,
   createContentAndTagController.createContentAndTag
 );
 router.post(
   "/api/createContentWithTags",
+  apiAuth.validateAPIKey,
   createContentWithTagsController.createContentWithTags
 );
 router.post(
   "/api/getContentByTypeInBatches",
+  apiAuth.validateAPIKey,
   getContentByTypeInBatchesController.getContentByTypeInBatches
 );
 router.post(
   "/api/getHomefeedContentInBatches",
+  apiAuth.validateAPIKey,
   getHomefeedContentInBatchesController.getHomefeedContentInBatches
 );
-router.post("/api/readContent", readContentController.readContent);
-router.patch("/api/updateContent", updateContentController.updateContent);
-router.delete("/api/deleteContent", deleteContentController.deleteContent);
-router.get("/api/getContents", getContentController.getContents);
+router.post(
+  "/api/readContent",
+  apiAuth.validateAPIKey,
+  readContentController.readContent
+);
+router.patch(
+  "/api/updateContent",
+  apiAuth.validateAPIKey,
+  updateContentController.updateContent
+);
+router.delete(
+  "/api/deleteContent",
+  apiAuth.validateAPIKey,
+  deleteContentController.deleteContent
+);
+router.get(
+  "/api/getContents",
+  apiAuth.validateAPIKey,
+  getContentController.getContents
+);
 router.post(
   "/api/getContentByType",
+  apiAuth.validateAPIKey,
   getContentByTypeController.getContentByType
 );
 router.post(
   "/api/getUserContentByType",
+  apiAuth.validateAPIKey,
   getUserContentByTypeController.getUserContentByType
 );
 
diff --git a/backend/api/routes/contentTagRoutes.ts b/backend/api/routes/contentTagRoutes.ts
index 7ef7dccd..81b24783 100644
--- a/backend/api/routes/contentTagRoutes.ts
+++ b/backend/api/routes/contentTagRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for content tags
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -12,28 +13,38 @@ const removeTagsFromContentController = require("../controllers/contentTagContro
 
 router.post(
   "/api/createContentTag",
+  apiAuth.validateAPIKey,
   createContentTagController.createContentTag
 );
 router.post(
   "/api/addTagsToContent",
+  apiAuth.validateAPIKey,
   addTagsToContentController.addTagsToContent
 );
 router.post(
   "/api/getTagsForContent",
+  apiAuth.validateAPIKey,
   getTagsForContentController.getTagsForContent
 );
 router.patch(
   "/api/updateContentTag",
+  apiAuth.validateAPIKey,
   updateContentTagController.updateContentTag
 );
 router.delete(
   "/api/deleteContentTag",
+  apiAuth.validateAPIKey,
   deleteContentTagController.deleteContentTag
 );
 router.delete(
   "/api/removeTagsFromContent",
+  apiAuth.validateAPIKey,
   removeTagsFromContentController.removeTagsFromContent
 );
-router.get("/api/getContentTags", getContentTagsController.getContentTags);
+router.get(
+  "/api/getContentTags",
+  apiAuth.validateAPIKey,
+  getContentTagsController.getContentTags
+);
 
 module.exports = router;
diff --git a/backend/api/routes/fileRoutes.ts b/backend/api/routes/fileRoutes.ts
index 366773fc..4b0ab9bf 100644
--- a/backend/api/routes/fileRoutes.ts
+++ b/backend/api/routes/fileRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for file uploads and downloads
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 const sharp = require("sharp");
 var router = express.Router();
@@ -21,7 +22,7 @@ var audioStorage = multer.diskStorage({
     callback(null, file.fieldname + "-" + randomizeFilename);
   },
 });
-var desiredNumberOfMegabytesForAudio = 5;
+var desiredNumberOfMegabytesForAudio = 10;
 var uploadAudio = multer({
   storage: audioStorage,
   limits: { fileSize: MEGABYTE * desiredNumberOfMegabytesForAudio },
@@ -142,7 +143,7 @@ function checkSheetMusicFileType(file, cb) {
 // });
 
 // uploadAudio
-router.post("/api/uploadAudio", function (req, res) {
+router.post("/api/uploadAudio", apiAuth.validateAPIKey, function (req, res) {
   var error = "";
   var results = [];
   var responseCode;
@@ -179,93 +180,103 @@ router.post("/api/uploadAudio", function (req, res) {
 });
 
 // uploadSheetMusic
-router.post("/api/uploadSheetMusic", function (req, res) {
-  var error = "";
-  var results = [];
-  var responseCode;
-  uploadSheetMusic(req, res, function (err) {
-    if (err instanceof multer.MulterError) {
-      // A Multer error occurred when uploading.
-      error = err.message;
-      responseCode = 500;
-    } else if (err) {
-      // An unknown error occurred when uploading.
-      error = err;
-      responseCode = 500;
-    } else {
-      // Everything went fine.
-      responseCode = 200;
-      console.log(req.file);
-      console.log(req.file.path);
-      let fileInfo = {
-        filename: req.file.filename,
-        filepath:
-          "https://www.compositiontoday.net/sheetMusic/" + req.file.filename,
+router.post(
+  "/api/uploadSheetMusic",
+  apiAuth.validateAPIKey,
+  function (req, res) {
+    var error = "";
+    var results = [];
+    var responseCode;
+    uploadSheetMusic(req, res, function (err) {
+      if (err instanceof multer.MulterError) {
+        // A Multer error occurred when uploading.
+        error = err.message;
+        responseCode = 500;
+      } else if (err) {
+        // An unknown error occurred when uploading.
+        error = err;
+        responseCode = 500;
+      } else {
+        // Everything went fine.
+        responseCode = 200;
+        console.log(req.file);
+        console.log(req.file.path);
+        let fileInfo = {
+          filename: req.file.filename,
+          filepath:
+            "https://www.compositiontoday.net/sheetMusic/" + req.file.filename,
+        };
+        results.push(fileInfo);
+      }
+      // package data
+      var ret = {
+        result: results,
+        error: error,
       };
-      results.push(fileInfo);
-    }
-    // package data
-    var ret = {
-      result: results,
-      error: error,
-    };
-    // send data
-    res.status(responseCode).json(ret);
-  });
-});
+      // send data
+      res.status(responseCode).json(ret);
+    });
+  }
+);
 
 // uploadProfileImage
-router.post("/api/uploadProfileImage", function (req, res) {
-  var error = "";
-  var results = [];
-  var responseCode;
-  uploadImage(req, res, async function (err) {
-    if (err instanceof multer.MulterError) {
-      // A Multer error occurred when uploading.
-      error = err.message;
-      responseCode = 500;
-    } else if (err) {
-      // An unknown error occurred when uploading.
-      error = err;
-      responseCode = 500;
-    } else {
-      // Everything went fine.
-      responseCode = 200;
-      console.log(req.file);
-      console.log(req.file.path);
-      const { filename: image } = req.file;
-      var options = {
-        width: 256,
-        height: 256,
-        fit: sharp.fit.cover,
-        position: sharp.strategy.entropy,
-      };
-      await sharp(req.file.path)
-        .resize(options)
-        .jpeg()
-        .toFile(path.resolve(req.file.destination, "rs" + image));
-      fs.unlinkSync(req.file.path);
+router.post(
+  "/api/uploadProfileImage",
+  apiAuth.validateAPIKey,
+  function (req, res) {
+    var error = "";
+    var results = [];
+    var responseCode;
+    uploadImage(req, res, async function (err) {
+      if (err instanceof multer.MulterError) {
+        // A Multer error occurred when uploading.
+        error = err.message;
+        responseCode = 500;
+      } else if (err) {
+        // An unknown error occurred when uploading.
+        error = err;
+        responseCode = 500;
+      } else {
+        // Everything went fine.
+        responseCode = 200;
+        console.log(req.file);
+        console.log(req.file.path);
+        const { filename: image } = req.file;
+        var options = {
+          width: 256,
+          height: 256,
+          fit: sharp.fit.cover,
+          position: sharp.strategy.entropy,
+        };
+        await sharp(req.file.path)
+          .resize(options)
+          .jpeg()
+          .toFile(path.resolve(req.file.destination, "rs" + image));
+        fs.unlinkSync(req.file.path);
 
-      // return res.send("SUCCESS!");
-      let fileInfo = {
-        filename: req.file.filename,
-        filepath:
-          "https://www.compositiontoday.net/images/" + "rs" + req.file.filename,
+        // return res.send("SUCCESS!");
+        let fileInfo = {
+          filename: req.file.filename,
+          filepath:
+            "https://www.compositiontoday.net/images/" +
+            "rs" +
+            req.file.filename,
+        };
+        results.push(fileInfo);
+      }
+      // package data
+      var ret = {
+        result: results,
+        error: error,
       };
-      results.push(fileInfo);
-    }
-    // package data
-    var ret = {
-      result: results,
-      error: error,
-    };
-    // send data
-    res.status(responseCode).json(ret);
-  });
-});
+      // send data
+      res.status(responseCode).json(ret);
+    });
+  }
+);
 
 // uploadImage
-router.post("/api/uploadImage", function (req, res) {
+router.post("/api/uploadImage", apiAuth.validateAPIKey, function (req, res) {
   var error = "";
   var results = [];
   var responseCode;
@@ -314,7 +325,7 @@ router.post("/api/uploadImage", function (req, res) {
 });
 
 // delete file
-router.delete("/api/deleteFile", async (req, res) => {
+router.delete("/api/deleteFile", apiAuth.validateAPIKey, async (req, res) => {
   // incoming: filepath
   // outgoing: success or error
 
diff --git a/backend/api/routes/inboxRoutes.ts b/backend/api/routes/inboxRoutes.ts
index 560e321f..604e0181 100644
--- a/backend/api/routes/inboxRoutes.ts
+++ b/backend/api/routes/inboxRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for inbox entries
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -10,17 +11,28 @@ const getInboxEntriesController = require("../controllers/inboxControllers/getIn
 
 router.post(
   "/api/createInboxEntry",
+  apiAuth.validateAPIKey,
   createInboxEntryController.createInboxEntry
 );
-router.post("/api/readInboxEntry", readInboxEntryController.readInboxEntry);
+router.post(
+  "/api/readInboxEntry",
+  apiAuth.validateAPIKey,
+  readInboxEntryController.readInboxEntry
+);
 router.patch(
   "/api/updateInboxEntry",
+  apiAuth.validateAPIKey,
   updateInboxEntryController.updateInboxEntry
 );
 router.delete(
   "/api/deleteInboxEntry",
+  apiAuth.validateAPIKey,
   deleteInboxEntryController.deleteInboxEntry
 );
-router.get("/api/getInboxEntries", getInboxEntriesController.getInboxEntries);
+router.get(
+  "/api/getInboxEntries",
+  apiAuth.validateAPIKey,
+  getInboxEntriesController.getInboxEntries
+);
 
 module.exports = router;
diff --git a/backend/api/routes/likeRoutes.ts b/backend/api/routes/likeRoutes.ts
index d6ec1a6c..1c50de53 100644
--- a/backend/api/routes/likeRoutes.ts
+++ b/backend/api/routes/likeRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for likes
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -15,43 +16,71 @@ const didUserLikeContentController = require("../controllers/likeControllers/did
 const getLikeCountForCommentController = require("../controllers/likeControllers/getLikeCountForCommentController.ts");
 const getLikeCountForContentController = require("../controllers/likeControllers/getLikeCountForContentController.ts");
 const didUserLikeCommentController = require("../controllers/likeControllers/didUserLikeCommentController.ts");
-router.post("/api/createLike", createLikeController.createLike);
+router.post(
+  "/api/createLike",
+  apiAuth.validateAPIKey,
+  createLikeController.createLike
+);
 router.post(
   "/api/getLikeCountForContent",
+  apiAuth.validateAPIKey,
   getLikeCountForContentController.getLikeCountForContent
 );
 router.post(
   "/api/getLikeCountForComment",
+  apiAuth.validateAPIKey,
   getLikeCountForCommentController.getLikeCountForComment
 );
 router.post(
   "/api/createLikeForComment",
+  apiAuth.validateAPIKey,
   createLikeForCommentController.createLikeForComment
 );
 router.post(
   "/api/createLikeForContent",
+  apiAuth.validateAPIKey,
   createLikeForContentController.createLikeForContent
 );
 router.post(
   "/api/didUserLikeContent",
+  apiAuth.validateAPIKey,
   didUserLikeContentController.didUserLikeContent
 );
 router.post(
   "/api/didUserLikeComment",
+  apiAuth.validateAPIKey,
   didUserLikeCommentController.didUserLikeComment
 );
 
-router.post("/api/readLike", readLikeController.readLike);
+router.post(
+  "/api/readLike",
+  apiAuth.validateAPIKey,
+  readLikeController.readLike
+);
 router.post(
   "/api/getLikesForContent",
+  apiAuth.validateAPIKey,
   getLikesForContentController.getLikesForContent
 );
 router.post(
   "/api/getLikesForComment",
+  apiAuth.validateAPIKey,
   getLikesForCommentController.getLikesForComment
 );
-router.patch("/api/updateLike", updateLikeController.updateLike);
-router.delete("/api/deleteLike", deleteLikeController.deleteLike);
-router.get("/api/getLikes", getLikesController.getLikes);
+router.patch(
+  "/api/updateLike",
+  apiAuth.validateAPIKey,
+  updateLikeController.updateLike
+);
+router.delete(
+  "/api/deleteLike",
+  apiAuth.validateAPIKey,
+  deleteLikeController.deleteLike
+);
+router.get(
+  "/api/getLikes",
+  apiAuth.validateAPIKey,
+  getLikesController.getLikes
+);
 
 module.exports = router;
diff --git a/backend/api/routes/likeTypeRoutes.ts b/backend/api/routes/likeTypeRoutes.ts
index 7939494c..91dc10d4 100644
--- a/backend/api/routes/likeTypeRoutes.ts
+++ b/backend/api/routes/likeTypeRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for likes
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -8,10 +9,30 @@ const updateLikeTypeController = require("../controllers/likeTypeControllers/upd
 const deleteLikeTypeController = require("../controllers/likeTypeControllers/deleteLikeTypeController.ts");
 const getLikeTypesController = require("../controllers/likeTypeControllers/getLikeTypesController.ts");
 
-router.post("/api/createLikeType", createLikeTypeController.createLikeType);
-router.post("/api/readLikeType", readLikeTypeController.readLikeType);
-router.patch("/api/updateLikeType", updateLikeTypeController.updateLikeType);
-router.delete("/api/deleteLikeType", deleteLikeTypeController.deleteLikeType);
-router.get("/api/getLikeTypes", getLikeTypesController.getLikeTypes);
+router.post(
+  "/api/createLikeType",
+  apiAuth.validateAPIKey,
+  createLikeTypeController.createLikeType
+);
+router.post(
+  "/api/readLikeType",
+  apiAuth.validateAPIKey,
+  readLikeTypeController.readLikeType
+);
+router.patch(
+  "/api/updateLikeType",
+  apiAuth.validateAPIKey,
+  updateLikeTypeController.updateLikeType
+);
+router.delete(
+  "/api/deleteLikeType",
+  apiAuth.validateAPIKey,
+  deleteLikeTypeController.deleteLikeType
+);
+router.get(
+  "/api/getLikeTypes",
+  apiAuth.validateAPIKey,
+  getLikeTypesController.getLikeTypes
+);
 
 module.exports = router;
diff --git a/backend/api/routes/relatedProjectsRoutes.ts b/backend/api/routes/relatedProjectsRoutes.ts
index 0ff11057..88a0c7d6 100755
--- a/backend/api/routes/relatedProjectsRoutes.ts
+++ b/backend/api/routes/relatedProjectsRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for likes
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -7,9 +8,25 @@ const editProjectController = require("../controllers/relatedProjectsControllers
 const removeProjectController = require("../controllers/relatedProjectsControllers/removeProjectController.ts");
 const getProjectsController = require("../controllers/relatedProjectsControllers/getProjectsController.ts");
 
-router.post("/api/addProject", addProjectController.addProject);
-router.patch("/api/editProject", editProjectController.editProject);
-router.delete("/api/removeProject", removeProjectController.removeProject);
-router.get("/api/getProjects", getProjectsController.getProjects);
+router.post(
+  "/api/addProject",
+  apiAuth.validateAPIKey,
+  addProjectController.addProject
+);
+router.patch(
+  "/api/editProject",
+  apiAuth.validateAPIKey,
+  editProjectController.editProject
+);
+router.delete(
+  "/api/removeProject",
+  apiAuth.validateAPIKey,
+  removeProjectController.removeProject
+);
+router.get(
+  "/api/getProjects",
+  apiAuth.validateAPIKey,
+  getProjectsController.getProjects
+);
 
 module.exports = router;
diff --git a/backend/api/routes/specializationTagRoutes.ts b/backend/api/routes/specializationTagRoutes.ts
index a3887374..2e635d92 100644
--- a/backend/api/routes/specializationTagRoutes.ts
+++ b/backend/api/routes/specializationTagRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for specialization tags
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -12,30 +13,37 @@ const assignComposerGenreController = require("../controllers/specializationTagC
 
 router.post(
   "/api/assignComposerGenre",
+  apiAuth.validateAPIKey,
   assignComposerGenreController.assignComposerGenre
 );
 router.post(
   "/api/createSpecializationTag",
+  apiAuth.validateAPIKey,
   createSpecializationTagController.createSpecializationTag
 );
 router.get(
   "/api/getComposerGenres",
+  apiAuth.validateAPIKey,
   getComposerGenresController.getComposerGenres
 );
 router.post(
   "/api/getSpecializationTagsForUser",
+  apiAuth.validateAPIKey,
   getSpecializationTagsForUserController.getSpecializationTagsForUser
 );
 router.patch(
   "/api/updateSpecializationTag",
+  apiAuth.validateAPIKey,
   updateSpecializationTagController.updateSpecializationTag
 );
 router.delete(
   "/api/deleteSpecializationTag",
+  apiAuth.validateAPIKey,
   deleteSpecializationTagController.deleteSpecializationTag
 );
 router.get(
   "/api/getSpecializationTags",
+  apiAuth.validateAPIKey,
   getSpecializationTagsController.getSpecializationTags
 );
 
diff --git a/backend/api/routes/tagRoutes.ts b/backend/api/routes/tagRoutes.ts
index 43abbcea..58f9a066 100644
--- a/backend/api/routes/tagRoutes.ts
+++ b/backend/api/routes/tagRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for tags
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -10,12 +11,32 @@ const getTagsController = require("../controllers/tagControllers/getTagsControll
 const addGenreController = require("../controllers/tagControllers/addGenreController.ts");
 const removeGenreController = require("../controllers/tagControllers/removeGenreController.ts");
 
-router.post("/api/createTag", createTagController.createTag);
-router.post("/api/addGenre", addGenreController.addGenre);
-router.post("/api/removeGenre", removeGenreController.removeGenre);
-router.post("/api/readTag", readTagController.readTag);
-router.patch("/api/updateTag", updateTagController.updateTag);
-router.delete("/api/deleteTag", deleteTagController.deleteTag);
-router.get("/api/getTags", getTagsController.getTags);
+router.post(
+  "/api/createTag",
+  apiAuth.validateAPIKey,
+  createTagController.createTag
+);
+router.post(
+  "/api/addGenre",
+  apiAuth.validateAPIKey,
+  addGenreController.addGenre
+);
+router.post(
+  "/api/removeGenre",
+  apiAuth.validateAPIKey,
+  removeGenreController.removeGenre
+);
+router.post("/api/readTag", apiAuth.validateAPIKey, readTagController.readTag);
+router.patch(
+  "/api/updateTag",
+  apiAuth.validateAPIKey,
+  updateTagController.updateTag
+);
+router.delete(
+  "/api/deleteTag",
+  apiAuth.validateAPIKey,
+  deleteTagController.deleteTag
+);
+router.get("/api/getTags", apiAuth.validateAPIKey, getTagsController.getTags);
 
 module.exports = router;
diff --git a/backend/api/routes/userProfileRoutes.ts b/backend/api/routes/userProfileRoutes.ts
index 0c931c6d..ccd333ce 100644
--- a/backend/api/routes/userProfileRoutes.ts
+++ b/backend/api/routes/userProfileRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for user profiles
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -12,24 +13,37 @@ const getUserProfileByUsernameController = require("../controllers/userProfileCo
 
 router.post(
   "/api/createUserProfile",
+  apiAuth.validateAPIKey,
   createUserProfileController.createUserProfile
 );
-router.post("/api/readUserProfile", readUserProfileController.readUserProfile);
+router.post(
+  "/api/readUserProfile",
+  apiAuth.validateAPIKey,
+  readUserProfileController.readUserProfile
+);
 router.post(
   "/api/readUserProfileByUID",
+  apiAuth.validateAPIKey,
   readUserProfileByUIDController.readUserProfileByUID
 );
 router.patch(
   "/api/updateUserProfile",
+  apiAuth.validateAPIKey,
   updateUserProfileController.updateUserProfile
 );
 router.delete(
   "/api/deleteUserProfile",
+  apiAuth.validateAPIKey,
   deleteUserProfileController.deleteUserProfile
 );
-router.get("/api/getUserProfiles", getUserProfilesController.getUserProfiles);
+router.get(
+  "/api/getUserProfiles",
+  apiAuth.validateAPIKey,
+  getUserProfilesController.getUserProfiles
+);
 router.post(
   "/api/getUserProfileByUsername",
+  apiAuth.validateAPIKey,
   getUserProfileByUsernameController.getUserProfile
 );
 
diff --git a/backend/api/routes/userRoutes.ts b/backend/api/routes/userRoutes.ts
index d9024319..09ef18f4 100644
--- a/backend/api/routes/userRoutes.ts
+++ b/backend/api/routes/userRoutes.ts
@@ -1,4 +1,5 @@
 // Routes for users
+var apiAuth = require("../auth/validateAPIKey.ts");
 var express = require("express");
 var router = express.Router();
 
@@ -22,36 +23,96 @@ const makeAdminController = require("../controllers/userControllers/makeAdminCon
 const removeAdminController = require("../controllers/userControllers/removeAdminController.ts");
 const listAdminsController = require("../controllers/userControllers/listAdminsController.ts");
 
-router.post("/api/createUser", createUserController.createUser);
-router.get("/api/listAdmins", listAdminsController.listAdmins);
-router.post("/api/isAdmin", isAdminController.isAdmin);
-router.post("/api/makeAdmin", makeAdminController.makeAdmin);
-router.delete("/api/removeAdmin", removeAdminController.removeAdmin);
-router.post("/api/createComposer", createComposerController.createComposer);
-router.post("/api/removePublisher", removePublisherController.removePublisher);
+router.post(
+  "/api/createUser",
+  apiAuth.validateAPIKey,
+  createUserController.createUser
+);
+router.get(
+  "/api/listAdmins",
+  apiAuth.validateAPIKey,
+  listAdminsController.listAdmins
+);
+router.post("/api/isAdmin", apiAuth.validateAPIKey, isAdminController.isAdmin);
+router.post(
+  "/api/makeAdmin",
+  apiAuth.validateAPIKey,
+  makeAdminController.makeAdmin
+);
+router.delete(
+  "/api/removeAdmin",
+  apiAuth.validateAPIKey,
+  removeAdminController.removeAdmin
+);
+router.post(
+  "/api/createComposer",
+  apiAuth.validateAPIKey,
+  createComposerController.createComposer
+);
+router.post(
+  "/api/removePublisher",
+  apiAuth.validateAPIKey,
+  removePublisherController.removePublisher
+);
 
 router.post(
   "/api/createScrapedComposer",
+  apiAuth.validateAPIKey,
   createScrapedComposerController.createScrapedComposer
 );
-router.post("/api/searchComposers", searchComposersController.searchComposers);
-router.post("/api/createPublisher", createPublisherController.createPublisher);
-router.post("/api/readUser", readUserController.readUser);
-router.post("/api/readUserByUID", readUserByUIDController.readUserByUID);
+router.post(
+  "/api/searchComposers",
+  apiAuth.validateAPIKey,
+  searchComposersController.searchComposers
+);
+router.post(
+  "/api/createPublisher",
+  apiAuth.validateAPIKey,
+  createPublisherController.createPublisher
+);
+router.post(
+  "/api/readUser",
+  apiAuth.validateAPIKey,
+  readUserController.readUser
+);
+router.post(
+  "/api/readUserByUID",
+  apiAuth.validateAPIKey,
+  readUserByUIDController.readUserByUID
+);
 router.post(
   "/api/readUserByUsername",
+  apiAuth.validateAPIKey,
   readUserByUsernameController.readUserByUsername
 );
-router.patch("/api/updateUser", updateUserController.updateUser);
-router.delete("/api/deleteUser", deleteUserController.deleteUser);
-router.get("/api/getUsers", getUsersController.getUsers);
+router.patch(
+  "/api/updateUser",
+  apiAuth.validateAPIKey,
+  updateUserController.updateUser
+);
+router.delete(
+  "/api/deleteUser",
+  apiAuth.validateAPIKey,
+  deleteUserController.deleteUser
+);
+router.get(
+  "/api/getUsers",
+  apiAuth.validateAPIKey,
+  getUsersController.getUsers
+);
 router.get(
   "/api/getComposersForShowcase",
+  apiAuth.validateAPIKey,
   getComposersForShowcaseController.getComposersForShowcase
 );
-router.post("/api/getLoggedInUser", getLoggedInUserController.getLoggedInUser);
+router.post(
+  "/api/getLoggedInUser",
+  apiAuth.validateAPIKey,
+  getLoggedInUserController.getLoggedInUser
+);
 router.post(
   "/api/getComposersByGenre",
+  apiAuth.validateAPIKey,
   getComposersByGenreController.getComposersByGenre
 );
 
diff --git a/backend/server.js b/backend/server.js
index 34a645a4..1cf7947f 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -66,6 +66,7 @@ app.use("/", relatedProjectsRoutes);
 
 app.use((req, res, next) => {
   res.setHeader("Access-Control-Allow-Origin", "*");
+
   res.setHeader(
     "Access-Control-Allow-Headers",
     "Origin, X-Requested-With, Content-Type, Accept, Authorization"
diff --git a/frontend/package.json b/frontend/package.json
index 0f8a0c95..ed6673dc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,6 +2,7 @@
   "name": "composition-today",
   "version": "0.1.0",
   "private": true,
+  "proxy": "https://www.compositiontoday.net/",
   "dependencies": {
     "@date-io/date-fns": "^2.11.0",
     "@editorjs/editorjs": "^2.23.2",
diff --git a/frontend/public/test.mp3 b/frontend/public/test.mp3
new file mode 100644
index 00000000..e2346942
Binary files /dev/null and b/frontend/public/test.mp3 differ
diff --git a/frontend/src/Handlers/GenericGetHandler.ts b/frontend/src/Handlers/GenericGetHandler.ts
index ef9a8f36..62f08be1 100644
--- a/frontend/src/Handlers/GenericGetHandler.ts
+++ b/frontend/src/Handlers/GenericGetHandler.ts
@@ -1,11 +1,20 @@
 // returns JSON containing users
 export default async function GenericGetHandler(url: string) {
   let message = [];
-
+  // request headers
+  let headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  // api key
+  let key =
+    process.env.REACT_APP_COMP_TODAY_API_KEY === undefined
+      ? "no_key"
+      : process.env.REACT_APP_COMP_TODAY_API_KEY;
+  headers.append("X-API-Key", key);
+  // make call
   try {
     const response = fetch("https://www.compositiontoday.net/api/" + url, {
       method: "GET",
-      headers: { "Content-Type": "application/json" },
+      headers: headers,
     });
 
     var retResponse = await response;
diff --git a/frontend/src/Handlers/GenericHanderFile.ts b/frontend/src/Handlers/GenericHanderFile.ts
index ee01bd08..5ffd5fb8 100644
--- a/frontend/src/Handlers/GenericHanderFile.ts
+++ b/frontend/src/Handlers/GenericHanderFile.ts
@@ -5,11 +5,20 @@ export default async function GetContentByTypeHandlerFile(
   obj: GenericHandlerType
 ) {
   let message = [];
-
+  // request headers
+  let headers = new Headers();
+  // api key
+  let key =
+    process.env.REACT_APP_COMP_TODAY_API_KEY === undefined
+      ? "no_key"
+      : process.env.REACT_APP_COMP_TODAY_API_KEY;
+  headers.append("X-API-Key", key);
+  // make call
   try {
     const response = fetch("https://www.compositiontoday.net/api/" + obj.path, {
       method: obj.methodType,
       body: obj.data,
+      headers: headers,
       // headers: { "Content-Type": "multipart/form-data" },
     });
 
diff --git a/frontend/src/Handlers/GenericHandler.ts b/frontend/src/Handlers/GenericHandler.ts
index 80c46bc6..4cf4590d 100644
--- a/frontend/src/Handlers/GenericHandler.ts
+++ b/frontend/src/Handlers/GenericHandler.ts
@@ -3,12 +3,21 @@ import { GenericHandlerType } from "../ObjectInterface";
 // returns JSON containing users
 export default async function GetContentByTypeHandler(obj: GenericHandlerType) {
   let message = [];
-
+  // request headers
+  let headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  // api key
+  let key =
+    process.env.REACT_APP_COMP_TODAY_API_KEY === undefined
+      ? "no_key"
+      : process.env.REACT_APP_COMP_TODAY_API_KEY;
+  headers.append("X-API-Key", key);
+  // make call
   try {
     const response = fetch("https://www.compositiontoday.net/api/" + obj.path, {
       method: obj.methodType,
       body: obj.data,
-      headers: { "Content-Type": "application/json" },
+      headers: headers,
     });
 
     let retResponse = await response;
diff --git a/frontend/src/Handlers/GetContentByTypeHandler.ts b/frontend/src/Handlers/GetContentByTypeHandler.ts
index fb79539a..37fbefca 100644
--- a/frontend/src/Handlers/GetContentByTypeHandler.ts
+++ b/frontend/src/Handlers/GetContentByTypeHandler.ts
@@ -4,14 +4,23 @@ export default async function GetContentByTypeHandler(contentType: string) {
 
   var obj = { contentType: contentType };
   var js = JSON.stringify(obj);
-
+  // request headers
+  let headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  // api key
+  let key =
+    process.env.REACT_APP_COMP_TODAY_API_KEY === undefined
+      ? "no_key"
+      : process.env.REACT_APP_COMP_TODAY_API_KEY;
+  headers.append("X-API-Key", key);
+  // make call
   try {
     const response = fetch(
       "https://www.compositiontoday.net/api/getContentByType",
       {
         method: "POST",
         body: js,
-        headers: { "Content-Type": "application/json" },
+        headers: headers,
       }
     );
 
diff --git a/frontend/src/Handlers/GetUsersHandler.ts b/frontend/src/Handlers/GetUsersHandler.ts
index 8f3c9dd6..3a95d9e4 100644
--- a/frontend/src/Handlers/GetUsersHandler.ts
+++ b/frontend/src/Handlers/GetUsersHandler.ts
@@ -8,12 +8,21 @@ export default async function GetUsersHandler(event: {
 
   var obj = {};
   var js = JSON.stringify(obj);
-
+  // request headers
+  let headers = new Headers();
+  headers.append("Content-Type", "application/json");
+  // api key
+  let key =
+    process.env.REACT_APP_COMP_TODAY_API_KEY === undefined
+      ? "no_key"
+      : process.env.REACT_APP_COMP_TODAY_API_KEY;
+  headers.append("X-API-Key", key);
+  // make call
   // try {
   const response = fetch("https://www.compositiontoday.net/api/getUsers", {
     method: "GET",
     // body: js,
-    headers: { "Content-Type": "application/json" },
+    headers: headers,
   });
 
   var txt = (await response).text();
diff --git a/frontend/src/Pages/Profile/Music/MusicCard.tsx b/frontend/src/Pages/Profile/Music/MusicCard.tsx
index 1bb7d389..34669ae0 100644
--- a/frontend/src/Pages/Profile/Music/MusicCard.tsx
+++ b/frontend/src/Pages/Profile/Music/MusicCard.tsx
@@ -1,117 +1,184 @@
-import { MusicType } from '../../../ObjectInterface';
-import ReactAudioPlayer from 'react-audio-player';
-import { Divider } from '@mui/material';
-import CardFooter from '../CardFooter';
-import MusicCardHeader from './MusicCardHeader';
-import { useState } from 'react';
-import { Image } from 'react-bootstrap'
-import Waveform from './Player/Waveform';
-
+import { MusicType } from "../../../ObjectInterface";
+import ReactAudioPlayer from "react-audio-player";
+import { Divider } from "@mui/material";
+import CardFooter from "../CardFooter";
+import MusicCardHeader from "./MusicCardHeader";
+import { useState } from "react";
+import { Image } from "react-bootstrap";
+import Waveform from "./Player/Waveform";
 
 type Props = {
-    music: MusicType;
-    isMyProfile: boolean;
-    notifyVirtualizer: () => void;
-    notifyChange: () => void;
-    clearCache: () => void;
-}
-
-
-export default function MusicCard({ music, isMyProfile, notifyVirtualizer, notifyChange, clearCache }: Props) {
-    const {
-        id,
-        contentName,
-        description,
-        audioFilepath,
-        sheetMusicFilepath,
-        timestamp,
-        contentText,
-        username,
-        profilePicPath,
-        displayName,
-        likeCount,
-        isLikedByLoggedInUser,
-        tagArray,
-        imageFilepath,
-        imageFilename,
-    } = music;
-
-    const [showMore, setShowMore] = useState(false);
-
-    // Cleanup function gets called when component is unmounted
-    // off the virtualized window.
-    // useEffect(() => {
-    //     console.log("remounted")
-    //     return () => {
-    //         // clearCache();
-    //         setIsCommentsOpen(false);
-    //         console.log("unmounted");
-    //         vRef?.current?.recomputeRowHeights(1);
-    //         vRef?.current?.forceUpdateGrid();
-    //     };
-    // }, [])
-
-    return (
-        <div className="card">
-            <MusicCardHeader music={music} isMyProfile={false} notifyChange={notifyChange} />
-
-            <Divider variant="fullWidth" component="div" sx={{ margin: "0.5% auto", width: "95%" }} />
-
-            <div className="card-body" style={{ paddingBottom: "0%", display: "flex" }}>
-                <div>
-                    {imageFilepath ?
-                        <div>
-                            <Image src={imageFilepath} style={{ height: "auto", width: "auto", maxHeight: "30vh", maxWidth: "100%", overflow: "hidden", float: "left" }} />
-                        </div>
-                        :
-                        <></>
-                    }
-                </div>
+  music: MusicType;
+  isMyProfile: boolean;
+  notifyVirtualizer: () => void;
+  notifyChange: () => void;
+  clearCache: () => void;
+};
+
+export default function MusicCard({
+  music,
+  isMyProfile,
+  notifyVirtualizer,
+  notifyChange,
+  clearCache,
+}: Props) {
+  const {
+    id,
+    contentName,
+    description,
+    audioFilepath,
+    sheetMusicFilepath,
+    timestamp,
+    contentText,
+    username,
+    profilePicPath,
+    displayName,
+    likeCount,
+    isLikedByLoggedInUser,
+    tagArray,
+    imageFilepath,
+    imageFilename,
+  } = music;
+
+  const [showMore, setShowMore] = useState(false);
+
+  // Cleanup function gets called when component is unmounted
+  // off the virtualized window.
+  // useEffect(() => {
+  //     console.log("remounted")
+  //     return () => {
+  //         // clearCache();
+  //         setIsCommentsOpen(false);
+  //         console.log("unmounted");
+  //         vRef?.current?.recomputeRowHeights(1);
+  //         vRef?.current?.forceUpdateGrid();
+  //     };
+  // }, [])
+
+  return (
+    <div className="card">
+      <MusicCardHeader
+        music={music}
+        isMyProfile={false}
+        notifyChange={notifyChange}
+      />
+
+      <Divider
+        variant="fullWidth"
+        component="div"
+        sx={{ margin: "0.5% auto", width: "95%" }}
+      />
+
+      <div
+        className="card-body"
+        style={{ paddingBottom: "0%", display: "flex" }}
+      >
+        <div>
+          {imageFilepath ? (
+            <div>
+              <Image
+                src={imageFilepath}
+                style={{
+                  height: "auto",
+                  width: "auto",
+                  maxHeight: "30vh",
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  float: "left",
+                }}
+              />
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
 
-                <div style={{ marginLeft: "5%", display: "flex", flexDirection: "column", flexGrow: "1" }}>
-                    <h5 className="card-title" style={{ margin: "0%" }}>{contentName}</h5>
-                    <p className="card-text" style={{ margin: "0%" }}>{contentText}</p>
-                    <p className="card-text-secondary" style={{ margin: "0%" }}>{(showMore || !description || description.length <= 250) ? description : description?.substring(0, 250) + "..."}</p>
-                    <div style={{ float: "right" }}>
-                        {(!showMore && description && description.length > 250) && <p style={{ cursor: "pointer", textDecoration: "underline" }} onClick={() => { setShowMore(true); clearCache(); notifyVirtualizer() }}>Show more</p>}
-                        {(showMore && description && description.length > 250) && <p style={{ cursor: "pointer", textDecoration: "underline" }} onClick={() => { setShowMore(false); clearCache(); notifyVirtualizer() }}>Show less</p>}
-                    </div>
-                    {sheetMusicFilepath &&
-                        <a href={sheetMusicFilepath} style={{textDecoration:"underline", color: "blue"}} target="_blank" rel="noreferrer">
-                            Open sheet music
-                        </a>
-                    }
-                    <div>
-                        {audioFilepath &&
-                            <>
-                                {/* <ReactAudioPlayer
+        <div
+          style={{
+            marginLeft: "5%",
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: "1",
+          }}
+        >
+          <h5 className="card-title" style={{ margin: "0%" }}>
+            {contentName}
+          </h5>
+          <p className="card-text" style={{ margin: "0%" }}>
+            {contentText}
+          </p>
+          <p className="card-text-secondary" style={{ margin: "0%" }}>
+            {showMore || !description || description.length <= 250
+              ? description
+              : description?.substring(0, 250) + "..."}
+          </p>
+          <div style={{ float: "right" }}>
+            {!showMore && description && description.length > 250 && (
+              <p
+                style={{ cursor: "pointer", textDecoration: "underline" }}
+                onClick={() => {
+                  setShowMore(true);
+                  clearCache();
+                  notifyVirtualizer();
+                }}
+              >
+                Show more
+              </p>
+            )}
+            {showMore && description && description.length > 250 && (
+              <p
+                style={{ cursor: "pointer", textDecoration: "underline" }}
+                onClick={() => {
+                  setShowMore(false);
+                  clearCache();
+                  notifyVirtualizer();
+                }}
+              >
+                Show less
+              </p>
+            )}
+          </div>
+          {sheetMusicFilepath && (
+            <a
+              href={sheetMusicFilepath}
+              style={{ textDecoration: "underline", color: "blue" }}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Open sheet music
+            </a>
+          )}
+          <div>
+            {audioFilepath && (
+              <>
+                {/* <ReactAudioPlayer
                                     src={audioFilepath}
                                     autoPlay={false}
                                     controls
                                 /> */}
-                                <Waveform url={audioFilepath} />
-                            </>
-
-                        }
-                    </div>
-                </div>
-
-
-            </div>
-
-            <Divider variant="fullWidth" component="div" sx={{ margin: "1% auto", width: "95%" }} />
-
-            <div>
-                <CardFooter
-                    clearCache={clearCache}
-                    notifyVirtualizer={notifyVirtualizer}
-                    notifyChange={notifyChange}
-                    id={id}
-                    likeCount={likeCount}
-                    isLikedByLoggedInUser={isLikedByLoggedInUser}
-                />
-            </div>
-
+                <Waveform url={audioFilepath} />
+              </>
+            )}
+          </div>
         </div>
-    )
+      </div>
+
+      <Divider
+        variant="fullWidth"
+        component="div"
+        sx={{ margin: "1% auto", width: "95%" }}
+      />
+
+      <div>
+        <CardFooter
+          clearCache={clearCache}
+          notifyVirtualizer={notifyVirtualizer}
+          notifyChange={notifyChange}
+          id={id}
+          likeCount={likeCount}
+          isLikedByLoggedInUser={isLikedByLoggedInUser}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/Pages/Profile/Music/Player/Waveform.jsx b/frontend/src/Pages/Profile/Music/Player/Waveform.jsx
index 838b2386..2772b390 100644
--- a/frontend/src/Pages/Profile/Music/Player/Waveform.jsx
+++ b/frontend/src/Pages/Profile/Music/Player/Waveform.jsx
@@ -22,19 +22,11 @@ const formWaveSurferOptions = (ref) => ({
   normalize: true,
   // Use the PeakCache to improve rendering speed of large waveforms.
   partialRender: true,
-  // xhr: {
-  //   cache: "default",
-  //   mode: "no-cors",
-  //   method: "GET",
-  //   credentials: "same-origin",
-  //   redirect: "follow",
-  //   referrer: "client",
-  //   headers: [{ key: "Authorization", value: "my-token" }],
-  // },
   xhr: {
     cache: "default",
     mode: "cors",
     method: "GET",
+    // comment out credentials for local testing
     credentials: "include",
     headers: [
       { key: "cache-control", value: "no-cache" },
@@ -57,10 +49,10 @@ export default function Waveform({ url }) {
 
     const options = formWaveSurferOptions(waveformRef.current);
     wavesurfer.current = WaveSurfer.create(options);
-    // const myAudio = new Audio(url);
-    // myAudio.crossOrigin = "anonymous";
 
     wavesurfer.current.load(url);
+    // comment out load above, and use load below
+    // wavesurfer.current.load("https://wavesurfer-js.org/example/media/demo.wav");
 
     wavesurfer.current.on("ready", function () {
       // https://wavesurfer-js.org/docs/methods.html