feat: update frontend to use cookie session

* use SessionMiddleware in socket.io server
* add back jwtStrategy for commands

app/src/components/HeaderPart.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useRouter } from 'vue-router'
-import { isAuthenticated, logout } from '../utils/auth'
+import { logout } from '../utils/auth'
 
 const router = useRouter()
 
@@ -56,7 +56,7 @@ const handleLogout = () => {
           class="text-text-primary h-5 w-5"
         />
       </button>
-      <button v-if="isAuthenticated" @click="handleLogout">
+      <button @click="handleLogout">
         <font-awesome-icon
           :icon="['fas', 'arrow-right-from-bracket']"
           class="text-text-primary h-5 w-5"

app/src/router.js

@@ -1,11 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import GamePage from './views/GamePage.vue'
 import AuthPage from './views/AuthPage.vue'
-import { isAuthenticated } from './utils/auth'
 
 const routes = [
   {
     path: '/',
+    redirect: '/game',
+  },
+  {
+    path: '/login',
     name: 'auth',
     component: AuthPage,
     meta: { requiresGuest: true },
@@ -23,24 +26,24 @@ const router = createRouter({
   routes,
 })
 
-router.beforeEach((to, from, next) => {
-  console.log(to, from)
-  const isAuthed = isAuthenticated.value
-  // Check if the route requires authentication
-  if (to.meta.requiresAuth && !isAuthed) {
-    // Check if the user isn't authenticated
-    // Redirect to the login page
-    next({
-      name: 'auth',
-      query: { redirect: to.fullPath }, // Optionally pass a redirect parameter
-    })
-  } else if (to.meta.requiresGuest && isAuthed) {
-    next({
-      name: 'game', // Or any default authenticated user route
-    })
-  } else {
-    next() // Always call next() at the end
-  }
-})
+// router.beforeEach((to, from, next) => {
+//   console.log(to, from)
+//   const isAuthed = isAuthenticated.value
+//   // Check if the route requires authentication
+//   if (to.meta.requiresAuth && !isAuthed) {
+//     // Check if the user isn't authenticated
+//     // Redirect to the login page
+//     next({
+//       name: 'auth',
+//       query: { redirect: to.fullPath }, // Optionally pass a redirect parameter
+//     })
+//   } else if (to.meta.requiresGuest && isAuthed) {
+//     next({
+//       name: 'game', // Or any default authenticated user route
+//     })
+//   } else {
+//     next() // Always call next() at the end
+//   }
+// })
 
 export default router

app/src/utils/api.js

@@ -5,14 +5,7 @@ const api = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
+  withCredentials: true,
 })
 
-export const setToken = (token) => {
-  if (token) {
-    api.defaults.headers.common.Authorization = `Bearer ${token}`
-  } else {
-    delete api.defaults.headers.common.Authorization
-  }
-}
-
 export default api

app/src/utils/auth.js

@@ -1,36 +1,9 @@
-import { computed, ref, watch } from 'vue'
-import api, { setToken } from './api'
-
-const TOKEN_KEY = 'JWT_TOKEN'
-
-const myStorage = window.localStorage
-const myToken = ref(myStorage.getItem(TOKEN_KEY))
-
-if (myToken.value) {
-  setToken(myToken.value)
-}
-
-// watch the token and store it in localStorage
-watch(myToken, (newToken) => {
-  if (newToken) {
-    console.log('update token:', newToken)
-    myStorage.setItem(TOKEN_KEY, newToken)
-    setToken(newToken)
-  } else {
-    myStorage.removeItem(TOKEN_KEY)
-    setToken(null)
-  }
-})
-
-export const getToken = () => {
-  return myToken.value
-}
+import api from './api'
 
 export const login = async (username, password) => {
   try {
     const res = await api.post('/auth/login', { username, password })
-    const { token } = res.data
-    myToken.value = token
+    console.log(res.data)
     return true
   } catch (err) {
     if (err.response?.status === 401) {
@@ -40,19 +13,14 @@ export const login = async (username, password) => {
   }
 }
 
-export const register = async (username, email, password) => {
-  const res = await api.post('/auth/register', {
+export const register = (username, email, password) => {
+  return api.post('/auth/register', {
     username,
     password,
     email,
   })
-  const { token } = res.data
-  myToken.value = token
-  return true
 }
 
 export const logout = () => {
-  myToken.value = null
+  return api.post('/auth/logout')
 }
-
-export const isAuthenticated = computed(() => !!myToken.value)

app/src/utils/socket.js

@@ -1,7 +1,5 @@
 import io from 'socket.io-client'
 
-import { getToken } from './auth'
-
 class SocketWrapper {
   constructor() {
     this.socket = null
@@ -18,9 +16,6 @@ class SocketWrapper {
       query: {
         session_id: session._id,
       },
-      auth: {
-        token: getToken(),
-      },
     })
 
     this.socket.on('connect', () => {