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';
@@ -41,6 +42,25 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
   return key;
 };
 
+function determineAlternativeMethodsMode(
+  showForgotPasswordStrategies: boolean,
+  untrustedPasswordErrorCode: string | null,
+): AlternativeMethodsMode {
+  if (!showForgotPasswordStrategies) {
+    return 'default';
+  }
+
+  if (untrustedPasswordErrorCode === 'form_password_pwned__sign_in') {
+    return 'pwned';
+  }
+
+  if (untrustedPasswordErrorCode === 'form_password_untrusted__sign_in') {
+    return 'passwordUntrusted';
+  }
+
+  return 'forgot';
+}
+
 function SignInFactorOneInternal(): JSX.Element {
   const { __internal_setActiveInProgress } = useClerk();
   const signIn = useCoreSignIn();
@@ -84,7 +104,7 @@ function SignInFactorOneInternal(): JSX.Element {
 
   const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);
 
-  const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);
+  const [untrustedPasswordErrorCode, setUntrustedPasswordErrorCode] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     if (__internal_setActiveInProgress) {
@@ -139,11 +159,11 @@ function SignInFactorOneInternal(): JSX.Element {
     const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;
     const backHandler = () => {
       card.setError(undefined);
-      setIsPasswordPwned(false);
+      setUntrustedPasswordErrorCode(null);
       toggle?.();
     };
 
-    const mode = showForgotPasswordStrategies ? (isPasswordPwned ? 'pwned' : 'forgot') : 'default';
+    const mode = determineAlternativeMethodsMode(showForgotPasswordStrategies, untrustedPasswordErrorCode);
 
     return (
       <AlternativeMethods
@@ -175,8 +195,8 @@ function SignInFactorOneInternal(): JSX.Element {
         <SignInFactorOnePasswordCard
           onForgotPasswordMethodClick={resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies}
           onShowAlternativeMethodsClick={toggleAllStrategies}
-          onPasswordPwned={() => {
-            setIsPasswordPwned(true);
+          onUntrustedPassword={errorCode => {
+            setUntrustedPasswordErrorCode(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';
 
@@ -21,7 +21,7 @@ import { useResetPasswordFactor } from './useResetPasswordFactor';
 type SignInFactorOnePasswordProps = {
   onForgotPasswordMethodClick: React.MouseEventHandler | undefined;
   onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;
-  onPasswordPwned?: () => void;
+  onUntrustedPassword?: (errorCode: string) => void;
 };
 
 const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
@@ -50,7 +50,7 @@ const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
 };
 
 export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
-  const { onShowAlternativeMethodsClick, onPasswordPwned } = props;
+  const { onShowAlternativeMethodsClick, onUntrustedPassword } = props;
   const passwordInputRef = React.useRef<HTMLInputElement>(null);
   const card = useCardState();
   const { setActive } = useClerk();
@@ -64,20 +64,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 +92,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 (onUntrustedPassword) {
+          if (isPasswordPwnedError(err)) {
+            card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' });
+            onUntrustedPassword('form_password_pwned__sign_in');
+            return;
+          }
+
+          if (isPasswordUntrustedError(err)) {
+            card.setError({ ...err.errors[0], code: 'form_password_untrusted__sign_in' });
+            onUntrustedPassword('form_password_untrusted__sign_in');
+            return;
+          }
         }
 
         handleError(err, [passwordControl], card.setError);

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

@@ -1003,4 +1003,89 @@ describe('SignInFactorOne', () => {
       });
     });
   });
+
+  describe('Password untrusted', () => {
+    it('it shows the untrusted password screen if the users 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 appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+        message:
+          "Your 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 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 [email protected]');
+      await screen.findByText('Continue with Google');
+    });
+
+    it('clicking the email code method should prompt the user to verify their email', 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,
+          supportEmailLink: true,
+        });
+      });
+      fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));
+
+      const errJSON = {
+        code: 'form_password_untrusted',
+        long_message:
+          "Your appears to have been compromised or it's no longer trusted and cannot be used. Please use another method to continue.",
+        message:
+          "Your 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, debug } = render(<SignInFactorOne />, { wrapper });
+      await userEvent.type(screen.getByLabelText('Password'), '123456');
+      await userEvent.click(screen.getByText('Continue'));
+
+      console.log(debug());
+
+      await screen.findByText('Password compromised');
+      await userEvent.click(screen.getByText('Email code to [email protected]'));
+      await screen.findByText('Check your email');
+    });
+  });
 });

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/en-US.ts

@@ -694,6 +694,9 @@ export const enUS: LocalizationResource = {
     passwordPwned: {
       title: 'Password compromised',
     },
+    passwordUntrusted: {
+      title: 'Password compromised',
+    },
     phoneCode: {
       formTitle: 'Verification code',
       resendButton: "Didn't receive a code? Resend",

packages/shared/src/error.ts

@@ -24,6 +24,7 @@ export {
   isMetamaskError,
   isNetworkError,
   isPasswordPwnedError,
+  isPasswordUntrustedError,
   isReverificationCancelledError,
   isUnauthorizedError,
   isUserLockedError,

packages/shared/src/errors/helpers.ts

@@ -120,6 +120,15 @@ export function isPasswordPwnedError(err: any) {
   return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'form_password_pwned';
 }
 
+/**
+ * Checks if the provided error is a clerk api response error indicating a password was pwned.
+ *
+ * @internal
+ */
+export function isPasswordUntrustedError(err: any) {
+  return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'form_password_untrusted';
+}
+
 /**
  * Checks if the provided error is an EmailLinkError.
  *

packages/shared/src/types/localization.ts

@@ -400,6 +400,9 @@ export type __internal_LocalizationResource = {
     passwordPwned: {
       title: LocalizationValue;
     };
+    passwordUntrusted: {
+      title: LocalizationValue;
+    };
     passkey: {
       title: LocalizationValue;
       subtitle: LocalizationValue;