MCP OAuth Consent Page

[cstns]

Summary

Create a dedicated MCP consent page that users land on when an external MCP agent (Claude Desktop, Cursor, Claude Code) initiates the OAuth2 PKCE flow. The page should clearly communicate what the agent is requesting and let the user approve or deny.

Prerequisites

• OAuth2 PKCE Flow Extension for MCP Clients #7432 (OAuth2 PKCE flow extension, which redirects to this page from /account/authorize)

Requirements

Route

• New Vue route at /account/request/:id/mcp with layout: 'modal', following the existing /account/request/:id and /account/request/:id/editor pattern in frontend/src/pages/account/routes.js
• New component AccessRequestMCP.vue in frontend/src/pages/account/

Consent page content

• Clearly identify that an MCP agent is requesting access to the user's FlowFuse account
• Display the scope/permissions being requested in user-friendly terms (e.g. "read your teams and instances," "create and modify resources," "delete resources") based on the scope parameter from the OAuth request
• Approve button: redirects to /account/complete/:id (same as existing pattern)
• Deny button: redirects to /account/reject/:id (same as existing pattern)

Design

• Follow the existing AccessRequest.vue component structure and styling conventions
• Use existing FlowFuse UI components (ff-button, icons, etc.)
• Modal layout consistent with the other access request pages

Tests

• Page renders correctly with scope information
• Approve button redirects to the complete endpoint
• Deny button redirects to the reject endpoint
• Route is accessible and uses modal layout

References

• Existing consent page: frontend/src/pages/account/AccessRequest.vue
• Existing route registration: frontend/src/pages/account/routes.js:27-41
• OAuth flow redirect: OAuth2 PKCE Flow Extension for MCP Clients #7432 (/account/authorize redirects here for mcp-agent clients)
• Parent story: Story 2: OAuth2 for MCP Agents #7423