chore: Export isReverificationCancelledError for all react related SDKs

Author: octoper

.changeset/pretty-months-wonder.md

@@ -0,0 +1,9 @@
+---
+'@clerk/react-router': patch
+'@clerk/clerk-js': patch
+'@clerk/nextjs': patch
+'@clerk/clerk-react': patch
+'@clerk/remix': patch
+---
+
+Export `isReverificationCancelledError` error helper

.changeset/tricky-deers-know.md

@@ -7,22 +7,19 @@ This introducing changes to `useReverification`, the changes include removing th
 
 ```tsx {{ filename: 'src/components/MyButton.tsx' }}
 import { useReverification } from '@clerk/clerk-react'
-import { isClerkRuntimeError } from '@clerk/clerk-react/error'
+import { isReverificationCancelledError } from '@clerk/clerk-react/error'
 
 export function MyButton() {
   const enhancedFetcher = useReverification(() => fetch('/api/balance'))
 
   const handleClick = async () => {
     try {
       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
     } catch (e) {
-      // Handle error returned from the fetcher
+      // Handle error returned from the fetcher here
 
       // You can also handle cancellation with the following
-      if (isClerkRuntimeError(err) && err.code === 'reverification_cancelled') {
+      if (isReverificationCancelledError(err)) {
         // Handle the cancellation error here
       }
     }
@@ -37,8 +34,8 @@ to handle re-verification flow. When the handler is passed the default UI our AI
 
 
 ```tsx {{ filename: 'src/components/MyButtonCustom.tsx' }}
-import { useReverification } from '@clerk/react'
-import { isClerkRuntimeError } from '@clerk/react/error'
+import { useReverification } from '@clerk/clerk-react'
+import { isReverificationCancelledError } from '@clerk/clerk-react/error'
 
 export function MyButton() {
   const enhancedFetcher = useReverification(() => fetch('/api/balance'), {
@@ -50,11 +47,13 @@ export function MyButton() {
   const handleClick = async () => {
     try {
       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
     } catch (e) {
-      // Handle error returned from the fetcher
+      // Handle error returned from the fetcher here
+
+      // You can also handle cancellation with the following
+      if (isReverificationCancelledError(err)) {
+        // Handle the cancellation error here
+      }
     }
   }
 

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -61,12 +61,9 @@ const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) =>
       return;
     }
     status.setLoading();
-    return (
-      revokeSession()
-        // TODO-STEPUP: Properly handler the response with a setCardError
-        .catch(err => handleError(err, [], status.setError))
-        .finally(() => status.setIdle())
-    );
+    return revokeSession()
+      .catch(err => handleError(err, [], status.setError))
+      .finally(() => status.setIdle());
   };
 
   return (

packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeCreateForm.tsx

@@ -1,4 +1,4 @@
-import { isClerkRuntimeError } from '@clerk/shared/error';
+import { isReverificationCancelledError } from '@clerk/shared/error';
 import { useReverification, useUser } from '@clerk/shared/react';
 import type { BackupCodeResource } from '@clerk/types';
 import React from 'react';
@@ -31,7 +31,7 @@ export const MfaBackupCodeCreateForm = withCardStateProvider((props: MfaBackupCo
     void createBackupCode()
       .then(backupCode => setBackupCode(backupCode))
       .catch(err => {
-        if (isClerkRuntimeError(err) && err.code === 'reverification_cancelled') {
+        if (isReverificationCancelledError(err)) {
           return onReset();
         }
 

packages/nextjs/src/client-boundary/hooks.ts

@@ -19,6 +19,7 @@ export {
   isEmailLinkError,
   isKnownError,
   isMetamaskError,
+  isReverificationCancelledError,
   EmailLinkErrorCode,
   EmailLinkErrorCodeStatus,
 } from '@clerk/clerk-react/errors';

packages/nextjs/src/errors.ts

@@ -2,6 +2,7 @@ export {
   isClerkRuntimeError,
   isEmailLinkError,
   isKnownError,
+  isReverificationCancelledError,
   isMetamaskError,
   EmailLinkErrorCode,
   EmailLinkErrorCodeStatus,

packages/react-router/src/errors.ts

@@ -3,6 +3,7 @@ export {
   isEmailLinkError,
   isKnownError,
   isMetamaskError,
+  isReverificationCancelledError,
   EmailLinkErrorCode,
   EmailLinkErrorCodeStatus,
 } from '@clerk/clerk-react/errors';

packages/react/src/errors.ts

@@ -4,6 +4,7 @@ export {
   isEmailLinkError,
   isKnownError,
   isMetamaskError,
+  isReverificationCancelledError,
   EmailLinkErrorCode,
   EmailLinkErrorCodeStatus,
 } from '@clerk/shared/error';

packages/remix/src/errors.ts

@@ -3,6 +3,7 @@ export {
   isEmailLinkError,
   isKnownError,
   isMetamaskError,
+  isReverificationCancelledError,
   EmailLinkErrorCode,
   EmailLinkErrorCodeStatus,
 } from '@clerk/clerk-react/errors';

packages/shared/src/react/hooks/useReverification.ts

@@ -161,15 +161,22 @@ function createReverificationHandler(params: CreateReverificationHandlerParams)
  *
  * ```tsx {{ filename: 'src/components/MyButton.tsx' }}
  * import { useReverification } from '@clerk/clerk-react'
+ * import { isReverificationCancelledError } from '@clerk/clerk-react/error'
  *
  * export function MyButton() {
- *   const enhancedFetcher = useReverification(myFetcher)
+ *   const enhancedFetcher = useReverification(() => fetch('/api/balance'))
  *
  *   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
+ *     try {
+ *       const myData = await enhancedFetcher()
+ *     } catch (e) {
+ *       // Handle error returned from the fetcher here
+ *
+ *       // You can also handle cancellation with the following
+ *       if (isReverificationCancelledError(err)) {
+ *         // Handle the cancellation error here
+ *       }
+ *     }
  *   }
  *
  *   return <button onClick={handleClick}>Update User</button>