fix(auth): ensure redirect handler is registered when receiving 401 (K…

…ong#153)

src/App.vue

@@ -24,15 +24,15 @@
 </template>
 
 <script lang="ts">
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import { defineComponent } from 'vue'
 import { mapState, mapActions } from 'pinia'
 import { ApiServiceAuthErrorReason } from '@/services/PortalV2ApiService'
 import removeElementFromDOMById from '@/helpers/removeElementFromDOMById'
 import { isAuthRoute } from '@/router/route-utils'
 import Nav from '@/components/Nav.vue'
-import { portalApiV2, authApi } from '@/services'
+import { portalApiV2 } from '@/services'
 import { useAppStore } from '@/stores'
+import { createRedirectHandler } from './helpers/auth'
 
 const initialLoadingId = 'initial-fullscreen-loading-container'
 
@@ -56,15 +56,6 @@ export default defineComponent({
   methods: {
     ...mapActions(useAppStore, ['logout']),
     initializeApiClients () {
-      const captureRouteAndLogout = async () => {
-        await this.logout(this.$router.currentRoute.fullPath)
-        this.$router.push({ name: 'login' }).catch((error) => {
-          if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
-            throw Error(error)
-          }
-        })
-      }
-
       // Konnect API Client
       portalApiV2.setAuthErrorCallback(async (err, reason) => {
         // redirect to 403 page if portal api returns HTTP 403 but the session is correct
@@ -74,15 +65,8 @@ export default defineComponent({
           return
         }
 
-        if (err && !isAuthRoute(this.$router.currentRoute.name)) {
-          await captureRouteAndLogout()
-        }
-      })
-
-      // KAuth API Client
-      authApi.setAuthErrorCallback(async (err) => {
-        if (err && !isAuthRoute(this.$router.currentRoute.name)) {
-          await captureRouteAndLogout()
+        if (err) {
+          await createRedirectHandler(this.$router, this.logout)()
         }
       })
     }

src/helpers/auth.ts

@@ -0,0 +1,18 @@
+import { isAuthRoute } from '@/router/route-utils'
+import { NavigationFailureType, Router, isNavigationFailure } from 'vue-router'
+
+export function createRedirectHandler (router: Router, logout: (path?: string) => Promise<string>) {
+  return async () => {
+    if (isAuthRoute(router.currentRoute.value.name)) {
+      // already on auth route, no need to logout or redirect
+      return
+    }
+
+    await logout(router.currentRoute.value.fullPath)
+    router.push({ name: 'login' }).catch((error) => {
+      if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
+        throw Error(error)
+      }
+    })
+  }
+}

src/main.ts

@@ -8,7 +8,7 @@ import { removeQueryParam } from './router/route-utils'
 
 import useLaunchDarkly from '@/composables/useLaunchDarkly'
 
-import { authApiBaseUrl, session } from '@/services'
+import { authApi, authApiBaseUrl, session } from '@/services'
 
 // Import kong-auth-elements, styles, and options interface
 import { KongAuthElementsPlugin } from '@kong/kong-auth-elements/dist/kong-auth-elements.es'
@@ -28,6 +28,7 @@ import CopyUuid, { CopyUuidNotifyParam } from '@kong-ui-public/copy-uuid'
 import '@kong-ui-public/copy-uuid/dist/style.css'
 import useToaster from './composables/useToaster'
 import usePortalApi from './hooks/usePortalApi'
+import { createRedirectHandler } from './helpers/auth'
 
 /**
  * Initialize application
@@ -39,6 +40,12 @@ async function init () {
   // Initialize the Pinia store
   app.use(piniaInstance)
 
+  const router = portalRouter()
+
+  const { setPortalData, setSession, logout } = useAppStore()
+
+  authApi.setAuthErrorCallback(createRedirectHandler(router, logout))
+
   app.use(Kongponents)
 
   registerComponents(app)
@@ -64,8 +71,6 @@ async function init () {
       portalApiV2.value.updateClientWithCredentials()
     }
 
-    const { setPortalData, setSession } = useAppStore()
-
     const authClientConfig = { basicAuthEnabled, oidcAuthEnabled }
 
     const isDcr = Array.isArray(dcrProviderIds) && dcrProviderIds.length > 0
@@ -79,7 +84,6 @@ async function init () {
     const { initialize: initLaunchDarkly } = useLaunchDarkly()
 
     await initLaunchDarkly()
-    const router = portalRouter()
 
     if (!isPublic) {
       if (session.authenticatedWithIdp()) {