Rework oauth consent flows

frontend/src/pages/account/AccessRequest.vue

@@ -15,6 +15,7 @@
         <div class="my-4">
             This application will have access to your teams and instances.
         </div>
+        <div v-if="error" class="text-red-600 text-sm mb-4">{{ error }}</div>
         <div class="ff-actions flex flex-row">
             <ff-button class="mx-8" data-action="deny-access" @click="denyAccess">Deny</ff-button>
             <ff-button class="mx-8" data-action="allow-access" @click="allowAccess">Allow</ff-button>
@@ -26,7 +27,9 @@
 import { ArrowSmallLeftIcon, ArrowSmallRightIcon, KeyIcon, RectangleGroupIcon } from '@heroicons/vue/20/solid'
 import { mapState } from 'pinia'
 
+import client from '@/api/client.ts'
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { redirectToOAuthClient } from '@/utils/oauthRedirect.ts'
 
 export default {
     name: 'AccessRequest',
@@ -36,15 +39,29 @@ export default {
         ArrowSmallRightIcon,
         ArrowSmallLeftIcon
     },
+    data () {
+        return {
+            error: null
+        }
+    },
     computed: {
         ...mapState(useAccountAuthStore, ['user'])
     },
     methods: {
-        allowAccess () {
-            window.location.href = `/account/complete/${this.$router.currentRoute.value.params.id}`
+        async allowAccess () {
+            await this.respond('complete')
+        },
+        async denyAccess () {
+            await this.respond('reject')
         },
-        denyAccess () {
-            window.location.href = `/account/reject/${this.$router.currentRoute.value.params.id}`
+        async respond (action) {
+            this.error = null
+            try {
+                const response = await client.put(`/account/${action}/${this.$router.currentRoute.value.params.id}`, {})
+                redirectToOAuthClient(response.data.redirect)
+            } catch (err) {
+                this.error = err.response?.data?.description || 'Failed to process request. Please try again.'
+            }
         }
     }
 }

frontend/src/pages/account/AccessRequestMCP.vue

@@ -121,6 +121,7 @@ import McpToolPermissions from '../../components/mcp/McpToolPermissions.vue'
 import client from '@/api/client.ts'
 import teamApi from '@/api/team.ts'
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { redirectToOAuthClient } from '@/utils/oauthRedirect.ts'
 
 const ONE_DAY = 1000 * 60 * 60 * 24
 const ONE_YEAR = ONE_DAY * 365
@@ -271,14 +272,20 @@ export default {
                     expiresAt: Date.parse(this.expiresAt),
                     toolPermissions: { default: this.defaultPermissions, teams: this.teamOverrides }
                 })
-                window.location.href = `/account/complete/${this.requestId}`
+                const response = await client.put(`/account/complete/${this.requestId}`, {})
+                redirectToOAuthClient(response.data.redirect)
             } catch (err) {
                 this.error = err.response?.data?.description || 'Failed to process request. Please try again.'
                 this.submitting = false
             }
         },
-        denyAccess () {
-            window.location.href = `/account/reject/${this.requestId}`
+        async denyAccess () {
+            try {
+                const response = await client.put(`/account/reject/${this.requestId}`, {})
+                redirectToOAuthClient(response.data.redirect)
+            } catch (err) {
+                this.error = err.response?.data?.description || 'Failed to process request. Please try again.'
+            }
         }
     }
 }

frontend/src/utils/oauthRedirect.ts

@@ -0,0 +1,12 @@
+/**
+ * Navigate the browser to the OAuth client callback url returned by the
+ * platform. Only http(s) urls are followed, so a callback using a scheme such
+ * as `javascript:` can never run in the FlowFuse origin.
+ */
+export function redirectToOAuthClient (redirect: string): void {
+    const url = new URL(redirect)
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+        throw new Error('Invalid redirect url')
+    }
+    window.location.href = url.toString()
+}

test/system/201-nr-tools-plugin_spec.js

@@ -148,16 +148,16 @@ describe('Node-RED Tools Plugin', function () {
         const token = parts[parts.length - 1]
 
         const response2 = await app.inject({
-            method: 'GET',
+            method: 'PUT',
             url: `/account/complete/${token}`,
+            payload: {},
             cookies: {
                 sid: TestObjects.accessToken
             }
         })
-        response2.statusCode.should.equal(302)
-        response2.headers.should.have.property('location')
+        response2.statusCode.should.equal(200)
         // http://example.com/flowfuse-nr-tools/auth/callback?code=eANs21GUv7OqN99S2QxJ4tS1BD5RYEzOEfb-lhLUciw&state=YMbFnV1E_2aPwz_Ktca1DQ
-        const callbackURL = new URL(response2.headers.location)
+        const callbackURL = new URL(response2.json().redirect)
         callbackURL.pathname.should.equal('/flowfuse-nr-tools/auth/callback')
         callbackURL.host.should.equal('example.com')
         should.exist(callbackURL.searchParams.get('code'))