feat: add manual token authentication for Firebase Studio support

packages/cloud/src/CloudService.ts

@@ -216,6 +216,20 @@ export class CloudService extends EventEmitter<CloudServiceEvents> implements Di
 		return this.authService!.handleCallback(code, state, organizationId)
 	}
 
+	public async handleManualToken(token: string): Promise<void> {
+		this.ensureInitialized()
+		if (!this.authService) {
+			throw new Error("Auth service not available")
+		}
+		// For WebAuthService, we need to add a method to handle manual tokens
+		// Type guard to check if the auth service is WebAuthService
+		if (this.authService instanceof WebAuthService) {
+			return this.authService.handleManualToken(token)
+		} else {
+			throw new Error("Manual token authentication not supported with current auth service")
+		}
+	}
+
 	// SettingsService
 
 	public getAllowList(): OrganizationAllowList {

packages/cloud/src/WebAuthService.ts

@@ -330,6 +330,42 @@ export class WebAuthService extends EventEmitter<AuthServiceEvents> implements A
 		}
 	}
 
+	/**
+	 * Handle manual token input
+	 *
+	 * This method allows users to manually paste a token from the authentication page
+	 * when automatic redirect doesn't work (e.g., in Firebase Studio)
+	 *
+	 * @param token The authentication token from the URL
+	 */
+	public async handleManualToken(token: string): Promise<void> {
+		if (!token || !token.trim()) {
+			throw new Error("Invalid token provided")
+		}
+
+		try {
+			// The token is the ticket that we need to exchange for credentials
+			const credentials = await this.clerkSignIn(token.trim())
+
+			// For manual token, we don't have organization context from the URL
+			// Set it to null (personal account) by default
+			credentials.organizationId = null
+
+			await this.storeCredentials(credentials)
+
+			const vscode = await importVscode()
+
+			if (vscode) {
+				vscode.window.showInformationMessage("Successfully authenticated with Roo Code Cloud via manual token")
+			}
+
+			this.log("[auth] Successfully authenticated with Roo Code Cloud via manual token")
+		} catch (error) {
+			this.log(`[auth] Error handling manual token: ${error}`)
+			throw new Error(`Failed to authenticate with manual token: ${error}`)
+		}
+	}
+
 	/**
 	 * Log out
 	 *

src/core/webview/webviewMessageHandler.ts

@@ -2251,6 +2251,35 @@ export const webviewMessageHandler = async (
 
 			break
 		}
+		case "rooCloudManualToken": {
+			if (message.token) {
+				try {
+					// Extract the actual token from the URL if a full URL is pasted
+					let token = message.token.trim()
+					const tokenMatch = token.match(/[?&]token=([^&]+)/)
+					if (tokenMatch) {
+						token = tokenMatch[1]
+					}
+
+					// Call the manual token authentication method
+					await CloudService.instance.handleManualToken(token)
+					await provider.postStateToWebview()
+					provider.postMessageToWebview({
+						type: "authenticatedUser",
+						userInfo: CloudService.instance.getUserInfo() || undefined,
+					})
+				} catch (error) {
+					provider.log(
+						`Manual token authentication failed: ${error instanceof Error ? error.message : String(error)}`,
+					)
+					vscode.window.showErrorMessage(
+						t("common:errors.manual_token_auth_failed") ||
+							"Manual token authentication failed. Please check the token and try again.",
+					)
+				}
+			}
+			break
+		}
 
 		case "saveCodeIndexSettingsAtomic": {
 			if (!message.codeIndexSettings) {

src/shared/WebviewMessage.ts

@@ -180,6 +180,7 @@ export interface WebviewMessage {
 		| "cloudButtonClicked"
 		| "rooCloudSignIn"
 		| "rooCloudSignOut"
+		| "rooCloudManualToken"
 		| "condenseTaskContextRequest"
 		| "requestIndexingStatus"
 		| "startIndexing"
@@ -222,6 +223,7 @@ export interface WebviewMessage {
 		| "removeQueuedMessage"
 		| "editQueuedMessage"
 	text?: string
+	token?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
 	disabled?: boolean

webview-ui/src/components/cloud/CloudView.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react"
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { useEffect, useRef, useState } from "react"
+import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
 import { type CloudUserInfo, TelemetryEventName } from "@roo-code/types"
 
@@ -9,7 +9,7 @@ import { vscode } from "@src/utils/vscode"
 import { telemetryClient } from "@src/utils/TelemetryClient"
 import { ToggleSwitch } from "@/components/ui/toggle-switch"
 
-import { History, PiggyBank, SquareArrowOutUpRightIcon } from "lucide-react"
+import { History, PiggyBank, SquareArrowOutUpRightIcon, Key } from "lucide-react"
 
 // Define the production URL constant locally to avoid importing from cloud package in tests
 const PRODUCTION_ROO_CODE_API_URL = "https://app.roocode.com"
@@ -25,6 +25,9 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 	const { t } = useAppTranslation()
 	const { remoteControlEnabled, setRemoteControlEnabled } = useExtensionState()
 	const wasAuthenticatedRef = useRef(false)
+	const [showManualToken, setShowManualToken] = useState(false)
+	const [manualToken, setManualToken] = useState("")
+	const [tokenError, setTokenError] = useState("")
 
 	const rooLogoUri = (window as any).IMAGES_BASE_URI + "/roo-logo.svg"
 
@@ -75,6 +78,26 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 		vscode.postMessage({ type: "remoteControlEnabled", bool: newValue })
 	}
 
+	const handleManualTokenSubmit = () => {
+		if (!manualToken.trim()) {
+			setTokenError(t("cloud:manualTokenError") || "Please enter a valid token")
+			return
+		}
+		setTokenError("")
+		// Extract the token from the URL if a full URL is pasted
+		let token = manualToken.trim()
+		const tokenMatch = token.match(/[?&]token=([^&]+)/)
+		if (tokenMatch) {
+			token = tokenMatch[1]
+		}
+
+		// Send the manual token to the backend
+		vscode.postMessage({ type: "rooCloudManualToken", token })
+		// Clear the token field for security
+		setManualToken("")
+		setShowManualToken(false)
+	}
+
 	return (
 		<div className="flex flex-col h-full">
 			<div className="flex justify-between items-center mb-6">
@@ -192,6 +215,45 @@ export const CloudView = ({ userInfo, isAuthenticated, cloudApiUrl, onDone }: Cl
 						<VSCodeButton appearance="primary" onClick={handleConnectClick} className="w-1/2">
 							{t("cloud:connect")}
 						</VSCodeButton>
+
+						{/* Manual token input section */}
+						<div className="w-full mt-4">
+							<button
+								onClick={() => setShowManualToken(!showManualToken)}
+								className="text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground underline cursor-pointer bg-transparent border-none p-0 text-sm flex items-center gap-1">
+								<Key size="14" />
+								{t("cloud:manualTokenLink") || "Having trouble? Enter token manually"}
+							</button>
+
+							{showManualToken && (
+								<div className="mt-4 p-4 border border-vscode-widget-border rounded">
+									<p className="text-sm text-vscode-descriptionForeground mb-3">
+										{t("cloud:manualTokenDescription") ||
+											"If you're using Firebase Studio or another IDE that doesn't support automatic authentication, you can paste the token from the authentication page here."}
+									</p>
+									<div className="flex gap-2">
+										<VSCodeTextField
+											value={manualToken}
+											onInput={(e: any) => {
+												setManualToken(e.target.value)
+												setTokenError("")
+											}}
+											placeholder={t("cloud:manualTokenPlaceholder") || "Paste token or URL here"}
+											className="flex-1"
+										/>
+										<VSCodeButton
+											appearance="secondary"
+											onClick={handleManualTokenSubmit}
+											disabled={!manualToken.trim()}>
+											{t("cloud:submitToken") || "Submit"}
+										</VSCodeButton>
+									</div>
+									{tokenError && (
+										<p className="text-sm text-vscode-errorForeground mt-2">{tokenError}</p>
+									)}
+								</div>
+							)}
+						</div>
 					</div>
 				</>
 			)}

webview-ui/src/i18n/locales/en/cloud.json

@@ -13,5 +13,10 @@
 	"visitCloudWebsite": "Visit Roo Code Cloud",
 	"remoteControl": "Roomote Control",
 	"remoteControlDescription": "Enable following and interacting with tasks in this workspace with Roo Code Cloud",
-	"cloudUrlPillLabel": "Roo Code Cloud URL"
+	"cloudUrlPillLabel": "Roo Code Cloud URL",
+	"manualTokenLink": "Having trouble? Enter token manually",
+	"manualTokenDescription": "If you're using Firebase Studio or another IDE that doesn't support automatic authentication, you can paste the token from the authentication page here.",
+	"manualTokenPlaceholder": "Paste token or URL here",
+	"manualTokenError": "Please enter a valid token",
+	"submitToken": "Submit"
 }