Merge pull request #86 from agiledev-students-spring2024/login-auth

Final comments and testing

CONTRIBUTING.md

@@ -11,5 +11,3 @@
 * Our team will be using VS Code for our code editor.
 
 * We will be following the Agile workflow.
-
-* At this moment instructions for setting up an environment are not available. Will be updated as work on Sprint 1 begins.

README.md

@@ -71,4 +71,7 @@ To close the app, run the following in the two original command line windows:
 ```
 Ctrl+C
 ```
-and select 'Y' should it ask you to confirm you want to close the app.
+and select 'Y' should it ask you to confirm you want to close the app.
+
+
+For grading purposes a copy of a .env file is located within the "Wardrobe-Wizard-Team" Discord channel

back-end/routes/protected-content-routes.js

@@ -4,19 +4,17 @@ import jwt from 'jsonwebtoken';
 
 const auth =  (req, res, next) => {
     const bearerHeader = req.headers.authorization;
-    //console.log(bearerHeader)
     if (!bearerHeader) {
       return res.status(401).json({ message: 'Unauthorized access' });
     }
-
+    /*
+      since the value reads as Bearer and then the token I split them by the space and took the value in index 1 and
+      checked it 
+    */
     try {
-      // Split at the space and get token from array
       const bearer = bearerHeader.split(' ');
       const bearerToken = bearer[1];
-        // console.log(bearerToken)
-      // Verify the token
       const decoded = jwt.verify(bearerToken, process.env.JWT_SECRET);
-      console.log(decoded)
       req.user = decoded;
       next();
     } catch (error) {

back-end/server.js

@@ -79,13 +79,7 @@ server.get('/shirts', auth, async (req, res) => {
       articleType: 'Shirts' 
     });
     res.json(shirts)
-    // // Check if shirts array is not empty
-    // if (shirts.length > 0) {
-    //   res.json(shirts);
-    // } else {
-    //   // If the array is empty, it may mean no shirts were found for the user
-    //   res.status(404).json({ message: 'No shirts found for this user.' });
-    // }
+
 
   } catch (error) {
     console.error('Server error when fetching shirts:', error);

front-end/src/components/OverlayMenu.css

@@ -65,4 +65,4 @@
   .overlay-menu nav a:focus {
     background: #333; /* A darker shade for hover state */
   }
-
+

front-end/src/components/OverlayMenu.js

@@ -8,7 +8,9 @@ const OverlayMenu = () => {
     const toggleMenu = () => {
         setIsOpen(!isOpen);
     };
-
+    /*
+        on logout the token is removed so that when the user visits the link again they will need to login
+    */
     const handleLogout = () => {
         localStorage.removeItem('token');
     }

front-end/src/screens/Login.js

@@ -18,7 +18,11 @@ const Login = () => {
             username: username,
             password: password
         }).then( res => {
-            console.log(res.data.loggedIn);
+            // console.log(res.data.loggedIn);
+            /*
+                we are using local storage to save the token. first the request is made to the express app
+                and once the login information is verfied and a token returned it is saved.
+            */
                 if(res.data.loggedIn){
                     navigate('/home')
                     localStorage.setItem('token', res.data.token)

front-end/src/screens/Registration.js

@@ -29,6 +29,10 @@ function Registration(){
                     if(res.data.created){
                         navigate('/home')
                         localStorage.setItem('token', res.data.token)
+                        /*
+                            similar to login, on registration of a new account a token is created and saved
+                            to the local storage
+                        */
                     }
                     else{
                         setTakenUsername(true);

front-end/src/screens/Shirts.js

@@ -14,6 +14,10 @@ const Shirt = () => {
               Authorization: `Bearer ${token}`
             }
         };
+        /*
+            every page needs to pass in the authorization header in order to be able to make the get request which ensures 
+            only logged in users can see content
+        */
         axios.get('http://localhost:3001/shirts', config)
         .then( res => {
             setShirts(res.data)