Store auth token in cookie

package.json

@@ -9,6 +9,7 @@
     "axios": "^0.26.1",
     "bootstrap": "^5.3.2",
     "date-fns": "^3.0.2",
+    "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "popper": "^1.0.1",
     "react": "^18.2.0",
@@ -52,6 +53,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/cypress": "^1.1.3",
+    "@types/js-cookie": "^3.0.6",
     "@vitejs/plugin-react": "^4.0.4",
     "cypress": "13.6.1",
     "jsdom": "^22.1.0",

src/components/Video.tsx

@@ -1,4 +1,5 @@
 import {formatDistance} from 'date-fns';
+import Cookies from 'js-cookie';
 import {useEffect, useState} from 'react';
 import {API_BASE_URL} from '../lib/api/core';
 import {Goal} from '../lib/api/goals';
@@ -21,7 +22,7 @@ function Video({goal, onDelete}: Props) {
   const [disableButton, setDisableButton] = useState(false);
 
   useEffect(() => {
-    setLoggedIn(!!localStorage.getItem('top90-auth-token'));
+    setLoggedIn(!!Cookies.get('top90-logged-in'));
   }, []);
 
   useEffect(() => {

src/lib/api/login.ts → src/lib/api/auth.ts

@@ -21,6 +21,13 @@ export async function login(username: string, password: string) {
   const json = encodeURIComponent(JSON.stringify(request));
   const url = `${API_BASE_URL}/login?json=${json}`;
 
-  const response = await axios.get<LoginResponse>(url);
+  const response = await axios.post<LoginResponse>(url, null, {withCredentials: true});
+  return response.data;
+}
+
+export async function logout() {
+  const url = `${API_BASE_URL}/logout`;
+
+  const response = await axios.post<LoginResponse>(url, null, {withCredentials: true});
   return response.data;
 }

src/lib/api/goals.ts

@@ -1,6 +1,7 @@
 import {API_BASE_URL, Pagination} from './core';
 
 import axios from 'axios';
+import Cookies from 'js-cookie';
 
 export interface Goal {
   id: string;
@@ -63,9 +64,9 @@ export async function getGoal(id: string) {
 }
 
 export async function deleteGoal(id: string) {
-  const token = localStorage.getItem('top90-auth-token');
+  const token = Cookies.get('top90-auth-token');
   const response = await axios.delete<DeleteGoalResponse>(`${API_BASE_URL}/goals/${id}`, {
-    headers: {Authorization: `Bearer ${token}`},
+    withCredentials: true,
   });
   return response.data;
 }

src/pages/Settings.tsx

@@ -1,8 +1,8 @@
-import {jwtDecode} from 'jwt-decode';
+import Cookies from 'js-cookie';
 import {useEffect, useState} from 'react';
 import ThemeSelect from '../components/ThemeSelect';
 import {useTheme} from '../hooks/useTheme';
-import {login, Token} from '../lib/api/login';
+import {login, logout} from '../lib/api/auth';
 import {Theme} from '../lib/theme';
 
 function Settings() {
@@ -15,7 +15,7 @@ function Settings() {
 
   useEffect(() => {
     document.addEventListener('dblclick', onDoubleClick);
-    setLoggedIn(!!localStorage.getItem('top90-auth-token'));
+    setLoggedIn(!!Cookies.get('top90-logged-in'));
 
     return function cleanup() {
       document.removeEventListener('dblclick', onDoubleClick);
@@ -28,15 +28,8 @@ function Settings() {
 
   function onLogin() {
     login(username, password)
-      .then((data) => {
-        const token = jwtDecode<Token>(data.token);
-        if (token.admin) {
-          localStorage.setItem('top90-auth-token', data.token);
-          setLoggedIn(true);
-        } else {
-          localStorage.removeItem('top90-auth-token');
-          setLoggedIn(false);
-        }
+      .then(() => {
+        setLoggedIn(true);
       })
       .catch((error) => {
         const message = error?.response?.data?.message;
@@ -45,8 +38,14 @@ function Settings() {
   }
 
   function onLogout() {
-    localStorage.removeItem('top90-auth-token');
-    setLoggedIn(false);
+    logout()
+      .then(() => {
+        setLoggedIn(false);
+      })
+      .catch((error) => {
+        const message = error?.response?.data?.message;
+        alert(message || error);
+      });
   }
 
   return (