feat(clerk-js): Untrusted password screen for sign-in

.changeset/sweet-poets-sell.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+Introduce a new variant for the alternative methods screen to handle untrusted password error on sign-in

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

@@ -18,7 +18,7 @@ import { SignInSocialButtons } from './SignInSocialButtons';
 import { useResetPasswordFactor } from './useResetPasswordFactor';
 import { withHavingTrouble } from './withHavingTrouble';
 
-type AlternativeMethodsMode = 'forgot' | 'pwned' | 'default';
+export type AlternativeMethodsMode = 'forgot' | 'pwned' | 'passwordUntrusted' | 'default';
 
 export type AlternativeMethodsProps = {
   onBackLinkClick: React.MouseEventHandler | undefined;
@@ -55,7 +55,9 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
         <Card.Content>
           <Header.Root showLogo>
             <Header.Title localizationKey={cardTitleKey} />
-            {!isReset && <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />}
+            {!isReset && mode !== 'passwordUntrusted' && (
+              <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />
+            )}
           </Header.Root>
           <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
@@ -183,6 +185,8 @@ function determineFlowPart(mode: AlternativeMethodsMode) {
       return 'forgotPasswordMethods';
     case 'pwned':
       return 'passwordPwnedMethods';
+    case 'passwordUntrusted':
+      return 'passwordUntrustedMethods';
     default:
       return 'alternativeMethods';
   }
@@ -194,6 +198,8 @@ function determineTitle(mode: AlternativeMethodsMode): LocalizationKey {
       return localizationKeys('signIn.forgotPasswordAlternativeMethods.title');
     case 'pwned':
       return localizationKeys('signIn.passwordPwned.title');
+    case 'passwordUntrusted':
+      return localizationKeys('signIn.passwordPwned.title');
     default:
       return localizationKeys('signIn.alternativeMethods.title');
   }
@@ -204,6 +210,8 @@ function determineIsReset(mode: AlternativeMethodsMode): boolean {
     case 'forgot':
     case 'pwned':
       return true;
+    case 'passwordUntrusted':
+      return false;
     default:
       return false;
   }

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

@@ -11,6 +11,7 @@ import { useCoreSignIn, useEnvironment } from '../../contexts';
 import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';
 import { localizationKeys } from '../../localization';
 import { useRouter } from '../../router';
+import type { AlternativeMethodsMode } from './AlternativeMethods';
 import { AlternativeMethods } from './AlternativeMethods';
 import { hasMultipleEnterpriseConnections } from './shared';
 import { SignInFactorOneAlternativePhoneCodeCard } from './SignInFactorOneAlternativePhoneCodeCard';
@@ -19,6 +20,7 @@ import { SignInFactorOneEmailLinkCard } from './SignInFactorOneEmailLinkCard';
 import { SignInFactorOneEnterpriseConnections } from './SignInFactorOneEnterpriseConnections';
 import { SignInFactorOneForgotPasswordCard } from './SignInFactorOneForgotPasswordCard';
 import { SignInFactorOnePasskey } from './SignInFactorOnePasskey';
+import type { PasswordErrorCode } from './SignInFactorOnePasswordCard';
 import { SignInFactorOnePasswordCard } from './SignInFactorOnePasswordCard';
 import { SignInFactorOnePhoneCodeCard } from './SignInFactorOnePhoneCodeCard';
 import { useResetPasswordFactor } from './useResetPasswordFactor';
@@ -41,6 +43,25 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
   return key;
 };
 
