feat(claude-code): add manual auth flow for remote environments

[roomote-v0]

Summary

This PR attempts to address Issue #10531 where Claude Code sign-in is broken in remote environments (like GitHub Codespaces) due to hardcoded localhost redirectUri.

Changes

Based on the feedback from @soundyogi, this implements a manual authorization code entry flow similar to how Claude Code itself handles this scenario:

Backend Changes (src/integrations/claude-code/oauth.ts)

• Added oobRedirectUri constant for OOB (out-of-band) OAuth flow
• Added buildManualAuthorizationUrl() function using OOB redirect
• Added exchangeManualCodeForTokens() function for manual code exchange
• Added startManualAuthorizationFlow() method to ClaudeCodeOAuthManager
• Added exchangeManualCode() method to exchange manually-entered codes
• Added hasPendingManualAuth() helper method

Frontend Changes (webview-ui/src/components/settings/providers/ClaudeCode.tsx)

• Added "Sign in manually" link for users in remote environments
• Added text input for pasting authorization codes
• Added Submit/Cancel buttons for the manual auth flow
• State management for manual auth flow UI

Message Handler Updates (src/core/webview/webviewMessageHandler.ts)

• Added claudeCodeStartManualAuth case to start manual auth flow
• Added claudeCodeSubmitManualCode case to exchange manually-entered codes

Type Definitions

• Added claudeCodeStartManualAuth and claudeCodeSubmitManualCode to WebviewMessage.ts
• Added claudeCodeManualAuthStarted to ExtensionMessage.ts

How It Works

1. Users in remote environments click "Sign in manually" link
2. Browser opens the OAuth authorization page with OOB redirect URI
3. After authorization, user copies the code from the resulting page
4. User pastes the code into the text input in Roo Code
5. Code is exchanged for tokens using the OOB redirect URI

Testing

• ESLint passed for both src/ and webview-ui/
• Manual testing would require a remote environment like Codespaces

Note

The OOB redirect URI (urn:ietf:wg:oauth:2.0:oob) is a standard OAuth pattern. However, whether Anthropic's OAuth endpoint supports this redirect URI needs to be verified. If they use a different approach (like a custom callback page), the implementation may need adjustment.

Feedback and guidance are welcome!

---

Important

Add manual OAuth flow for remote environments in Claude Code, including backend, frontend, and message handler updates.

• Backend Changes (oauth.ts):
  • Add oobRedirectUri for OOB OAuth flow.
  • Add buildManualAuthorizationUrl() and exchangeManualCodeForTokens() for manual code handling.
  • Add startManualAuthorizationFlow() and exchangeManualCode() to ClaudeCodeOAuthManager.
• Frontend Changes (ClaudeCode.tsx):
  • Add "Sign in manually" link and input for authorization codes.
  • Add state management for manual auth flow UI.
• Message Handler Updates (webviewMessageHandler.ts):
  • Add claudeCodeStartManualAuth and claudeCodeSubmitManualCode cases for manual auth flow.
• Type Definitions:
  • Add claudeCodeStartManualAuth and claudeCodeSubmitManualCode to WebviewMessage.ts.
  • Add claudeCodeManualAuthStarted to ExtensionMessage.ts.

^{This description was created by for 63afd92. You can customize this summary. It will automatically update as commits are pushed.}

[roomote-v0]

Rooviewer   See task on Roo Cloud

Review complete. No issues found.

The implementation correctly adds manual OAuth flow support for remote environments. Key observations:

• OOB redirect URI pattern properly integrated with PKCE flow
• State management handles auth flow transitions correctly
• Error handling covers edge cases appropriately
• Code follows existing patterns in the codebase

Note from PR author (verified): The OOB redirect URI (urn:ietf:wg:oauth:2.0:oob) support by Anthropic's OAuth endpoint should be verified before merging.

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}