From aa0efecd5dc494623f3e46de209fc8786d94d061 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Thu, 18 Jul 2024 03:53:12 -0400
Subject: [PATCH] feat(ui): Implement use reset password factor logic (#3750)

---
 .changeset/purple-seahorses-shop.md           |  2 ++
 .../ui/src/components/sign-in/sign-in.tsx     | 26 +++++++++++--------
 .../ui/src/hooks/use-reset-password-factor.ts | 14 ++++++++++
 3 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/purple-seahorses-shop.md
 create mode 100644 packages/ui/src/hooks/use-reset-password-factor.ts

diff --git a/.changeset/purple-seahorses-shop.md b/.changeset/purple-seahorses-shop.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ 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
index 37e95f3a87..660559f84d 100644
--- 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
new file mode 100644
index 0000000000..3a293d2c28
--- /dev/null
+++ 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;
+}