Skip to content

fix(ui): remove back button from sign-in password compromised/pwned error screen #8280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ephem wants to merge 3 commits into
base: main
Choose a base branch
from
+9 −52
Open

fix(ui): remove back button from sign-in password compromised/pwned error screen #8280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd46bd3
Hide back button on sign-in password compromised/pwned screen
Ephem Apr 9, 2026
3a2b08b
Add changeset
Ephem Apr 9, 2026
18269d6
Remove no longer useful test
Ephem Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/pink-taxes-do.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@clerk/ui': patch
---

Remove back button on the sign-in password compromised/pwned error screen.

These errors are not recoverable by re-entering the password, so the back button led to a confusing dead end that would always take you back to the same error.
3 changes: 2 additions & 1 deletion packages/ui/src/components/SignIn/SignInFactorOne.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,8 @@ function SignInFactorOneInternal(): JSX.Element {
}

if (showAllStrategies || showForgotPasswordStrategies) {
const canGoBack = factorHasLocalStrategy(currentFactor);
// Password errors are not recoverable by re-entering the password, so we hide the back button
const canGoBack = factorHasLocalStrategy(currentFactor) && !passwordErrorCode;
Copy link
Copy Markdown
Contributor

@dmoerner dmoerner Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

passwordErrorCode is to me not a very clear name for this flag (it sounds more general than it is) but I confirmed that it is just a union of 'compromised' | 'pwned' so it's exactly what we want to check.


const toggle = showAllStrategies ? toggleAllStrategies : toggleForgotPasswordStrategies;
const backHandler = () => {
Expand Down
51 changes: 0 additions & 51 deletions packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,57 +303,6 @@ describe('SignInFactorOne', () => {
await screen.findByText('First, enter the code sent to your phone');
});

it('entering a pwned password, then going back and clicking forgot password should result in the correct title', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withEmailAddress();
f.withPassword();
f.withPreferredSignInStrategy({ strategy: 'password' });
f.startSignInWithEmailAddress({
supportPassword: true,
supportEmailCode: true,
supportResetPassword: true,
});
});
fixtures.signIn.prepareFirstFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource));

const errJSON = {
code: 'form_password_pwned',
long_message:
'Password has been found in an online data breach. For account safety, please reset your password.',
message: 'Password has been found in an online data breach. For account safety, please reset your password.',
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(
'This password has been found as part of a breach and can not be used, please reset your password.',
);
await screen.findByText('Or, sign in with another method');

// Go back
await userEvent.click(screen.getByText('Back'));

// Choose to reset password via "Forgot password" instead
await userEvent.click(screen.getByText(/Forgot password/i));
await screen.findByText('Forgot Password?');
expect(
screen.queryByText(
'This password has been found as part of a breach and can not be used, please reset your password.',
),
).not.toBeInTheDocument();
});

it('using an compromised password should show the compromised password screen', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withEmailAddress();
Expand Down
Loading