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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @zerodev/wallet-react
 
+## 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

package/README.md

@@ -38,10 +38,6 @@ const config = createConfig({
       projectId: 'YOUR_PROJECT_ID',
       aaUrl: 'YOUR_AA_PROVIDER_URL',
       chains: [sepolia],
-      oauthConfig: {
-        googleClientId: 'YOUR_GOOGLE_CLIENT_ID',
-        redirectUri: 'http://localhost:3000',
-      },
     })
   ],
   transports: {
@@ -150,7 +146,8 @@ await loginPasskey.mutateAsync({ email: 'user@example.com' })
 ```typescript
 const authenticateOAuth = useAuthenticateOAuth()
 
-// Opens popup automatically, handles token exchange
+// 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
 })
@@ -182,18 +179,12 @@ type ZeroDevWalletConnectorParams = {
   projectId: string                    // Required: Your ZeroDev project ID
   organizationId?: string               // Optional: Turnkey organization ID
   proxyBaseUrl?: string                 // Optional: KMS proxy URL
-  aaUrl: string                         // Required: Bundler/paymaster URL
+  aaUrl?: string                        // Optional: Bundler/paymaster 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)
-  oauthConfig?: OAuthConfig             // Optional: OAuth configuration
-}
-
-type OAuthConfig = {
-  googleClientId?: string
-  redirectUri: string
 }
 ```
 
@@ -224,16 +215,28 @@ const refreshSession = useRefreshSession()
 await refreshSession.mutateAsync({})
 ```
 
-### Export Wallet
+### 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'
+})
+```
+
 ## API Reference
 
 ### Hooks
@@ -247,6 +250,7 @@ All hooks follow the TanStack Query mutation pattern:
 - `useVerifyOTP()` - Verify OTP code
 - `useRefreshSession()` - Manually refresh session
 - `useExportWallet()` - Export wallet seed phrase
+- `useExportPrivateKey()` - Export wallet private key
 
 ### Connector
 
@@ -259,7 +263,6 @@ All hooks follow the TanStack Query mutation pattern:
 ### Types
 
 - `OAuthProvider` - OAuth provider type
-- `OAuthConfig` - OAuth configuration type
 - `ZeroDevWalletConnectorParams` - Connector parameters
 - `ZeroDevWalletState` - Store state type
 - `ZeroDevProvider` - EIP-1193 provider type

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,34 @@ async function refreshSession(config, parameters = {}) {
     store.getState().setSession(newSession || null);
     return newSession;
 }
+async function getUserEmail(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');
+    return await wallet.client.getUserEmail({
+        organizationId: parameters.organizationId,
+        projectId: parameters.projectId,
+    });
+}
 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 +194,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');
+    }
+}

package/dist/_cjs/connector.js

@@ -6,9 +6,48 @@ const sdk_1 = require("@zerodev/sdk");
 const constants_1 = require("@zerodev/sdk/constants");
 const wallet_core_1 = require("@zerodev/wallet-core");
 const viem_1 = require("viem");
+const oauth_js_1 = require("./oauth.js");
 const provider_js_1 = require("./provider.js");
 const store_js_1 = require("./store.js");
 const aaUtils_js_1 = require("./utils/aaUtils.js");
