useVerifyMagicLink

Import

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

Usage

import { useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { useAccount } from 'wagmi'
import { useVerifyMagicLink } from '@zerodev/wallet-react'
 
function VerifyPage() {
  const searchParams = useSearchParams()
  const verifyMagicLink = useVerifyMagicLink()
  const { address, isConnected } = useAccount()
 
  useEffect(() => {
    const code = searchParams.get('code')
    const otpId = sessionStorage.getItem('magicLinkOtpId')
    const otpEncryptionTargetBundle = sessionStorage.getItem('magicLinkBundle')
 
    if (code && otpId && otpEncryptionTargetBundle && !isConnected) {
      verifyMagicLink.mutateAsync({ otpId, otpEncryptionTargetBundle, code })
    }
  }, [searchParams])
 
  if (isConnected) return <p>Authenticated: {address}</p>
  if (verifyMagicLink.isPending) return <p>Verifying...</p>
  if (verifyMagicLink.isError) return <p>Error: {verifyMagicLink.error.message}</p>
 
  return <p>Waiting for verification...</p>
}

Mutation Parameters

otpId

string

Required. The OTP identifier returned by useSendMagicLink.

code

string

Required. The verification code from the magic link URL query parameters.

otpEncryptionTargetBundle

string

Required. The encryption target bundle returned by useSendMagicLink.

connector

Connector | undefined

Optional Wagmi connector to verify the magic link with. If omitted, the hook uses the configured ZeroDev connector.

Return Types

TanStack Query mutation docs

mutate

(variables: { otpId: string; otpEncryptionTargetBundle: string; code: string; connector?: Connector }) => void

The mutation function to verify the magic link.

mutateAsync

(variables: { otpId: string; otpEncryptionTargetBundle: string; code: string; connector?: Connector }) => Promise<void>

Similar to mutate but returns a promise. Resolves when the magic link is verified and the wallet is connected.

data

void

This mutation does not return data. On success, the Wagmi connector is connected and the account is available via useAccount.

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