@zerodev/wallet-react 0.0.1-alpha.5 → 0.0.1-alpha.7

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/store.ts

@@ -10,7 +10,12 @@ import type { LocalAccount } from 'viem'
 import type { SmartAccount } from 'viem/account-abstraction'
 import { create } from 'zustand'
 import { persist, subscribeWithSelector } from 'zustand/middleware'
-import type { OAuthConfig } from './oauth.js'
+
+// Internal OAuth config stored in the state (derived from connector params)
+type InternalOAuthConfig = {
+  backendUrl: string
+  projectId: string
+}
 
 export type ZeroDevWalletState = {
   // Core
@@ -26,8 +31,8 @@ export type ZeroDevWalletState = {
   // Session expiry
   isExpiring: boolean
 
-  // OAuth config (optional)
-  oauthConfig: OAuthConfig | null
+  // OAuth config (derived from connector params)
+  oauthConfig: InternalOAuthConfig | null
 
   // Actions
   setWallet: (wallet: ZeroDevWalletSDK) => void
@@ -40,7 +45,7 @@ export type ZeroDevWalletState = {
   setSession: (session: ZeroDevWalletSession | null) => void
   setActiveChainId: (chainId: number | null) => void
   setIsExpiring: (isExpiring: boolean) => void
-  setOAuthConfig: (config: OAuthConfig | null) => void
+  setOAuthConfig: (config: InternalOAuthConfig | null) => void
   clear: () => void
 }