+function determineAlternativeMethodsMode(
+  showForgotPasswordStrategies: boolean,
+  passwordErrorCode: PasswordErrorCode | null,
+): AlternativeMethodsMode {
+  if (!showForgotPasswordStrategies) {
+    return 'default';
+  }
+
+  if (passwordErrorCode === 'pwned') {
+    return 'pwned';
+  }
+
+  if (passwordErrorCode === 'untrusted') {
+    return 'passwordUntrusted';
+  }
+
+  return 'forgot';
+}
+
 function SignInFactorOneInternal(): JSX.Element {
   const { __internal_setActiveInProgress } = useClerk();
   const signIn = useCoreSignIn();
@@ -84,7 +105,7 @@ function SignInFactorOneInternal(): JSX.Element {
 
   const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);
 
-  const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);
+  const [passwordErrorCode, setPasswordErrorCode] = React.useState<PasswordErrorCode | null>(null);
 
   React.useEffect(() => {
     if (__internal_setActiveInProgress) {
@@ -139,11 +160,11 @@ function SignInFactorOneInternal(): JSX.Element {
     const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;
     const backHandler = () => {
       card.setError(undefined);
-      setIsPasswordPwned(false);
+      setPasswordErrorCode(null);
       toggle?.();
     };
 
-    const mode = showForgotPasswordStrategies ? (isPasswordPwned ? 'pwned' : 'forgot') : 'default';
+    const mode = determineAlternativeMethodsMode(showForgotPasswordStrategies, passwordErrorCode);
 
     return (
       <AlternativeMethods
@@ -175,8 +196,8 @@ function SignInFactorOneInternal(): JSX.Element {
         <SignInFactorOnePasswordCard
           onForgotPasswordMethodClick={resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies}
           onShowAlternativeMethodsClick={toggleAllStrategies}
-          onPasswordPwned={() => {
-            setIsPasswordPwned(true);
+          onPasswordError={errorCode => {
+            setPasswordErrorCode(errorCode);
             toggleForgotPasswordStrategies();
           }}
         />

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

@@ -1,4 +1,4 @@
-import { isPasswordPwnedError, isUserLockedError } from '@clerk/shared/error';
+import { isPasswordPwnedError, isPasswordUntrustedError, isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
@@ -18,10 +18,12 @@ import { useRouter } from '../../router/RouteContext';
 import { HavingTrouble } from './HavingTrouble';
 import { useResetPasswordFactor } from './useResetPasswordFactor';
 
+export type PasswordErrorCode = 'untrusted' | 'pwned';
+
 type SignInFactorOnePasswordProps = {
   onForgotPasswordMethodClick: React.MouseEventHandler | undefined;
   onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;
-  onPasswordPwned?: () => void;
+  onPasswordError?: (errorCode: PasswordErrorCode) => void;
 };
 
 const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
@@ -50,7 +52,7 @@ const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
 };
 
 export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
-  const { onShowAlternativeMethodsClick, onPasswordPwned } = props;
+  const { onShowAlternativeMethodsClick, onPasswordError } = props;
   const passwordInputRef = React.useRef<HTMLInputElement>(null);
   const card = useCardState();
   const { setActive } = useClerk();
@@ -64,20 +66,20 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   const clerk = useClerk();
 
   const goBack = () => {
-    return navigate('../');
+    void navigate('../');
   };
 
-  const handlePasswordSubmit: React.FormEventHandler = async e => {
+  const handlePasswordSubmit: React.FormEventHandler<HTMLFormElement> = e => {
     e.preventDefault();
-    return signIn
+    void signIn
       .attemptFirstFactor({ strategy: 'password', password: passwordControl.value })
       .then(res => {
         switch (res.status) {
           case 'complete':
             return setActive({
               session: res.createdSessionId,
-              navigate: async ({ session }) => {
-                await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
+              navigate: ({ session }) => {
+                void navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
               },
             });
           case 'needs_second_factor':
@@ -92,10 +94,18 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
           return clerk.__internal_navigateWithError('..', err.errors[0]);
         }
 
-        if (isPasswordPwnedError(err) && onPasswordPwned) {
-          card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' });
-          onPasswordPwned();
-          return;
+        if (onPasswordError) {
+          if (isPasswordPwnedError(err)) {
+            card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' });
+            onPasswordError('pwned');
+            return;
+          }
+
+          if (isPasswordUntrustedError(err)) {
+            card.setError({ ...err.errors[0], code: 'form_password_untrusted__sign_in' });
+            onPasswordError('untrusted');
+            return;
+          }
         }
 
         handleError(err, [passwordControl], card.setError);

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

@@ -352,6 +352,84 @@ describe('SignInFactorOne', () => {
           ),
         ).not.toBeInTheDocument();
       });
+
+      it('using an untrusted password should show the untrusted password screen', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.startSignInWithEmailAddress({
+            supportEmailCode: true,
+            supportPassword: true,
+            supportResetPassword: true,
+          });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'form_password_untrusted',
+          long_message:
+            "Your password appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+          message:
+            "Your password appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+          meta: { param_name: 'password' },
+        };
+
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.type(screen.getByLabelText('Password'), '123456');
+        await userEvent.click(screen.getByText('Continue'));
+
+        await screen.findByText('Password compromised');
+        await screen.findByText(
+          "Your password appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+        );
+
+        await screen.findByText('Email code to hello@clerk.com');
+      });
+
+      it('Prompts the user to use a different method if the password is untrusted', async () => {
+        const { wrapper, fixtures } = await createFixtures(f => {
+          f.withEmailAddress();
+          f.withPassword();
+          f.withPreferredSignInStrategy({ strategy: 'password' });
+          f.withSocialProvider({ provider: 'google', authenticatable: true });
+          f.startSignInWithEmailAddress({
+            supportEmailCode: true,
+            supportPassword: true,
+            supportResetPassword: true,
+          });
+        });
+        fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+        const errJSON = {
+          code: 'form_password_untrusted',
+          long_message:
+            "Your password appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+          message:
+            "Your password appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+          meta: { param_name: 'password' },
+        };
+
+        fixtures.signIn.attemptFirstFactor.mockRejectedValueOnce(
+          new ClerkAPIResponseError('Error', {
+            data: [errJSON],
+            status: 422,
+          }),
+        );
+        const { userEvent } = render(<SignInFactorOne />, { wrapper });
+        await userEvent.type(screen.getByLabelText('Password'), '123456');
+        await userEvent.click(screen.getByText('Continue'));
+
+        await screen.findByText('Password compromised');
+        await userEvent.click(screen.getByText('Email code to hello@clerk.com'));
+        await screen.findByText('Check your email');
+      });
     });
 
     describe('Forgot Password', () => {

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -120,6 +120,7 @@ export type FlowMetadata = {
     | 'alternativeMethods'
     | 'forgotPasswordMethods'
     | 'passwordPwnedMethods'
+    | 'passwordUntrustedMethods'
     | 'havingTrouble'
     | 'ssoCallback'
     | 'popupCallback'

packages/localizations/src/ar-SA.ts

@@ -693,6 +693,9 @@ export const arSA: LocalizationResource = {
     passwordPwned: {
       title: 'كلمة المرور غير آمنة',
     },
+    passwordUntrusted: {
+      title: undefined,
+    },
     phoneCode: {
       formTitle: 'رمز التحقق',
       resendButton: 'لم يصلك الرمز؟ حاول مرة أخرى',
@@ -895,6 +898,7 @@ export const arSA: LocalizationResource = {
     form_password_pwned__sign_in: 'لا يمكن أستعمال كلمة السر هذه لانها غير أمنة, الرجاء اختيار كلمة مرور أخرى',
     form_password_size_in_bytes_exceeded:
       'تجاوزت كلمة المرور الحد الأقصى للحروف المدخلة, الرجاء أدخال كلمة مرور أقصر أو حذف بعض الأحرف الخاصة',
+    form_password_untrusted__sign_in: undefined,
     form_password_validation_failed: 'كلمة مرور خاطئة',
     form_username_invalid_character: undefined,
     form_username_invalid_length: undefined,

packages/localizations/src/be-BY.ts

@@ -700,6 +700,9 @@ export const beBY: LocalizationResource = {
     passwordPwned: {
       title: 'Пароль быў узламаны',
     },
+    passwordUntrusted: {
+      title: undefined,
+    },
     phoneCode: {
       formTitle: 'Код верыфікацыі',
       resendButton: 'Пераадправіць код',
@@ -904,6 +907,7 @@ export const beBY: LocalizationResource = {
     form_password_pwned__sign_in: 'Гэты пароль быў узламаны, калі ласка, абярыце іншы.',
     form_password_size_in_bytes_exceeded:
       'Ваш пароль перавышае максімальна дапушчальнае колькасць байтаў, скараціце яго або выдаліце некаторыя спецыяльныя сімвалы.',
+    form_password_untrusted__sign_in: undefined,
     form_password_validation_failed: 'Неверагодны пароль',
     form_username_invalid_character: 'Імя карыстальніка змяшчае недапушчальныя сімвалы.',
     form_username_invalid_length: 'Імя карыстальніка павінна быць ад 3 да 50 сімвалаў.',

packages/localizations/src/bg-BG.ts

@@ -696,6 +696,9 @@ export const bgBG: LocalizationResource = {
     passwordPwned: {
       title: undefined,
     },
+    passwordUntrusted: {
+      title: undefined,
+    },
     phoneCode: {
       formTitle: 'Код за потвърждение',
       resendButton: 'Не сте получили код? Изпрати отново',
@@ -897,6 +900,7 @@ export const bgBG: LocalizationResource = {
     form_password_pwned: 'Тази парола е компрометирана в изтекли данни. Моля, изберете друга.',
     form_password_pwned__sign_in: undefined,
     form_password_size_in_bytes_exceeded: 'Паролата ви е твърде дълга. Моля, съкратете я.',
+    form_password_untrusted__sign_in: undefined,
     form_password_validation_failed: 'Невалидна парола.',
     form_username_invalid_character: 'Потребителското име съдържа невалидни символи.',
     form_username_invalid_length: 'Потребителското име трябва да бъде между 3 и 256 символа.',

packages/localizations/src/bn-IN.ts

@@ -699,6 +699,9 @@ export const bnIN: LocalizationResource = {
     passwordPwned: {
       title: 'পাসওয়ার্ড সমঝোতা হয়েছে',
     },
+    passwordUntrusted: {
+      title: undefined,
+    },
     phoneCode: {
       formTitle: 'যাচাইকরণ কোড',
       resendButton: 'কোনো কোড পাননি? পুনরায় পাঠান',
@@ -906,6 +909,7 @@ export const bnIN: LocalizationResource = {
       'এই পাসওয়ার্ডটি একটি ডেটা লঙ্ঘনের অংশ হিসাবে পাওয়া গেছে এবং ব্যবহার করা যাবে না, দয়া করে আপনার পাসওয়ার্ড রিসেট করুন।',
     form_password_size_in_bytes_exceeded:
       'আপনার পাসওয়ার্ড অনুমোদিত সর্বাধিক বাইট সংখ্যা অতিক্রম করেছে, দয়া করে এটি ছোট করুন বা কিছু বিশেষ অক্ষর সরান।',
+    form_password_untrusted__sign_in: undefined,
     form_password_validation_failed: 'ভুল পাসওয়ার্ড',
     form_username_invalid_character:
       'আপনার ব্যবহারকারীর নামে অবৈধ অক্ষর রয়েছে। দয়া করে শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর ব্যবহার করুন।',

packages/localizations/src/ca-ES.ts

@@ -696,6 +696,9 @@ export const caES: LocalizationResource = {
     passwordPwned: {
       title: undefined,
     },
+    passwordUntrusted: {
+      title: undefined,
+    },
     phoneCode: {
       formTitle: 'Codi de verificació',
       resendButton: 'No has rebut el codi? Reenvia',
@@ -899,6 +902,7 @@ export const caES: LocalizationResource = {
     form_password_pwned__sign_in: undefined,
     form_password_size_in_bytes_exceeded:
       'La teva contrasenya ha superat el nombre màxim de bytes permesos, si us plau, redueix-la o elimina alguns caràcters especials.',
+    form_password_untrusted__sign_in: undefined,
     form_password_validation_failed: 'Contrasenya incorrecta',
     form_username_invalid_character: "El nom d'usuari conté caràcters no vàlids.",
     form_username_invalid_length: "El nom d'usuari ha de tenir entre 3 i 50 caràcters.",