Merge pull request #96 from BUMETCS673/elee/hw-188

Store jwt in cookie instead of local storage

code/client/package.json

@@ -18,7 +18,11 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
     "babel-jest": "^29.7.0",
+    "cookie-parser": "^1.4.7",
+    "jest-extended": "^4.0.2",
+    "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
+    "nookies": "^2.5.2",
     "react": "^18.3.1",
     "react-day-picker": "^9.1.3",
     "react-dom": "^18.3.1",

code/client/src/App.js

@@ -11,6 +11,7 @@ import ManageDailyData from "./components/ManageDailyData.js";
 import LogoutButton from "./components/Logout.js";
 
 import React, { useState, useEffect } from "react";
+import Cookies from 'js-cookie';
 
 // Styling
 import {
@@ -59,7 +60,7 @@ function App({ RouterComponent = Router }) {
 
   // On component mount, check if user is already logged in
   useEffect(() => {
-    const token = localStorage.getItem("authToken");
+    const token = Cookies.get('authToken')
     setIsAuthenticated(!!token);
   }, []);
 

code/client/src/__tests__/Logout.test.js

@@ -4,6 +4,8 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import LogoutButton from '../components/Logout.js';
 import { BrowserRouter } from 'react-router-dom';
+import Cookies from 'js-cookie';
+import { destroyCookie, parseCookies } from 'nookies';
 
 //  Mock the useNavigate function
 jest.mock('react-router-dom', () => ({
@@ -14,12 +16,12 @@ jest.mock('react-router-dom', () => ({
 describe('LogoutButton Component', () => {
   beforeEach(() => {
     //  Set up any necessary mocks before each test
-    localStorage.setItem('authToken', 'test-token');
+    Cookies.set('authToken', 'test-token');
   });
 
   afterEach(() => {
 
-    localStorage.clear();
+    destroyCookie(null, 'authToken');
     jest.clearAllMocks();
   });
 
@@ -49,8 +51,8 @@ describe('LogoutButton Component', () => {
     // Click on the Logout button
     fireEvent.click(getByText('Logout'));
 
-    //  Check if localStorage.getItem('authToken') is null
-    expect(localStorage.getItem('authToken')).toBeNull();
+    //  Check if authToken is undefined
+    expect(parseCookies().authToken).toBeUndefined();
 
     //  Check if setIsAuthenticated is called with false
     expect(mockSetIsAuthenticated).toHaveBeenCalledWith(false);

code/client/src/__tests__/frontend.test.js

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import Cookies from 'js-cookie';
+import { destroyCookie } from 'nookies';
 import App from '../App.js';
 
 // Mock the authenticated function to prevent redirection
@@ -9,12 +11,12 @@ jest.mock('../utils/authenticate.js', () => ({
 
 beforeEach(() => {
   // Simulate authenticated user
-  localStorage.setItem('authToken', 'mock-token');
+  Cookies.set('authToken', 'mock-token');
 });
 
 afterEach(() => {
-  // Cleanup localStorage
-  localStorage.removeItem('authToken');
+  // Cleanup cookie
+  destroyCookie(null, 'authToken');
 });
 
 test('renders home page after login', () => {