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
- Name
fetcher- Type
Fetcher extends (...args: any[]) => Promise<any>- Description
The fetcher function.
- Name
options?- Type
UseReverificationOptions- Description
The optional options object.
- Name
onCancel?- Type
() ⇒ void- Description
A callback function that is invoked when the user cancels the reverification process.
- Name
throwOnCancel?- Type
boolean- Description
Determines if an error should throw when the user cancels the reverification process. Defaults to
false.
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 the following 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>
}'use client'
import { useReverification } from '@clerk/nextjs'
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>
}'use client'
import { useReverification } from '@clerk/nextjs'
import { isClerkRuntimeError } from '@clerk/nextjs/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>
}Feedback
Last updated on