feat(clerk-js): Introduce 'passwordUntrusted' flow

Author: octoper

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();
@@ -92,9 +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();
+        if (onUntrustedPassword) {
+          // TODO(vaggelis): those will eventually be unified into a single error code
+          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;
+          }
           return;
         }
 

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-GB.ts

@@ -697,6 +697,9 @@ export const enGB: 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;