@zerodev/wallet-react 0.0.1-alpha.0 → 0.0.1-alpha.10

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # @zerodev/wallet-react
 
+## 0.0.1-alpha.10
+
+### Patch Changes
+
+- fix: use session.token for getUserEmail auth headers
+- Updated dependencies
+  - @zerodev/wallet-core@0.0.1-alpha.9
+
+## 0.0.1-alpha.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @zerodev/wallet-core@0.0.1-alpha.8
+
+## 0.0.1-alpha.8
+
+### Patch Changes
+
+- fix: use internal state for get user email
+
+## 0.0.1-alpha.7
+
+### Patch Changes
+
+- Add OTP authentication via Turnkey Auth Proxy
+- Add OAuth backend PKCE flow
+- Add getUserEmail method and React hook
+- Fix passkey login endpoint
+- Fix signature verification with JSON canonicalization
+- Rename turnkeySession to session in OAuth response
+- Updated dependencies
+  - @zerodev/wallet-core@0.0.1-alpha.7
+
+## 0.0.1-alpha.6
+
+### Patch Changes
+
+- feat: Added private key export feature
+- Updated dependencies
+  - @zerodev/wallet-core@0.0.1-alpha.6
+
+## 0.0.1-alpha.5
+
+### Patch Changes
+
+- refactor: Simplify chain state management by replacing chainIds array with activeChainId
+
+## 0.0.1-alpha.4
+
+### Patch Changes
+
+- fix: kernel instance reinitialisation
+
+## 0.0.1-alpha.3
+
+### Patch Changes
+
+- fix: removed lazy initialization of ZD wallet core
+
+## 0.0.1-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @zerodev/wallet-core@0.0.1-alpha.5
+
+## 0.0.1-alpha.1
+
+### Patch Changes
+
+- feat: changed default aaUrl to staging url
+
 ## 0.0.1-alpha.0
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,282 @@
+# @zerodev/wallet-react
+
+React hooks and Wagmi connector for ZeroDev Wallet SDK with EIP-7702 gasless transactions.
+
+## Features
+
+- **Wagmi Integration** - Works seamlessly with the Wagmi ecosystem
+- **Multiple Auth Methods** - Passkey (WebAuthn), Email OTP, OAuth (Google)
+- **Gasless Transactions** - All transactions are gasless via EIP-7702
+- **Session Management** - Auto-refresh with configurable thresholds
+- **Multi-Chain** - Lazy kernel account creation per chain
+- **TypeScript** - Full type safety with proper generics
+- **React Query** - Built on TanStack Query for optimal UX
+
+## Installation
+
+```bash
+npm install @zerodev/wallet-react @zerodev/wallet-core wagmi viem
+# or
+yarn add @zerodev/wallet-react @zerodev/wallet-core wagmi viem
+# or
+pnpm add @zerodev/wallet-react @zerodev/wallet-core wagmi viem
+```
+
+## Quick Start
+
+### 1. Configure Wagmi
+
+```typescript
+import { createConfig, http } from 'wagmi'
+import { sepolia } from 'wagmi/chains'
+import { zeroDevWallet } from '@zerodev/wallet-react'
+
+const config = createConfig({
+  chains: [sepolia],
+  connectors: [
+    zeroDevWallet({
+      projectId: 'YOUR_PROJECT_ID',
+      chains: [sepolia],
+    })
+  ],
+  transports: {
+    [sepolia.id]: http('YOUR_RPC_URL'),
+  },
+})
+```
+
+### 2. Wrap Your App
+
+```typescript
+import { WagmiProvider } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+function App() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <YourApp />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}
+```
+
+### 3. Authenticate Users
+
+```typescript
+import { useRegisterPasskey, useAuthenticateOAuth, OAUTH_PROVIDERS } from '@zerodev/wallet-react'
+
+function LoginPage() {
+  const registerPasskey = useRegisterPasskey()
+  const authenticateOAuth = useAuthenticateOAuth()
+
+  return (
+    <>
+      <button
+        onClick={() => registerPasskey.mutate({ email: 'user@example.com' })}
+        disabled={registerPasskey.isPending}
+      >
+        {registerPasskey.isPending ? 'Registering...' : 'Register with Passkey'}
+      </button>
+
+      <button
+        onClick={() => authenticateOAuth.mutate({ provider: OAUTH_PROVIDERS.GOOGLE })}
+        disabled={authenticateOAuth.isPending}
+      >
+        {authenticateOAuth.isPending ? 'Authenticating...' : 'Login with Google'}
+      </button>
+    </>
+  )
+}
+```
+
+### 4. Use Standard Wagmi Hooks
+
+```typescript
+import { useConnection, useSendTransaction, useDisconnect } from 'wagmi'
+import { parseEther } from 'viem'
+
+function Dashboard() {
+  const { address } = useConnection()
+  const { sendTransaction } = useSendTransaction()
+  const { disconnect } = useDisconnect()
+
+  return (
+    <>
+      <p>Address: {address}</p>
+
+      <button onClick={() =>
+        sendTransaction({
+          to: '0x...',
+          value: parseEther('0.01')
+        })
+      }>
+        Send Gasless Transaction
+      </button>
+
+      <button onClick={() => disconnect()}>
+        Logout
+      </button>
+    </>
+  )
+}
+```
+
+## Authentication Methods
+
+### Passkey (WebAuthn)
+
+```typescript
+const registerPasskey = useRegisterPasskey()
+const loginPasskey = useLoginPasskey()
+
+// Register new passkey
+await registerPasskey.mutateAsync({ email: 'user@example.com' })
+
+// Login with existing passkey
+await loginPasskey.mutateAsync({ email: 'user@example.com' })
+```
+
+### OAuth (Google)
+
+```typescript
+const authenticateOAuth = useAuthenticateOAuth()
+
+// Opens popup, backend handles PKCE and token exchange
+// No callback page or OAuth library needed - SDK handles everything
+await authenticateOAuth.mutateAsync({
+  provider: OAUTH_PROVIDERS.GOOGLE
+})
+```
+
+### Email OTP
+
+```typescript
+const sendOTP = useSendOTP()
+const verifyOTP = useVerifyOTP()
+
+// Send OTP code
+const { otpId } = await sendOTP.mutateAsync({
+  email: 'user@example.com'
+})
+
+// Verify OTP code
+await verifyOTP.mutateAsync({
+  code: '123456',
+  otpId,
+})
+```
+
+## Configuration Options
+
+```typescript
+type ZeroDevWalletConnectorParams = {
+  projectId: string                    // Required: Your ZeroDev project ID
+  organizationId?: string               // Optional: Turnkey organization ID
+  proxyBaseUrl?: string                 // Optional: KMS proxy URL
+  chains: readonly Chain[]              // Required: Supported chains
+  rpId?: string                         // Optional: WebAuthn RP ID
+  sessionStorage?: StorageAdapter       // Optional: Custom session storage
+  autoRefreshSession?: boolean          // Optional: Auto-refresh (default: true)
+  sessionWarningThreshold?: number      // Optional: Refresh threshold in ms (default: 60000)
+}
+```
+
+## Advanced Usage
+
+### Custom Callbacks
+
+```typescript
+const registerPasskey = useRegisterPasskey({
+  mutation: {
+    onSuccess: () => {
+      console.log('Registration successful!')
+      router.push('/dashboard')
+    },
+    onError: (error) => {
+      console.error('Registration failed:', error)
+      analytics.track('auth_failed', { method: 'passkey' })
+    }
+  }
+})
+```
+
+### Manual Session Refresh
+
+```typescript
+const refreshSession = useRefreshSession()
+
+await refreshSession.mutateAsync({})
+```
+
+### Export Wallet (Seed Phrase)
+
+```typescript
+const exportWallet = useExportWallet()
+
+// Container element must exist: <div id="export-container" />
+await exportWallet.mutateAsync({
+  iframeContainerId: 'export-container'
+})
+```
+
+### Export Private Key
+
+```typescript
+const exportPrivateKey = useExportPrivateKey()
+
+// Container element must exist: <div id="export-container" />
+await exportPrivateKey.mutateAsync({
+  iframeContainerId: 'export-container'
+})
+```
+
+### Get User Email
+
+```typescript
+const getUserEmail = useGetUserEmail()
+
+// Fetch user's email from the backend
+const { email } = await getUserEmail.mutateAsync({
+  organizationId: session.organizationId,
+  projectId: 'your-project-id'
+})
+```
+
+## API Reference
+
+### Hooks
+
+All hooks follow the TanStack Query mutation pattern:
+
+- `useRegisterPasskey()` - Register with passkey
+- `useLoginPasskey()` - Login with passkey
+- `useAuthenticateOAuth()` - OAuth (Google popup)
+- `useSendOTP()` - Send OTP via email
+- `useVerifyOTP()` - Verify OTP code
+- `useRefreshSession()` - Manually refresh session
+- `useExportWallet()` - Export wallet seed phrase
+- `useExportPrivateKey()` - Export wallet private key
+- `useGetUserEmail()` - Get user's email address
+
+### Connector
+
+- `zeroDevWallet(params)` - Wagmi connector factory
+
+### Constants
+
+- `OAUTH_PROVIDERS.GOOGLE` - Google OAuth provider constant
+
+### Types
+
+- `OAuthProvider` - OAuth provider type
+- `ZeroDevWalletConnectorParams` - Connector parameters
+- `ZeroDevWalletState` - Store state type
+- `ZeroDevProvider` - EIP-1193 provider type
+
+## License
+
+MIT

