From 3414896f4103a3d2c3a1d27c6e7f8ce7c71c80c0 Mon Sep 17 00:00:00 2001
From: Kelly <kelly.wang@datadoghq.com>
Date: Tue, 28 Jul 2026 14:45:11 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20[FFL-2597]=20add=20feature=20flags?=
 =?UTF-8?q?=20tab=20with=20OAuth=20sign-in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the Flags tab (gated behind datadogMode) with an OAuth authorization_code
+ PKCE sign-in against Datadog's first-party OAuth server, the connect screen,
and site handling. The selected site is validated against the js-core site
allowlist before building any OAuth/API host, and the callback domain is
checked against it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/common/extension.types.ts             |   2 +
 .../src/common/panelTabConstants.ts           |   1 +
 .../src/panel/components/panel.tsx            |  11 +
 .../tabs/flagsTab/connectScreen.tsx           |  78 +++++++
 .../components/tabs/flagsTab/flagsTab.tsx     |  31 +++
 .../panel/components/tabs/flagsTab/index.ts   |   1 +
 .../components/tabs/flagsTab/oauth.spec.ts    |  75 +++++++
 .../panel/components/tabs/flagsTab/oauth.ts   | 192 ++++++++++++++++++
 .../components/tabs/flagsTab/useFlagAuth.ts   |  80 ++++++++
 .../src/panel/hooks/useSettings.ts            |   1 +
 developer-extension/wxt.config.ts             |   2 +-
 11 files changed, 473 insertions(+), 1 deletion(-)
 create mode 100644 developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx
 create mode 100644 developer-extension/src/panel/components/tabs/flagsTab/flagsTab.tsx
 create mode 100644 developer-extension/src/panel/components/tabs/flagsTab/index.ts
 create mode 100644 developer-extension/src/panel/components/tabs/flagsTab/oauth.spec.ts
 create mode 100644 developer-extension/src/panel/components/tabs/flagsTab/oauth.ts
 create mode 100644 developer-extension/src/panel/components/tabs/flagsTab/useFlagAuth.ts

diff --git a/developer-extension/src/common/extension.types.ts b/developer-extension/src/common/extension.types.ts
index aeb15404ae..5a86b64247 100644
--- a/developer-extension/src/common/extension.types.ts
+++ b/developer-extension/src/common/extension.types.ts
@@ -57,4 +57,6 @@ export interface Settings {
   logsConfigurationOverride: object | null
   debugMode: boolean
   datadogMode: boolean
+  // Datadog site used for the feature-flag OAuth flow + catalog fetch.
+  flagsSite: string
 }
diff --git a/developer-extension/src/common/panelTabConstants.ts b/developer-extension/src/common/panelTabConstants.ts
index f0fb92b2d7..2041ad3b3e 100644
--- a/developer-extension/src/common/panelTabConstants.ts
+++ b/developer-extension/src/common/panelTabConstants.ts
@@ -3,6 +3,7 @@ export const enum PanelTabs {
   Infos = 'infos',
   Settings = 'settings',
   Replay = 'replay',
+  Flags = 'flags',
 }
 
 export const DEFAULT_PANEL_TAB = PanelTabs.Events
diff --git a/developer-extension/src/panel/components/panel.tsx b/developer-extension/src/panel/components/panel.tsx
index cca7d405d2..6656dd1f8e 100644
--- a/developer-extension/src/panel/components/panel.tsx
+++ b/developer-extension/src/panel/components/panel.tsx
@@ -13,6 +13,7 @@ import { SettingsTab } from './tabs/settingsTab'
 import { InfosTab } from './tabs/infosTab'
 import { EventsTab, DEFAULT_COLUMNS } from './tabs/eventsTab'
 import { ReplayTab } from './tabs/replayTab'
+import { FlagsTab } from './tabs/flagsTab'
 
 import * as classes from './panel.module.css'
 
