feat(clerk-js,localizations): Nav to reset-password from pass-form if sign_in.needs_new_password

If password_settings.enforce_on_sign_in is true, then it will be possible for a password sign-in to
succeed but require a new password that conforms to updated password requirements.

Hence, if sign_in.needs_new_password is true, the password form will navigate to reset-password.

Since we are reusing a flow initially created for resetting passwords after an oauth flow, the
error message has been made more generic.

Author: Mark Pitsilos

.changeset/four-ties-yawn.md

@@ -0,0 +1,6 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+---
+
+Navigate to reset-password from the password form if password_settings.enforce_on_sign_in is enabled and sign_in.needs_new_password is true.

packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx

@@ -71,6 +71,8 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
             return setActive({ session: res.createdSessionId, beforeEmit: navigateAfterSignIn });
           case 'needs_second_factor':
             return navigate('../factor-two');
+          case 'needs_new_password':
+            return navigate('../reset-password');
           default:
             return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
         }

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx

@@ -227,6 +227,29 @@ describe('SignInFactorOne', () => {
           });
         });
       });
+
+      it('redirects to `reset-password` if signIn requires a new password', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithPhoneNumber({ supportPassword: true });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        fixtures.signIn.attemptFirstFactor.mockReturnValueOnce(
+          Promise.resolve({ status: 'needs_new_password' } as SignInResource),
+        );
+
+        await runFakeTimers(async () => {
+          const { userEvent } = render(<SignInFactorOne />, { wrapper });
+          await userEvent.type(screen.getByLabelText('Password'), '123456');
+          await userEvent.click(screen.getByText('Continue'));
+          await waitFor(() => {
+            expect(fixtures.router.navigate).toHaveBeenCalledWith('../reset-password');
+          });
+        });
+      });
     });
 
     describe('Forgot Password', () => {

packages/localizations/src/cs-CZ.ts

@@ -370,8 +370,7 @@ export const csCZ: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'Obnovit heslo',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage: 'Vaše heslo bylo úspěšně změněno. Přihlašuji vás, prosím počkejte okamžik.',
       title: 'Obnovit heslo',
     },

packages/localizations/src/da-DK.ts

@@ -371,8 +371,7 @@ export const daDK: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'Reset Password',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage: 'Your password was successfully changed. Signing you in, please wait a moment.',
       title: 'Set new password',
     },

packages/localizations/src/en-US.ts

@@ -360,8 +360,7 @@ export const enUS: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'Reset Password',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage: 'Your password was successfully changed. Signing you in, please wait a moment.',
       title: 'Set new password',
     },

packages/localizations/src/es-ES.ts

@@ -372,8 +372,7 @@ export const esES: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'Reset Password',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage: 'Your password was successfully changed. Signing you in, please wait a moment.',
       title: 'Set new password',
     },

packages/localizations/src/es-MX.ts

@@ -372,8 +372,7 @@ export const esMX: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'Reset Password',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage: 'Your password was successfully changed. Signing you in, please wait a moment.',
       title: 'Set new password',
     },

packages/localizations/src/fr-FR.ts

@@ -372,8 +372,7 @@ export const frFR: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'Réinitialiser',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage:
         'Votre mot de passe a été modifié avec succès. Nous vous reconnectons, veuillez patienter un instant.',
       title: 'Réinitialiser le mot de passe',

packages/localizations/src/he-IL.ts

@@ -368,8 +368,7 @@ export const heIL: LocalizationResource = {
     },
     resetPassword: {
       formButtonPrimary: 'אפס סיסמה',
-      requiredMessage:
-        'An account already exists with an unverified email address. Please reset your password for security.',
+      requiredMessage: 'For security reasons, it is required to reset your password.',
       successMessage: 'הסיסמה שלך שונתה בהצלחה. מחבר אותך, אנא המתן רגע.',
       title: 'אפס סיסמה',
     },