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,
            redirectURL: `${window.location.origin}/verify`,
          })
          // Store otpId for the verify page
          sessionStorage.setItem('magicLinkOtpId', result.otpId)
        }}
        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.

redirectURL

string

Required. The URL the user will be redirected to after clicking the magic link. This should be a page in your app that calls useVerifyMagicLink.

otpCodeCustomization

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

Optional customization for the generated verification code.

length

6 | 7 | 8 | 9 | undefined

The number of characters in the 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; redirectURL: string }) => void

The mutation function to send the magic link.

mutateAsync

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

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