feat(clerk-js): Reset password MFA

clerk · May 2, 2023 · 5978756 · 5978756
1 parent eb556f8
commit 5978756
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 9 deletions.
diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts
@@ -50,6 +50,8 @@ export class SignIn extends BaseResource implements SignInResource {
   identifier: string | null = null;
   createdSessionId: string | null = null;
   userData: UserData = {};
+  // TODO: remove this
+  isResetFlow = true;
 
   constructor(data: SignInJSON | null = null) {
     super();

diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx b/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx
@@ -6,12 +6,14 @@ import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../contexts';
 import { Col, descriptors, localizationKeys } from '../../customizables';
 import { Card, CardAlert, Form, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
+import { useRouter } from '../../router';
 import { handleError, useFormControl } from '../../utils';
 
 export const _ResetPassword = () => {
   const signIn = useCoreSignIn();
   const { navigateAfterSignIn } = useSignInContext();
   const card = useCardState();
+  const { navigate } = useRouter();
   const { setActive } = useCoreClerk();
   const supportEmail = useSupportEmail();
   const [isCompleted, setCompleted] = useState(false);
@@ -38,6 +40,8 @@ export const _ResetPassword = () => {
   };
 
   const resetPassword = async () => {
+    passwordField.setError(undefined);
+    confirmField.setError(undefined);
     try {
       const { status, createdSessionId } = await signIn.resetPassword({
         password: passwordField.value,
@@ -50,8 +54,8 @@ export const _ResetPassword = () => {
             void setActive({ session: createdSessionId, beforeEmit: navigateAfterSignIn });
           }, 2000);
           return;
-        // case 'needs_second_factor':
-        // return navigate('../factor-two');
+        case 'needs_second_factor':
+          return navigate('../factor-two');
         default:
           return console.error(clerkInvalidFAPIResponse(status, supportEmail));
       }
@@ -64,7 +68,7 @@ export const _ResetPassword = () => {
     <Card>
       <CardAlert>{card.error}</CardAlert>
       <Header.Root>
-        <Header.BackLink onClick={() => null} />
+        <Header.BackLink onClick={() => navigate('../')} />
         <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
       </Header.Root>
       <Col

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
@@ -46,9 +46,13 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
       <Header.Root>
         <Header.Title localizationKey={localizationKeys('signIn.backupCodeMfa.title')} />
         <Header.Subtitle
-          localizationKey={localizationKeys('signIn.backupCodeMfa.subtitle', {
-            applicationName: displayConfig.applicationName,
-          })}
+          localizationKey={
+            signIn?.isResetFlow
+              ? localizationKeys('signIn.forgotPassword.subtitle')
+              : localizationKeys('signIn.backupCodeMfa.subtitle', {
+                  applicationName: displayConfig.applicationName,
+                })
+          }
         />
       </Header.Root>
       <Col

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
 import { useCoreClerk, useCoreSignIn, useOptions, useSignInContext } from '../../contexts';
-import { Text } from '../../customizables';
+import { localizationKeys, Text } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { useCardState, VerificationCodeCard } from '../../elements';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -68,7 +68,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
   return (
     <VerificationCodeCard
       cardTitle={props.cardTitle}
-      cardSubtitle={props.cardSubtitle}
+      cardSubtitle={signIn?.isResetFlow ? localizationKeys('signIn.forgotPassword.subtitle') : props.cardSubtitle}
       formTitle={props.formTitle}
       formSubtitle={props.formSubtitle}
       resendButton={props.resendButton}

diff --git a/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx b/packages/clerk-js/src/ui/contexts/CoreClientContext.tsx
@@ -6,7 +6,8 @@ export const CoreClientContext = ClientContext;
 export function useCoreSignIn(): SignInResource {
   const ctx = useClientContext();
   assertContextExists(ctx, CoreClientContext);
-  return ctx.signIn;
+  // TODO: remove this
+  return { ...ctx.signIn, isResetFlow: true };
 }
 
 export function useCoreSignUp(): SignUpResource {

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -164,6 +164,7 @@ type _LocalizationResource = {
     resetPassword: {
       title: LocalizationValue;
       formButtonPrimary: LocalizationValue;
+      // TODO: remove this
       formButtonPrimary__complete: LocalizationValue;
       // formButtonReset: LocalizationValue;
     };

diff --git a/packages/types/src/signIn.ts b/packages/types/src/signIn.ts
@@ -66,6 +66,8 @@ export interface SignInResource extends ClerkResource {
   identifier: string | null;
   createdSessionId: string | null;
   userData: UserData;
+  // TODO: remove this
+  isResetFlow: boolean;
 
   create: (params: SignInCreateParams) => Promise<SignInResource>;