Device Auth Workflow

[catrielmuller]

Context

Resolve: #2517

Implementation

• New device auth flow with QR code support
• Dedicated auth tab and UI components
• Integration with settings and welcome flows
• Backend service for polling authorization status

Know Issues

• The button to open the external browser don't work on Jetbrains. (Fixed here -> Jetbrains - Fix open external url #4182)

Screenshots

How to Test

• Reset the state of the extension and do the Welcome flow or click on "Log in to Kilo Code" on the profile configuration

[changeset-bot]

🦋 Changeset detected

Latest commit: 9da4ece

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

This PR implements a device authorization workflow for Kilo Code, replacing the previous browser-based OAuth callback flow. Users can now authenticate by scanning a QR code or opening a verification URL in their browser, entering a code, and approving the device - similar to how GitHub CLI and other modern applications handle authentication.

Key Changes:

• New device auth flow with QR code support
• Dedicated auth tab and UI components
• Integration with settings and welcome flows
• Backend service for polling authorization status

Reviewed changes

Copilot reviewed 39 out of 39 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
webview-ui/src/utils/kilocode/qrcode.ts	New utility for QR code generation using the qrcode library
webview-ui/src/i18n/locales/*/kilocode.json	Added translations for device auth UI in 18 languages
webview-ui/src/components/kilocode/common/DeviceAuthCard.tsx	New component displaying auth code, QR code, and status
webview-ui/src/components/kilocode/common/KiloCodeAuth.tsx	Updated welcome screen to use device auth instead of browser redirect
webview-ui/src/components/kilocode/auth/AuthView.tsx	New dedicated view for device auth flow
webview-ui/src/components/settings/SettingsView.tsx	Enhanced profile editing to support auth return flow
webview-ui/src/components/settings/ApiOptions.tsx	Removed unused props for cleaner API
webview-ui/src/components/kilocode/settings/providers/KiloCode.tsx	Changed login button to trigger device auth flow
webview-ui/src/App.tsx	Added auth tab routing and state management
src/services/kilocode/DeviceAuthService.ts	New service for device auth polling with event emitter pattern
src/services/kilocode/__tests__/DeviceAuthService.test.ts	Comprehensive test coverage for device auth service
src/core/webview/ClineProvider.ts	Integration of device auth service with provider lifecycle
src/core/webview/webviewMessageHandler.ts	Message handlers for device auth flow
src/shared/WebviewMessage.ts	Added device auth message types
src/shared/ExtensionMessage.ts	Added device auth extension message types
packages/types/src/kilocode/device-auth.ts	TypeScript type definitions for device auth API
packages/types/src/index.ts	Exported device auth types
.changeset/gentle-plants-smile.md	Changeset documenting the new feature

[brianc]

nice

[kevinvandijk]

It would be nice to clarify a bit more what this means

[kiloconnect]

✅ No New Issues Found

41 files reviewed | Confidence: 95% | Recommendation: Merge

This PR implements a well-structured device authorization flow for Kilo Gateway. The implementation follows OAuth 2.0 device authorization grant patterns with QR code support.

Review Details

Key Files Reviewed:

• src/services/kilocode/DeviceAuthService.ts - Core service with EventEmitter pattern, proper polling, and cleanup
• src/core/kilocode/webview/deviceAuthHandler.ts - Handler encapsulating device auth logic (refactored per feedback)
• src/core/kilocode/webview/webviewMessageHandlerUtils.ts - Message handlers (refactored per feedback)
• packages/types/src/kilocode/device-auth.ts - Zod schemas for response validation
• webview-ui/src/components/kilocode/auth/AuthView.tsx - Auth flow UI
• webview-ui/src/components/kilocode/common/DeviceAuthCard.tsx - UI component with state management
• src/services/kilocode/__tests__/DeviceAuthService.test.ts - Comprehensive test coverage

Checked:

• ✅ Security: Token handling, URL validation, no injection risks
• ✅ Error handling: All error states properly handled and communicated
• ✅ Resource cleanup: Proper dispose() methods and polling cleanup
• ✅ Type safety: Zod validation implemented per reviewer feedback
• ✅ Test coverage: Comprehensive tests for all service methods and events

Previous Feedback Addressed:

• Code moved to separate files (deviceAuthHandler.ts, webviewMessageHandlerUtils.ts)
• Zod validation implemented for API responses
• Async import removed