anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-22 02:05:26 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

[PR #11477] feat(app): add MCP OAuth authentication UI to settings #13806

New Issue
Open
opened 2026-02-16 18:18:38 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 18:18:38 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/anomalyco/opencode/pull/11477

State: open
Merged: No

Summary

This PR introduces a complete OAuth authentication interface for MCP (Model Context Protocol) servers in the OpenCode settings dialog, allowing users to manage OAuth credentials for their MCP servers through a dedicated settings tab.

Closes #11478

Features

New MCP Settings Tab

  • Added dedicated MCP tab to settings dialog for managing server authentication
  • Displays all configured MCP servers with their authentication status
  • Shows "Authenticated" badge for servers with stored OAuth credentials
  • Manual refresh button to update server status on demand

OAuth Authentication Flow

  • Authenticate button: Initiates OAuth flow in browser for unauthenticated servers
  • Re-authenticate button: Allows re-authentication for already authenticated servers
  • Logout button: Removes stored OAuth credentials and disconnects server
  • Handles OAuth state transitions (needs_auth, connected, disabled, failed)
  • Proper error handling for auth failures and client registration issues

User Experience

  • Loading states during authentication and logout operations
  • Success/error toast notifications with descriptive messages
  • Displays non-auth error messages inline (e.g., connection failures)
  • Gracefully handles servers that don't support OAuth
  • Empty state message when no MCP servers are configured

Implementation Details

Architecture

  • Component: SettingsMcp in packages/app/src/components/settings-mcp.tsx
  • State Management: Uses createStore for loading state (per style guide)
  • Data Fetching: createResource for MCP status and config with automatic refetch
  • SDK: Uses global SDK context (auth credentials are per-server, not per-directory)

Code Quality

  • Type-safe with proper McpStatus types from SDK
  • DRY helper function isAuthError() for auth error detection
  • Awaits refetch operations to prevent race conditions
  • No debug logging or credential exposure
  • Explicit error variants in all toast notifications

Translation Support

  • Added 16 translation keys to packages/app/src/i18n/en.ts
  • Covers all UI elements, buttons, toasts, and error messages
  • Consistent naming pattern: settings.mcp.*
  • Only includes keys that are actively used in the component

Files Changed

  • packages/app/src/components/settings-mcp.tsx - Main MCP settings component (288 lines)
  • packages/app/src/components/dialog-settings.tsx - Added MCP tab
  • packages/app/src/i18n/en.ts - Added translations

Stats: 3 files changed, 301 insertions(+), 10 deletions(-)

Design Decisions

  1. Auth-only interface: Removed toggle switches for enable/disable functionality since that context exists in the status popover (per-directory). Settings page focuses exclusively on OAuth credential management (global).

  2. Minimal status display: Only shows "Authenticated" badge, no connection status tags (connected/disabled/failed) to avoid confusion between per-directory connection state and global auth state.

  3. Smart logout flow: When logging out, the component handles both connected and disabled servers differently to ensure status updates correctly to "needs_auth".

  4. Automatic server enabling: Before authentication, if server is disabled, it's automatically enabled so OAuth can connect it successfully.

  5. No automatic polling: Relies on existing global sync mechanism and manual refresh. Updates occur after user actions (authenticate/logout) rather than polling.

Testing

  • ✅ TypeScript compilation passes with no errors
  • ✅ All pre-commit hooks passed (turbo typecheck on 12 packages)
  • ✅ Follows OpenCode style guide (createStore, await patterns, no let statements)
  • ✅ All critical code review issues addressed
  • ✅ Manual testing completed with OAuth flow

Related Issues

Closes #11478

**Original Pull Request:** https://github.com/anomalyco/opencode/pull/11477 **State:** open **Merged:** No --- ## Summary This PR introduces a complete OAuth authentication interface for MCP (Model Context Protocol) servers in the OpenCode settings dialog, allowing users to manage OAuth credentials for their MCP servers through a dedicated settings tab. Closes #11478 ## Features ### New MCP Settings Tab - Added dedicated MCP tab to settings dialog for managing server authentication - Displays all configured MCP servers with their authentication status - Shows "Authenticated" badge for servers with stored OAuth credentials - Manual refresh button to update server status on demand ### OAuth Authentication Flow - **Authenticate button**: Initiates OAuth flow in browser for unauthenticated servers - **Re-authenticate button**: Allows re-authentication for already authenticated servers - **Logout button**: Removes stored OAuth credentials and disconnects server - Handles OAuth state transitions (needs_auth, connected, disabled, failed) - Proper error handling for auth failures and client registration issues ### User Experience - Loading states during authentication and logout operations - Success/error toast notifications with descriptive messages - Displays non-auth error messages inline (e.g., connection failures) - Gracefully handles servers that don't support OAuth - Empty state message when no MCP servers are configured ## Implementation Details ### Architecture - **Component**: `SettingsMcp` in `packages/app/src/components/settings-mcp.tsx` - **State Management**: Uses `createStore` for loading state (per style guide) - **Data Fetching**: `createResource` for MCP status and config with automatic refetch - **SDK**: Uses global SDK context (auth credentials are per-server, not per-directory) ### Code Quality - Type-safe with proper `McpStatus` types from SDK - DRY helper function `isAuthError()` for auth error detection - Awaits refetch operations to prevent race conditions - No debug logging or credential exposure - Explicit error variants in all toast notifications ### Translation Support - Added 16 translation keys to `packages/app/src/i18n/en.ts` - Covers all UI elements, buttons, toasts, and error messages - Consistent naming pattern: `settings.mcp.*` - Only includes keys that are actively used in the component ## Files Changed - `packages/app/src/components/settings-mcp.tsx` - Main MCP settings component (288 lines) - `packages/app/src/components/dialog-settings.tsx` - Added MCP tab - `packages/app/src/i18n/en.ts` - Added translations **Stats**: 3 files changed, 301 insertions(+), 10 deletions(-) ## Design Decisions 1. **Auth-only interface**: Removed toggle switches for enable/disable functionality since that context exists in the status popover (per-directory). Settings page focuses exclusively on OAuth credential management (global). 2. **Minimal status display**: Only shows "Authenticated" badge, no connection status tags (connected/disabled/failed) to avoid confusion between per-directory connection state and global auth state. 3. **Smart logout flow**: When logging out, the component handles both connected and disabled servers differently to ensure status updates correctly to "needs_auth". 4. **Automatic server enabling**: Before authentication, if server is disabled, it's automatically enabled so OAuth can connect it successfully. 5. **No automatic polling**: Relies on existing global sync mechanism and manual refresh. Updates occur after user actions (authenticate/logout) rather than polling. ## Testing - ✅ TypeScript compilation passes with no errors - ✅ All pre-commit hooks passed (turbo typecheck on 12 packages) - ✅ Follows OpenCode style guide (createStore, await patterns, no let statements) - ✅ All critical code review issues addressed - ✅ Manual testing completed with OAuth flow ## Related Issues Closes #11478
yindo added the pull-request label 2026-02-16 18:18:38 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#13806
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?