feat(clerk-js,localizations,shared,types): Prompt user to reset pwned…

… password at sign-in

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

@@ -17,6 +17,7 @@ export type AlternativeMethodsProps = {
   onFactorSelected: (factor: SignInFactor) => void;
   currentFactor: SignInFactor | undefined | null;
   asForgotPassword?: boolean;
+  isPasswordPwned?: boolean;
 };
 
 export type AlternativeMethodListProps = AlternativeMethodsProps & { onHavingTroubleClick: React.MouseEventHandler };
@@ -28,23 +29,31 @@ export const AlternativeMethods = (props: AlternativeMethodsProps) => {
 };
 
 const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
-  const { onBackLinkClick, onHavingTroubleClick, onFactorSelected, asForgotPassword = false } = props;
+  const {
+    onBackLinkClick,
+    onHavingTroubleClick,
+    onFactorSelected,
+    asForgotPassword = false,
+    isPasswordPwned = false,
+  } = props;
   const card = useCardState();
   const resetPasswordFactor = useResetPasswordFactor();
   const { firstPartyFactors, hasAnyStrategy } = useAlternativeStrategies({
     filterOutFactor: props?.currentFactor,
   });
 
+  const cardTitleKey = asForgotPassword
+    ? isPasswordPwned
+      ? 'signIn.passwordPwned.title'
+      : 'signIn.forgotPasswordAlternativeMethods.title'
+    : 'signIn.alternativeMethods.title';
+
   return (
     <Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Header.Title
-              localizationKey={localizationKeys(
-                asForgotPassword ? 'signIn.forgotPasswordAlternativeMethods.title' : 'signIn.alternativeMethods.title',
-              )}
-            />
+            <Header.Title localizationKey={localizationKeys(cardTitleKey)} />
             {!asForgotPassword && (
               <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />
             )}

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

@@ -58,6 +58,8 @@ export function _SignInFactorOne(): JSX.Element {
 
   const [showForgotPasswordStrategies, setShowForgotPasswordStrategies] = React.useState(false);
 
+  const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);
+
   React.useEffect(() => {
     // Handle the case where a user lands on alternative methods screen,
     // clicks a social button but then navigates back to sign in.
@@ -98,6 +100,7 @@ export function _SignInFactorOne(): JSX.Element {
     return (
       <AlternativeMethods
         asForgotPassword={showForgotPasswordStrategies}
+        isPasswordPwned={isPasswordPwned}
         onBackLinkClick={canGoBack ? toggle : undefined}
         onFactorSelected={f => {
           selectFactor(f);
@@ -135,6 +138,10 @@ export function _SignInFactorOne(): JSX.Element {
           }}
           onForgotPasswordMethodClick={resetPasswordFactor ? toggleForgotPasswordStrategies : toggleAllStrategies}
           onShowAlternativeMethodsClick={toggleAllStrategies}
+          onPasswordPwned={() => {
+            setIsPasswordPwned(true);
+            toggleForgotPasswordStrategies();
+          }}
         />
       );
     case 'email_code':

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

@@ -1,4 +1,4 @@
-import { isUserLockedError } from '@clerk/shared/error';
+import { isPasswordPwnedError, isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { ResetPasswordCodeFactor } from '@clerk/types';
 import React from 'react';
@@ -17,6 +17,7 @@ type SignInFactorOnePasswordProps = {
   onForgotPasswordMethodClick: React.MouseEventHandler | undefined;
   onShowAlternativeMethodsClick: React.MouseEventHandler | undefined;
   onFactorPrepare: (f: ResetPasswordCodeFactor) => void;
+  onPasswordPwned?: () => void;
 };
 
 const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
@@ -40,12 +41,13 @@ const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
         : onShowAlternativeMethodsClick
         ? onShowAlternativeMethodsClick
         : () => null,
+      // onPasswordPwned,
     },
   };
 };
 
 export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
-  const { onShowAlternativeMethodsClick } = props;
+  const { onShowAlternativeMethodsClick, onPasswordPwned } = props;
   const card = useCardState();
   const { setActive } = useClerk();
   const signIn = useCoreSignIn();
@@ -58,6 +60,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   const clerk = useClerk();
 
   const goBack = () => {
+    card.setError(undefined);
     return navigate('../');
   };
 
@@ -83,6 +86,14 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
           return clerk.__internal_navigateWithError('..', err.errors[0]);
         }
 
+        if (isPasswordPwnedError(err)) {
+          if (onPasswordPwned) {
+            card.setError({ ...err.errors[0], code: err.errors[0].code + '__sign_in' });
+            onPasswordPwned();
+            return;
+          }
+        }
+
         handleError(err, [passwordControl], card.setError);
       });
   };

packages/localizations/src/en-US.ts

@@ -347,6 +347,9 @@ export const enUS: LocalizationResource = {
       subtitle: 'Enter the password associated with your account',
       title: 'Enter your password',
     },
+    passwordPwned: {
+      title: 'Insecure password',
+    },
     passkey: {
       title: 'Use your passkey',
       subtitle: "Using your passkey confirms it's you. Your device may ask for your fingerprint, face or screen lock.",
@@ -457,6 +460,8 @@ export const enUS: LocalizationResource = {
     form_password_not_strong_enough: 'Your password is not strong enough.',
     form_password_pwned:
       'This password has been found as part of a breach and can not be used, please try another password instead.',
+    form_password_pwned__sign_in:
+      'This password has been found as part of a breach and can not be used, please reset your password.',
     form_password_size_in_bytes_exceeded:
       'Your password has exceeded the maximum number of bytes allowed, please shorten it or remove some special characters.',
     form_password_validation_failed: 'Incorrect Password',

packages/shared/src/error.ts

@@ -67,6 +67,10 @@ export function isUserLockedError(err: any) {
   return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'user_locked';
 }
 
+export function isPasswordPwnedError(err: any) {
+  return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'form_password_pwned';
+}
+
 export function parseErrors(data: ClerkAPIErrorJSON[] = []): ClerkAPIError[] {
   return data.length > 0 ? data.map(parseError) : [];
 }

packages/types/src/localization.ts

@@ -157,6 +157,9 @@ type _LocalizationResource = {
       subtitle: LocalizationValue;
       actionLink: LocalizationValue;
     };
+    passwordPwned: {
+      title: LocalizationValue;
+    };
     passkey: {
       title: LocalizationValue;
       subtitle: LocalizationValue;
@@ -724,6 +727,7 @@ type UnstableErrors = WithParamName<{
   captcha_unavailable: LocalizationValue;
   captcha_invalid: LocalizationValue;
   form_password_pwned: LocalizationValue;
+  form_password_pwned__sign_in: LocalizationValue;
   form_username_invalid_length: LocalizationValue;
   form_username_invalid_character: LocalizationValue;
   form_param_format_invalid: LocalizationValue;