+const OAUTH_SUCCESS_PARAM = 'oauth_success';
+const OAUTH_PROVIDER_PARAM = 'oauth_provider';
+async function detectAndHandleOAuthCallback(wallet, store) {
+    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 (window.opener) {
+        (0, oauth_js_1.handleOAuthCallback)(OAUTH_SUCCESS_PARAM);
+        return true;
+    }
+    console.log('OAuth callback detected, completing authentication...');
+    const provider = (params.get(OAUTH_PROVIDER_PARAM) ||
+        'google');
+    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);
+        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;
+    }
+}
 function zeroDevWallet(params) {
     return (0, core_1.createConnector)((wagmiConfig) => {
         let store;
@@ -29,9 +68,10 @@ function zeroDevWallet(params) {
             });
             store = (0, store_js_1.createZeroDevWalletStore)();
             store.getState().setWallet(wallet);
-            if (params.oauthConfig) {
-                store.getState().setOAuthConfig(params.oauthConfig);
-            }
+            store.getState().setOAuthConfig({
+                backendUrl: params.proxyBaseUrl || `${wallet_core_1.KMS_SERVER_URL}/api/v1`,
+                projectId: params.projectId,
+            });
             provider = (0, provider_js_1.createProvider)({
                 store,
                 config: params,
@@ -44,6 +84,7 @@ function zeroDevWallet(params) {
                 store.getState().setEoaAccount(eoaAccount);
                 store.getState().setSession(session);
             }
+            await detectAndHandleOAuthCallback(wallet, store);
             console.log('ZeroDevWallet connector initialized');
         };
         return {

package/dist/_cjs/hooks/useExportPrivateKey.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExportPrivateKey = useExportPrivateKey;
+const react_query_1 = require("@tanstack/react-query");
+const wagmi_1 = require("wagmi");
+const actions_js_1 = require("../actions.js");
+function useExportPrivateKey(parameters = {}) {
+    const { mutation } = parameters;
+    const config = (0, wagmi_1.useConfig)(parameters);
+    return (0, react_query_1.useMutation)({
+        ...mutation,
+        async mutationFn(variables) {
+            return (0, actions_js_1.exportPrivateKey)(config, variables);
+        },
+        mutationKey: ['exportPrivateKey'],
+    });
+}

package/dist/_cjs/hooks/useGetUserEmail.js

@@ -0,0 +1,19 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetUserEmail = useGetUserEmail;
+const react_query_1 = require("@tanstack/react-query");
+const wagmi_1 = require("wagmi");
+const actions_js_1 = require("../actions.js");
+function useGetUserEmail(parameters) {
+    const { organizationId, projectId, query } = parameters;
+    const config = (0, wagmi_1.useConfig)(parameters);
+    return (0, react_query_1.useQuery)({
+        ...query,
+        queryKey: ['getUserEmail', { organizationId, projectId }],
+        queryFn: async () => {
+            return (0, actions_js_1.getUserEmail)(config, { organizationId, projectId });
+        },
+        enabled: Boolean(organizationId && projectId),
+    });
+}

package/dist/_cjs/index.js

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createZeroDevWalletStore = exports.OAUTH_PROVIDERS = exports.useVerifyOTP = exports.useSendOTP = exports.useRegisterPasskey = exports.useRefreshSession = exports.useLoginPasskey = exports.useExportWallet = exports.useAuthenticateOAuth = exports.zeroDevWallet = void 0;
+exports.createZeroDevWalletStore = exports.OAUTH_PROVIDERS = exports.listenForOAuthMessage = exports.handleOAuthCallback = exports.buildBackendOAuthUrl = exports.useVerifyOTP = exports.useSendOTP = exports.useRegisterPasskey = exports.useRefreshSession = exports.useLoginPasskey = exports.useGetUserEmail = exports.useExportWallet = exports.useExportPrivateKey = exports.useAuthenticateOAuth = exports.zeroDevWallet = void 0;
 var connector_js_1 = require("./connector.js");
 Object.defineProperty(exports, "zeroDevWallet", { enumerable: true, get: function () { return connector_js_1.zeroDevWallet; } });
 var useAuthenticateOAuth_js_1 = require("./hooks/useAuthenticateOAuth.js");
 Object.defineProperty(exports, "useAuthenticateOAuth", { enumerable: true, get: function () { return useAuthenticateOAuth_js_1.useAuthenticateOAuth; } });
+var useExportPrivateKey_js_1 = require("./hooks/useExportPrivateKey.js");
+Object.defineProperty(exports, "useExportPrivateKey", { enumerable: true, get: function () { return useExportPrivateKey_js_1.useExportPrivateKey; } });
 var useExportWallet_js_1 = require("./hooks/useExportWallet.js");
 Object.defineProperty(exports, "useExportWallet", { enumerable: true, get: function () { return useExportWallet_js_1.useExportWallet; } });
+var useGetUserEmail_js_1 = require("./hooks/useGetUserEmail.js");
+Object.defineProperty(exports, "useGetUserEmail", { enumerable: true, get: function () { return useGetUserEmail_js_1.useGetUserEmail; } });
 var useLoginPasskey_js_1 = require("./hooks/useLoginPasskey.js");
 Object.defineProperty(exports, "useLoginPasskey", { enumerable: true, get: function () { return useLoginPasskey_js_1.useLoginPasskey; } });
 var useRefreshSession_js_1 = require("./hooks/useRefreshSession.js");
@@ -18,6 +22,9 @@ Object.defineProperty(exports, "useSendOTP", { enumerable: true, get: function (
 var useVerifyOTP_js_1 = require("./hooks/useVerifyOTP.js");
 Object.defineProperty(exports, "useVerifyOTP", { enumerable: true, get: function () { return useVerifyOTP_js_1.useVerifyOTP; } });
 var oauth_js_1 = require("./oauth.js");
+Object.defineProperty(exports, "buildBackendOAuthUrl", { enumerable: true, get: function () { return oauth_js_1.buildBackendOAuthUrl; } });
+Object.defineProperty(exports, "handleOAuthCallback", { enumerable: true, get: function () { return oauth_js_1.handleOAuthCallback; } });
+Object.defineProperty(exports, "listenForOAuthMessage", { enumerable: true, get: function () { return oauth_js_1.listenForOAuthMessage; } });
 Object.defineProperty(exports, "OAUTH_PROVIDERS", { enumerable: true, get: function () { return oauth_js_1.OAUTH_PROVIDERS; } });
 var store_js_1 = require("./store.js");
 Object.defineProperty(exports, "createZeroDevWalletStore", { enumerable: true, get: function () { return store_js_1.createZeroDevWalletStore; } });

package/dist/_cjs/oauth.js

@@ -1,42 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OAUTH_PROVIDERS = void 0;
-exports.buildOAuthUrl = buildOAuthUrl;
 exports.openOAuthPopup = openOAuthPopup;
-exports.extractOAuthToken = extractOAuthToken;
-exports.pollOAuthPopup = pollOAuthPopup;
 exports.generateOAuthNonce = generateOAuthNonce;
+exports.buildBackendOAuthUrl = buildBackendOAuthUrl;
+exports.listenForOAuthMessage = listenForOAuthMessage;
+exports.handleOAuthCallback = handleOAuthCallback;
 const viem_1 = require("viem");
 exports.OAUTH_PROVIDERS = {
     GOOGLE: 'google',
 };
-const GOOGLE_AUTH_URL = 'https://accounts.google.com/o/oauth2/v2/auth';
 const POPUP_WIDTH = 500;
 const POPUP_HEIGHT = 600;
-function buildOAuthUrl(params) {
-    const { provider, clientId, redirectUri, nonce, state } = params;
-    if (provider !== exports.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();
-}
 function openOAuthPopup(url) {
     const width = POPUP_WIDTH;
     const height = POPUP_HEIGHT;
@@ -48,37 +23,67 @@ function openOAuthPopup(url) {
     }
     return authWindow;
 }
-function extractOAuthToken(url) {
-    const hashParams = new URLSearchParams(url.split('#')[1]);
-    let idToken = hashParams.get('id_token');
-    if (!idToken) {
-        const queryParams = new URLSearchParams(url.split('?')[1]);
-        idToken = queryParams.get('id_token');
+function generateOAuthNonce(publicKey) {
+    return (0, viem_1.sha256)(publicKey).replace(/^0x/, '');
+}
+function buildBackendOAuthUrl(params) {
+    const { provider, backendUrl, projectId, publicKey, returnTo } = params;
+    if (provider !== exports.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();
 }
-function pollOAuthPopup(authWindow, originUrl, onSuccess, onError) {
-    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);
-                }
-            }
+function listenForOAuthMessage(authWindow, expectedOrigin, onSuccess, onError) {
+    let cleaned = false;
+    const handleMessage = (event) => {
+        if (event.origin !== expectedOrigin)
+            return;
+        if (!event.data || typeof event.data !== 'object')
+            return;
+        if (event.data.type === 'oauth_success') {
+            cleanup();
+            onSuccess();
         }
-        catch {
+        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;
 }
-function generateOAuthNonce(publicKey) {
-    return (0, viem_1.sha256)(publicKey).replace(/^0x/, '');
+function handleOAuthCallback(successParam = 'oauth_success') {
+    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' }, window.location.origin);
+            window.close();
+            return true;
+        }
+        if (error) {
+            window.opener.postMessage({ type: 'oauth_error', error }, window.location.origin);
+            window.close();
+            return false;
+        }
+    }
+    return false;
 }