Implement new JWT auth

client/components/cards/AuthorCard.vue

@@ -71,9 +71,6 @@ export default {
     coverHeight() {
       return this.cardHeight
     },
-    userToken() {
-      return this.store.getters['user/getToken']
-    },
     _author() {
       return this.author || {}
     },

client/components/covers/AuthorImage.vue

@@ -39,9 +39,6 @@ export default {
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     _author() {
       return this.author || {}
     },

client/components/modals/AccountModal.vue

@@ -309,9 +309,9 @@ export default {
           } else {
             console.log('Account updated', data.user)
 
-            if (data.user.id === this.user.id && data.user.token !== this.user.token) {
-              console.log('Current user token was updated')
-              this.$store.commit('user/setUserToken', data.user.token)
+            if (data.user.id === this.user.id && data.user.accessToken !== this.user.accessToken) {
+              console.log('Current user access token was updated')
+              this.$store.commit('user/setUserToken', data.user.accessToken)
             }
 
             this.$toast.success(this.$strings.ToastAccountUpdateSuccess)

client/components/modals/item/tabs/Files.vue

@@ -29,9 +29,6 @@ export default {
     media() {
       return this.libraryItem.media || {}
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },

client/components/player/PlayerUi.vue

@@ -129,9 +129,6 @@ export default {
         return `${hoursRounded}h`
       }
     },
-    token() {
-      return this.$store.getters['user/getToken']
-    },
     timeRemaining() {
       if (this.useChapterTrack && this.currentChapter) {
         var currChapTime = this.currentTime - this.currentChapter.start

client/components/readers/Reader.vue

@@ -266,9 +266,6 @@ export default {
     isComic() {
       return this.ebookFormat == 'cbz' || this.ebookFormat == 'cbr'
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     keepProgress() {
       return this.$store.state.ereaderKeepProgress
     },

client/components/tables/EbookFilesTable.vue

@@ -49,9 +49,6 @@ export default {
     libraryItemId() {
       return this.libraryItem.id
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },

client/components/tables/LibraryFilesTable.vue

@@ -53,9 +53,6 @@ export default {
     libraryItemId() {
       return this.libraryItem.id
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },

client/components/ui/MultiSelectQueryInput.vue

@@ -85,9 +85,6 @@ export default {
         this.$emit('input', val)
       }
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     wrapperClass() {
       var classes = []
       if (this.disabled) classes.push('bg-black-300')

client/nuxt.config.js

@@ -73,7 +73,8 @@ module.exports = {
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
-    baseURL: routerBasePath
+    baseURL: routerBasePath,
+    progress: false
   },
 
   // nuxt/pwa https://pwa.nuxtjs.org

client/pages/config/users/_id/index.vue

@@ -13,8 +13,8 @@
         <widgets-online-indicator :value="!!userOnline" />
         <h1 class="text-xl pl-2">{{ username }}</h1>
       </div>
-      <div v-if="userToken" class="flex text-xs mt-4">
-        <ui-text-input-with-label :label="$strings.LabelApiToken" :value="userToken" readonly show-copy />
+      <div v-if="legacyToken" class="flex text-xs mt-4">
+        <ui-text-input-with-label label="Legacy API Token" :value="legacyToken" readonly show-copy />
       </div>
       <div class="w-full h-px bg-white/10 my-2" />
       <div class="py-2">
@@ -100,9 +100,12 @@ export default {
     }
   },
   computed: {
-    userToken() {
+    legacyToken() {
       return this.user.token
     },
+    userToken() {
+      return this.user.accessToken
+    },
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },

client/plugins/axios.js

@@ -1,4 +1,19 @@
-export default function ({ $axios, store, $config }) {
+export default function ({ $axios, store, $config, app }) {
+  // Track if we're currently refreshing to prevent multiple refresh attempts
+  let isRefreshing = false
+  let failedQueue = []
+
+  const processQueue = (error, token = null) => {
+    failedQueue.forEach(({ resolve, reject }) => {
+      if (error) {
+        reject(error)
+      } else {
+        resolve(token)
+      }
+    })
+    failedQueue = []
+  }
+
   $axios.onRequest((config) => {
     if (!config.url) {
       console.error('Axios request invalid config', config)
@@ -7,7 +22,7 @@ export default function ({ $axios, store, $config }) {
     if (config.url.startsWith('http:') || config.url.startsWith('https:')) {
       return
     }
-    const bearerToken = store.state.user.user?.token || null
+    const bearerToken = store.getters['user/getToken']
     if (bearerToken) {
       config.headers.common['Authorization'] = `Bearer ${bearerToken}`
     }
@@ -17,9 +32,83 @@ export default function ({ $axios, store, $config }) {
     }
   })
 
-  $axios.onError((error) => {
+  $axios.onError(async (error) => {
+    const originalRequest = error.config
     const code = parseInt(error.response && error.response.status)
     const message = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
+
     console.error('Axios error', code, message)
+
+    // Handle 401 Unauthorized (token expired)
+    if (code === 401 && !originalRequest._retry) {
+      // Skip refresh for auth endpoints to prevent infinite loops
+      if (originalRequest.url === '/auth/refresh' || originalRequest.url === '/login') {
+        // Refresh failed or login failed, redirect to login
+        store.commit('user/setUser', null)
+        app.router.push('/login')
+        return Promise.reject(error)
+      }
+
+      if (isRefreshing) {
+        // If already refreshing, queue this request
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject })
+        })
+          .then((token) => {
+            if (!originalRequest.headers) {
+              originalRequest.headers = {}
+            }
+            originalRequest.headers['Authorization'] = `Bearer ${token}`
+            return $axios(originalRequest)
+          })
+          .catch((err) => {
+            return Promise.reject(err)
+          })
+      }
+
+      originalRequest._retry = true
+      isRefreshing = true
+
+      try {
+        // Attempt to refresh the token
+        const response = await $axios.$post('/auth/refresh')
+        const newAccessToken = response.user.accessToken
+
+        if (!newAccessToken) {
+          console.error('No new access token received')
+          return Promise.reject(error)
+        }
+
+        // Update the token in store and localStorage
+        store.commit('user/setUser', response.user)
+
+        // Update the original request with new token
+        if (!originalRequest.headers) {
+          originalRequest.headers = {}
+        }
+        originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`
+
+        // Process any queued requests
+        processQueue(null, newAccessToken)
+
+        // Retry the original request
+        return $axios(originalRequest)
+      } catch (refreshError) {
+        console.error('Token refresh failed:', refreshError)
+
+        // Process queued requests with error
+        processQueue(refreshError, null)
+
+        // Clear user data and redirect to login
+        store.commit('user/setUser', null)
+        app.router.push('/login')
+
+        return Promise.reject(refreshError)
+      } finally {
+        isRefreshing = false
+      }
+    }
+
+    return Promise.reject(error)
   })
 }

client/store/user.js

@@ -25,19 +25,19 @@ export const getters = {
   getIsRoot: (state) => state.user && state.user.type === 'root',
   getIsAdminOrUp: (state) => state.user && (state.user.type === 'admin' || state.user.type === 'root'),
   getToken: (state) => {
-    return state.user?.token || null
+    return state.user?.accessToken || null
   },
   getUserMediaProgress:
     (state) =>
     (libraryItemId, episodeId = null) => {
-      if (!state.user.mediaProgress) return null
+      if (!state.user?.mediaProgress) return null
       return state.user.mediaProgress.find((li) => {
         if (episodeId && li.episodeId !== episodeId) return false
         return li.libraryItemId == libraryItemId
       })
     },
   getUserBookmarksForItem: (state) => (libraryItemId) => {
-    if (!state.user.bookmarks) return []
+    if (!state.user?.bookmarks) return []
     return state.user.bookmarks.filter((bm) => bm.libraryItemId === libraryItemId)
   },
   getUserSetting: (state) => (key) => {
@@ -152,13 +152,17 @@ export const mutations = {
   setUser(state, user) {
     state.user = user
     if (user) {
-      if (user.token) localStorage.setItem('token', user.token)
+      if (user.accessToken) localStorage.setItem('token', user.accessToken)
+      else {
+        console.error('No access token found for user', user)
+      }
     } else {
       localStorage.removeItem('token')
     }
   },
   setUserToken(state, token) {
-    state.user.token = token
+    if (!state.user) return
+    state.user.accessToken = token
     localStorage.setItem('token', token)
   },
   updateMediaProgress(state, { id, data }) {