@@ -53,6 +54,11 @@ export function Panel() {
           <Tabs.Tab value={PanelTabs.Replay}>
             <Text>Live replay</Text>
           </Tabs.Tab>
+          {settings.datadogMode && (
+            <Tabs.Tab value={PanelTabs.Flags}>
+              <Text>Feature Flags</Text>
+            </Tabs.Tab>
+          )}
           <Tabs.Tab
             value={PanelTabs.Settings}
             rightSection={
@@ -92,6 +98,11 @@ export function Panel() {
       <Tabs.Panel value={PanelTabs.Replay} className={classes.tab}>
         <ReplayTab />
       </Tabs.Panel>
+      {settings.datadogMode && (
+        <Tabs.Panel value={PanelTabs.Flags} className={classes.tab}>
+          <FlagsTab />
+        </Tabs.Panel>
+      )}
       <Tabs.Panel value={PanelTabs.Settings} className={classes.tab}>
         <SettingsTab />
       </Tabs.Panel>
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx b/developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx
new file mode 100644
index 0000000000..83228de118
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/connectScreen.tsx
@@ -0,0 +1,78 @@
+import { Anchor, Badge, Button, Center, Group, Select, Stack, Text } from '@mantine/core'
+import React, { useState } from 'react'
+import { useSettings } from '../../../hooks/useSettings'
+import type { FlagAuthState } from './useFlagAuth'
+import { FLAG_SITES } from './oauth'
+
+export function ConnectScreen({ auth }: { auth: FlagAuthState }) {
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+
+  return (
+    <Center h="100%" className="dd-privacy-allow">
+      <Stack align="center" gap="md" maw={460} px="md">
+        <Text size="xl" fw={600} ta="center">
+          Authenticate with Datadog to access your feature flags
+        </Text>
+        <Button color="violet" onClick={auth.connect} loading={auth.connecting}>
+          Sign in to Datadog
+        </Button>
+        {auth.error && (
+          <Text c="red" size="xs" ta="center">
+            {auth.error}
+          </Text>
+        )}
+
+        <Anchor component="button" type="button" size="xs" c="dimmed" onClick={() => setAdvancedOpen((open) => !open)}>
+          {advancedOpen ? '− Hide advanced' : 'Advanced: site'}
+        </Anchor>
+        {advancedOpen && (
+          <Stack gap="sm" style={{ width: '100%' }}>
+            <SiteField />
+          </Stack>
+        )}
+      </Stack>
+    </Center>
+  )
+}
+
+export function ConnectionHeader({ auth }: { auth: FlagAuthState }) {
+  return (
+    <Stack gap={4}>
+      <Group justify="space-between">
+        <Group gap="xs">
+          <Badge color="green" variant="light">
+            Connected via OAuth
+          </Badge>
+          <Text c="dimmed" size="xs">
+            {auth.site}
+          </Text>
+        </Group>
+        <Button size="compact-xs" variant="subtle" color="gray" onClick={auth.disconnect}>
+          Disconnect
+        </Button>
+      </Group>
+      {/* Surface disconnect failures here too — otherwise a failed Disconnect looks like a no-op. */}
+      {auth.error && (
+        <Text c="red" size="xs" ta="right">
+          {auth.error}
+        </Text>
+      )}
+    </Stack>
+  )
+}
+
+function SiteField() {
+  const [{ flagsSite }, setSetting] = useSettings()
+
+  return (
+    <Select
+      label="Datadog site"
+      description="Your organization's Datadog site."
+      data={FLAG_SITES.map(({ site, label }) => ({ value: site, label }))}
+      value={flagsSite}
+      onChange={(value) => value && setSetting('flagsSite', value)}
+      allowDeselect={false}
+      size="xs"
+    />
+  )
+}
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/flagsTab.tsx b/developer-extension/src/panel/components/tabs/flagsTab/flagsTab.tsx
new file mode 100644
index 0000000000..dceb1c821d
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/flagsTab.tsx
@@ -0,0 +1,31 @@
+import { Box } from '@mantine/core'
+import React from 'react'
+import { TabBase } from '../../tabBase'
+import { useFlagAuth } from './useFlagAuth'
+import { ConnectScreen, ConnectionHeader } from './connectScreen'
+
+export function FlagsTab() {
+  const auth = useFlagAuth()
+
+  // Gate the whole tab: nothing shows until the user connects via OAuth. Browsing the flag catalog
+  // is added on top of this in the follow-up PR.
+  if (!auth.isConnected) {
+    return (
+      <TabBase>
+        <ConnectScreen auth={auth} />
+      </TabBase>
+    )
+  }
+
+  return (
+    <TabBase
+      top={
+        <Box px="md" className="dd-privacy-allow">
+          <ConnectionHeader auth={auth} />
+        </Box>
+      }
+    >
+      <Box px="md" py="sm" className="dd-privacy-allow" />
+    </TabBase>
+  )
+}
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/index.ts b/developer-extension/src/panel/components/tabs/flagsTab/index.ts
new file mode 100644
index 0000000000..1035c6fcaa
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/index.ts
@@ -0,0 +1 @@
+export { FlagsTab } from './flagsTab'
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/oauth.spec.ts b/developer-extension/src/panel/components/tabs/flagsTab/oauth.spec.ts
new file mode 100644
index 0000000000..13ec407d1c
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/oauth.spec.ts
@@ -0,0 +1,75 @@
+import { registerCleanupTask, replaceMockable } from '../../../../../../packages/browser-core/test'
+import { getFlagsApiHost, loginWithOAuth, sha256 } from './oauth'
+
+describe('oauth', () => {
+  describe('getFlagsApiHost', () => {
+    it('maps each site to its frontend host (US1/EU1 → app, staging → dd, regional sites as-is)', () => {
+      expect(getFlagsApiHost('datadoghq.com')).toBe('app.datadoghq.com')
+      expect(getFlagsApiHost('datadoghq.eu')).toBe('app.datadoghq.eu')
+      expect(getFlagsApiHost('datad0g.com')).toBe('dd.datad0g.com')
+      expect(getFlagsApiHost('us3.datadoghq.com')).toBe('us3.datadoghq.com')
+      expect(getFlagsApiHost('ddog-gov.com')).toBe('ddog-gov.com')
+    })
+
+    it('throws on a site that is not in the known list', () => {
+      expect(() => getFlagsApiHost('evil.example')).toThrowError(/Unknown Datadog site/)
+      expect(() => getFlagsApiHost('')).toThrowError(/Unknown Datadog site/)
+    })
+  })
+
+  describe('loginWithOAuth', () => {
+    // loginWithOAuth's PKCE step hashes with crypto.subtle, which is only exposed in a secure
+    // context — some CI browsers (mobile devices reached over http) don't provide it. Stub the hash
+    // via its mockable seam so these tests don't depend on the runtime's secure-context status.
+    // (Production runs on the extension's chrome-extension:// origin, always a secure context.)
+    beforeEach(() => {
+      replaceMockable(sha256, () => Promise.resolve(new Uint8Array(32).buffer))
+    })
+
+    // Stub chrome.identity so launchWebAuthFlow echoes back a redirect built from the state that
+    // loginWithOAuth actually generated (so the state check passes and we exercise the domain check).
+    function mockChromeIdentity(makeRedirect: (params: { state: string }) => string) {
+      const previousChrome = (globalThis as any).chrome
+      ;(globalThis as any).chrome = {
+        identity: {
+          getRedirectURL: () => 'https://ext-id.chromiumapp.org/',
+          launchWebAuthFlow: ({ url }: { url: string }) => {
+            const state = new URL(url).searchParams.get('state')!
+            return Promise.resolve(makeRedirect({ state }))
+          },
+        },
+      }
+      registerCleanupTask(() => {
+        ;(globalThis as any).chrome = previousChrome
+      })
+    }
+
+    it('aborts when the redirect domain does not match the selected site', async () => {
+      mockChromeIdentity(({ state }) => `https://ext-id.chromiumapp.org/?code=abc&state=${state}&domain=datadoghq.com`)
+      const fetchSpy = spyOn(globalThis, 'fetch')
+
+      await expectAsync(loginWithOAuth('datad0g.com')).toBeRejectedWithError(/but "datad0g.com" was selected/)
+      expect(fetchSpy).not.toHaveBeenCalled()
+    })
+
+    it('exchanges the code when the redirect domain matches the selected site', async () => {
+      mockChromeIdentity(({ state }) => `https://ext-id.chromiumapp.org/?code=abc&state=${state}&domain=datad0g.com`)
+      spyOn(globalThis, 'fetch').and.returnValue(
+        Promise.resolve(new Response(JSON.stringify({ access_token: 'tok', expires_in: 3600 })))
+      )
+
+      const tokens = await loginWithOAuth('datad0g.com')
+      expect(tokens.accessToken).toBe('tok')
+    })
+
+    it('proceeds when the redirect omits a domain', async () => {
+      mockChromeIdentity(({ state }) => `https://ext-id.chromiumapp.org/?code=abc&state=${state}`)
+      spyOn(globalThis, 'fetch').and.returnValue(
+        Promise.resolve(new Response(JSON.stringify({ access_token: 'tok', expires_in: 3600 })))
+      )
+
+      const tokens = await loginWithOAuth('datad0g.com')
+      expect(tokens.accessToken).toBe('tok')
+    })
+  })
+})
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/oauth.ts b/developer-extension/src/panel/components/tabs/flagsTab/oauth.ts
new file mode 100644
index 0000000000..4ddf238b07
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/oauth.ts
@@ -0,0 +1,192 @@
+// OAuth (authorization_code + PKCE) against Datadog's first-party OAuth server, used to fetch
+// the feature-flag catalog without asking the user to paste API/App keys.
+//
+// The client is a PUBLIC client (no secret), so PKCE is the only client proof. Tokens live in
+// chrome.storage.session (cleared when the browser session ends) — never persisted to disk.
+// See FFL-2596 / the OAuth CLI client `13c94d15-067d-4263-a309-be4811141419` (staging).
+
+import { mockable } from '../../../../../../packages/browser-core/src/tools/mockable'
+
+const CLIENT_ID = '13c94d15-067d-4263-a309-be4811141419'
+const SCOPES = ['feature_flag_config_read', 'feature_flag_environment_config_read']
+const TOKENS_STORAGE_KEY = 'flagsOAuthTokens'
+
+export interface OAuthTokens {
+  accessToken: string
+  refreshToken?: string
+  // Absolute epoch-ms timestamp at which accessToken stops being valid.
+  expiresAt: number
+}
+
+interface RawTokenResponse {
+  access_token: string
+  refresh_token?: string
+  expires_in?: number
+}
+
+export interface FlagSite {
+  /** Bare site value stored in settings and shown in the UI (e.g. "datadoghq.com"). */
+  site: string
+  /** Frontend host serving that site's OAuth endpoints and FFE API. */
+  host: string
+  /** Human-readable label for the site picker. */
+  label: string
+}
+
+// The Datadog sites the Flags tab can connect to, each paired with the frontend host that serves
+// its OAuth endpoints and FFE API. The site is chosen from this fixed list (a Select in the UI), so
+// there's no free-text host to validate against phishing — the value is always one of these. Host
+// subdomains mirror the canonical builder in browser-rum-core's getSessionReplayUrl.ts: US1 and EU1
+// get `app.`, staging gets `dd.`, and the remaining sites are already their own host.
+export const FLAG_SITES: FlagSite[] = [
+  { site: 'datadoghq.com', host: 'app.datadoghq.com', label: 'US1 (datadoghq.com)' },
+  { site: 'us3.datadoghq.com', host: 'us3.datadoghq.com', label: 'US3 (us3.datadoghq.com)' },
+  { site: 'us5.datadoghq.com', host: 'us5.datadoghq.com', label: 'US5 (us5.datadoghq.com)' },
+  { site: 'datadoghq.eu', host: 'app.datadoghq.eu', label: 'EU1 (datadoghq.eu)' },
+  { site: 'ap1.datadoghq.com', host: 'ap1.datadoghq.com', label: 'AP1 (ap1.datadoghq.com)' },
+  { site: 'ap2.datadoghq.com', host: 'ap2.datadoghq.com', label: 'AP2 (ap2.datadoghq.com)' },
+  { site: 'ddog-gov.com', host: 'ddog-gov.com', label: 'US1-FED (ddog-gov.com)' },
+  { site: 'us2.ddog-gov.com', host: 'us2.ddog-gov.com', label: 'US2-FED (us2.ddog-gov.com)' },
+  { site: 'datad0g.com', host: 'dd.datad0g.com', label: 'Staging (datad0g.com)' },
+]
+
+/**
+ * Returns the frontend host serving OAuth + FFE for a site. Throws on an unknown site: the UI only
+ * ever passes a value from FLAG_SITES, so an unknown one means a stale or hand-edited setting.
+ */
+export function getFlagsApiHost(site: string): string {
+  const match = FLAG_SITES.find((entry) => entry.site === site)
+  if (!match) {
+    throw new Error(`Unknown Datadog site: "${site}"`)
+  }
+  return match.host
+}
+
+function base64UrlEncode(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer)
+  let binary = ''
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte)
+  }
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+function randomBase64Url(byteLength: number): string {
+  const bytes = new Uint8Array(byteLength)
+  crypto.getRandomValues(bytes)
+  return base64UrlEncode(bytes.buffer)
+}
+
+// Exported and wrapped with mockable() so tests can stub the hash: crypto.subtle is only exposed in
+// a secure context, which some CI browsers (mobile devices reached over http) don't provide. The
+// extension itself runs on a chrome-extension:// origin, which is always a secure context.
+export function sha256(data: BufferSource): Promise<ArrayBuffer> {
+  return crypto.subtle.digest('SHA-256', data)
+}
+
+async function generatePkce(): Promise<{ verifier: string; challenge: string }> {
+  const verifier = randomBase64Url(48)
+  const digest = await mockable(sha256)(new TextEncoder().encode(verifier))
+  return { verifier, challenge: base64UrlEncode(digest) }
+}
+
+function toTokens(raw: RawTokenResponse): OAuthTokens {
+  return {
+    accessToken: raw.access_token,
+    refreshToken: raw.refresh_token,
+    expiresAt: Date.now() + (raw.expires_in ?? 3600) * 1000,
+  }
+}
+
+async function requestToken(host: string, body: URLSearchParams): Promise<OAuthTokens> {
+  const response = await fetch(`https://${host}/oauth2/v1/token`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  })
+  if (!response.ok) {
+    throw new Error(`Token request failed: ${response.status} ${response.statusText}`)
+  }
+  return toTokens((await response.json()) as RawTokenResponse)
+}
+
+/**
+ * Runs the interactive OAuth flow: opens Datadog's login/consent screen, then exchanges the
+ * returned authorization code for tokens. Returns the tokens (caller is responsible for storing).
+ */
+export async function loginWithOAuth(site: string): Promise<OAuthTokens> {
+  const host = getFlagsApiHost(site)
+  const redirectUri = chrome.identity.getRedirectURL()
+  const { verifier, challenge } = await generatePkce()
+  const state = randomBase64Url(16)
+
+  const authUrl = new URL(`https://${host}/oauth2/v1/authorize`)
+  authUrl.searchParams.set('response_type', 'code')
+  authUrl.searchParams.set('client_id', CLIENT_ID)
+  authUrl.searchParams.set('redirect_uri', redirectUri)
+  authUrl.searchParams.set('scope', SCOPES.join(' '))
+  authUrl.searchParams.set('code_challenge', challenge)
+  authUrl.searchParams.set('code_challenge_method', 'S256')
+  authUrl.searchParams.set('state', state)
+
+  const redirectResponse = await chrome.identity.launchWebAuthFlow({
+    url: authUrl.toString(),
+    interactive: true,
+  })
+  if (!redirectResponse) {
+    throw new Error('Authorization was cancelled')
+  }
+
+  const returned = new URL(redirectResponse)
+  const errorParam = returned.searchParams.get('error')
+  if (errorParam) {
+    throw new Error(`Authorization failed: ${returned.searchParams.get('error_description') ?? errorParam}`)
+  }
+  // Datadog appends `domain` to the redirect, naming the site the user actually authenticated
+  // against (bare site form, e.g. "datad0g.com"). `site` is our source of truth for every host we
+  // talk to, so if they disagree we abort rather than store tokens that would later be used
+  // against a different site than the one they were issued for.
+  const returnedDomain = returned.searchParams.get('domain')
+  if (returnedDomain && returnedDomain.toLowerCase() !== site) {
+    throw new Error(`Authenticated against "${returnedDomain}" but "${site}" was selected — aborting login`)
+  }
+  if (returned.searchParams.get('state') !== state) {
+    throw new Error('State mismatch — aborting for safety')
+  }
+  const code = returned.searchParams.get('code')
+  if (!code) {
+    throw new Error('No authorization code returned')
+  }
+
+  return requestToken(
+    host,
+    new URLSearchParams({
+      grant_type: 'authorization_code',
+      code,
+      redirect_uri: redirectUri,
+      client_id: CLIENT_ID,
+      code_verifier: verifier,
+    })
+  )
+}
+
+export async function loadStoredTokens(): Promise<OAuthTokens | null> {
+  const result = await chrome.storage.session.get(TOKENS_STORAGE_KEY)
+  return (result[TOKENS_STORAGE_KEY] as OAuthTokens | undefined) ?? null
+}
+
+export async function storeTokens(tokens: OAuthTokens): Promise<void> {
+  await chrome.storage.session.set({ [TOKENS_STORAGE_KEY]: tokens })
+}
+
+export async function clearStoredTokens(): Promise<void> {
+  await chrome.storage.session.remove(TOKENS_STORAGE_KEY)
+}
+
+/**
+ * Whether a stored token represents a live connection: still valid, or still refreshable (the
+ * refresh itself happens lazily at fetch time). An expired token with no refresh token is dead.
+ */
+export function isTokenUsable(tokens: OAuthTokens | null): boolean {
+  return !!tokens && (tokens.expiresAt > Date.now() || !!tokens.refreshToken)
+}
diff --git a/developer-extension/src/panel/components/tabs/flagsTab/useFlagAuth.ts b/developer-extension/src/panel/components/tabs/flagsTab/useFlagAuth.ts
new file mode 100644
index 0000000000..603d471e3d
--- /dev/null
+++ b/developer-extension/src/panel/components/tabs/flagsTab/useFlagAuth.ts
@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useState } from 'react'
+import { createLogger } from '../../../../common/logger'
+import { useSettings } from '../../../hooks/useSettings'
+import { clearStoredTokens, isTokenUsable, loadStoredTokens, loginWithOAuth, storeTokens } from './oauth'
+
+const logger = createLogger('useFlagAuth')
+
+export interface FlagAuthState {
+  isConnected: boolean
+  connecting: boolean
+  error: string | null
+  site: string
+  connect: () => void
+  disconnect: () => void
+}
+
+/**
+ * Tracks the Flags tab's OAuth connection. `isConnected` gates the rest of the tab — nothing else
+ * renders until the user has completed OAuth.
+ */
+export function useFlagAuth(): FlagAuthState {
+  const [{ flagsSite }] = useSettings()
+
+  const [connected, setConnected] = useState(false)
+  const [connecting, setConnecting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    loadStoredTokens()
+      .then((tokens) => {
+        if (!cancelled) {
+          // Presence alone isn't a connection: a token counts only if it's still valid or can still
+          // be refreshed. An expired, unrefreshable token is dead — getValidAccessToken clears it at
+          // fetch time, so here we just avoid showing a "Connected" state it can't back up.
+          setConnected(isTokenUsable(tokens))
+        }
+      })
+      .catch((err: unknown) => logger.error('Error while loading stored tokens', err))
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const connect = useCallback(() => {
+    setConnecting(true)
+    setError(null)
+    loginWithOAuth(flagsSite)
+      .then((tokens) => storeTokens(tokens))
+      .then(() => setConnected(true))
+      .catch((err: unknown) => {
+        logger.error('OAuth login failed:', err)
+        setError(err instanceof Error ? err.message : String(err))
+        setConnected(false)
+      })
+      .finally(() => setConnecting(false))
+  }, [flagsSite])
+
+  const disconnect = useCallback(() => {
+    setError(null)
+    // Only drop the connected state once the tokens are actually gone: if removal fails the
+    // credentials are still stored and a reopened panel would load them again, so reporting
+    // "disconnected" here would make the Disconnect button silently lie.
+    clearStoredTokens()
+      .then(() => setConnected(false))
+      .catch((err: unknown) => {
+        logger.error('Error while clearing tokens', err)
+        setError('Could not disconnect — please try again.')
+      })
+  }, [])
+
+  return {
+    isConnected: connected,
+    connecting,
+    error,
+    site: flagsSite,
+    connect,
+    disconnect,
+  }
+}
diff --git a/developer-extension/src/panel/hooks/useSettings.ts b/developer-extension/src/panel/hooks/useSettings.ts
index c874513b8c..a5a2a748ec 100644
--- a/developer-extension/src/panel/hooks/useSettings.ts
+++ b/developer-extension/src/panel/hooks/useSettings.ts
@@ -19,6 +19,7 @@ const DEFAULT_SETTINGS: Readonly<Settings> = {
   logsConfigurationOverride: null,
   debugMode: false,
   datadogMode: false,
+  flagsSite: 'datadoghq.com',
 }
 
 let settings: Settings | undefined
diff --git a/developer-extension/wxt.config.ts b/developer-extension/wxt.config.ts
index 80cf692347..947f20c10c 100644
--- a/developer-extension/wxt.config.ts
+++ b/developer-extension/wxt.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   entrypointsDir: 'src/entrypoints',
   manifest: {
     name: 'Datadog Browser SDK developer extension',
-    permissions: ['storage', 'browsingData', 'declarativeNetRequest', 'webNavigation', 'scripting'],
+    permissions: ['storage', 'browsingData', 'declarativeNetRequest', 'webNavigation', 'scripting', 'identity'],
     host_permissions: ['<all_urls>'],
     icons: {
       '256': 'icon.png',