package/dist/_cjs/actions.js

@@ -6,8 +6,11 @@ exports.authenticateOAuth = authenticateOAuth;
 exports.sendOTP = sendOTP;
 exports.verifyOTP = verifyOTP;
 exports.refreshSession = refreshSession;
+exports.getUserEmail = getUserEmail;
 exports.exportWallet = exportWallet;
+exports.exportPrivateKey = exportPrivateKey;
 const actions_1 = require("@wagmi/core/actions");
+const wallet_core_1 = require("@zerodev/wallet-core");
 const oauth_js_1 = require("./oauth.js");
 function getZeroDevConnector(config) {
     const connector = config.connectors.find((c) => c.id === 'zerodev-wallet');
@@ -62,40 +65,29 @@ async function authenticateOAuth(config, parameters) {
     if (!wallet)
         throw new Error('Wallet not initialized');
     if (!oauthConfig) {
-        throw new Error('OAuth is not configured. Please provide oauthConfig to zeroDevWallet connector.');
-    }
-    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.');
     }
     const publicKey = await wallet.getPublicKey();
     if (!publicKey) {
         throw new Error('Failed to get wallet public key');
     }
-    const nonce = (0, oauth_js_1.generateOAuthNonce)(publicKey);
-    const oauthUrl = (0, oauth_js_1.buildOAuthUrl)({
+    const oauthUrl = (0, oauth_js_1.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}`,
     });
     const authWindow = (0, oauth_js_1.openOAuthPopup)(oauthUrl);
     if (!authWindow) {
         throw new Error(`Failed to open ${parameters.provider} login window.`);
     }
     return new Promise((resolve, reject) => {
-        (0, oauth_js_1.pollOAuthPopup)(authWindow, window.location.origin, async (idToken) => {
+        const cleanup = (0, oauth_js_1.listenForOAuthMessage)(authWindow, window.location.origin, async () => {
             try {
                 await wallet.auth({
                     type: 'oauth',
                     provider: parameters.provider,
-                    credential: idToken,
                 });
                 const [session, eoaAccount] = await Promise.all([
                     wallet.getSession(),
@@ -109,7 +101,10 @@ async function authenticateOAuth(config, parameters) {
             catch (err) {
                 reject(err);
             }
-        }, reject);
+        }, (error) => {
+            cleanup();
+            reject(error);
+        });
     });
 }
 async function sendOTP(config, parameters) {
@@ -129,7 +124,6 @@ async function sendOTP(config, parameters) {
     });
     return {
         otpId: result.otpId,
-        subOrganizationId: result.subOrganizationId,
     };
 }
 async function verifyOTP(config, parameters) {
@@ -143,7 +137,6 @@ async function verifyOTP(config, parameters) {
         mode: 'verifyOtp',
         otpId: parameters.otpId,
         otpCode: parameters.code,
-        subOrganizationId: parameters.subOrganizationId,
     });
     const [session, eoaAccount] = await Promise.all([
         wallet.getSession(),
@@ -165,24 +158,43 @@ async function refreshSession(config, parameters = {}) {
     store.getState().setSession(newSession || null);
     return newSession;
 }
+async function getUserEmail(config) {
+    const connector = getZeroDevConnector(config);
+    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');
+    }
+    return await wallet.client.getUserEmail({
+        organizationId: session.organizationId,
+        projectId: oauthConfig.projectId,
+        token: session.token,
+    });
+}
 async function exportWallet(config, parameters) {
     const connector = parameters.connector ?? getZeroDevConnector(config);
     const store = await connector.getStore();
     const wallet = store.getState().wallet;
     if (!wallet)
         throw new Error('Wallet not initialized');
-    const { exportWallet: exportWalletSdk, createIframeStamper } = await Promise.resolve().then(() => require('@zerodev/wallet-core'));
     const iframeContainer = document.getElementById(parameters.iframeContainerId);
     if (!iframeContainer) {
         throw new Error('Iframe container not found');
     }
-    const iframeStamper = await createIframeStamper({
+    const iframeStamper = await (0, wallet_core_1.createIframeStamper)({
         iframeUrl: 'https://export.turnkey.com',
         iframeContainer,
         iframeElementId: 'export-wallet-iframe',
     });
     const publicKey = await iframeStamper.init();
-    const { exportBundle, organizationId } = await exportWalletSdk({
+    const { exportBundle, organizationId } = await (0, wallet_core_1.exportWallet)({
         wallet,
         targetPublicKey: publicKey,
     });
@@ -191,3 +203,29 @@ async function exportWallet(config, parameters) {
         throw new Error('Failed to inject export bundle');
     }
 }
+async function exportPrivateKey(config, parameters) {
+    const connector = parameters.connector ?? getZeroDevConnector(config);
+    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 (0, wallet_core_1.createIframeStamper)({
+        iframeUrl: 'https://export.turnkey.com',
+        iframeContainer,
+        iframeElementId: 'export-private-key-iframe',
+    });
+    const publicKey = await iframeStamper.init();
+    const { exportBundle, organizationId } = await (0, wallet_core_1.exportPrivateKey)({
+        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');
+    }
+}