From 34c277c886ffa13a6400909e7107b7cd34c86ce8 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Sun, 17 Sep 2023 12:14:30 +0800
Subject: [PATCH] feat: update frontend to use cookie session

* use SessionMiddleware in socket.io server
* add back jwtStrategy for commands
---
 app/src/components/HeaderPart.vue            |  4 +-
 app/src/router.js                            | 43 +++++++++++---------
 app/src/utils/api.js                         |  9 +---
 app/src/utils/auth.js                        | 42 +++----------------
 app/src/utils/socket.js                      |  5 ---
 server/src/api/controllers/authController.js |  2 +-
 server/src/api/routes/index.js               | 13 +++---
 server/src/api/socket.js                     | 31 +++++---------
 server/src/auth/jwtStrategy.js               | 13 ++++++
 server/src/auth/passport.js                  |  2 +
 server/src/index.js                          |  6 ++-
 server/src/middleware/authRequired.js        |  9 ++++
 server/src/middleware/session.js             | 27 ++++++------
 13 files changed, 90 insertions(+), 116 deletions(-)
 create mode 100644 server/src/auth/jwtStrategy.js
 create mode 100644 server/src/middleware/authRequired.js

diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
index 54d4591..1a088e1 100644
--- a/app/src/components/HeaderPart.vue
+++ b/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"
diff --git a/app/src/router.js b/app/src/router.js
index ae61a28..e2d79e0 100644
--- a/app/src/router.js
+++ b/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
diff --git a/app/src/utils/api.js b/app/src/utils/api.js
index 4a5e011..c5f2353 100644
--- a/app/src/utils/api.js
+++ b/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
diff --git a/app/src/utils/auth.js b/app/src/utils/auth.js
index e8357bc..bdff578 100644
--- a/app/src/utils/auth.js
+++ b/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)
diff --git a/app/src/utils/socket.js b/app/src/utils/socket.js
index ec719ce..69050ca 100644
--- a/app/src/utils/socket.js
+++ b/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', () => {
diff --git a/server/src/api/controllers/authController.js b/server/src/api/controllers/authController.js
index 7e3aaec..7f11812 100644
--- a/server/src/api/controllers/authController.js
+++ b/server/src/api/controllers/authController.js
@@ -118,6 +118,6 @@ export function logout(req, res) {
       })
       return
     }
-    res.json({ message: 'success' })
+    res.redirect('/login')
   })
 }
diff --git a/server/src/api/routes/index.js b/server/src/api/routes/index.js
index 33cbdf2..53a9c9f 100644
--- a/server/src/api/routes/index.js
+++ b/server/src/api/routes/index.js
@@ -4,9 +4,9 @@ import sessions from './sessions.js'
 import quests from './quests.js'
 import commands from './commands.js'
 import authRouter from './auth.js'
+import authRequired from '../../middleware/authRequired.js'
 
 const router = Router()
