HER-32 remove jwt at unauthorized response

app/controllers/current_user_controller.rb

@@ -2,7 +2,7 @@ class CurrentUserController < ApplicationController
   before_action :authenticate_user!
 
   # If a user is authenticated, they are set as the current user.
-  def index
+  def show
     render json: UserSerializer.new(current_user).serializable_hash[:data][:attributes], status: :ok
   end
 end

config/routes.rb

@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-  get "/current_user", to: "current_user#index"
+  get "/current_user", to: "current_user#show"
   devise_for :users, path: "", path_names: {
     sign_in: "login",
     sign_out: "logout",

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import './App.css';
-import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
+import { useContext } from 'react';
+import { Routes, Route, Navigate } from "react-router-dom";
 import PageWrapper from './components/PageWrapper';
 import Home from './components/pages/Home';
 import About from './components/pages/About';
@@ -9,11 +10,9 @@ import RequestKit from './components/pages/RequestKit'
 import Registration from './components/auth/Registration';
 import Login from './components/auth/Login';
 import ScrollToHash from './components/ScrollToHash';
-import { useState, useEffect } from 'react';
 import Confirmation from './components/pages/Confirmation';
 import Donation from './components/pages/Donation';
 import RequestSpeaker from './components/pages/RequestSpeaker';
-import { jwtDecode } from 'jwt-decode';
 import AdminDashboard from './components/pages/AdminDashboard';
 import NewForms from './components/NewForms';
 import NewKit from './components/NewKit';
@@ -22,95 +21,34 @@ import AddNew from './components/pages/AddNew';
 import NewKitItem from './components/NewKitItem';
 import AddItemToKit from './components/AddItemToKit';
 import UserProfile from './components/pages/UserProfile';
+import { AuthContext } from './components/auth/AuthContext';
 
 
 
 
 
 function App() {
-  const [loggedIn, setLoggedIn] = useState();
-  const [user, setUser] = useState(null);
-  const [tokenExpiration, setTokenExpiration] = useState(null);
+  const { loggedIn, user } = useContext(AuthContext);
 
-    // Method handles login state and token, checking for existence or expiration
-  useEffect(() => {
-    const token = localStorage.getItem('jwt');
-
-    if (token) {
-      try {
-        const decoded = jwtDecode(token);
-        const now = Date.now() / 1000; // Current time in seconds
-
-        if (decoded.exp > now) {
-          setLoggedIn(true); // Token is valid
-          setUser(decoded.user ? decoded.user : null); // Set user data
-
-          // Calculate remaining time until token expiration
-          const timeUntilExpiration = (decoded.exp - now) * 1000;
-
-          // Notify 5 minutes before expiration
-          if (timeUntilExpiration < 300000) {
-            alert("Your session is about to expire. Please save your work.");
-          }
-
-          // Set token expiration time in state
-          setTokenExpiration(timeUntilExpiration);
-
-        } else {
-          // Token is expired, clear it
-          console.log("Token has expired, clearing JWT.");
-          localStorage.removeItem('jwt');
-          setLoggedIn(false);
-          setUser(null);
-          alert("Your session has expired. Please log in again.");
-        }
-      } catch (error) {
-        console.error('Token decoding failed:', error);
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-      }
-    } else {
-      // No token, set to logged out state
-      setLoggedIn(false);
-      setUser(null);
-    }
-  }, []);
-
-  // Logs out the user when the token expires
-  useEffect(() => {
-    if (tokenExpiration) {
-      const timer = setTimeout(() => {
-        console.log("Token has expired, logging out.");
-        localStorage.removeItem('jwt');
-        setLoggedIn(false);
-        setUser(null);
-        alert("Your session has expired. Please log in again.");
-      }, tokenExpiration); 
-
-      return () => clearTimeout(timer); 
-    }
-  }, [tokenExpiration]);
 
   return (
     // Sets routes for app navigation and passes props to the necessary components
     <>    
     <div className="App">
-      <Router>
-        <PageWrapper loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user}>                   
+        <PageWrapper>                   
           <ScrollToHash/>
            <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact user={user} />} />
-            <Route path="/kits" element={<Kits user={user} />} />
-            <Route path="/orders" element={<RequestKit user={user} setUser={setUser} />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/kits" element={<Kits />} />
+            <Route path="/orders" element={<RequestKit />} />
             <Route path="/registration" element={<Registration />} />
-            <Route path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
-            <Route path="/confirmation" element={<Confirmation user={user}/> } />
-            <Route path="/donation" element={<Donation user={user}/>} />
+            <Route path="/login" element={<Login />}/>
+            <Route path="/confirmation" element={<Confirmation /> } />
+            <Route path="/donation" element={<Donation />} />
             <Route path="/speaker" element={<RequestSpeaker/>}/>
-            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard user={user} /> : <Navigate to="/" />} />
+            <Route path="/admin" element={user && user.role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />
             <Route path="/new_forms" element={<NewForms/>} >
               <Route path="add_user" element={<AddNew header="Add New User"><NewUser /></AddNew>} />
               <Route path="add_kit" element={<AddNew header="Add New Kit"><NewKit /></AddNew>} />
@@ -120,7 +58,6 @@ function App() {
             <Route path="/profile/:id" element={<UserProfile/>}/>
           </Routes>
         </PageWrapper>
-      </Router>
     </div>
   </>
   );

frontend/src/components/DashCardSet.jsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import DashboardCard from './DashboardCard'; 
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const DashCardSet = () => {
+  const { logout } = useContext(AuthContext);
   const [userCount, setUserCount] = useState(0);
   const [orderCount, setOrderCount] = useState(0);
   const [totalDonations, setTotalDonations] = useState(0);
@@ -26,14 +28,17 @@ const DashCardSet = () => {
           setTotalDonations(parseFloat(data.total_donations));
         } else {
           console.error('Failed to fetch data:', response.statusText);
+          logout();
         }
       } catch (error) {
         console.error('Error fetching dashboard data:', error);
+        alert("An error occurred.")
+        logout();
       }
     };
 
     fetchDashboardData();
-  }, []);
+  }, [dashUrl, logout]);
 
   return (
     // Displays data using the dashboard card component

frontend/src/components/DashTable.jsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from './auth/AuthContext';
 
 // Passed in api endpoint, headers for tables, and the event handler for showing the Edit Modal from Admin Dashboard component
 const DashTable = ({ apiEndpoint, headers, handleShow }) => {
+  const { logout } = useContext(AuthContext);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -28,6 +30,7 @@ const DashTable = ({ apiEndpoint, headers, handleShow }) => {
       } catch (err) {
         setError(err.message); 
         console.error("Error fetching data:", err);
+        alert("A network error occurred.")
       } finally {
         setLoading(false);
       }

frontend/src/components/EditModal.jsx

@@ -103,6 +103,8 @@ if (recordType === 'user') {
         console.log(`${recordType} updated successfully!`);
         alert(`${recordType} updated successfully!`);
         handleClose(); // Close the modal after success
+    } else {
+      alert("An error occurred with the update.")
     }
     };
 

frontend/src/components/Navigation.jsx

@@ -1,10 +1,13 @@
-import React from "react"
+import React, { useContext } from "react"
 import { Link, useNavigate } from "react-router-dom";
 import CurrentUser from "./auth/CurrentUser";
+import { AuthContext } from "./auth/AuthContext";
 import Logout from "./auth/Logout";
+import { AuthContext } from "./auth/AuthContext";
 
 // Passed in logged in and user state
-function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
+function Navigation() {
+   const { loggedIn, user } = useContext(AuthContext);
    const navigate = useNavigate();
    const handleDonateClick = (e) => {
     e.preventDefault(); 
@@ -13,7 +16,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
     if (!user) {
         // If user not logged in, navigate to login page
         alert("You must be logged in to make a donation. Please log in or register if you haven't already.");
-        navigate("/login")
+        navigate("/login");
     } else {
         // If user is logged in, navigate to the donation page
         navigate("/donation");
@@ -32,7 +35,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
                     <ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                         {loggedIn && (
                         <>
-                        <li className="nav-item"><span className="nav-link"><CurrentUser setLoggedIn={setLoggedIn} setUser={setUser} user={user} /></span></li>
+                        <li className="nav-item"><span className="nav-link"><CurrentUser /></span></li>
 
                         </>
                         )}
@@ -48,7 +51,7 @@ function Navigation({ loggedIn, setLoggedIn, setUser, user }) {
 
                         {loggedIn ? (
                             <>
-                            <li><Logout setLoggedIn={setLoggedIn} setUser={setUser} /></li>
+                            <li><Logout /></li>
                             </>
                         ) : (
                             <>                            

frontend/src/components/NewKit.jsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 // Component for creating a new kit
 const NewKit = () => {
+  const { logout } = useContext(AuthContext);
   const [image, setImage] = useState('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -50,12 +52,6 @@ const NewKit = () => {
 
           console.log("New Kit added successfully!");
           alert("New Kit added successfully!");
-
-          // Clear input fields
-          setName("");
-          setDescription("");
-          setGradeLevel("");
-          setImage('');
           // Redirect to admin page
           navigate("/admin");
         } else {
@@ -68,6 +64,7 @@ const NewKit = () => {
       } catch (error) {
 
         setMessages("An error occurred: " + error.message);
+        logout();
         console.log(error.message);
       }
     };

frontend/src/components/NewKitItem.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewKitItem = () => {
-
+  const { logout } = useContext(AuthContext);
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [image, setImage] = useState(null);
@@ -60,6 +61,7 @@ const NewKitItem = () => {
 
         setMessages("An error occurred: " + error.message);
         console.log(error.message);
+        logout();
       }
     };
 

frontend/src/components/NewUser.jsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { API_URL2 } from '../constants';
+import { AuthContext } from './auth/AuthContext';
 
 const NewUser = () => {
+  const { logout } = useContext(AuthContext);
   const [userData, setUserData] = useState("");
   const [email, setEmail] = useState(''); 
   const [password, setPassword] = useState(''); 
@@ -65,6 +67,7 @@ const NewUser = () => {
 
         setRegistrationMessages("An error occurred: " + error.message);
         console.log(error.message);
+        logout();
       }
     };
 

frontend/src/components/PageWrapper.jsx

@@ -2,16 +2,17 @@ import React from 'react'
 import Navigation from './Navigation';
 import Footer from './Footer';
 
-// Passed in the content for the middle of the page as children and the logged in and user state. Navbar and footer displayed on every page.
-const PageWrapper = ({children, loggedIn, setLoggedIn, setUser, user }) => (
+// Passed in the content for the middle of the page as children. Navbar and footer displayed on every page.
+const PageWrapper = ({children }) => {
 
-
+    return (
     <div id="page-top">
-    <Navigation loggedIn={loggedIn} setLoggedIn={setLoggedIn} setUser={setUser} user={user} />
+    <Navigation />
     {children}     
     <Footer/>
     </div>
+    );
 
-);
+};
 
 export default PageWrapper;