Fix firebase session being inconsistent in popout tabs (RooCodeInc#2608)

* Fix firebase session being inconsistent in popout tabs

* Create rude-vans-cry.md

Author: saoudrizwan

.changeset/rude-vans-cry.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Fix issue with Cline accounts not showing user info in popout tabs

src/core/controller/index.ts

@@ -107,6 +107,7 @@ export class Controller {
 	async handleSignOut() {
 		try {
 			await storeSecret(this.context, "clineApiKey", undefined)
+			await updateGlobalState(this.context, "userInfo", undefined)
 			await updateGlobalState(this.context, "apiProvider", "openrouter")
 			await this.postStateToWebview()
 			vscode.window.showInformationMessage("Successfully logged out of Cline")

webview-ui/src/components/account/AccountView.tsx

@@ -7,6 +7,7 @@ import ClineLogoWhite from "../../assets/ClineLogoWhite"
 import CountUp from "react-countup"
 import CreditsHistoryTable from "./CreditsHistoryTable"
 import { UsageTransaction, PaymentTransaction } from "../../../../src/shared/ClineAccount"
+import { useExtensionState } from "../../context/ExtensionStateContext"
 
 type AccountViewProps = {
 	onDone: () => void
@@ -29,7 +30,11 @@ const AccountView = ({ onDone }: AccountViewProps) => {
 }
 
 export const ClineAccountView = () => {
-	const { user, handleSignOut } = useFirebaseAuth()
+	const { user: firebaseUser, handleSignOut } = useFirebaseAuth()
+	const { userInfo, apiConfiguration } = useExtensionState()
+
+	let user = apiConfiguration?.clineApiKey ? firebaseUser || userInfo : undefined
+
 	const [balance, setBalance] = useState(0)
 	const [isLoading, setIsLoading] = useState(true)
 	const [usageData, setUsageData] = useState<UsageTransaction[]>([])

webview-ui/src/components/settings/ClineAccountInfoCard.tsx

@@ -1,9 +1,13 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useFirebaseAuth } from "../../context/FirebaseAuthContext"
 import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "../../context/ExtensionStateContext"
 
 export const ClineAccountInfoCard = () => {
-	const { user, handleSignOut } = useFirebaseAuth()
+	const { user: firebaseUser, handleSignOut } = useFirebaseAuth()
+	const { userInfo, apiConfiguration } = useExtensionState()
+
+	let user = apiConfiguration?.clineApiKey ? firebaseUser || userInfo : undefined
 
 	const handleLogin = () => {
 		vscode.postMessage({ type: "accountLoginClicked" })

webview-ui/src/context/FirebaseAuthContext.tsx

@@ -37,6 +37,13 @@ export const FirebaseAuthProvider: React.FC<{ children: React.ReactNode }> = ({
 			setUser(user)
 			setIsInitialized(true)
 
+			console.log("onAuthStateChanged user", user)
+
+			if (!user) {
+				// when opening the extension in a new webview (ie if you logged in to sidebar webview but then open a popout tab webview) this effect will trigger without the original webview's session, resulting in us clearing out the user info object.
+				// we rely on this object to determine if the user is logged in, so we only want to clear it when the user logs out, rather than whenever a webview without a session is opened.
+				return
+			}
 			// Sync auth state with extension
 			vscode.postMessage({
 				type: "authStateChanged",