-router.use(passport.authenticate('session'))
 
 router.get('/', (req, res) => {
   res.send('Hello API!')
@@ -15,10 +15,11 @@ router.get('/', (req, res) => {
 router.use('/auth', authRouter)
 router.use('/quests', quests)
 
-const authZone = Router()
-authZone.use('/sessions', sessions)
-authZone.use('/commands', commands)
-
-router.use(authZone)
+router.use('/sessions', authRequired, sessions)
+router.use(
+  '/commands',
+  passport.authenticate('jwt', { session: false }),
+  commands
+)
 
 export default router
diff --git a/server/src/api/socket.js b/server/src/api/socket.js
index 1188a1c..df98867 100644
--- a/server/src/api/socket.js
+++ b/server/src/api/socket.js
@@ -1,7 +1,8 @@
 import { Server } from 'socket.io'
 import { getAndStartContainer, attachContainer } from '../containers/docker.js'
 import Session from '../models/session.js'
-import { genJWT, verifyJWT } from '../utils/auth.js'
+import SessionMiddleware from '../middleware/session.js'
+import { genJWT } from '../utils/auth.js'
 
 const sessions = new Map()
 
@@ -27,6 +28,13 @@ export function pushToSession(sessionId, event, ...args) {
 
 async function connectClient(socket) {
   console.log('Connected to the client.')
+
+  const user = socket.request.session?.passport?.user
+  if (!user) {
+    socket.send('User not found.')
+    socket.disconnect()
+    return
+  }
   const sessionId = socket.handshake.query.session_id
   if (!sessionId) {
     socket.send('Session ID not found.')
@@ -36,7 +44,7 @@ async function connectClient(socket) {
 
   const session = await Session.findOne({
     _id: sessionId,
-    user: socket.user,
+    user,
     status: 'active',
   })
   if (!session) {
@@ -89,24 +97,7 @@ async function connectClient(socket) {
 export default (server) => {
   const io = new Server(server)
 
-  io.use(async (socket, next) => {
-    console.log('Authenticating...')
-    try {
-      const { token } = socket.handshake.auth
-      if (!token) {
-        next(new Error('Token not found.'))
-        return
-      }
-      const user = await verifyJWT(token)
-      // eslint-disable-next-line no-param-reassign
-      console.log(user)
-      socket.user = user
-      next()
-    } catch (err) {
-      console.error(err)
-      next(err)
-    }
-  })
+  io.engine.use(SessionMiddleware)
 
   io.on('connection', connectClient)
 }
diff --git a/server/src/auth/jwtStrategy.js b/server/src/auth/jwtStrategy.js
new file mode 100644
index 0000000..f1b2cd4
--- /dev/null
+++ b/server/src/auth/jwtStrategy.js
@@ -0,0 +1,13 @@
+import { Strategy as JwtStrategy, ExtractJwt } from 'passport-jwt'
+import config from '../config.js'
+
+const jwtOptions = {
+  jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+  secretOrKey: config.jwtSecret,
+}
+
+function verifyJwt(jwtPayload, done) {
+  return done(null, jwtPayload)
+}
+
+export default new JwtStrategy(jwtOptions, verifyJwt)
diff --git a/server/src/auth/passport.js b/server/src/auth/passport.js
index a498832..068050e 100644
--- a/server/src/auth/passport.js
+++ b/server/src/auth/passport.js
@@ -1,7 +1,9 @@
 import passport from 'passport'
 import PasswordStrategy from './passwordStrategy.js'
+import JwtStrategy from './jwtStrategy.js'
 
 passport.use(PasswordStrategy)
+passport.use(JwtStrategy)
 
 passport.serializeUser((user, done) => {
   process.nextTick(() => {
diff --git a/server/src/index.js b/server/src/index.js
index 5c88208..e6cf522 100644
--- a/server/src/index.js
+++ b/server/src/index.js
@@ -3,6 +3,7 @@ import express from 'express'
 import http from 'http'
 import YAML from 'yaml'
 import swaggerUI from 'swagger-ui-express'
+import passport from 'passport'
 
 import './auth/passport.js'
 import socketServer from './api/socket.js'
@@ -16,7 +17,7 @@ import expiryRemovalScheduler from './containers/expiryChecker.js'
 import { createTestUser } from './utils/auth.js'
 
 async function main() {
-  const db = await connectDB()
+  await connectDB()
 
   await createTestUser()
 
@@ -30,7 +31,8 @@ async function main() {
   const server = http.createServer(app)
   socketServer(server)
   app.use(errorHandler)
-  app.use(sessionMiddleware(db))
+  app.use(sessionMiddleware)
+  app.use(passport.session())
   app.use(
     '/api-docs',
     swaggerUI.serve,
diff --git a/server/src/middleware/authRequired.js b/server/src/middleware/authRequired.js
new file mode 100644
index 0000000..8a5bd4f
--- /dev/null
+++ b/server/src/middleware/authRequired.js
@@ -0,0 +1,9 @@
+export default function authRequired(req, res, next) {
+  if (req.isAuthenticated()) {
+    next()
+    return
+  }
+  res.status(401).json({
+    message: 'not authenticated',
+  })
+}
diff --git a/server/src/middleware/session.js b/server/src/middleware/session.js
index b889903..fe216be 100644
--- a/server/src/middleware/session.js
+++ b/server/src/middleware/session.js
@@ -3,18 +3,15 @@ import MongoStore from 'connect-mongo'
 
 import config from '../config.js'
 
-export default (db) => {
-  console.log(db.constructor.name)
-  return session({
-    secret: config.jwtSecret,
-    resave: false,
-    saveUninitialized: false,
-    cookie: {
-      httpOnly: true,
-    },
-    store: MongoStore.create({
-      mongoUrl: config.db,
-      collectionName: 'loginSessions',
-    }),
-  })
-}
+export default session({
+  secret: config.jwtSecret,
+  resave: false,
+  saveUninitialized: false,
+  cookie: {
+    httpOnly: true,
+  },
+  store: MongoStore.create({
+    mongoUrl: config.db,
+    collectionName: 'loginSessions',
+  }),
+})