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)
          // Pass otpId 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.

otpCodeCustomization

{ length?: 6 | 7 | 8 | 9; alphanumeric?: boolean } | undefined

Optional customization for the generated OTP code.

length

6 | 7 | 8 | 9 | undefined

The number of characters in the OTP code. Defaults to 6.

alphanumeric

boolean | undefined

Whether to use alphanumeric characters instead of digits only. Defaults to false.

Return Types

TanStack Query mutation docs

mutate

(variables: { email: string; emailCustomization?: { magicLinkTemplate?: string } }) => void

The mutation function to send the OTP.

mutateAsync

(variables: { email: string; emailCustomization?: { magicLinkTemplate?: string } }) => Promise<{ otpId: string }>

Similar to mutate but returns a promise.

data

{ otpId: 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.

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).