[Bug] @clerk/elements: Password validation messages ignore localization #7523
Description
Description
The Clerk.FieldState component in @clerk/elements returns password validation messages in English regardless of the localization configured in ClerkProvider.
Environment
@clerk/elements: 0.24.2@clerk/nextjs: 6.36.5@clerk/localizations: 3.32.1- Framework: Next.js 15 (App Router)
Steps to Reproduce
- Configure
ClerkProviderwith Portuguese (Brazil) localization:
import { ptBR } from '@clerk/localizations/pt-BR';
<ClerkProvider localization={ptBR}>
{children}
</ClerkProvider>- Use
Clerk.FieldStatewithvalidatePasswordon a password input:
<Clerk.Field name="password">
<Clerk.Input type="password" validatePassword />
<Clerk.FieldState>
{({ message }) => <p>{message}</p>}
</Clerk.FieldState>
</Clerk.Field>- Type a short password (e.g., "123")
Expected Behavior
The message should be localized:
"Sua senha deve conter 8 ou mais caracteres."
(Using the translations from @clerk/localizations:)
passwordComplexity: {
sentencePrefix: "Sua senha deve conter",
minimumLength: "{{length}} ou mais caracteres",
// ...
}Actual Behavior
The message is always in English:
"Your password must contain 8 or more characters."
Root Cause
Found in @clerk/elements/dist/chunk-PE76OBP4.mjs:
// Hardcoded English strings
var errorMessages = {
min_length: ["%length% or more characters", "length"],
require_numbers: "a number",
require_lowercase: "a lowercase letter",
require_uppercase: "an uppercase letter",
require_special_char: "a special character"
};
// Hardcoded English formatter
const formatter = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
// Hardcoded English prefix
return {
codes,
message: \`Your password must contain \${messageWithPrefix}.\`
};The generatePasswordErrorText function does not use the localization keys from @clerk/localizations (unstable__errors.passwordComplexity).
Suggested Fix
The function should use the localization context to get translated strings instead of hardcoded English values.
Workaround
Currently using the codes array from FieldState to build our own localized message, but this duplicates the logic that should be handled by Clerk.