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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/wallet-react",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1-alpha.7",
   "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.5"
+    "@zerodev/wallet-core": "0.0.1-alpha.7"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/actions.ts

@@ -1,11 +1,15 @@
 import type { Config, Connector } from '@wagmi/core'
 import { connect as wagmiConnect } from '@wagmi/core/actions'
+import {
+  createIframeStamper,
+  exportPrivateKey as exportPrivateKeySdk,
+  exportWallet as exportWalletSdk,
+} from '@zerodev/wallet-core'
 import type { OAuthProvider } from './oauth.js'
 import {
-  buildOAuthUrl,
-  generateOAuthNonce,
+  buildBackendOAuthUrl,
+  listenForOAuthMessage,
   openOAuthPopup,
-  pollOAuthPopup,
 } from './oauth.js'
 
 /**
@@ -111,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> {
@@ -129,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}`)
+    throw new Error('Wallet not initialized. Please wait for connector setup.')
   }
 
-  if (!oauthConfig.redirectUri) {
-    throw new Error('OAuth redirect URI is not configured.')
-  }
-
-  // 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
@@ -170,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([
@@ -200,7 +189,10 @@ export async function authenticateOAuth(
           reject(err)
         }
       },
-      reject,
+      (error) => {
+        cleanup()
+        reject(error)
+      },
     )
   })
 }
@@ -208,7 +200,6 @@ export async function authenticateOAuth(
 export declare namespace authenticateOAuth {
   type Parameters = {
     provider: OAuthProvider
-    clientId?: string
     connector?: Connector
   }
   type ReturnType = void
@@ -225,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
@@ -246,7 +237,6 @@ export async function sendOTP(
 
   return {
     otpId: result.otpId,
-    subOrganizationId: result.subOrganizationId,
   }
 }
 
@@ -256,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
 }
 
@@ -268,7 +258,6 @@ export async function verifyOTP(
   parameters: {
     code: string
     otpId: string
-    subOrganizationId: string
     connector?: Connector
   },
 ): Promise<void> {
@@ -285,7 +274,6 @@ export async function verifyOTP(
     mode: 'verifyOtp',
     otpId: parameters.otpId,
     otpCode: parameters.code,
-    subOrganizationId: parameters.subOrganizationId,
   })
 
   const [session, eoaAccount] = await Promise.all([
@@ -304,7 +292,6 @@ export declare namespace verifyOTP {
   type Parameters = {
     code: string
     otpId: string
-    subOrganizationId: string
     connector?: Connector
   }
   type ReturnType = void
@@ -344,6 +331,42 @@ export declare namespace refreshSession {
   type ErrorType = Error
 }
 
+/**
+ * Get user email
+ */
+export async function getUserEmail(
+  config: Config,
+  parameters: {
+    organizationId: string
+    projectId: string
+    connector?: Connector
+  },
+): Promise<{ email: string }> {
+  const connector = parameters.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')
+
+  // Call the core SDK method
+  return await wallet.client.getUserEmail({
+    organizationId: parameters.organizationId,
+    projectId: parameters.projectId,
+  })
+}
+
+export declare namespace getUserEmail {
+  type Parameters = {
+    organizationId: string
+    projectId: string
+    connector?: Connector
+  }
+  type ReturnType = { email: string }
+  type ErrorType = Error
+}
+
 /**
  * Export wallet
  */
@@ -362,10 +385,6 @@ export async function exportWallet(
 
   if (!wallet) throw new Error('Wallet not initialized')
 
-  const { exportWallet: exportWalletSdk, createIframeStamper } = await import(
-    '@zerodev/wallet-core'
-  )
-
   const iframeContainer = document.getElementById(parameters.iframeContainerId)
   if (!iframeContainer) {
     throw new Error('Iframe container not found')
@@ -400,3 +419,62 @@ export declare namespace exportWallet {
   type ReturnType = void
   type ErrorType = Error
 }
+
+/**
+ * Export private key
+ */
+export async function exportPrivateKey(
+  config: Config,
+  parameters: {
+    iframeContainerId: string
+    address?: string
+    keyFormat?: 'Hexadecimal' | 'Solana'
+    connector?: Connector
+  },
+): Promise<void> {
+  const connector = parameters.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 iframeContainer = document.getElementById(parameters.iframeContainerId)
+  if (!iframeContainer) {
+    throw new Error('Iframe container not found')
+  }
+
+  const iframeStamper = await createIframeStamper({
+    iframeUrl: 'https://export.turnkey.com',
+    iframeContainer,
+    iframeElementId: 'export-private-key-iframe',
+  })
+
+  const publicKey = await iframeStamper.init()
+  const { exportBundle, organizationId } = await exportPrivateKeySdk({
+    wallet,
+    targetPublicKey: publicKey,
+    ...(parameters.address && { address: parameters.address }),
+  })
+
+  const success = await iframeStamper.injectKeyExportBundle(
+    exportBundle,
+    organizationId,
+    parameters.keyFormat ?? 'Hexadecimal',
+  )
+  if (success !== true) {
+    throw new Error('Failed to inject export bundle')
+  }
+}
+
+export declare namespace exportPrivateKey {
+  type Parameters = {
+    iframeContainerId: string
+    address?: string
+    keyFormat?: 'Hexadecimal' | 'Solana'
+    connector?: Connector
+  }
+  type ReturnType = void
+  type ErrorType = Error
+}

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

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { exportPrivateKey } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to export private key
+ */
+export function useExportPrivateKey<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useExportPrivateKey.Parameters<config, context> = {},
+): useExportPrivateKey.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: exportPrivateKey.Parameters) {
+      return exportPrivateKey(config, variables)
+    },
+    mutationKey: ['exportPrivateKey'],
+  })
+}
+
+export declare namespace useExportPrivateKey {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          exportPrivateKey.ReturnType,
+          exportPrivateKey.ErrorType,
+          exportPrivateKey.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    exportPrivateKey.ReturnType,
+    exportPrivateKey.ErrorType,
+    exportPrivateKey.Parameters,
+    context
+  >
+}

package/src/hooks/useGetUserEmail.ts

@@ -0,0 +1,54 @@
+'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 { organizationId, projectId, query } = parameters
+  const config = useConfig(parameters)
+
+  return useQuery({
+    ...query,
+    queryKey: ['getUserEmail', { organizationId, projectId }],
+    queryFn: async () => {
+      return getUserEmail(config, { organizationId, projectId })
+    },
+    enabled: Boolean(organizationId && projectId),
+  })
+}
+
+export declare namespace useGetUserEmail {
+  type Parameters<config extends Config = Config> = ConfigParameter<config> & {
+    organizationId: string
+    projectId: string
+    query?:
+      | Omit<
+          UseQueryOptions<
+            getUserEmail.ReturnType,
+            getUserEmail.ErrorType,
+            getUserEmail.ReturnType
+          >,
+          'queryKey' | 'queryFn'
+        >
+      | undefined
+  }
+
+  type ReturnType = UseQueryResult<
+    getUserEmail.ReturnType,
+    getUserEmail.ErrorType
+  >
+}

package/src/index.ts

@@ -1,14 +1,21 @@
 export type { ZeroDevWalletConnectorParams } from './connector.js'
 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'