feat(ui): Implement use reset password factor logic (#3750)

clerk · Jul 18, 2024 · aa0efec · aa0efec
1 parent 1066eaa
commit aa0efec
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/.changeset/purple-seahorses-shop.md b/.changeset/purple-seahorses-shop.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -17,6 +17,7 @@ import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
+import { useResetPasswordFactor } from '~/hooks/use-reset-password-factor';
 import { Alert } from '~/primitives/alert';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -48,6 +49,7 @@ export function SignInComponentLoaded() {
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = isDevelopmentOrStaging();
+  const isPasswordResetSupported = useResetPasswordFactor();
 
   return (
     <Common.Loading>
@@ -223,18 +225,20 @@ export function SignInComponentLoaded() {
                     <Card.Body>
                       <PasswordField
                         alternativeFieldTrigger={
-                          <SignIn.Action
-                            navigate='forgot-password'
-                            asChild
-                          >
-                            <LinkButton
-                              size='sm'
-                              disabled={isGlobalLoading}
-                              type='button'
+                          isPasswordResetSupported ? (
+                            <SignIn.Action
+                              navigate='forgot-password'
+                              asChild
                             >
-                              {t('formFieldAction__forgotPassword')}
-                            </LinkButton>
-                          </SignIn.Action>
+                              <LinkButton
+                                size='sm'
+                                disabled={isGlobalLoading}
+                                type='button'
+                              >
+                                {t('formFieldAction__forgotPassword')}
+                              </LinkButton>
+                            </SignIn.Action>
+                          ) : null
                         }
                       />
 

diff --git a/packages/ui/src/hooks/use-reset-password-factor.ts b/packages/ui/src/hooks/use-reset-password-factor.ts
@@ -0,0 +1,14 @@
+import { useClerk } from '@clerk/clerk-react';
+import type { ResetPasswordCodeFactor, SignInStrategy } from '@clerk/types';
+
+const resetPasswordStrategies: SignInStrategy[] = ['reset_password_phone_code', 'reset_password_email_code'];
+export const isResetPasswordStrategy = (strategy: SignInStrategy | string | null | undefined) =>
+  !!strategy && resetPasswordStrategies.includes(strategy as SignInStrategy);
+
+export function useResetPasswordFactor() {
+  const clerk = useClerk();
+
+  return clerk.client.signIn.supportedFirstFactors.find(({ strategy }) => isResetPasswordStrategy(strategy)) as
+    | ResetPasswordCodeFactor
+    | undefined;
+}