useSendMagicLink

Import

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

Usage

import { useState } from 'react'
import { useSendMagicLink } from '@zerodev/wallet-react'
 
function SendMagicLink() {
  const [email, setEmail] = useState('')
  const sendMagicLink = useSendMagicLink()
 
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button
        onClick={async () => {
          const result = await sendMagicLink.mutateAsync({ email })
          sessionStorage.setItem('magicLinkOtpId', result.otpId)
          sessionStorage.setItem(
            'magicLinkBundle',
            result.otpEncryptionTargetBundle,
          )
        }}
        disabled={sendMagicLink.isPending || !email}
      >
        {sendMagicLink.isPending ? 'Sending...' : 'Send Magic Link'}
      </button>
 
      {sendMagicLink.isSuccess && <p>Check your email!</p>}
    </div>
  )
}

Parameters

email

string

Required. The email address to send the magic link to.

Configure the magic-link URL template for your project in the ZeroDev dashboard. The redirect page should call useVerifyMagicLink.

Return Types

TanStack Query mutation docs

mutate

(variables: { email: string }) => void

The mutation function to send the magic link.

mutateAsync

(variables: { email: string }) => 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 magic link verification. Store this value and pass it to useVerifyMagicLink on the redirect page.

otpEncryptionTargetBundle

string

The encryption target bundle for this magic link verification. Store this value with otpId and pass it to useVerifyMagicLink.

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