feat(webui): accept xAuthToken as query param and convert to session cookie

komga-webui/src/main.ts

@@ -20,6 +20,7 @@ import komgaTransientBooks from './plugins/komga-transientbooks.plugin'
 import komgaSse from './plugins/komga-sse.plugin'
 import komgaTasks from './plugins/komga-tasks.plugin'
 import komgaOauth2 from './plugins/komga-oauth2.plugin'
+import komgaLogin from './plugins/komga-login.plugin'
 import vuetify from './plugins/vuetify'
 import logger from './plugins/logger.plugin'
 import './public-path'
@@ -49,6 +50,7 @@ Vue.use(komgaSse, {eventHub: Vue.prototype.$eventHub, store: store})
 Vue.use(actuator, {http: Vue.prototype.$http})
 Vue.use(komgaTasks, {http: Vue.prototype.$http})
 Vue.use(komgaOauth2, {http: Vue.prototype.$http})
+Vue.use(komgaLogin, {http: Vue.prototype.$http})
 
 
 Vue.config.productionTip = false

komga-webui/src/plugins/komga-login.plugin.ts

@@ -0,0 +1,17 @@
+import {AxiosInstance} from 'axios'
+import _Vue from 'vue'
+import KomgaLoginService from '@/services/komga-login.service'
+
+export default {
+  install(
+    Vue: typeof _Vue,
+    {http}: { http: AxiosInstance }) {
+    Vue.prototype.$komgaLogin = new KomgaLoginService(http)
+  },
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $komgaLogin: KomgaLoginService;
+  }
+}

komga-webui/src/plugins/komga-oauth2.plugin.ts

@@ -1,17 +1,17 @@
 import {AxiosInstance} from 'axios'
 import _Vue from 'vue'
-import KomgaOauht2Service from '@/services/komga-oauth2.service'
+import KomgaOauth2Service from '@/services/komga-oauth2.service'
 
 export default {
   install(
     Vue: typeof _Vue,
     {http}: { http: AxiosInstance }) {
-    Vue.prototype.$komgaOauth2 = new KomgaOauht2Service(http)
+    Vue.prototype.$komgaOauth2 = new KomgaOauth2Service(http)
   },
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $komgaOauth2: KomgaOauht2Service;
+    $komgaOauth2: KomgaOauth2Service;
   }
 }

komga-webui/src/router.ts

@@ -234,7 +234,8 @@ router.beforeEach((to, from, next) => {
   }
 
   if (to.name !== 'startup' && to.name !== 'login' && !lStore.getters.authenticated) {
-    next({name: 'startup', query: {redirect: to.fullPath}})
+    const query = Object.assign({}, to.query, {redirect: to.fullPath})
+    next({name: 'startup', query: query})
   } else next()
 })
 

komga-webui/src/services/komga-login.service.ts

@@ -0,0 +1,25 @@
+import {AxiosInstance} from 'axios'
+
+const API_LOGIN = '/api/v1/login'
+
+export default class KomgaLoginService {
+  private http: AxiosInstance
+
+  constructor(http: AxiosInstance) {
+    this.http = http
+  }
+
+  async setCookie(xAuthToken: string) {
+    try {
+      await this.http.get(`${API_LOGIN}/set-cookie`, {
+        headers: {'X-Auth-Token': xAuthToken},
+      })
+    } catch (e) {
+      let msg = 'An error occurred while trying to exchange xAuthToken for session cookie'
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
+}

komga-webui/src/services/komga-oauth2.service.ts

@@ -3,7 +3,7 @@ import {OAuth2ClientDto} from '@/types/komga-oauth2'
 
 const API_OAUTH2 = '/api/v1/oauth2'
 
-export default class KomgaOauht2Service {
+export default class KomgaOauth2Service {
   private http: AxiosInstance
 
   constructor(http: AxiosInstance) {

komga-webui/src/views/Startup.vue

@@ -13,13 +13,21 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'Startup',
-  async mounted () {
+  async mounted() {
     try {
+      if (this.$route.query.xAuthToken) {
+        try {
+          await this.$komgaLogin.setCookie(this.$route.query.xAuthToken.toString())
+        } catch (e) {
+          this.$debug(e.message)
+        }
+      }
+
       await this.$store.dispatch('getMe')
       await this.$store.dispatch('getLibraries')
       this.$router.back()
     } catch (e) {
-      this.$router.push({ name: 'login', query: { redirect: this.$route.query.redirect } })
+      this.$router.push({name: 'login', query: {redirect: this.$route.query.redirect}})
     }
   },
 })