@zerodev/wallet-react 0.0.1-alpha.13 → 0.0.1-alpha.15

package/package.json

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

package/src/actions.test.ts

@@ -569,7 +569,7 @@ describe('React Actions', () => {
       })
     })
 
-    it('completes full OAuth success flow', async () => {
+    it('completes full OAuth success flow with sessionId', async () => {
       const wallet = createMockWallet()
       wallet.getSession.mockResolvedValue({ id: 'oauth-session' })
       wallet.toAccount.mockResolvedValue({ address: '0xoauth' })
@@ -578,11 +578,14 @@ describe('React Actions', () => {
       const config = createMockConfig(connector)
 
       mockOpenOAuthPopup.mockReturnValue({ closed: false } as Window)
-      // Simulate the success callback being called immediately
+      // Simulate the success callback being called with sessionId
       mockListenForOAuthMessage.mockImplementation(
-        (_win: Window, _origin: string, onSuccess: () => void) => {
-          // Call onSuccess asynchronously to simulate real behavior
-          setTimeout(() => onSuccess(), 0)
+        (
+          _win: Window,
+          _origin: string,
+          onSuccess: (sessionId: string) => void,
+        ) => {
+          setTimeout(() => onSuccess('test-session-id'), 0)
           return () => {}
         },
       )
@@ -592,6 +595,7 @@ describe('React Actions', () => {
       expect(wallet.auth).toHaveBeenCalledWith({
         type: 'oauth',
         provider: 'google',
+        sessionId: 'test-session-id',
       })
       expect(store.getState().setEoaAccount).toHaveBeenCalledWith({
         address: '0xoauth',
@@ -611,8 +615,12 @@ describe('React Actions', () => {
 
       mockOpenOAuthPopup.mockReturnValue({ closed: false } as Window)
       mockListenForOAuthMessage.mockImplementation(
-        (_win: Window, _origin: string, onSuccess: () => void) => {
-          setTimeout(() => onSuccess(), 0)
+        (
+          _win: Window,
+          _origin: string,
+          onSuccess: (sessionId: string) => void,
+        ) => {
+          setTimeout(() => onSuccess('session-id'), 0)
           return () => {}
         },
       )
@@ -633,7 +641,7 @@ describe('React Actions', () => {
         (
           _win: Window,
           _origin: string,
-          _onSuccess: () => void,
+          _onSuccess: (sessionId: string) => void,
           onError: (error: Error) => void,
         ) => {
           setTimeout(() => onError(new Error('Window closed')), 0)

package/src/actions.ts

@@ -158,13 +158,13 @@ export async function authenticateOAuth(
     const cleanup = listenForOAuthMessage(
       authWindow,
       window.location.origin,
-      async () => {
+      async (sessionId) => {
         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,
+            sessionId,
           })
 
           const [session, eoaAccount] = await Promise.all([
@@ -208,6 +208,7 @@ export async function sendOTP(
   parameters: {
     email: string
     emailCustomization?: { magicLinkTemplate?: string }
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
     connector?: Connector
   },
 ): Promise<{ otpId: string }> {
@@ -227,6 +228,9 @@ export async function sendOTP(
     ...(parameters.emailCustomization && {
       emailCustomization: parameters.emailCustomization,
     }),
+    ...(parameters.otpCodeCustomization && {
+      otpCodeCustomization: parameters.otpCodeCustomization,
+    }),
   })
 
   return {
@@ -238,6 +242,7 @@ export declare namespace sendOTP {
   type Parameters = {
     email: string
     emailCustomization?: { magicLinkTemplate?: string }
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
     connector?: Connector
   }
   type ReturnType = { otpId: string }
@@ -497,6 +502,7 @@ export async function sendMagicLink(
   parameters: {
     email: string
     redirectURL: string
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
     connector?: Connector
   },
 ): Promise<{ otpId: string }> {
@@ -513,6 +519,9 @@ export async function sendMagicLink(
     mode: 'send',
     email: parameters.email,
     redirectURL: parameters.redirectURL,
+    ...(parameters.otpCodeCustomization && {
+      otpCodeCustomization: parameters.otpCodeCustomization,
+    }),
   })
 
   return {
@@ -524,6 +533,7 @@ export declare namespace sendMagicLink {
   type Parameters = {
     email: string
     redirectURL: string
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
     connector?: Connector
   }
   type ReturnType = { otpId: string }

package/src/connector.ts

@@ -16,6 +16,7 @@ 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'
+const OAUTH_SESSION_ID_PARAM = 'session_id'
 
 /**
  * Detect OAuth callback from URL params and handle it.
@@ -43,9 +44,10 @@ async function detectAndHandleOAuthCallback(
   console.log('OAuth callback detected, completing authentication...')
   const provider = (params.get(OAUTH_PROVIDER_PARAM) ||
     'google') as OAuthProvider
+  const sessionId = params.get(OAUTH_SESSION_ID_PARAM) || ''
 
   try {
-    await wallet.auth({ type: 'oauth', provider })
+    await wallet.auth({ type: 'oauth', provider, sessionId })
 
     const [session, eoaAccount] = await Promise.all([
       wallet.getSession(),
@@ -58,6 +60,7 @@ async function detectAndHandleOAuthCallback(
     // Clean up URL params
     params.delete(OAUTH_SUCCESS_PARAM)
     params.delete(OAUTH_PROVIDER_PARAM)
+    params.delete(OAUTH_SESSION_ID_PARAM)
     const newUrl = params.toString()
       ? `${window.location.pathname}?${params.toString()}`
       : window.location.pathname

package/src/oauth.test.ts

@@ -188,15 +188,35 @@ describe('OAuth utilities', () => {
       vi.useRealTimers()
     })
 
-    it('calls onSuccess when oauth_success message received', () => {
+    it('calls onSuccess with sessionId when oauth_success message received', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
+        onErrorMock as (error: Error) => void,
+      )
+
+      // Simulate receiving a message with sessionId
+      const event = new MessageEvent('message', {
+        data: { type: 'oauth_success', sessionId: 'test-session-123' },
+        origin: 'https://app.example.com',
+      })
+      window.dispatchEvent(event)
+
+      expect(onSuccessMock).toHaveBeenCalledOnce()
+      expect(onSuccessMock).toHaveBeenCalledWith('test-session-123')
+      expect(onErrorMock).not.toHaveBeenCalled()
+      cleanup()
+    })
+
+    it('calls onSuccess with empty string when sessionId is missing', () => {
+      const cleanup = listenForOAuthMessage(
+        mockWindow as Window,
+        'https://app.example.com',
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
-      // Simulate receiving a message
       const event = new MessageEvent('message', {
         data: { type: 'oauth_success' },
         origin: 'https://app.example.com',
@@ -204,6 +224,7 @@ describe('OAuth utilities', () => {
       window.dispatchEvent(event)
 
       expect(onSuccessMock).toHaveBeenCalledOnce()
+      expect(onSuccessMock).toHaveBeenCalledWith('')
       expect(onErrorMock).not.toHaveBeenCalled()
       cleanup()
     })
@@ -212,7 +233,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -232,7 +253,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -251,7 +272,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -268,7 +289,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -288,7 +309,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -323,7 +344,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -345,7 +366,7 @@ describe('OAuth utilities', () => {
       const cleanup = listenForOAuthMessage(
         mockWindow as Window,
         'https://app.example.com',
-        onSuccessMock as () => void,
+        onSuccessMock as (sessionId: string) => void,
         onErrorMock as (error: Error) => void,
       )
 
@@ -391,7 +412,20 @@ describe('OAuth utilities', () => {
       window.close = originalClose
     })
 
-    it('returns true and posts success message on oauth_success=true', () => {
+    it('returns true and posts success message with sessionId on oauth_success=true', () => {
+      window.location.search = '?oauth_success=true&session_id=abc123'
+
+      const result = handleOAuthCallback()
+
+      expect(result).toBe(true)
+      expect(window.opener?.postMessage).toHaveBeenCalledWith(
+        { type: 'oauth_success', sessionId: 'abc123' },
+        'https://app.example.com',
+      )
+      expect(window.close).toHaveBeenCalled()
+    })
+
+    it('posts success message without sessionId when session_id param is missing', () => {
       window.location.search = '?oauth_success=true'
 
       const result = handleOAuthCallback()

package/src/oauth.ts

@@ -62,6 +62,7 @@ export function buildBackendOAuthUrl(params: BackendOAuthFlowParams): string {
 
 export type OAuthMessageData = {
   type: 'oauth_success' | 'oauth_error'
+  sessionId?: string
   error?: string
 }
 
@@ -72,7 +73,7 @@ export type OAuthMessageData = {
 export function listenForOAuthMessage(
   authWindow: Window,
   expectedOrigin: string,
-  onSuccess: () => void,
+  onSuccess: (sessionId: string) => void,
   onError: (error: Error) => void,
 ): () => void {
   let cleaned = false
@@ -84,7 +85,7 @@ export function listenForOAuthMessage(
 
     if (event.data.type === 'oauth_success') {
       cleanup()
-      onSuccess()
+      onSuccess(event.data.sessionId || '')
     } else if (event.data.type === 'oauth_error') {
       cleanup()
       onError(new Error(event.data.error || 'OAuth authentication failed'))
@@ -119,13 +120,13 @@ 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')
+  const sessionId = urlParams.get('session_id') ?? undefined
 
   if (window.opener) {
     if (isSuccess) {
-      window.opener.postMessage(
-        { type: 'oauth_success' } satisfies OAuthMessageData,
-        window.location.origin,
-      )
+      const message: OAuthMessageData = { type: 'oauth_success' }
+      if (sessionId) message.sessionId = sessionId
+      window.opener.postMessage(message, window.location.origin)
       window.close()
       return true
     }