@zerodev/wallet-react 0.0.1-alpha.6 → 0.0.1-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/wallet-react",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.8",
   "description": "React hooks for ZeroDev Wallet SDK",
   "sideEffects": false,
   "main": "./dist/_cjs/index.js",
@@ -30,7 +30,7 @@
     "wagmi": "^3.0.0",
     "zustand": "^5.0.3",
     "ox": "^0.3.0",
-    "@zerodev/wallet-core": "0.0.1-alpha.6"
+    "@zerodev/wallet-core": "0.0.1-alpha.7"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/actions.ts

@@ -7,10 +7,9 @@ import {
 } from '@zerodev/wallet-core'
 import type { OAuthProvider } from './oauth.js'
 import {
-  buildOAuthUrl,
-  generateOAuthNonce,
+  buildBackendOAuthUrl,
+  listenForOAuthMessage,
   openOAuthPopup,
-  pollOAuthPopup,
 } from './oauth.js'
 
 /**
@@ -116,12 +115,12 @@ export declare namespace loginPasskey {
 
 /**
  * Authenticate with OAuth (opens popup)
+ * Uses backend OAuth flow where the backend handles PKCE and token exchange
  */
 export async function authenticateOAuth(
   config: Config,
   parameters: {
     provider: OAuthProvider
-    clientId?: string
     connector?: Connector
   },
 ): Promise<void> {
@@ -134,38 +133,23 @@ export async function authenticateOAuth(
 
   if (!wallet) throw new Error('Wallet not initialized')
   if (!oauthConfig) {
-    throw new Error(
-      'OAuth is not configured. Please provide oauthConfig to zeroDevWallet connector.',
-    )
-  }
-
-  // Get client ID for the provider
-  let clientId = parameters.clientId
-  if (!clientId) {
-    clientId = oauthConfig.googleClientId
-  }
-
-  if (!clientId) {
-    throw new Error(`Client ID not configured for ${parameters.provider}`)
-  }
-
-  if (!oauthConfig.redirectUri) {
-    throw new Error('OAuth redirect URI is not configured.')
+    throw new Error('Wallet not initialized. Please wait for connector setup.')
   }
 
-  // Generate nonce from wallet public key
+  // Get wallet public key for the OAuth flow
   const publicKey = await wallet.getPublicKey()
   if (!publicKey) {
     throw new Error('Failed to get wallet public key')
   }
-  const nonce = generateOAuthNonce(publicKey)
 
-  // Build OAuth URL
-  const oauthUrl = buildOAuthUrl({
+  // Build OAuth URL that redirects to backend
+  // Use current origin as redirect - SDK auto-detects callback on any page
+  const oauthUrl = buildBackendOAuthUrl({
     provider: parameters.provider,
-    clientId,
-    redirectUri: oauthConfig.redirectUri,
-    nonce,
+    backendUrl: oauthConfig.backendUrl,
+    projectId: oauthConfig.projectId,
+    publicKey,
+    returnTo: `${window.location.origin}?oauth_success=true&oauth_provider=${parameters.provider}`,
   })
 
   // Open popup
@@ -175,18 +159,18 @@ export async function authenticateOAuth(
     throw new Error(`Failed to open ${parameters.provider} login window.`)
   }
 
-  // Poll for OAuth completion
+  // Listen for OAuth completion via postMessage
   return new Promise<void>((resolve, reject) => {
-    pollOAuthPopup(
+    const cleanup = listenForOAuthMessage(
       authWindow,
       window.location.origin,
-      async (idToken) => {
+      async () => {
         try {
           // Complete OAuth authentication with wallet-core
+          // The backend has stored the OAuth session in a cookie
           await wallet.auth({
             type: 'oauth',
             provider: parameters.provider,
-            credential: idToken,
           })
 
           const [session, eoaAccount] = await Promise.all([
@@ -205,7 +189,10 @@ export async function authenticateOAuth(
           reject(err)
         }
       },
-      reject,
+      (error) => {
+        cleanup()
+        reject(error)
+      },
     )
   })
 }
@@ -213,7 +200,6 @@ export async function authenticateOAuth(
 export declare namespace authenticateOAuth {
   type Parameters = {
     provider: OAuthProvider
-    clientId?: string
     connector?: Connector
   }
   type ReturnType = void
@@ -230,7 +216,7 @@ export async function sendOTP(
     emailCustomization?: { magicLinkTemplate?: string }
     connector?: Connector
   },
-): Promise<{ otpId: string; subOrganizationId: string }> {
+): Promise<{ otpId: string }> {
   const connector = parameters.connector ?? getZeroDevConnector(config)
 
   // @ts-expect-error - getStore is a custom method
@@ -251,7 +237,6 @@ export async function sendOTP(
 
   return {
     otpId: result.otpId,
-    subOrganizationId: result.subOrganizationId,
   }
 }
 
@@ -261,7 +246,7 @@ export declare namespace sendOTP {
     emailCustomization?: { magicLinkTemplate?: string }
     connector?: Connector
   }
-  type ReturnType = { otpId: string; subOrganizationId: string }
+  type ReturnType = { otpId: string }
   type ErrorType = Error
 }
 
@@ -273,7 +258,6 @@ export async function verifyOTP(
   parameters: {
     code: string
     otpId: string
-    subOrganizationId: string
     connector?: Connector
   },
 ): Promise<void> {
@@ -290,7 +274,6 @@ export async function verifyOTP(
     mode: 'verifyOtp',
     otpId: parameters.otpId,
     otpCode: parameters.code,
-    subOrganizationId: parameters.subOrganizationId,
   })
 
   const [session, eoaAccount] = await Promise.all([
@@ -309,7 +292,6 @@ export declare namespace verifyOTP {
   type Parameters = {
     code: string
     otpId: string
-    subOrganizationId: string
     connector?: Connector
   }
   type ReturnType = void
@@ -349,6 +331,43 @@ export declare namespace refreshSession {
   type ErrorType = Error
 }
 
+/**
+ * Get user email
+ */
+export async function getUserEmail(config: Config): Promise<{ email: string }> {
+  const connector = getZeroDevConnector(config)
+
+  // @ts-expect-error - getStore is a custom method
+  const store = await connector.getStore()
+  const wallet = store.getState().wallet
+
+  if (!wallet) throw new Error('Wallet not initialized')
+
+  const oauthConfig = store.getState().oauthConfig
+  if (!oauthConfig) {
+    throw new Error('Wallet not initialized. Please wait for connector setup.')
+  }
+
+  const session = store.getState().session
+  if (!session) {
+    throw new Error('No active session')
+  }
+
+  // Call the core SDK method
+  return await wallet.client.getUserEmail({
+    organizationId: session.organizationId,
+    projectId: oauthConfig.projectId,
+  })
+}
+
+export declare namespace getUserEmail {
+  type Parameters = {
+    connector?: Connector
+  }
+  type ReturnType = { email: string }
+  type ErrorType = Error
+}
+
 /**
  * Export wallet
  */

package/src/connector.ts

@@ -6,13 +6,71 @@ import {
 } from '@zerodev/sdk'
 import { getEntryPoint, KERNEL_V3_3 } from '@zerodev/sdk/constants'
 import type { StorageAdapter } from '@zerodev/wallet-core'
-import { createZeroDevWallet } from '@zerodev/wallet-core'
+import { createZeroDevWallet, KMS_SERVER_URL } from '@zerodev/wallet-core'
 import { type Chain, createPublicClient, http } from 'viem'
-import type { OAuthConfig } from './oauth.js'
+import { handleOAuthCallback, type OAuthProvider } from './oauth.js'
 import { createProvider } from './provider.js'
 import { createZeroDevWalletStore } from './store.js'
 import { getAAUrl } from './utils/aaUtils.js'
 
+// OAuth URL parameter used to detect callback
+const OAUTH_SUCCESS_PARAM = 'oauth_success'
+const OAUTH_PROVIDER_PARAM = 'oauth_provider'
+
+/**
+ * Detect OAuth callback from URL params and handle it.
+ * - If in popup: sends postMessage to opener and closes
+ * - If not in popup: completes auth directly
+ */
+async function detectAndHandleOAuthCallback(
+  wallet: Awaited<ReturnType<typeof createZeroDevWallet>>,
+  store: ReturnType<typeof createZeroDevWalletStore>,
+): Promise<boolean> {
+  if (typeof window === 'undefined') return false
+
+  const params = new URLSearchParams(window.location.search)
+  const isOAuthCallback = params.get(OAUTH_SUCCESS_PARAM) === 'true'
+
+  if (!isOAuthCallback) return false
+
+  // If in popup, use the existing handler to notify opener
+  if (window.opener) {
+    handleOAuthCallback(OAUTH_SUCCESS_PARAM)
+    return true
+  }
+
+  // Not in popup - complete auth directly (redirect flow)
+  console.log('OAuth callback detected, completing authentication...')
+  const provider = (params.get(OAUTH_PROVIDER_PARAM) ||
+    'google') as OAuthProvider
+
+  try {
+    await wallet.auth({ type: 'oauth', provider })
+
+    const [session, eoaAccount] = await Promise.all([
+      wallet.getSession(),
+      wallet.toAccount(),
+    ])
+
+    store.getState().setEoaAccount(eoaAccount)
+    store.getState().setSession(session || null)
+
+    // Clean up URL params
+    params.delete(OAUTH_SUCCESS_PARAM)
+    params.delete(OAUTH_PROVIDER_PARAM)
+    const newUrl = params.toString()
+      ? `${window.location.pathname}?${params.toString()}`
+      : window.location.pathname
+    window.history.replaceState({}, '', newUrl)
+
+    console.log('OAuth authentication completed')
+    return true
+  } catch (error) {
+    console.error('OAuth authentication failed:', error)
+    return false
+  }
+}
+
 export type ZeroDevWalletConnectorParams = {
   projectId: string
   organizationId?: string
@@ -23,7 +81,6 @@ export type ZeroDevWalletConnectorParams = {
   sessionStorage?: StorageAdapter
   autoRefreshSession?: boolean
   sessionWarningThreshold?: number
-  oauthConfig?: OAuthConfig
 }
 
 export function zeroDevWallet(
@@ -75,10 +132,11 @@ export function zeroDevWallet(
       store = createZeroDevWalletStore()
       store.getState().setWallet(wallet)
 
-      // Store OAuth config if provided
-      if (params.oauthConfig) {
-        store.getState().setOAuthConfig(params.oauthConfig)
-      }
+      // Store OAuth config - uses proxyBaseUrl and projectId from params
+      store.getState().setOAuthConfig({
+        backendUrl: params.proxyBaseUrl || `${KMS_SERVER_URL}/api/v1`,
+        projectId: params.projectId,
+      })
 
       // Create EIP-1193 provider
       provider = createProvider({
@@ -96,6 +154,9 @@ export function zeroDevWallet(
         store.getState().setSession(session)
       }
 
+      // Auto-detect OAuth callback (when popup redirects back with ?oauth_success=true)
+      await detectAndHandleOAuthCallback(wallet, store)
+
       console.log('ZeroDevWallet connector initialized')
     }
 

package/src/hooks/useGetUserEmail.ts

@@ -0,0 +1,52 @@
+'use client'
+
+import {
+  type UseQueryOptions,
+  type UseQueryResult,
+  useQuery,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { getUserEmail } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to fetch user email address
+ */
+export function useGetUserEmail<
+  config extends Config = ResolvedRegister['config'],
+>(parameters: useGetUserEmail.Parameters<config>): useGetUserEmail.ReturnType {
+  const { query } = parameters
+  const config = useConfig(parameters)
+
+  return useQuery({
+    ...query,
+    queryKey: ['getUserEmail'],
+    queryFn: async () => {
+      return getUserEmail(config)
+    },
+    enabled: Boolean(config),
+  })
+}
+
+export declare namespace useGetUserEmail {
+  type Parameters<config extends Config = Config> = ConfigParameter<config> & {
+    query?:
+      | Omit<
+          UseQueryOptions<
+            getUserEmail.ReturnType,
+            getUserEmail.ErrorType,
+            getUserEmail.ReturnType
+          >,
+          'queryKey' | 'queryFn'
+        >
+      | undefined
+  }
+
+  type ReturnType = UseQueryResult<
+    getUserEmail.ReturnType,
+    getUserEmail.ErrorType
+  >
+}

package/src/index.ts

@@ -3,13 +3,19 @@ export { zeroDevWallet } from './connector.js'
 export { useAuthenticateOAuth } from './hooks/useAuthenticateOAuth.js'
 export { useExportPrivateKey } from './hooks/useExportPrivateKey.js'
 export { useExportWallet } from './hooks/useExportWallet.js'
+export { useGetUserEmail } from './hooks/useGetUserEmail.js'
 export { useLoginPasskey } from './hooks/useLoginPasskey.js'
 export { useRefreshSession } from './hooks/useRefreshSession.js'
 export { useRegisterPasskey } from './hooks/useRegisterPasskey.js'
 export { useSendOTP } from './hooks/useSendOTP.js'
 export { useVerifyOTP } from './hooks/useVerifyOTP.js'
-export type { OAuthConfig, OAuthProvider } from './oauth.js'
-export { OAUTH_PROVIDERS } from './oauth.js'
+export type { OAuthMessageData, OAuthProvider } from './oauth.js'
+export {
+  buildBackendOAuthUrl,
+  handleOAuthCallback,
+  listenForOAuthMessage,
+  OAUTH_PROVIDERS,
+} from './oauth.js'
 export type { ZeroDevProvider } from './provider.js'
 export type { ZeroDevWalletState } from './store.js'
 export { createZeroDevWalletStore } from './store.js'

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
 }