useReverification()

The useReverification() hook is used to handle a session's reverification flow. If a request requires reverification, a modal will display, prompting the user to verify their credentials. Upon successful verification, the original request will automatically retry.

Parameters

UseReverificationOptions

Returns

The useReverification() hook returns an array with the "enhanced" fetcher.

How to use the useReverification() hook

Handle cancellation of the reverification process

The following example demonstrates how to handle scenarios where a user cancels the reverification flow, such as closing the modal, which might result in myData being null.

In this example, myFetcher would be a function in your backend that fetches data from the route that requires reverification. See the guide on how to require reverification for more information.

import { useReverification } from '@clerk/react'

export function MyButton() {
  const [enhancedFetcher] = useReverification(myFetcher)

  const handleClick = async () => {
    const myData = await enhancedFetcher()
    // If `myData` is null, the user canceled the reverification process
    // You can choose how your app responds. This example returns null.
    if (!myData) return
  }

  return <button onClick={handleClick}>Update User</button>
}

Handle throwOnCancel

When throwOnCancel is set to true, the fetcher will throw a ClerkRuntimeError with the code "reverification_cancelled" if the user cancels the reverification flow (for example, by closing the modal). This error can be caught and handled according to your app's needs. For example, by displaying a toast notification to the user or silently ignoring the cancellation.

In this example, myFetcher would be a function in your backend that fetches data from the route that requires reverification. See the guide on how to require reverification for more information.

import { useReverification } from '@clerk/clerk-react'
import { isClerkRuntimeError } from '@clerk/clerk-react/errors'

export function MyButton() {
  const [enhancedFetcher] = useReverification(myFetcher, { throwOnCancel: true })

  const handleClick = async () => {
    try {
      const myData = await enhancedFetcher()
    } catch (e) {
      // Handle if user cancels the reverification process
      if (isClerkRuntimeError(e) && e.code === 'reverification_cancelled') {
        console.error('User cancelled reverification', e.code)
      }
    }
  }

  return <button onClick={handleClick}>Update user</button>
}