migrate from local storage to cookies for jwt token

src/APIFunctions/Auth.js

@@ -1,5 +1,6 @@
 import { UserApiResponse, ApiResponse } from './ApiResponses';
 import { BASE_API_URL } from '../Enums';
+import Cookies from 'universal-cookie';
 
 
 /**
@@ -88,18 +89,17 @@ export async function loginUser(email, password) {
 }
 
 /**
- * Checks if the user is signed in by evaluating a jwt token in local storage.
+ * Checks if the user is signed in by evaluating a jwt token in cookies.
  * @returns {UserApiResponse} Containing information for
  * whether the user is signed or not
  */
 export async function checkIfUserIsSignedIn() {
   let status = new UserApiResponse();
+  const cookies = new Cookies();
 
-  const token = window.localStorage
-    ? window.localStorage.getItem('jwtToken')
-    : '';
+  const token = cookies.get('jwtToken') ?? '';
 
-  // If there is not token in local storage,
+  // If there is not token in cookies,
   // we cant do anything and return
   if (!token) {
     status.error = true;

src/Components/Navbar/AdminNavbar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSCE } from '../context/SceContext';
+import Cookies from 'universal-cookie';
 
 export default function UserNavBar(props) {
   const { user, setAuthenticated } = useSCE();
@@ -13,9 +14,11 @@ export default function UserNavBar(props) {
     }
     return className;
   };
+  const cookies = new Cookies();
 
   function handleLogout() {
     setAuthenticated(false);
+    cookies.remove('jwtToken');
     window.localStorage.removeItem('jwtToken');
     window.location.reload();
   }

src/Components/Navbar/NavBarWrapper.js

@@ -2,17 +2,20 @@ import React from 'react';
 import UserNavbar from './UserNavbar';
 import AdminNavbar from './AdminNavbar';
 import { useSCE } from '../context/SceContext';
+import Cookies from 'universal-cookie';
 
 function NavBarWrapper({
   enableAdminNavbar = false,
   component: Component,
   ...appProps
 }) {
   const { user, setUser, setAuthenticated } = useSCE();
+  const cookies = new Cookies();
 
   function handleLogout() {
     setAuthenticated(false);
     setUser({});
+    cookies.remove('jwtToken');
     window.localStorage.removeItem('jwtToken');
     window.location.reload();
   }

src/Pages/Login/Login.js

@@ -1,21 +1,24 @@
 import React, { useState } from 'react';
 import { loginUser } from '../../APIFunctions/Auth';
 import { useSCE } from '../../Components/context/SceContext';
+import Cookies from 'universal-cookie';
 
 export default function Login() {
   const { setAuthenticated } = useSCE();
   const queryParams = new URLSearchParams(window.location.search);
   const [errorMsg, setErrorMsg] = useState('');
+  const cookies = new Cookies();
 
   async function handleSubmit(e) {
     e.preventDefault();
+    window.localStorage.removeItem('jwtToken'); // clean up local storage
     const email = e.target.email.value;
     const password = e.target.password.value;
     setErrorMsg('');
     const loginStatus = await loginUser(email, password);
     if (!loginStatus.error) {
       setAuthenticated(true);
-      window.localStorage.setItem('jwtToken', loginStatus.token);
+      cookies.set('jwtToken', loginStatus.token); // expire cookie after 1 week
       if (queryParams.get('redirect')) {
         window.location.href = queryParams.get('redirect');
         return;
@@ -54,7 +57,7 @@ export default function Login() {
                       type="email"
                       placeholder="[email protected]"
                       required
-                      autofocus="autofocus"
+                      autoFocus="autofocus"
                       className="input input-bordered w-full"
                     />
                   </div>

src/Pages/Overview/Overview.js

@@ -9,6 +9,7 @@ import ConfirmationModal from
   '../../Components/DecisionModal/ConfirmationModal.js';
 const enums = require('../../Enums.js');
 import { useSCE } from '../../Components/context/SceContext.js';
+import Cookies from 'universal-cookie';
 
 export default function Overview() {
   const { user } = useSCE();
@@ -28,6 +29,7 @@ export default function Overview() {
   // const [toggle, setToggle] = useState(false);
   // const [currentQueryType, setCurrentQueryType] = useState('All');
   // const queryTypes = ['All', 'Pending', 'Officer', 'Admin', 'Alumni'];
+  const cookies = new Cookies();
 
   async function deleteUser(userToDel) {
     const response = await deleteUserByID(
@@ -39,6 +41,7 @@ export default function Overview() {
     }
     if (userToDel._id === user._id) {
       // logout
+      cookies.remove('jwtToken');
       window.localStorage.removeItem('jwtToken');
       window.location.reload();
       return window.alert('Self-deprecation is an art');

src/Pages/Profile/MemberView/DeleteAccountModal.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { deleteUserByID } from '../../../APIFunctions/User';
 import { useSCE } from '../../../Components/context/SceContext';
+import Cookies from 'universal-cookie';
 
 export default function DeleteAccountModal(props) {
   const { bannerCallback = () => {} } = props;
   const { user } = useSCE();
+  const cookies = new Cookies();
 
   async function deleteAccount() {
     const apiResponse = await deleteUserByID(
@@ -15,6 +17,7 @@ export default function DeleteAccountModal(props) {
     if (!apiResponse.error) {
       bannerCallback('Account Deleted', 'success');
       setTimeout(() => {
+        cookies.remove('jwtToken');
         window.localStorage.removeItem('jwtToken');
         window.location.reload();
       }, 2000);