Enhance JWT Token Management and Authentication Flow (#720)

- Implement extended token lifetime for "Remember Me" functionality
- Add token expiration details to authentication responses
- Update client-side token handling to support dynamic expiration
- Modify authentication middleware to handle token initialization more robustly
- Configure JWT configuration to support longer token lifetimes

client/components/pages/admin/ImpersonateUser.vue

@@ -27,8 +27,8 @@ const impersonate = () => {
   opnFetch(`/moderator/impersonate/${props.user.id}`).then(async (data) => {
     loading.value = false
 
-    // Save the token.
-    authStore.setToken(data.token, false)
+    // Save the token with its expiration time.
+    authStore.setToken(data.token, data.expires_in)
 
     // Fetch the user.
     const userData = await opnFetch('user')

client/components/pages/auth/components/LoginForm.vue

@@ -141,10 +141,10 @@ export default {
       // Submit the form.
       this.loading = true
       this.form
-        .post("login")
+        .post("login", { data: { remember: this.remember } })
         .then(async (data) => {
-          // Save the token.
-          this.authStore.setToken(data.token)
+          // Save the token with its expiration time
+          this.authStore.setToken(data.token, data.expires_in)
 
           const [userDataResponse, workspacesResponse] = await Promise.all([
             opnFetch("user"),

client/components/pages/auth/components/RegisterForm.vue

@@ -244,10 +244,10 @@ export default {
       }
 
       // Log in the user.
-      const tokenData = await this.form.post("/login")
+      const tokenData = await this.form.post("/login", { data: { remember: true } })
 
-      // Save the token.
-      this.authStore.setToken(tokenData.token)
+      // Save the token with its expiration time.
+      this.authStore.setToken(tokenData.token, tokenData.expires_in)
 
       const userData = await opnFetch("user")
       this.authStore.setUser(userData)

client/middleware/01.check-auth.global.js

@@ -2,7 +2,13 @@ import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
 export default defineNuxtRouteMiddleware(async () => {
   const authStore = useAuthStore()
-  authStore.initStore(useCookie("token").value, useCookie("admin_token").value)
+  
+  // Get tokens from cookies
+  const tokenValue = useCookie("token").value
+  const adminTokenValue = useCookie("admin_token").value
+  
+  // Initialize the store with the tokens
+  authStore.initStore(tokenValue, adminTokenValue)
 
   if (authStore.token && !authStore.user) {
     const workspaceStore = useWorkspacesStore()

client/pages/oauth/callback.vue

@@ -54,7 +54,7 @@ function handleCallback() {
     form.code = route.query.code
     form.utm_data = $utm.value
     form.post(`/oauth/${provider}/callback`).then(async (data) => {
-        authStore.setToken(data.token)
+        authStore.setToken(data.token, data.expires_in)
         const [userDataResponse, workspacesResponse] = await Promise.all([
             opnFetch("user"),
             fetchAllWorkspaces(),

client/stores/auth.js

@@ -21,12 +21,22 @@ export const useAuthStore = defineStore("auth", {
     },
     // Stop admin impersonation
     stopImpersonating() {
-      this.setToken(this.admin_token)
+      // When stopping impersonation, we don't have expiration info for the admin token
+      // Use a default long expiration (24 hours) to ensure the admin can continue working
+      this.setToken(this.admin_token, 60 * 60 * 24)
       this.setAdminToken(null)
     },
 
-    setToken(token) {
-      this.setCookie("token", token)
+    setToken(token, expiresIn) {
+      // Set cookie with expiration if provided
+      const cookieOptions = {}
+      
+      if (expiresIn) {
+        // expiresIn is in seconds, maxAge also needs to be in seconds
+        cookieOptions.maxAge = expiresIn
+      }
+      
+      this.setCookie("token", token, cookieOptions)
       this.token = token
     },
 
@@ -35,9 +45,9 @@ export const useAuthStore = defineStore("auth", {
       this.admin_token = token
     },
 
-    setCookie(name, value) {
+    setCookie(name, value, options = {}) {
       if (import.meta.client) {
-        useCookie(name).value = value
+        useCookie(name, options).value = value
       }
     },
 
@@ -49,7 +59,8 @@ export const useAuthStore = defineStore("auth", {
     setUser(user) {
       if (!user) {
         console.error("No user, logging out.")
-        this.setToken(null)
+        // When logging out due to no user, clear the token with maxAge 0
+        this.setToken(null, 0)
       }
 
       this.user = user
@@ -73,7 +84,10 @@ export const useAuthStore = defineStore("auth", {
       opnFetch("logout", { method: "POST" }).catch(() => {})
 
       this.user = null
-      this.setToken(null)
+      
+      // Clear the token cookie by setting maxAge to 0
+      this.setCookie("token", null, { maxAge: 0 })
+      this.token = null
     },
 
     // async fetchOauthUrl() {