From ec72ac9ea3a952dc6b5a4e15cb9a7480ce8d0069 Mon Sep 17 00:00:00 2001
From: Nathan Rumsey <nathan.s.rumsey@gmail.com>
Date: Fri, 15 Nov 2024 20:39:26 -0800
Subject: [PATCH] rumseyn/resolve authentication (#254)

* Fix CORS error preventing authentication

* Resolve error handling for failed authentication requests

* Resolve miscellaneous nonfatal React errors
---
 client/src/components/nav/TopNavbar.jsx |  3 ++-
 client/src/pages/Home.jsx               | 30 +++++++++++-----------
 client/src/pages/SingleCoursePage.jsx   |  8 +++---
 client/src/utils/apiUtil.js             | 33 ++++++++++++++++---------
 server/app/app.js                       |  2 ++
 5 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/client/src/components/nav/TopNavbar.jsx b/client/src/components/nav/TopNavbar.jsx
index a8ff46da..cf22a61f 100644
--- a/client/src/components/nav/TopNavbar.jsx
+++ b/client/src/components/nav/TopNavbar.jsx
@@ -57,8 +57,9 @@ function LoggedIn(props) {
 
 	return (
 		<>
-			{navItems.map((item) => (
+			{navItems.map((item, index) => (
 				<a
+					key={index}
 					href={item.path}
 					className={`page ${item.className} ${
 						pathname === item.path ? "curr" : ""
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 816f6e37..dc1bd0cf 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -7,36 +7,36 @@ import "../styles/home.css"
 function Home() {
     return(
        <div id="home">
-           <div class="section">
-               <p class="homeHeader">Welcome to MyClassroom</p>
+           <div className="section">
+               <p className="homeHeader">Welcome to MyClassroom</p>
                <p>Open-Source Classroom Polling Software</p>
            </div>
 
-           <div class="infoContainer">
-               <div class="infoConnector"></div>
-               <div class="infoBox leftBox">
+           <div className="infoContainer">
+               <div className="infoConnector"></div>
+               <div className="infoBox leftBox">
                    <img src="classroom.png"></img>
-                   <p class="infoText">Create courses and manage lectures easily.</p>
+                   <p className="infoText">Create courses and manage lectures easily.</p>
                </div>
-               <div class="infoBox rightBox">
+               <div className="infoBox rightBox">
                    <img src="goal.png"></img>
-                   <p class="infoText">Track student progress and manage grades.</p>
+                   <p className="infoText">Track student progress and manage grades.</p>
                </div>
-               <div class="infoBox leftBox">
+               <div className="infoBox leftBox">
                    <img src="lms.png"></img>
-                   <p class="infoText">Seamless integration with educational platforms.</p>
+                   <p className="infoText">Seamless integration with educational platforms.</p>
                </div>
-               <div class="infoBox rightBox">
+               <div className="infoBox rightBox">
                    <img src="graph.png"></img>
-                   <p class="infoText">Boost student engagement with interactive polls.</p>
+                   <p className="infoText">Boost student engagement with interactive polls.</p>
                </div>
-               <div class="infoBox leftBox">
+               <div className="infoBox leftBox">
                    <img src="school.png"></img>
-                   <p class="infoText">Highly customizable and free to use.</p>
+                   <p className="infoText">Highly customizable and free to use.</p>
                </div>
            </div>
        </div>
     )
 }
 
-export default Home
+export default Home
\ No newline at end of file
diff --git a/client/src/pages/SingleCoursePage.jsx b/client/src/pages/SingleCoursePage.jsx
index 62e86e67..06436003 100644
--- a/client/src/pages/SingleCoursePage.jsx
+++ b/client/src/pages/SingleCoursePage.jsx
@@ -12,9 +12,11 @@ function DisplayCoursePage(){
     const { courseId } = useParams()
     let navigate = useNavigate()
     const [ course, role, message, error, loading ] = useCourse()
-    if (role === "student") {
-        navigate(`/${courseId}/lectures`)
-    }
+    useEffect(() => {
+        if (role === "student") {
+            navigate(`/${courseId}/lectures`);
+        }
+    }, [role, navigate, courseId]);
 
     return <>
         { loading ? <TailSpin visibile={true}/> : (error ? <Notice message={message} error={error ? "error" : ""}/> : <div className="singleCourseContainer">
diff --git a/client/src/utils/apiUtil.js b/client/src/utils/apiUtil.js
index 9457ea95..8c97e709 100644
--- a/client/src/utils/apiUtil.js
+++ b/client/src/utils/apiUtil.js
@@ -24,18 +24,29 @@ const handleRequest = async (method, route, reactOpts, body, params) => {
         return responseBody
     }
     catch (e) { // defines global response behaviors for errors so our application's API calls can be coded with reduced repitition
-        if (e.response.status === 401 && (reactOpts.overrideRedirect !== true)) {
-            reactOpts.dispatch(logout())
-            reactOpts.navigate(`/login?redirect=${location.pathname}`)
+        if (e.response) {
+            if (e.response.status === 401 && (reactOpts.overrideRedirect !== true)) {
+                reactOpts.dispatch(logout())
+                reactOpts.navigate(`/login?redirect=${location.pathname}`)
+            }
+            else if (e.response.status === 403) {
+                reactOpts.navigate(`/`)
+            }
+            return {
+                message: e.response.data.error,
+                data: e.response.data,
+                status: e.response.status,
+                error: true
+            }
         }
-        else if (e.response.status === 403) {
-            reactOpts.navigate(`/`)
-        }
-        return {
-            message: e.response.data.error,
-            data: e.response.data,
-            status: e.response.status,
-            error: true
+
+        else {
+            return {
+                message: 'An unexpected error occurred. Please try again later.',
+                data: {},
+                status: 500,
+                error: true
+            }
         }
     }
 }
diff --git a/server/app/app.js b/server/app/app.js
index c5bfcd00..fa66323a 100644
--- a/server/app/app.js
+++ b/server/app/app.js
@@ -2,6 +2,7 @@ const cors = require("cors");
 var express = require("express");
 const cookieParser = require("cookie-parser");
 const { logger, morganMiddleware } = require("../lib/logger");
+
 if (process.env.NODE_ENV == "development") {
 	require("dotenv").config({ override: false });
 }
@@ -19,6 +20,7 @@ app.use(
 		methods: ["GET", "PUT", "POST", "DELETE"],
 		optionsSuccessStatus: 200,
 		credentials: true,
+		allowedHeaders: ['Content-Type', 'Authorization'],
 	})
 );