fix(webui): open oauth2 login in popup

komga-webui/src/router.ts

@@ -217,6 +217,22 @@ router.beforeEach((to, from, next) => {
   if (!['read-book', 'browse-book', 'browse-series'].includes(<string>to.name)) {
     document.title = 'Komga'
   }
+
+  if (window.opener !== null &&
+    window.name === 'oauth2Login' &&
+    to.query.server_redirect === 'Y'
+  ) {
+    if (!to.query.error) {
+      // authentication succeeded, we redirect the parent window so that it can login via cookie
+      window.opener.location.href = urls.origin
+    } else {
+      // authentication failed, we cascade the error message to the parent
+      window.opener.location.href = window.location
+    }
+    // we can close the popup
+    window.close()
+  }
+
   if (to.name !== 'startup' && to.name !== 'login' && !lStore.getters.authenticated) {
     next({name: 'startup', query: {redirect: to.fullPath}})
   } else next()

komga-webui/src/views/Login.vue

@@ -74,7 +74,7 @@
           >
             <v-btn
               :disabled="unclaimed"
-              :href="`${urls.originNoSlash}/oauth2/authorization/${provider.registrationId}`"
+              @click="oauth2Login(provider)"
               min-width="250"
               :class="$_.get(socialButtons[provider.registrationId.toLowerCase()], 'text') ? `${socialButtons[provider.registrationId.toLowerCase()].text}--text` : undefined"
               :color="$_.get(socialButtons[provider.registrationId.toLowerCase()], 'color')"
@@ -216,9 +216,28 @@ export default Vue.extend({
     this.getClaimStatus()
     this.$komgaOauth2.getProviders()
       .then((providers) => this.oauth2Providers = providers)
-    if(this.$route.query.error) this.showSnack(convertErrorCodes(this.$route.query.error.toString()))
+    if (this.$route.query.error) this.showSnack(convertErrorCodes(this.$route.query.error.toString()))
   },
   methods: {
+    oauth2Login(provider: OAuth2ClientDto) {
+      const url = `${urls.originNoSlash}/oauth2/authorization/${provider.registrationId}`
+      const height = 600
+      const width = 600
+      const y = window.top.outerHeight / 2 + window.top.screenY - (height / 2)
+      const x = window.top.outerWidth / 2 + window.top.screenX - (width / 2)
+      window.open(url, 'oauth2Login',
+        `toolbar=no,
+        location=off,
+        status=no,
+        menubar=no,
+        scrollbars=yes,
+        resizable=yes,
+        top=${y},
+        left=${x},
+        width=${height},
+        height=${width}`,
+      )
+    },
     getErrors(fieldName: string): string[] {
       const errors = [] as string[]
 

komga/src/main/kotlin/org/gotson/komga/infrastructure/security/SecurityConfiguration.kt

@@ -88,13 +88,13 @@ class SecurityConfiguration(
         }
         oauth2.authenticationDetailsSource(userAgentWebAuthenticationDetailsSource)
         oauth2.loginPage("/login")
-          .defaultSuccessUrl("/", true)
+          .defaultSuccessUrl("/?server_redirect=Y", true)
           .failureHandler { request, response, exception ->
             val errorMessage = when (exception) {
               is OAuth2AuthenticationException -> exception.error.errorCode
               else -> exception.message
             }
-            val url = "/login?error=$errorMessage"
+            val url = "/login?server_redirect=Y&error=$errorMessage"
             SimpleUrlAuthenticationFailureHandler(url).onAuthenticationFailure(request, response, exception)
           }
       }