clerk / clerk/javascript

Bug: <SignUp/> incorrectly formats form_password_matches_identifier as a complexity error.

Open
#9,478 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-triage
Dominant language
TypeScript
Stars
1.8k
Forks
472
Avg merge
2d 11h
Merged PRs (30d)
189

Description

Preliminary Checks
Reproduction

This issue occurs out-of-the-box on any standard Next.js setup using the core component, no special reproduction repository is needed as it relies on the core component's default error handling logic.

Publishable key

pk_test_Z3JhdGVmdWwtaGFyZS04Mi5jbGVyay5hY2NvdW50cy5kZXYk

Description

Description:
When a user attempts to sign up with a password that is identical to their username or email, the backend correctly rejects it with a 422 containing the form_password_matches_identifier code.
However, the component appears to intercept this as a password complexity (zxcvbn) error because meta.param_name === "password". Because this specific API error does not return a meta.requirement field, the component seems to pass undefined to the passwordComplexity localizer.
(If this is intended behavior or a misconfiguration on my end, please let me know!)

Steps to reproduce:

  1. Mount a standard component on a fresh Next.js install.
  2. Enter an email address (e.g., test@example.com).
  3. Enter a password that exactly matches the email address (test@example.com).
  4. Complete any remaining required fields (e.g., username, legal consent).
  5. Submit the form.
  6. Observe the UI error under the password field.

Expected behavior:
I would expect the component to recognize form_password_matches_identifier as a standard form error rather than grouping it under passwordComplexity, and render the unstable__errors.form_password_matches_identifier localization string directly (e.g., "Password cannot be the same as your email.").

Actual behavior:
The component appears to fail to format a complexity requirement, resulting in a glitched UI string built from passwordComplexity.sentencePrefix + "" + ".". The UI renders the error: "Your password must contain ."

Additional context:
While the attached screenshot shows a customized screen using Clerk's appearance props and localization, I have done my best to verify that this glitch is not caused by any of my custom overrides. It seems to be a bug in the core SDK's error mapping for form_password_matches_identifier that occurs even on a completely vanilla component.
Image

Environment
System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor            
    Memory: 3.00 GB / 15.94 GB
  Binaries:
    Node: 24.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 151.0.7922.138
    Edge: Chromium (151.0.4129.86)
  npmPackages:
    @clerk/nextjs: ^7.5.20 => 7.5.20 
    @clerk/themes: ^2.4.57 => 2.4.57 
    @clerk/ui: ^1.25.7 => 1.27.1 
    next: ^16.2.10 => 16.2.12 
    react: ^19.2.7 => 19.2.7 
    react-dom: ^19.2.7 => 19.2.7

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the core component's default error-handling path in a standard Next.js setup, focusing on mapping form_password_matches_identifier when meta.param_name is password. Reproduce the reported submission and trace the passwordComplexity localization path; done means the form renders unstable__errors.form_password_matches_identifier directly instead of the malformed complexity message.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
authentication, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.