chore(clerk-js): Filters out non supported strategies for reverification (#5475)

Author: octoper

.changeset/wide-glasses-wink.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Filters out non supported strategies for reverification

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOne.tsx

@@ -1,4 +1,4 @@
-import type { SignInFactor } from '@clerk/types';
+import type { SessionVerificationFirstFactor, SignInFactor } from '@clerk/types';
 import React, { useEffect, useMemo } from 'react';
 
 import { useEnvironment } from '../../contexts';
@@ -29,6 +29,13 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
   return key;
 };
 
+const SUPPORTED_STRATEGIES: SessionVerificationFirstFactor['strategy'][] = [
+  'password',
+  'email_code',
+  'phone_code',
+  'passkey',
+] as const;
+
 export function UserVerificationFactorOneInternal(): JSX.Element | null {
   const { data } = useUserVerificationSession();
   const card = useCardState();
@@ -39,7 +46,11 @@ export function UserVerificationFactorOneInternal(): JSX.Element | null {
   const sessionVerification = data!;
 
   const availableFactors = useMemo(() => {
-    return sessionVerification.supportedFirstFactors?.sort(sortByPrimaryFactor) || null;
+    return (
+      sessionVerification.supportedFirstFactors
+        ?.filter(factor => SUPPORTED_STRATEGIES.includes(factor.strategy))
+        ?.sort(sortByPrimaryFactor) || null
+    );
   }, [sessionVerification.supportedFirstFactors]);
   const { preferredSignInStrategy } = useEnvironment().displayConfig;
 

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwo.tsx

@@ -23,13 +23,23 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
   return key;
 };
 
+const SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][] = [
+  'phone_code',
+  'totp',
+  'backup_code',
+] as const;
+
 export function UserVerificationFactorTwoComponent(): JSX.Element {
   const { navigate } = useRouter();
   const { data } = useUserVerificationSession();
   const sessionVerification = data as SessionVerificationResource;
 
   const availableFactors = useMemo(() => {
-    return sessionVerification.supportedSecondFactors?.sort(sortByPrimaryFactor) || null;
+    return (
+      sessionVerification.supportedSecondFactors
+        ?.filter(factor => SUPPORTED_STRATEGIES.includes(factor.strategy))
+        ?.sort(sortByPrimaryFactor) || null
+    );
   }, [sessionVerification.supportedSecondFactors]);
 
   const lastPreparedFactorKeyRef = React.useRef('');