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.",

.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.",

.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.",

.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.",

.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.",

.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.",

.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.",

.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.",