useSendOTP

Import

import { useSendOTP } from '@zerodev/wallet-react'

Usage

import { useState } from 'react'
import { useSendOTP } from '@zerodev/wallet-react'
 
function SendCode() {
  const [email, setEmail] = useState('')
  const sendOTP = useSendOTP()
 
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button
        onClick={async () => {
          const result = await sendOTP.mutateAsync({ email })
          console.log('OTP ID:', result.otpId)
          // Store result.otpId and result.otpEncryptionTargetBundle,
          // then pass both to useVerifyOTP
        }}
        disabled={sendOTP.isPending || !email}
      >
        {sendOTP.isPending ? 'Sending...' : 'Send Code'}
      </button>
    </div>
  )
}

Parameters

email

string

Required. The email address to send the verification code to.

emailCustomization

{ magicLinkTemplate?: string } | undefined

Optional email customization options.

magicLinkTemplate

string | undefined

Custom template for the email content.

Return Types

TanStack Query mutation docs

mutate

(variables: { email: string; emailCustomization?: { magicLinkTemplate?: string }; otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }; connector?: Connector }) => void

The mutation function to send the OTP.

mutateAsync

(variables: { email: string; emailCustomization?: { magicLinkTemplate?: string }; otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }; connector?: Connector }) => Promise<{ otpId: string; otpEncryptionTargetBundle: string }>

Similar to mutate but returns a promise.

data

{ otpId: string; otpEncryptionTargetBundle: string } | undefined

• Defaults to undefined
• The data returned from the mutation on success.

otpId

string

The identifier for this OTP verification attempt. Pass this to useVerifyOTP to complete authentication.

otpEncryptionTargetBundle

string

The encrypted OTP target bundle for this verification attempt. Store it with otpId and pass both values to useVerifyOTP.

error

Error | null

The error object for the mutation, if an error was encountered.

isError / isIdle / isPending / isSuccess

boolean

Boolean variables derived from status.

isPaused

boolean

• will be true if the mutation has been paused.
• see Network Mode for more information.

status

'idle' | 'pending' | 'error' | 'success'

• 'idle' initial status prior to the mutation function executing.
• 'pending' if the mutation is currently executing.
• 'error' if the last mutation attempt resulted in an error.
• 'success' if the last mutation attempt was successful.

reset

() => void

A function to clean the mutation internal state (e.g. it resets the mutation to its initial state).