@zerodev/wallet-react 0.0.1-alpha.1 → 0.0.1-alpha.11

package/src/oauth.test.ts

@@ -0,0 +1,445 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  buildBackendOAuthUrl,
+  generateOAuthNonce,
+  handleOAuthCallback,
+  listenForOAuthMessage,
+  OAUTH_PROVIDERS,
+  openOAuthPopup,
+} from './oauth.js'
+
+describe('OAuth utilities', () => {
+  describe('OAUTH_PROVIDERS', () => {
+    it('has google provider', () => {
+      expect(OAUTH_PROVIDERS.GOOGLE).toBe('google')
+    })
+  })
+
+  describe('generateOAuthNonce', () => {
+    it('generates consistent nonce from public key', () => {
+      const publicKey = '0x1234567890abcdef'
+
+      const nonce1 = generateOAuthNonce(publicKey)
+      const nonce2 = generateOAuthNonce(publicKey)
+
+      expect(nonce1).toBe(nonce2)
+    })
+
+    it('returns nonce without 0x prefix', () => {
+      const publicKey =
+        '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef'
+
+      const nonce = generateOAuthNonce(publicKey)
+
+      expect(nonce).not.toMatch(/^0x/)
+    })
+
+    it('generates different nonces for different keys', () => {
+      const key1 =
+        '0x1111111111111111111111111111111111111111111111111111111111111111'
+      const key2 =
+        '0x2222222222222222222222222222222222222222222222222222222222222222'
+
+      const nonce1 = generateOAuthNonce(key1)
+      const nonce2 = generateOAuthNonce(key2)
+
+      expect(nonce1).not.toBe(nonce2)
+    })
+  })
+
+  describe('buildBackendOAuthUrl', () => {
+    it('builds correct URL for Google OAuth', () => {
+      const url = buildBackendOAuthUrl({
+        provider: 'google',
+        backendUrl: 'https://api.example.com',
+        projectId: 'proj-123',
+        publicKey: '0xabcdef1234567890',
+        returnTo: 'https://app.example.com/callback',
+      })
+
+      const parsedUrl = new URL(url)
+      expect(parsedUrl.origin).toBe('https://api.example.com')
+      expect(parsedUrl.pathname).toBe('/oauth/google/login')
+      expect(parsedUrl.searchParams.get('project_id')).toBe('proj-123')
+      expect(parsedUrl.searchParams.get('pub_key')).toBe('abcdef1234567890') // 0x stripped
+      expect(parsedUrl.searchParams.get('return_to')).toBe(
+        'https://app.example.com/callback',
+      )
+    })
+
+    it('strips 0x prefix from public key', () => {
+      const url = buildBackendOAuthUrl({
+        provider: 'google',
+        backendUrl: 'https://api.example.com',
+        projectId: 'proj-123',
+        publicKey: '0x0123456789',
+        returnTo: 'https://app.example.com',
+      })
+
+      const parsedUrl = new URL(url)
+      expect(parsedUrl.searchParams.get('pub_key')).toBe('0123456789')
+    })
+
+    it('handles public key without 0x prefix', () => {
+      const url = buildBackendOAuthUrl({
+        provider: 'google',
+        backendUrl: 'https://api.example.com',
+        projectId: 'proj-123',
+        publicKey: 'abcdef123456',
+        returnTo: 'https://app.example.com',
+      })
+
+      const parsedUrl = new URL(url)
+      expect(parsedUrl.searchParams.get('pub_key')).toBe('abcdef123456')
+    })
+
+    it('throws on unsupported provider', () => {
+      expect(() =>
+        buildBackendOAuthUrl({
+          provider: 'facebook' as 'google',
+          backendUrl: 'https://api.example.com',
+          projectId: 'proj-123',
+          publicKey: '0xabcdef',
+          returnTo: 'https://app.example.com',
+        }),
+      ).toThrow('Unsupported OAuth provider: facebook')
+    })
+
+    it('encodes special characters in return URL', () => {
+      const url = buildBackendOAuthUrl({
+        provider: 'google',
+        backendUrl: 'https://api.example.com',
+        projectId: 'proj-123',
+        publicKey: '0xabcdef',
+        returnTo: 'https://app.example.com?foo=bar&baz=qux',
+      })
+
+      const parsedUrl = new URL(url)
+      expect(parsedUrl.searchParams.get('return_to')).toBe(
+        'https://app.example.com?foo=bar&baz=qux',
+      )
+    })
+  })
+
+  describe('openOAuthPopup', () => {
+    const originalOpen = window.open
+
+    beforeEach(() => {
+      window.open = vi.fn()
+    })
+
+    afterEach(() => {
+      window.open = originalOpen
+    })
+
+    it('opens a popup with about:blank initially', () => {
+      const mockWindow = { location: { href: '' } }
+      vi.mocked(window.open).mockReturnValue(mockWindow as Window)
+
+      openOAuthPopup('https://oauth.example.com')
+
+      expect(window.open).toHaveBeenCalledWith(
+        'about:blank',
+        '_blank',
+        expect.stringContaining('width=500,height=600'),
+      )
+    })
+
+    it('sets the URL after opening', () => {
+      const mockWindow = { location: { href: '' } }
+      vi.mocked(window.open).mockReturnValue(mockWindow as Window)
+
+      openOAuthPopup('https://oauth.example.com/login')
+
+      expect(mockWindow.location.href).toBe('https://oauth.example.com/login')
+    })
+
+    it('returns the window object', () => {
+      const mockWindow = { location: { href: '' } }
+      vi.mocked(window.open).mockReturnValue(mockWindow as Window)
+
+      const result = openOAuthPopup('https://oauth.example.com')
+
+      expect(result).toBe(mockWindow)
+    })
+
+    it('returns null if popup was blocked', () => {
+      vi.mocked(window.open).mockReturnValue(null)
+
+      const result = openOAuthPopup('https://oauth.example.com')
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe('listenForOAuthMessage', () => {
+    let mockWindow: { closed: boolean }
+    let onSuccessMock: ReturnType<typeof vi.fn>
+    let onErrorMock: ReturnType<typeof vi.fn>
+
+    beforeEach(() => {
+      vi.useFakeTimers()
+      mockWindow = { closed: false }
+      onSuccessMock = vi.fn()
+      onErrorMock = vi.fn()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('calls onSuccess when oauth_success message received', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      // Simulate receiving a message
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_success' },
+        origin: 'https://app.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onSuccessMock).toHaveBeenCalledOnce()
+      expect(onErrorMock).not.toHaveBeenCalled()
+      cleanup()
+    })
+
+    it('calls onError when oauth_error message received', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_error', error: 'Access denied' },
+        origin: 'https://app.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onErrorMock).toHaveBeenCalledOnce()
+      expect(onErrorMock).toHaveBeenCalledWith(new Error('Access denied'))
+      expect(onSuccessMock).not.toHaveBeenCalled()
+      cleanup()
+    })
+
+    it('ignores messages from wrong origin', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_success' },
+        origin: 'https://malicious.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onSuccessMock).not.toHaveBeenCalled()
+      expect(onErrorMock).not.toHaveBeenCalled()
+      cleanup()
+    })
+
+    it('calls onError when window is closed', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      mockWindow.closed = true
+      vi.advanceTimersByTime(600)
+
+      expect(onErrorMock).toHaveBeenCalledWith(
+        new Error('Authentication window was closed'),
+      )
+      cleanup()
+    })
+
+    it('uses fallback error message when oauth_error has no error field', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_error' },
+        origin: 'https://app.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onErrorMock).toHaveBeenCalledWith(
+        new Error('OAuth authentication failed'),
+      )
+      cleanup()
+    })
+
+    it('ignores messages with non-object data', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      // null data
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: null,
+          origin: 'https://app.example.com',
+        }),
+      )
+      // string data
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: 'some-string',
+          origin: 'https://app.example.com',
+        }),
+      )
+      // number data
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: 42,
+          origin: 'https://app.example.com',
+        }),
+      )
+
+      expect(onSuccessMock).not.toHaveBeenCalled()
+      expect(onErrorMock).not.toHaveBeenCalled()
+      cleanup()
+    })
+
+    it('calling cleanup multiple times is safe', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      cleanup()
+      cleanup()
+      cleanup()
+
+      // Should not throw and subsequent messages should be ignored
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_success' },
+        origin: 'https://app.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onSuccessMock).not.toHaveBeenCalled()
+    })
+
+    it('returns cleanup function that stops listening', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as () => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      cleanup()
+
+      // Message after cleanup should be ignored
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_success' },
+        origin: 'https://app.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onSuccessMock).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handleOAuthCallback', () => {
+    const originalLocation = window.location
+    const originalOpener = window.opener
+    const originalClose = window.close
+
+    beforeEach(() => {
+      // @ts-expect-error - Mocking location
+      delete window.location
+      // @ts-expect-error - Mocking location with partial properties
+      window.location = {
+        ...originalLocation,
+        search: '',
+        origin: 'https://app.example.com',
+      } as Location
+
+      window.opener = {
+        postMessage: vi.fn(),
+      } as unknown as Window
+
+      window.close = vi.fn()
+    })
+
+    afterEach(() => {
+      // @ts-expect-error - Restoring original location
+      window.location = originalLocation
+      window.opener = originalOpener
+      window.close = originalClose
+    })
+
+    it('returns true and posts success message on oauth_success=true', () => {
+      window.location.search = '?oauth_success=true'
+
+      const result = handleOAuthCallback()
+
+      expect(result).toBe(true)
+      expect(window.opener?.postMessage).toHaveBeenCalledWith(
+        { type: 'oauth_success' },
+        'https://app.example.com',
+      )
+      expect(window.close).toHaveBeenCalled()
+    })
+
+    it('returns false and posts error message on error param', () => {
+      window.location.search = '?error=access_denied'
+
+      const result = handleOAuthCallback()
+
+      expect(result).toBe(false)
+      expect(window.opener?.postMessage).toHaveBeenCalledWith(
+        { type: 'oauth_error', error: 'access_denied' },
+        'https://app.example.com',
+      )
+      expect(window.close).toHaveBeenCalled()
+    })
+
+    it('supports custom success param name', () => {
+      window.location.search = '?custom_param=true'
+
+      const result = handleOAuthCallback('custom_param')
+
+      expect(result).toBe(true)
+    })
+
+    it('returns false when no opener', () => {
+      window.opener = null
+      window.location.search = '?oauth_success=true'
+
+      const result = handleOAuthCallback()
+
+      expect(result).toBe(false)
+    })
+
+    it('returns false when no relevant params', () => {
+      window.location.search = '?some_other_param=value'
+
+      const result = handleOAuthCallback()
+
+      expect(result).toBe(false)
+    })
+  })
+})

package/src/oauth.ts

@@ -7,56 +7,17 @@ export const OAUTH_PROVIDERS = {
 export type OAuthProvider =
   (typeof OAUTH_PROVIDERS)[keyof typeof OAUTH_PROVIDERS]
 
-export type OAuthConfig = {
-  googleClientId?: string
-  redirectUri: string
-}
-
-export type OAuthFlowParams = {
+export type BackendOAuthFlowParams = {
   provider: OAuthProvider
-  clientId: string
-  redirectUri: string
-  nonce: string
-  state?: Record<string, string>
+  backendUrl: string
+  projectId: string
+  publicKey: string
+  returnTo: string
 }
 
-const GOOGLE_AUTH_URL = 'https://accounts.google.com/o/oauth2/v2/auth'
-
 const POPUP_WIDTH = 500
 const POPUP_HEIGHT = 600
 
-export function buildOAuthUrl(params: OAuthFlowParams): string {
-  const { provider, clientId, redirectUri, nonce, state } = params
-
-  if (provider !== OAUTH_PROVIDERS.GOOGLE) {
-    throw new Error(`Unsupported OAuth provider: ${provider}`)
-  }
-
-  const authUrl = new URL(GOOGLE_AUTH_URL)
-  authUrl.searchParams.set('client_id', clientId)
-  authUrl.searchParams.set('redirect_uri', redirectUri)
-  authUrl.searchParams.set('response_type', 'id_token')
-  authUrl.searchParams.set('scope', 'openid email profile')
-  authUrl.searchParams.set('nonce', nonce)
-  authUrl.searchParams.set('prompt', 'select_account')
-
-  let stateParam = `provider=${provider}`
-  if (state) {
-    const additionalState = Object.entries(state)
-      .map(
-        ([key, value]) =>
-          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
-      )
-      .join('&')
-    if (additionalState) {
-      stateParam += `&${additionalState}`
-    }
-  }
-  authUrl.searchParams.set('state', stateParam)
-
-  return authUrl.toString()
-}
-
 export function openOAuthPopup(url: string): Window | null {
   const width = POPUP_WIDTH
   const height = POPUP_HEIGHT
@@ -76,49 +37,107 @@ export function openOAuthPopup(url: string): Window | null {
   return authWindow
 }
 
-export function extractOAuthToken(url: string): string | null {
-  const hashParams = new URLSearchParams(url.split('#')[1])
-  let idToken = hashParams.get('id_token')
+export function generateOAuthNonce(publicKey: string): string {
+  return sha256(publicKey as Hex).replace(/^0x/, '')
+}
 
-  if (!idToken) {
-    const queryParams = new URLSearchParams(url.split('?')[1])
-    idToken = queryParams.get('id_token')
+/**
+ * Build OAuth URL that redirects to backend's OAuth endpoint
+ * The backend handles PKCE, client credentials, and token exchange
+ */
+export function buildBackendOAuthUrl(params: BackendOAuthFlowParams): string {
+  const { provider, backendUrl, projectId, publicKey, returnTo } = params
+
+  if (provider !== OAUTH_PROVIDERS.GOOGLE) {
+    throw new Error(`Unsupported OAuth provider: ${provider}`)
   }
 
-  return idToken
+  const oauthUrl = new URL(`${backendUrl}/oauth/google/login`)
+  oauthUrl.searchParams.set('project_id', projectId)
+  oauthUrl.searchParams.set('pub_key', publicKey.replace(/^0x/, ''))
+  oauthUrl.searchParams.set('return_to', returnTo)
+
+  return oauthUrl.toString()
 }
 
-export function pollOAuthPopup(
+export type OAuthMessageData = {
+  type: 'oauth_success' | 'oauth_error'
+  error?: string
+}
+
+/**
+ * Listen for OAuth completion via postMessage from popup
+ * The popup sends a message when it detects a successful redirect
+ */
+export function listenForOAuthMessage(
   authWindow: Window,
-  originUrl: string,
-  onSuccess: (token: string) => void,
+  expectedOrigin: string,
+  onSuccess: () => void,
   onError: (error: Error) => void,
-): void {
-  const interval = setInterval(() => {
-    try {
-      if (authWindow.closed) {
-        clearInterval(interval)
-        onError(new Error('Authentication window was closed'))
-        return
-      }
-
-      const url = authWindow.location.href || ''
-
-      if (url.startsWith(originUrl)) {
-        const token = extractOAuthToken(url)
-
-        if (token) {
-          authWindow.close()
-          clearInterval(interval)
-          onSuccess(token)
-        }
-      }
-    } catch {
-      // Ignore cross-origin errors
+): () => void {
+  let cleaned = false
+
+  const handleMessage = (event: MessageEvent<OAuthMessageData>) => {
+    // Only trust messages from expected origin
+    if (event.origin !== expectedOrigin) return
+    if (!event.data || typeof event.data !== 'object') return
+
+    if (event.data.type === 'oauth_success') {
+      cleanup()
+      onSuccess()
+    } else if (event.data.type === 'oauth_error') {
+      cleanup()
+      onError(new Error(event.data.error || 'OAuth authentication failed'))
+    }
+  }
+
+  const checkWindowClosed = setInterval(() => {
+    if (authWindow.closed) {
+      cleanup()
+      onError(new Error('Authentication window was closed'))
     }
   }, 500)
+
+  const cleanup = () => {
+    if (cleaned) return
+    cleaned = true
+    window.removeEventListener('message', handleMessage)
+    clearInterval(checkWindowClosed)
+  }
+
+  window.addEventListener('message', handleMessage)
+
+  return cleanup
 }
 
-export function generateOAuthNonce(publicKey: string): string {
-  return sha256(publicKey as Hex).replace(/^0x/, '')
+/**
+ * Handle OAuth callback on the return page
+ * Call this on the page that receives the OAuth redirect
+ * It sends a postMessage to the opener and closes the window
+ */
+export function handleOAuthCallback(successParam = 'oauth_success'): boolean {
+  const urlParams = new URLSearchParams(window.location.search)
+  const isSuccess = urlParams.get(successParam) === 'true'
+  const error = urlParams.get('error')
+
+  if (window.opener) {
+    if (isSuccess) {
+      window.opener.postMessage(
+        { type: 'oauth_success' } satisfies OAuthMessageData,
+        window.location.origin,
+      )
+      window.close()
+      return true
+    }
+    if (error) {
+      window.opener.postMessage(
+        { type: 'oauth_error', error } satisfies OAuthMessageData,
+        window.location.origin,
+      )
+      window.close()
+      return false
+    }
+  }
+
+  return false
 }

package/src/provider.ts

@@ -115,7 +115,10 @@ export function createProvider({
 
     async request({ method, params }: { method: string; params?: any[] }) {
       const state = store.getState()
-      const activeChainId = state.chainIds[0]
+      const activeChainId = state.activeChainId
+      if (!activeChainId) {
+        throw new Error('No active chain')
+      }
 
       switch (method) {
         case 'eth_accounts': {
@@ -219,7 +222,7 @@ export function createProvider({
           const chainId_number = parseInt(chainId, 16)
 
           // Update active chain
-          store.getState().setActiveChain(chainId_number)
+          store.getState().setActiveChainId(chainId_number)
 
           // Emit chainChanged event
           emitter.emit('chainChanged', chainId)