feat(clerk-js): Untrusted password screen for sign-in #7331
Conversation
🦋 Changeset detectedLatest commit: a09bc8a The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds an untrusted-password sign-in path: new AlternativeMethods mode, propagation of a password "untrusted" error from the password card through SignInFactorOne, a new isPasswordUntrustedError helper/export, localization keys for the new error, tests, and a changeset bumping related packages. Changes
sequenceDiagram
autonumber
actor User
participant SignInFactorOne as SignInFactorOne
participant PasswordCard as SignInFactorOnePasswordCard
participant Shared as shared/errors
participant Alternative as AlternativeMethods
User->>SignInFactorOne: submit password
SignInFactorOne->>PasswordCard: invoke submit handler
PasswordCard->>Shared: call signIn API
alt API returns form_password_untrusted
Shared-->>PasswordCard: error (form_password_untrusted)
PasswordCard-->>SignInFactorOne: onPasswordError("untrusted")
SignInFactorOne->>Alternative: determineAlternativeMethodsMode(..., "untrusted")
Alternative-->>User: render passwordUntrusted UI + alt methods
else API returns form_password_pwned
Shared-->>PasswordCard: error (form_password_pwned)
PasswordCard-->>SignInFactorOne: onPasswordError("pwned")
SignInFactorOne->>Alternative: determineAlternativeMethodsMode(..., "pwned")
Alternative-->>User: render pwned UI + alt methods
else success
PasswordCard-->>SignInFactorOne: proceed to next step
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
Comment |
…directOptions parameter
…ct token is emitted on updates
octoper
force-pushed
the
vaggelis/user-4007-dont-allow-untrusted-passwords-to-be-able-to-sign-in
branch
from
2566609 to
d16cae5
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/localizations/src/en-US.ts (1)
697-699: Consider distinct messaging for passwordUntrusted.The
passwordUntrustedtitle is identical topasswordPwned("Password compromised"). While this may be intentional for simplicity, these represent different scenarios:
passwordPwned: Password found in a known data breachpasswordUntrusted: Password no longer trusted for other reasonsMore specific messaging could help users better understand the situation and appropriate next steps.
Example alternative:
passwordUntrusted: { title: 'Password no longer valid', },packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (1)
95-107: Consider extracting error code constants to prevent typos.The error codes
'form_password_pwned__sign_in'and'form_password_untrusted__sign_in'are hardcoded string literals. Consider extracting these to constants or an enum to ensure consistency and prevent typos across the codebase.Example:
const SIGN_IN_ERROR_CODES = { PASSWORD_PWNED: 'form_password_pwned__sign_in', PASSWORD_UNTRUSTED: 'form_password_untrusted__sign_in', } as const;Then use:
- card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' }); - onUntrustedPassword('form_password_pwned__sign_in'); + card.setError({ ...err.errors[0], code: SIGN_IN_ERROR_CODES.PASSWORD_PWNED }); + onUntrustedPassword(SIGN_IN_ERROR_CODES.PASSWORD_PWNED);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (10)
.changeset/sweet-poets-sell.md(1 hunks)packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx(5 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(5 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx(5 hunks)packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(1 hunks)packages/shared/src/error.ts(1 hunks)packages/shared/src/errors/helpers.ts(1 hunks)packages/shared/src/types/localization.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should be written in camelCase
Use useCardState for card-level state management
Use useFormState for form-level state management
Use useLoadingStatus for managing loading states
Use useFormControl hook for form field state management with validation and localization support
All rendered values must be localized using useLocalizations hook - hard coded values are not allowed
Use localizationKeys for translating UI text with support for parameters and error messages
Use handleError utility for API error handling and provide field states for proper error mapping
Use the styled system sx prop with theme tokens for custom styling instead of inline styles
Use the Card component pattern with Card.Root, Card.Header, Card.Title, Card.Content, and Card.Footer for consistent card layouts
Use FormContainer with headerTitle and headerSubtitle localization keys combined with Form.Root and FormButtons for consistent form layouts
When form submission occurs, manage loading and error states by calling status.setLoading(), card.setLoading(), and card.setError() appropriately
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Prefer importing types from
@clerk/shared/typesinstead of the deprecated@clerk/typesalias
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs
Use tree-shaking friendly exports
Validate all inputs and sanitize outputs
All public APIs must be documented with JSDoc
Use dynamic imports for optional features
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components
Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components
Leverage TypeScript's type inference where possible in React components
Use proper event types for handlers in React components
Implement proper generic types for reusable React components
Use proper type guards for conditional rendering in React components
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components (e.g.,UserProfile,NavigationMenu)
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Separate UI components from business logic components
Use useState for simple state management in React components
Use useReducer for complex state logic in React components
Implement proper state initialization in React components
Use proper state updates with callbacks in React components
Implement proper state cleanup in React components
Use Context API for theme/authentication state management
Implement proper state persistence in React applications
Use React.memo for expensive components
Implement proper useCallback for handlers in React components
Use proper useMemo for expensive computations in React components
Implement proper virtualization for lists in React components
Use proper code splitting with React.lazy in React applications
Implement proper cleanup in useEffect hooks
Use proper refs for DOM access in React components
Implement proper event listener cleanup in React components
Use proper abort controllers for fetch in React components
Implement proper subscription cleanup in React components
Use proper HTML elements for semantic HTML in React components
Implement proper ARIA attributes for accessibility in React components
Use proper heading hierarchy in React components
Implement proper form labels in React components
Use proper button types in React components
Implement proper focus management for keyboard navigation in React components
Use proper keyboard shortcuts in React components
Implement proper tab order in React components
Use proper ...
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Implement type guards forunknowntypes using the patternfunction isType(value: unknown): value is Type
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details in classes
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Use mixins for shared behavior across unrelated classes in TypeScript
Use generic constraints with bounded type parameters like<T extends { id: string }>
Use utility types likeOmit,Partial, andPickfor data transformation instead of manual type construction
Use discriminated unions instead of boolean flags for state management and API responses
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation at the type level
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Document functions with JSDoc comments including @param, @returns, @throws, and @example tags
Create custom error classes that extend Error for specific error types
Use the Result pattern for error handling instead of throwing exceptions
Use optional chaining (?.) and nullish coalescing (??) operators for safe property access
Let TypeScript infer obvious types to reduce verbosity
Useconst assertionswithas constfor literal types
Usesatisfiesoperator for type checking without widening types
Declare readonly arrays and objects for immutable data structures
Use spread operator and array spread for immutable updates instead of mutations
Use lazy loading for large types...
Files:
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsxpackages/shared/src/types/localization.tspackages/localizations/src/en-US.tspackages/shared/src/errors/helpers.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/shared/src/error.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
packages/localizations/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
packages/localizations/**: Localization support must include translations for 30+ languages using a modular localization system
Support RTL languages in the localization system
Files:
packages/localizations/src/en-US.ts
**/*.{test,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{test,spec}.{ts,tsx,js,jsx}: Unit tests are required for all new functionality
Verify proper error handling and edge cases
Include tests for all new features
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{test,spec,e2e}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use real Clerk instances for integration tests
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.test.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use React Testing Library for component testing
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{test,spec}.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{test,spec}.{jsx,tsx}: Use React Testing Library for unit testing React components
Test component behavior, not implementation details
Use proper test queries in React Testing Library tests
Implement proper test isolation in React component tests
Use proper test coverage in React component tests
Test component interactions in integration tests
Use proper test data in React component tests
Implement proper test setup in React component tests
Use proper test cleanup in React component tests
Implement proper test assertions in React component tests
Use proper test structure for React component tests
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
🧬 Code graph analysis (4)
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx (1)
packages/clerk-js/src/ui/elements/Header.tsx (1)
Header(103-108)
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx (4)
packages/shared/src/types/signIn.ts (1)
SignInResource(35-93)packages/clerk-js/src/index.headless.ts (1)
ClerkAPIResponseError(6-6)packages/clerk-js/src/index.ts (1)
ClerkAPIResponseError(7-7)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (1)
SignInFactorOne(285-287)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (1)
packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx (1)
AlternativeMethodsMode(21-21)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (1)
packages/shared/src/errors/helpers.ts (2)
isPasswordPwnedError(119-121)isPasswordUntrustedError(128-130)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (17)
packages/shared/src/types/localization.ts (1)
403-405: LGTM! Consistent with existing pattern.The new
passwordUntrustedlocalization key follows the same structure aspasswordPwned, which maintains consistency in the codebase..changeset/sweet-poets-sell.md (1)
1-7: LGTM! Well-structured changeset.The changeset properly identifies the affected packages and provides a clear description of the feature being introduced.
packages/shared/src/error.ts (1)
17-31: LGTM! Export properly added.The new
isPasswordUntrustedErrorexport is correctly added in alphabetical order and follows the established pattern for error helper exports.packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
107-132: LGTM! Type properly extended.The new
passwordUntrustedMethodsflow part is correctly added to the union type and logically positioned next to the relatedpasswordPwnedMethods.packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx (3)
21-21: LGTM! Type properly extended.The
AlternativeMethodsModetype is correctly extended to include the newpasswordUntrustedmode.
58-60: LGTM! Subtitle correctly hidden for passwordUntrusted mode.The conditional logic appropriately hides the subtitle when in
passwordUntrustedmode, providing a cleaner UI for this error state similar to the password reset flows.
182-218: LGTM! Logic correctly handles the passwordUntrusted mode.The helper functions appropriately handle the new mode. Note the key behavioral difference:
passwordPwned(isReset=true): Shows "Reset your password" button followed by alternative methodspasswordUntrusted(isReset=false): Shows only alternative methods without the reset optionThis distinction makes sense if an untrusted password cannot be reset and requires alternative authentication.
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx (1)
1007-1048: LGTM! Comprehensive test coverage for untrusted password flow.The test properly validates:
- Error handling for
form_password_untrustedresponse- UI displays "Password compromised" title
- Error message is shown to user
- Alternative authentication methods are presented
The test follows the established pattern from the
passwordPwnedtests.packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (4)
1-1: LGTM! Import addition is correct.The addition of
isPasswordUntrustedErroraligns with the new untrusted password handling flow.
24-24: Note: Breaking change to component's public API.The prop signature changed from
onPasswordPwned?: () => voidtoonUntrustedPassword?: (errorCode: string) => void. This is a breaking change but provides better flexibility by passing the specific error code to the parent component.
67-67: LGTM! Explicit void usage improves clarity.The addition of
voidkeywords makes it explicit that these promises are intentionally not awaited, which follows TypeScript best practices.Also applies to: 72-72, 79-81
70-70: LGTM! More specific type annotation.Specifying
React.FormEventHandler<HTMLFormElement>instead of the genericReact.FormEventHandlerimproves type safety.packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (5)
14-14: LGTM! Type import is necessary.The import of
AlternativeMethodsModetype is required for the new helper function.
107-107: LGTM! State type change improves flexibility.Changing from
isPasswordPwned: booleantountrustedPasswordErrorCode: string | nullallows tracking the specific error code, which is more flexible and supports both pwned and untrusted password scenarios.
162-162: LGTM! Proper state cleanup on back navigation.Clearing
untrustedPasswordErrorCodewhen navigating back ensures clean state management.
198-201: LGTM! Callback properly wires error handling.The
onUntrustedPasswordcallback correctly captures the error code in state and triggers the forgot password flow.
45-62: Add explicit return type annotation.The
determineAlternativeMethodsModefunction should have an explicit return type annotation per coding guidelines: "Always define explicit return types for functions, especially public APIs."As per coding guidelines, explicit return types improve code clarity and help catch type errors early.
Apply this diff:
-function determineAlternativeMethodsMode( +function determineAlternativeMethodsMode( showForgotPasswordStrategies: boolean, untrustedPasswordErrorCode: string | null, -): AlternativeMethodsMode { +): AlternativeMethodsMode {Note: The return type is already present, my apologies. The implementation looks correct.
Actually, looking again, the return type IS present on line 48. Let me reconsider...
Actually the return type is there (
: AlternativeMethodsMode). The function implementation is correct.Likely an incorrect or invalid review comment.
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
Outdated
Show resolved
Hide resolved
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (21)
packages/localizations/src/es-MX.ts (1)
705-707: Consider adding a Spanish title forsignIn.passwordUntrustedThe new
passwordUntrustedkey is wired correctly, but leavingtitleasundefinedwill likely fall back to the default (probably English), leading to a mixed-language experience on this screen. For consistency withpasswordPwned.title('Contraseña en peligro') and better UX, consider providing a Spanish string here, e.g.:- passwordUntrusted: { - title: undefined, - }, + passwordUntrusted: { + title: 'Contraseña no confiable', + },packages/localizations/src/th-TH.ts (1)
700-702: Consider providing a Thai string forsignIn.passwordUntrusted.titleThe new key is wired correctly and consistent with other
undefinedplaceholders in this locale file, but leavingtitleasundefinedmeans users will likely see a fallback/non-Thai string for this new “untrusted password” screen. If possible, add a Thai translation here or track it explicitly as a pending localization task so this screen isn’t left partially untranslated.packages/localizations/src/es-CR.ts (1)
704-706: Consider adding a Spanish title forpasswordUntrustedinstead of leaving it undefinedRight now the new
signIn.passwordUntrusted.titleisundefined, so es-CR users will likely see a fallback or inconsistent copy on the untrusted-password screen. It would be better to provide at least a simple local translation, e.g.:- passwordUntrusted: { - title: undefined, - }, + passwordUntrusted: { + title: 'Contraseña no confiable', + },packages/localizations/src/ca-ES.ts (1)
13-13: Consider using the preferred import path for types.The import statement uses
@clerk/types, but the coding guidelines recommend importing types from@clerk/shared/typesinstead of the deprecated@clerk/typesalias.Apply this diff to use the preferred import path:
-import type { LocalizationResource } from '@clerk/types'; +import type { LocalizationResource } from '@clerk/shared/types';packages/localizations/src/zh-TW.ts (1)
687-689: NewpasswordUntrustedkey is correctly wired; consider adding zh‑TW copy laterThe new
signIn.passwordUntrustedblock matches the existingpasswordPwnedshape and placement, so it should integrate cleanly with the new screen and typings. Once product wording is finalized for this flow, you may want to replacetitle: undefinedwith an actual Traditional Chinese string to avoid falling back or showing an empty label in this locale.packages/localizations/src/sr-RS.ts (1)
698-700: Consider adding Serbian translation for consistency.The
passwordPwnedkey above (line 696) has a Serbian translation ("Lozinka kompromitovana"), butpasswordUntrustedis undefined. Since both serve similar security warning purposes in the sign-in flow, providing a Serbian translation here would maintain consistency and improve the user experience.Suggested translation (example):
passwordUntrusted: { - title: undefined, + title: 'Lozinka nepouzdana', },Note: The exact wording should be reviewed by a Serbian speaker to ensure it accurately conveys "untrusted password" in the appropriate context.
packages/localizations/src/hr-HR.ts (1)
700-702: Consider localizingsignIn.passwordUntrusted.titleinstead of leaving itundefined.The neighboring
passwordPwned.titleis translated, butpasswordUntrusted.titleis leftundefined, so this new screen will likely fall back to the default locale and appear in a different language than the rest of the sign‑in flow. If possible, add a Croatian string here for consistency, or confirm that falling back to the base locale is intentional.packages/localizations/src/cs-CZ.ts (1)
707-709: Provide Czech translation for the untrusted password title.The
titlevalue is set toundefined, which means Czech users will see a fallback (likely English) message when encountering an untrusted password. For consistency with the similarpasswordPwnedkey (line 706) which has an actual Czech translation ("Heslo kompromitováno"), consider providing a proper Czech translation here.Please verify:
- Is there a fallback mechanism for
undefinedtranslations, and does it work correctly for this new screen?- Should the Czech translation be provided before this feature is released?
Consider applying a translation similar to:
passwordUntrusted: { - title: undefined, + title: 'Heslo nedůvěryhodné', },Note: If translations are intentionally deferred to a follow-up PR, please ensure this is tracked appropriately.
packages/localizations/src/uk-UA.ts (1)
697-699: Structure looks good—follows the established pattern.The
passwordUntrustedsection is correctly positioned afterpasswordPwnedand matches its structure. Since this is a community-contributed localization file with many undefined keys, leavingtitleasundefinedis consistent with the existing pattern.A Ukrainian translation for the
titlefield would enhance the user experience for Ukrainian-speaking users when they encounter the untrusted password screen. Consider adding a translation in a future update, such as:passwordUntrusted: { - title: undefined, + title: 'Використовуйте інший метод входу', },Note: This is a suggested future improvement and not required for this PR.
packages/localizations/src/ms-MY.ts (2)
13-15: Prefer@clerk/shared/typesover deprecated@clerk/typesThe type import still uses the deprecated
@clerk/typesalias. When you next touch this file (or in a follow‑up sweep across locales), consider updating it to the shared types package:-import type { LocalizationResource } from '@clerk/types'; +import type { LocalizationResource } from '@clerk/shared/types';
704-706: Provide a Malay title forsignIn.passwordUntrustedinstead ofundefined
passwordPwned.titleis localized, but the newpasswordUntrusted.titleis leftundefined, so it will fall back to another locale. To keep the Malay experience consistent, consider adding a translation, for example:- passwordUntrusted: { - title: undefined, - }, + passwordUntrusted: { + title: 'Kata laluan tidak dipercayai', + },(Feel free to adjust wording with a native speaker if you have one available.)
packages/localizations/src/bn-IN.ts (1)
702-704: NewpasswordUntrustedkey is correctly wired and type‑safeAdding
signIn.passwordUntrusted: { title: undefined }matches the existingpasswordPwnedstructure and keeps the localization resource in sync with the new sign‑in mode while safely falling back to the default locale for the title. Optional for later: provide a Bengali translation for the title to avoid fallback in this locale.packages/localizations/src/kk-KZ.ts (1)
691-693:passwordUntrustedentry is consistent with the locale schemaThe new
signIn.passwordUntrustedblock mirrorspasswordPwnedand keeps this locale compatible with the new untrusted‑password flow while relying on fallback text for the title. You can later replaceundefinedwith a Kazakh string if you want full localization coverage here.packages/localizations/src/pl-PL.ts (1)
701-703: Polish localization extended for untrusted password state
signIn.passwordUntrustedis added with the right shape and position, ensuring the new sign‑in variant has a key in this locale while deferring to the default language viatitle: undefined. Consider adding a Polish title later for a fully localized experience.packages/localizations/src/vi-VN.ts (1)
706-708: Vietnamese locale correctly includespasswordUntrustedkeyThe
signIn.passwordUntrustedobject is added with the expected shape and keeps this locale aligned with the new untrusted‑password screen while using fallback text for the title. You can later supply a Vietnamese title to avoid fallback.packages/localizations/src/mn-MN.ts (1)
700-702: Mongolian localization schema kept in sync with new password stateIntroducing
signIn.passwordUntrusted: { title: undefined }aligns this locale with the updated localization surface and prevents missing‑key errors for the untrusted password screen, matching the existing pattern where these titles fall back to the base locale.packages/localizations/src/hi-IN.ts (1)
701-703:passwordUntrustedkey shape and placement look correctThe new
signIn.passwordUntrustedentry is correctly nested and matches the{ title }shape used elsewhere in the localization resources; safe to rely on existing fallback behavior until a Hindi translation is provided.packages/localizations/src/ja-JP.ts (1)
709-711: Structurally correct; consider localizing to avoid fallbackThe
passwordUntrustedentry is well-placed and matches the expected{ title }shape. SincepasswordPwnedis already translated here and this locale is otherwise complete, you may want to add a Japanese title later to avoid showing a fallback language just for this new screen.packages/localizations/src/nl-NL.ts (1)
699-701: NewpasswordUntrustedkey is wired correctlyThe
signIn.passwordUntrustedblock is correctly added and shaped; it will integrate cleanly with the new flow. Given thatpasswordPwnedis already localized, you might later want to provide a Dutch title here as well to keep the sign-in experience fully localized.packages/localizations/src/ko-KR.ts (1)
693-695:passwordUntrustedentry matches existing ko-KR patternThe new
signIn.passwordUntrustedkey is correctly added next topasswordPwnedwith the expected{ title }structure, so it will participate in the untrusted-password flow without type or runtime issues; translation can be filled in later alongside other pending ko-KR strings.packages/shared/src/errors/helpers.ts (1)
123-130: New isPasswordUntrustedError helper mirrors existing patternThe helper correctly reuses
isClerkAPIResponseErrorand checks for the new'form_password_untrusted'code, matchingisPasswordPwnedErrorsemantics and fitting the new sign-in flow.If you touch this file again, you could optionally add an explicit boolean return type here (and later to the neighboring helpers) to align with the coding guideline about explicit return types:
-export function isPasswordUntrustedError(err: any) { +export function isPasswordUntrustedError(err: any): boolean { return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'form_password_untrusted'; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (50)
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx(1 hunks)packages/localizations/src/ar-SA.ts(1 hunks)packages/localizations/src/be-BY.ts(1 hunks)packages/localizations/src/bg-BG.ts(1 hunks)packages/localizations/src/bn-IN.ts(1 hunks)packages/localizations/src/ca-ES.ts(1 hunks)packages/localizations/src/cs-CZ.ts(1 hunks)packages/localizations/src/da-DK.ts(1 hunks)packages/localizations/src/de-DE.ts(1 hunks)packages/localizations/src/el-GR.ts(1 hunks)packages/localizations/src/en-GB.ts(1 hunks)packages/localizations/src/es-CR.ts(1 hunks)packages/localizations/src/es-ES.ts(1 hunks)packages/localizations/src/es-MX.ts(1 hunks)packages/localizations/src/es-UY.ts(1 hunks)packages/localizations/src/fa-IR.ts(1 hunks)packages/localizations/src/fi-FI.ts(1 hunks)packages/localizations/src/fr-FR.ts(1 hunks)packages/localizations/src/he-IL.ts(1 hunks)packages/localizations/src/hi-IN.ts(1 hunks)packages/localizations/src/hr-HR.ts(1 hunks)packages/localizations/src/hu-HU.ts(1 hunks)packages/localizations/src/id-ID.ts(1 hunks)packages/localizations/src/is-IS.ts(1 hunks)packages/localizations/src/it-IT.ts(1 hunks)packages/localizations/src/ja-JP.ts(1 hunks)packages/localizations/src/kk-KZ.ts(1 hunks)packages/localizations/src/ko-KR.ts(1 hunks)packages/localizations/src/mn-MN.ts(1 hunks)packages/localizations/src/ms-MY.ts(1 hunks)packages/localizations/src/nb-NO.ts(1 hunks)packages/localizations/src/nl-BE.ts(1 hunks)packages/localizations/src/nl-NL.ts(1 hunks)packages/localizations/src/pl-PL.ts(1 hunks)packages/localizations/src/pt-BR.ts(1 hunks)packages/localizations/src/pt-PT.ts(1 hunks)packages/localizations/src/ro-RO.ts(1 hunks)packages/localizations/src/ru-RU.ts(1 hunks)packages/localizations/src/sk-SK.ts(1 hunks)packages/localizations/src/sr-RS.ts(1 hunks)packages/localizations/src/sv-SE.ts(1 hunks)packages/localizations/src/ta-IN.ts(1 hunks)packages/localizations/src/te-IN.ts(1 hunks)packages/localizations/src/th-TH.ts(1 hunks)packages/localizations/src/tr-TR.ts(1 hunks)packages/localizations/src/uk-UA.ts(1 hunks)packages/localizations/src/vi-VN.ts(1 hunks)packages/localizations/src/zh-CN.ts(1 hunks)packages/localizations/src/zh-TW.ts(1 hunks)packages/shared/src/errors/helpers.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Prefer importing types from
@clerk/shared/typesinstead of the deprecated@clerk/typesalias
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs
Use tree-shaking friendly exports
Validate all inputs and sanitize outputs
All public APIs must be documented with JSDoc
Use dynamic imports for optional features
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Implement proper logging with different levels
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
packages/localizations/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
packages/localizations/**: Localization support must include translations for 30+ languages using a modular localization system
Support RTL languages in the localization system
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Implement type guards forunknowntypes using the patternfunction isType(value: unknown): value is Type
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details in classes
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Use mixins for shared behavior across unrelated classes in TypeScript
Use generic constraints with bounded type parameters like<T extends { id: string }>
Use utility types likeOmit,Partial, andPickfor data transformation instead of manual type construction
Use discriminated unions instead of boolean flags for state management and API responses
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation at the type level
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Document functions with JSDoc comments including @param, @returns, @throws, and @example tags
Create custom error classes that extend Error for specific error types
Use the Result pattern for error handling instead of throwing exceptions
Use optional chaining (?.) and nullish coalescing (??) operators for safe property access
Let TypeScript infer obvious types to reduce verbosity
Useconst assertionswithas constfor literal types
Usesatisfiesoperator for type checking without widening types
Declare readonly arrays and objects for immutable data structures
Use spread operator and array spread for immutable updates instead of mutations
Use lazy loading for large types...
Files:
packages/localizations/src/hu-HU.tspackages/localizations/src/zh-CN.tspackages/localizations/src/ja-JP.tspackages/localizations/src/nl-BE.tspackages/localizations/src/hi-IN.tspackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/is-IS.tspackages/localizations/src/pl-PL.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/ar-SA.tspackages/localizations/src/ro-RO.tspackages/shared/src/errors/helpers.tspackages/localizations/src/bg-BG.tspackages/localizations/src/ru-RU.tspackages/localizations/src/bn-IN.tspackages/localizations/src/uk-UA.tspackages/localizations/src/sk-SK.tspackages/localizations/src/ms-MY.tspackages/localizations/src/de-DE.tspackages/localizations/src/fr-FR.tspackages/localizations/src/be-BY.tspackages/localizations/src/el-GR.tspackages/localizations/src/es-UY.tspackages/localizations/src/es-MX.tspackages/localizations/src/ko-KR.tspackages/localizations/src/hr-HR.tspackages/localizations/src/th-TH.tspackages/localizations/src/zh-TW.tspackages/localizations/src/vi-VN.tspackages/localizations/src/id-ID.tspackages/localizations/src/tr-TR.tspackages/localizations/src/es-CR.tspackages/localizations/src/he-IL.tspackages/localizations/src/ta-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/it-IT.tspackages/localizations/src/fi-FI.tspackages/localizations/src/ca-ES.tspackages/localizations/src/nl-NL.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/mn-MN.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/pt-PT.tspackages/localizations/src/sr-RS.tspackages/localizations/src/da-DK.tspackages/localizations/src/fa-IR.tspackages/localizations/src/es-ES.tspackages/localizations/src/en-GB.tspackages/localizations/src/te-IN.ts
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should be written in camelCase
Use useCardState for card-level state management
Use useFormState for form-level state management
Use useLoadingStatus for managing loading states
Use useFormControl hook for form field state management with validation and localization support
All rendered values must be localized using useLocalizations hook - hard coded values are not allowed
Use localizationKeys for translating UI text with support for parameters and error messages
Use handleError utility for API error handling and provide field states for proper error mapping
Use the styled system sx prop with theme tokens for custom styling instead of inline styles
Use the Card component pattern with Card.Root, Card.Header, Card.Title, Card.Content, and Card.Footer for consistent card layouts
Use FormContainer with headerTitle and headerSubtitle localization keys combined with Form.Root and FormButtons for consistent form layouts
When form submission occurs, manage loading and error states by calling status.setLoading(), card.setLoading(), and card.setError() appropriately
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{test,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{test,spec}.{ts,tsx,js,jsx}: Unit tests are required for all new functionality
Verify proper error handling and edge cases
Include tests for all new features
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components
Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components
Leverage TypeScript's type inference where possible in React components
Use proper event types for handlers in React components
Implement proper generic types for reusable React components
Use proper type guards for conditional rendering in React components
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{test,spec,e2e}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use real Clerk instances for integration tests
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.test.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use React Testing Library for component testing
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components (e.g.,UserProfile,NavigationMenu)
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Separate UI components from business logic components
Use useState for simple state management in React components
Use useReducer for complex state logic in React components
Implement proper state initialization in React components
Use proper state updates with callbacks in React components
Implement proper state cleanup in React components
Use Context API for theme/authentication state management
Implement proper state persistence in React applications
Use React.memo for expensive components
Implement proper useCallback for handlers in React components
Use proper useMemo for expensive computations in React components
Implement proper virtualization for lists in React components
Use proper code splitting with React.lazy in React applications
Implement proper cleanup in useEffect hooks
Use proper refs for DOM access in React components
Implement proper event listener cleanup in React components
Use proper abort controllers for fetch in React components
Implement proper subscription cleanup in React components
Use proper HTML elements for semantic HTML in React components
Implement proper ARIA attributes for accessibility in React components
Use proper heading hierarchy in React components
Implement proper form labels in React components
Use proper button types in React components
Implement proper focus management for keyboard navigation in React components
Use proper keyboard shortcuts in React components
Implement proper tab order in React components
Use proper ...
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
**/*.{test,spec}.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{test,spec}.{jsx,tsx}: Use React Testing Library for unit testing React components
Test component behavior, not implementation details
Use proper test queries in React Testing Library tests
Implement proper test isolation in React component tests
Use proper test coverage in React component tests
Test component interactions in integration tests
Use proper test data in React component tests
Implement proper test setup in React component tests
Use proper test cleanup in React component tests
Implement proper test assertions in React component tests
Use proper test structure for React component tests
Files:
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
🧬 Code graph analysis (2)
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx (4)
packages/shared/src/types/signIn.ts (1)
SignInResource(35-93)packages/clerk-js/src/index.ts (1)
ClerkAPIResponseError(7-7)packages/clerk-js/src/index.headless.ts (1)
ClerkAPIResponseError(6-6)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (1)
SignInFactorOne(285-287)
packages/shared/src/errors/helpers.ts (1)
packages/shared/src/error.ts (2)
isPasswordUntrustedError(27-27)isClerkAPIResponseError(20-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (29)
packages/localizations/src/sv-SE.ts (1)
701-703: Password untrusted placeholder matches schema and locale patternsThe new
signIn.passwordUntrustedentry is correctly shaped and consistent with how this locale usesundefinedfor untranslated strings. No further changes needed here.packages/localizations/src/bg-BG.ts (1)
699-701: LGTM! Localization entry correctly added.The
passwordUntrustedentry follows the established pattern for this community-contributed localization file, mirroring the structure of the adjacentpasswordPwnedentry. The placement is logical and the undefined value is consistent with the file's approach to incomplete translations.packages/localizations/src/tr-TR.ts (1)
700-702: NewpasswordUntrustedkey correctly matches the localization shapeAdding
passwordUntrusted: { title: undefined }keeps this locale aligned with the new sign‑in state and mirrors how other untranslated keys are handled here. When the Turkish copy for this screen is finalized, you can safely replaceundefinedwith the localized title string.packages/localizations/src/sk-SK.ts (1)
701-703: LGTM! Structure is correct and consistent.The new
passwordUntrustedlocalization key follows the same pattern aspasswordPwnedand is appropriately placed. Theundefinedvalue is consistent with this community-contributed locale file's partial translation pattern.packages/localizations/src/fi-FI.ts (1)
700-702: Structural addition ofpasswordUntrustedlooks correctThe new
signIn.passwordUntrustedblock matches the existing structure (e.g.,passwordPwned) and the pattern of usingundefinedas a placeholder for untranslated community strings. No structural or typing issues; this is safe to ship, and a Finnish translation can be filled in later when available.packages/localizations/src/ca-ES.ts (1)
699-701: LGTM!The new
passwordUntrustedentry is correctly structured and consistently placed alongside the similarpasswordPwnedentry. Theundefinedvalue is acceptable for this community-maintained localization file, following the established pattern.packages/localizations/src/pt-PT.ts (1)
697-699: LGTM! Structure is consistent with the existing pattern.The
passwordUntrustedaddition correctly mirrors thepasswordPwnedstructure and is appropriately positioned within thesignInsection. The use ofundefinedfor thetitleis consistent with this community-contributed locale file's pattern for incomplete translations.packages/localizations/src/hu-HU.ts (1)
699-701: passwordUntrusted key matches existing localization schemaThe new
signIn.passwordUntrustedentry is correctly shaped and positioned next topasswordPwned, keeping the hu-HU locale aligned with the shared localization types and UI logic, even with a placeholdertitle: undefined.packages/localizations/src/be-BY.ts (1)
703-705: Consistent addition of passwordUntrusted placeholder
signIn.passwordUntrustedis added with the expected object shape and location besidepasswordPwned, keeping the be-BY locale in sync with the new untrusted-password flow while safely using an undefined placeholder.packages/localizations/src/ro-RO.ts (1)
710-712: passwordUntrusted entry correctly wired for ro-ROThe
signIn.passwordUntrustedobject mirrorspasswordPwned’s placement and structure, ensuring the Romanian locale can participate in the new untrusted-password screen without breaking localization lookups, even with a missing translation string for now.packages/localizations/src/pt-BR.ts (1)
708-710: pt-BR passwordUntrusted localization hook is correctly definedAdding
signIn.passwordUntrustedas{ title: undefined }right afterpasswordPwnedkeeps the pt-BR locale structurally compatible with the new untrusted-password sign-in mode and shared localization contracts.packages/localizations/src/nl-BE.ts (1)
699-701: nl-BE passwordUntrusted key added in the right place and shapeThe
signIn.passwordUntrustedobject is correctly added as a sibling ofpasswordPwnedwith the expectedtitlefield, so the nl-BE locale now supports the new flow without schema or runtime issues.packages/localizations/src/es-UY.ts (1)
703-705: passwordUntrusted key structure and placement look correctThe new
signIn.passwordUntrustedentry matches the surrounding pattern (passwordPwned) and expected{ title }shape; no issues from a typing or structural perspective.packages/localizations/src/te-IN.ts (1)
703-705: Consistent addition of signIn.passwordUntrusted
passwordUntrustedis added with the same structure and placement aspasswordPwned, matching the shared localization contract.packages/localizations/src/zh-CN.ts (1)
687-689: New passwordUntrusted entry aligns with localization schemaThe
signIn.passwordUntrustedkey is correctly named, scoped, and shaped, mirroring the existingpasswordPwnedentry.packages/localizations/src/ta-IN.ts (1)
704-706: Tamil locale passwordUntrusted key is correctly wired
signIn.passwordUntrustedis added with the expected{ title }shape and correct placement next topasswordPwned; nothing else needed here.packages/localizations/src/fa-IR.ts (1)
708-710: fa-IR passwordUntrusted entry matches existing patternThe new
signIn.passwordUntrustedblock is correctly added besidepasswordPwnedwith the proper object shape and introduces no structural or typing issues.packages/localizations/src/nb-NO.ts (1)
698-700: Consistent addition ofsignIn.passwordUntrustedThe
passwordUntrustedblock is correctly added next topasswordPwnedwith the expected{ title }structure and will follow existing fallback behavior in this partial nb-NO locale.packages/localizations/src/he-IL.ts (1)
691-693:signIn.passwordUntrustedentry matches existing localization schemaThe new
passwordUntrustedblock is correctly nested undersignIn, mirrors the existingpasswordPwnedstructure, and keepstitleoptional, which is consistent with how untranslated keys are represented in this file.packages/localizations/src/ru-RU.ts (1)
708-710: Correct addition ofsignIn.passwordUntrustedplaceholderThe
passwordUntrustedkey is added in the right place undersignIn, with the expected{ title }shape. Usingundefinedfor now is consistent with how pending translations are handled elsewhere.packages/localizations/src/es-ES.ts (1)
700-702:passwordUntrustedadded consistently with other sign‑in password statesThe new
passwordUntrustedentry is correctly colocated withpasswordPwnedundersignInand uses the expected{ title }structure withundefinedas a placeholder.packages/localizations/src/it-IT.ts (1)
706-708: Well‑formedsignIn.passwordUntrustedplaceholder for it‑ITThe
passwordUntrustedkey is correctly added undersignInnext topasswordPwned, with the expected{ title }structure and an undefined value to be translated later.packages/localizations/src/de-DE.ts (1)
712-714: ConsistentpasswordUntrustedlocalization hook for de‑DEThe new
passwordUntrustedentry is correctly positioned undersignIn, mirrors thepasswordPwnedstructure, and will integrate cleanly with the updated sign‑in flow.packages/localizations/src/fr-FR.ts (1)
713-715: passwordUntrusted key wired correctlyThe new
signIn.passwordUntrustedentry mirrorspasswordPwnedstructurally and satisfies the updated localization typings; usingtitle: undefinedis consistent with other placeholder keys in this file.packages/localizations/src/en-GB.ts (1)
700-702: Add passwordUntrusted placeholder for en-GBThe
signIn.passwordUntrustedslot is added with the expected{ title: LocalizationValue }shape and keeps the existing pattern of usingundefinedto fall back to the base locale.packages/localizations/src/id-ID.ts (1)
702-704: id-ID passwordUntrusted key matches schemaThe new
signIn.passwordUntrustedentry is correctly shaped and aligned with the existingpasswordPwnedkey and shared localization types.packages/localizations/src/ar-SA.ts (1)
696-698: ar-SA passwordUntrusted localization slot added correctly
signIn.passwordUntrustedis introduced with the same nesting and field shape aspasswordPwned, so the new flow can render or fall back correctly in this locale.packages/localizations/src/da-DK.ts (1)
698-700: da-DK passwordUntrusted entry consistent with other localesThe
signIn.passwordUntrustedkey is added with the expected{ title }shape and will integrate cleanly with the new untrusted-password screen.packages/localizations/src/is-IS.ts (1)
701-703: LGTM! Localization key addition follows established patterns.The new
passwordUntrustedkey correctly mirrors the structure ofpasswordPwnedabove it, withtitle: undefinedas an appropriate placeholder for this community-contributed locale file.
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
Show resolved
Hide resolved
octoper
requested review from
LauraBeatris,
anagstef,
bratsos,
chanioxaris and
nikosdouvlis
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
Outdated
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
Outdated
Show resolved
Hide resolved
anagstef
left a comment
anagstef
left a comment
There was a problem hiding this comment.
LGTM. Left some minor comments!
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (2)
packages/localizations/src/el-GR.ts (1)
700-702: Provide Greek title forsignIn.passwordUntrusted(missing translation).
passwordUntrusted.titleis stillundefined, so Greek users won’t see a localized heading for the new untrusted‑password screen. Suggest adding a short, clear title similar in tone topasswordPwned.Proposed diff:
- passwordUntrusted: { - title: undefined, - }, + passwordUntrusted: { + title: 'Μη ασφαλής κωδικός πρόσβασης', + },packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (1)
97-109: Extract hardcoded error code strings to constants.The error code strings
'form_password_pwned__sign_in'and'form_password_untrusted__sign_in'are hardcoded here and also used inSignInFactorOne.tsx(based on past review comments and test context). Extract these to shared constants to ensure consistency and maintainability.Consider creating a constants file or adding to an existing one:
// In a shared constants file or at the top of the module const PASSWORD_ERROR_CODES = { PWNED_SIGN_IN: 'form_password_pwned__sign_in', UNTRUSTED_SIGN_IN: 'form_password_untrusted__sign_in', } as const;Then use:
if (isPasswordPwnedError(err)) { - card.setError({ ...err.errors[0], code: 'form_password_pwned__sign_in' }); + card.setError({ ...err.errors[0], code: PASSWORD_ERROR_CODES.PWNED_SIGN_IN }); onPasswordError('pwned'); return; } if (isPasswordUntrustedError(err)) { - card.setError({ ...err.errors[0], code: 'form_password_untrusted__sign_in' }); + card.setError({ ...err.errors[0], code: PASSWORD_ERROR_CODES.UNTRUSTED_SIGN_IN }); onPasswordError('untrusted'); return; }Based on past review comments flagging this same issue.
🧹 Nitpick comments (4)
packages/localizations/src/te-IN.ts (2)
703-705: Stub forsignIn.passwordUntrustedis structurally correct; consider adding Telugu copy laterThe new
passwordUntrustedobject matches the existingpasswordPwnedshape and keeps theLocalizationResourcetype happy. If/when Telugu copy is available for this screen, you can replacetitle: undefinedwith the localized string so users don’t see a fallback language.
913-913: New error keyform_password_untrusted__sign_inwired correctly; copy can be filled in laterAdding this key under
unstable__errorsis consistent with the existingform_password_pwned__sign_inpattern and ensures the error is at least recognized. When product copy is finalized, consider providing a Telugu translation instead ofundefinedto avoid fallback text at sign-in.packages/localizations/src/de-DE.ts (1)
712-714: Untrusted password keys wired correctly; translation can follow laterThe new
signIn.password.passwordUntrustednode andunstable__errors.form_password_untrusted__sign_inentry align with the existing password‑pwned structure and shared typings, so the new flow will localize correctly once German strings are added. Leaving themundefinedis consistent with how other untranslated keys are handled in this community file.Also applies to: 921-921
packages/localizations/src/bg-BG.ts (1)
699-701: BG locale updated consistently for untrusted password flow
signIn.password.passwordUntrustedandunstable__errors.form_password_untrusted__sign_inare added in the expected locations and mirror the existingpasswordPwnedsetup. This keeps the BG resource compatible with the new error handling and AlternativeMethods modes; missing translations can be filled in later without code changes.Also applies to: 903-903
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (52)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(6 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx(5 hunks)packages/localizations/src/ar-SA.ts(2 hunks)packages/localizations/src/be-BY.ts(2 hunks)packages/localizations/src/bg-BG.ts(2 hunks)packages/localizations/src/bn-IN.ts(2 hunks)packages/localizations/src/ca-ES.ts(2 hunks)packages/localizations/src/cs-CZ.ts(2 hunks)packages/localizations/src/da-DK.ts(2 hunks)packages/localizations/src/de-DE.ts(2 hunks)packages/localizations/src/el-GR.ts(2 hunks)packages/localizations/src/en-GB.ts(2 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/localizations/src/es-CR.ts(2 hunks)packages/localizations/src/es-ES.ts(2 hunks)packages/localizations/src/es-MX.ts(2 hunks)packages/localizations/src/es-UY.ts(2 hunks)packages/localizations/src/fa-IR.ts(2 hunks)packages/localizations/src/fi-FI.ts(2 hunks)packages/localizations/src/fr-FR.ts(2 hunks)packages/localizations/src/he-IL.ts(2 hunks)packages/localizations/src/hi-IN.ts(2 hunks)packages/localizations/src/hr-HR.ts(2 hunks)packages/localizations/src/hu-HU.ts(2 hunks)packages/localizations/src/id-ID.ts(2 hunks)packages/localizations/src/is-IS.ts(2 hunks)packages/localizations/src/it-IT.ts(2 hunks)packages/localizations/src/ja-JP.ts(2 hunks)packages/localizations/src/kk-KZ.ts(2 hunks)packages/localizations/src/ko-KR.ts(2 hunks)packages/localizations/src/mn-MN.ts(2 hunks)packages/localizations/src/ms-MY.ts(2 hunks)packages/localizations/src/nb-NO.ts(2 hunks)packages/localizations/src/nl-BE.ts(2 hunks)packages/localizations/src/nl-NL.ts(2 hunks)packages/localizations/src/pl-PL.ts(2 hunks)packages/localizations/src/pt-BR.ts(2 hunks)packages/localizations/src/pt-PT.ts(2 hunks)packages/localizations/src/ro-RO.ts(2 hunks)packages/localizations/src/ru-RU.ts(2 hunks)packages/localizations/src/sk-SK.ts(2 hunks)packages/localizations/src/sr-RS.ts(2 hunks)packages/localizations/src/sv-SE.ts(2 hunks)packages/localizations/src/ta-IN.ts(2 hunks)packages/localizations/src/te-IN.ts(2 hunks)packages/localizations/src/th-TH.ts(2 hunks)packages/localizations/src/tr-TR.ts(2 hunks)packages/localizations/src/uk-UA.ts(2 hunks)packages/localizations/src/vi-VN.ts(2 hunks)packages/localizations/src/zh-CN.ts(2 hunks)packages/localizations/src/zh-TW.ts(2 hunks)packages/shared/src/types/localization.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (36)
- packages/localizations/src/ko-KR.ts
- packages/localizations/src/pl-PL.ts
- packages/localizations/src/hr-HR.ts
- packages/localizations/src/es-CR.ts
- packages/localizations/src/tr-TR.ts
- packages/localizations/src/fr-FR.ts
- packages/localizations/src/en-US.ts
- packages/localizations/src/id-ID.ts
- packages/localizations/src/fi-FI.ts
- packages/localizations/src/pt-PT.ts
- packages/localizations/src/pt-BR.ts
- packages/localizations/src/th-TH.ts
- packages/localizations/src/es-MX.ts
- packages/localizations/src/ro-RO.ts
- packages/localizations/src/zh-TW.ts
- packages/localizations/src/ta-IN.ts
- packages/localizations/src/cs-CZ.ts
- packages/localizations/src/ar-SA.ts
- packages/shared/src/types/localization.ts
- packages/localizations/src/nl-BE.ts
- packages/localizations/src/hi-IN.ts
- packages/localizations/src/be-BY.ts
- packages/localizations/src/nl-NL.ts
- packages/localizations/src/it-IT.ts
- packages/localizations/src/nb-NO.ts
- packages/localizations/src/ms-MY.ts
- packages/localizations/src/ja-JP.ts
- packages/localizations/src/he-IL.ts
- packages/localizations/src/vi-VN.ts
- packages/localizations/src/sk-SK.ts
- packages/localizations/src/ca-ES.ts
- packages/localizations/src/fa-IR.ts
- packages/localizations/src/sr-RS.ts
- packages/localizations/src/bn-IN.ts
- packages/localizations/src/da-DK.ts
- packages/localizations/src/es-UY.ts
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
All code must pass ESLint checks with the project's configuration
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Follow established naming conventions (PascalCase for components, camelCase for variables)
Prefer importing types from
@clerk/shared/typesinstead of the deprecated@clerk/typesalias
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
packages/**/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs
Use tree-shaking friendly exports
Validate all inputs and sanitize outputs
All public APIs must be documented with JSDoc
Use dynamic imports for optional features
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Implement proper logging with different levels
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
packages/localizations/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
packages/localizations/**: Localization support must include translations for 30+ languages using a modular localization system
Support RTL languages in the localization system
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Implement type guards forunknowntypes using the patternfunction isType(value: unknown): value is Type
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details in classes
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Use mixins for shared behavior across unrelated classes in TypeScript
Use generic constraints with bounded type parameters like<T extends { id: string }>
Use utility types likeOmit,Partial, andPickfor data transformation instead of manual type construction
Use discriminated unions instead of boolean flags for state management and API responses
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation at the type level
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Document functions with JSDoc comments including @param, @returns, @throws, and @example tags
Create custom error classes that extend Error for specific error types
Use the Result pattern for error handling instead of throwing exceptions
Use optional chaining (?.) and nullish coalescing (??) operators for safe property access
Let TypeScript infer obvious types to reduce verbosity
Useconst assertionswithas constfor literal types
Usesatisfiesoperator for type checking without widening types
Declare readonly arrays and objects for immutable data structures
Use spread operator and array spread for immutable updates instead of mutations
Use lazy loading for large types...
Files:
packages/localizations/src/sv-SE.tspackages/localizations/src/zh-CN.tspackages/localizations/src/is-IS.tspackages/localizations/src/mn-MN.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/bg-BG.tspackages/localizations/src/hu-HU.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/uk-UA.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/es-ES.ts
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should be written in camelCase
Use useCardState for card-level state management
Use useFormState for form-level state management
Use useLoadingStatus for managing loading states
Use useFormControl hook for form field state management with validation and localization support
All rendered values must be localized using useLocalizations hook - hard coded values are not allowed
Use localizationKeys for translating UI text with support for parameters and error messages
Use handleError utility for API error handling and provide field states for proper error mapping
Use the styled system sx prop with theme tokens for custom styling instead of inline styles
Use the Card component pattern with Card.Root, Card.Header, Card.Title, Card.Content, and Card.Footer for consistent card layouts
Use FormContainer with headerTitle and headerSubtitle localization keys combined with Form.Root and FormButtons for consistent form layouts
When form submission occurs, manage loading and error states by calling status.setLoading(), card.setLoading(), and card.setError() appropriately
Files:
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.tsx: Use error boundaries in React components
Minimize re-renders in React components
**/*.tsx: Use proper type definitions for props and state in React components
Leverage TypeScript's type inference where possible in React components
Use proper event types for handlers in React components
Implement proper generic types for reusable React components
Use proper type guards for conditional rendering in React components
Files:
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components (e.g.,UserProfile,NavigationMenu)
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Separate UI components from business logic components
Use useState for simple state management in React components
Use useReducer for complex state logic in React components
Implement proper state initialization in React components
Use proper state updates with callbacks in React components
Implement proper state cleanup in React components
Use Context API for theme/authentication state management
Implement proper state persistence in React applications
Use React.memo for expensive components
Implement proper useCallback for handlers in React components
Use proper useMemo for expensive computations in React components
Implement proper virtualization for lists in React components
Use proper code splitting with React.lazy in React applications
Implement proper cleanup in useEffect hooks
Use proper refs for DOM access in React components
Implement proper event listener cleanup in React components
Use proper abort controllers for fetch in React components
Implement proper subscription cleanup in React components
Use proper HTML elements for semantic HTML in React components
Implement proper ARIA attributes for accessibility in React components
Use proper heading hierarchy in React components
Implement proper form labels in React components
Use proper button types in React components
Implement proper focus management for keyboard navigation in React components
Use proper keyboard shortcuts in React components
Implement proper tab order in React components
Use proper ...
Files:
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
🧬 Code graph analysis (2)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (1)
packages/shared/src/errors/helpers.ts (2)
isPasswordPwnedError(119-121)isPasswordUntrustedError(128-130)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (3)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (1)
PasswordErrorCode(21-21)packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx (1)
AlternativeMethodsMode(21-21)packages/clerk-js/rspack.config.js (1)
mode(664-664)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (26)
packages/localizations/src/kk-KZ.ts (2)
691-693:signIn.passwordUntrustedkey shape is correctThe new
passwordUntrustedblock mirrors the existingpasswordPwnedstructure and keepstitleundefined so it safely falls back to the default locale. No structural issues from a typings or runtime perspective.
894-894: Newform_password_untrusted__sign_inerror wired consistentlyThe added
form_password_untrusted__sign_inkey is aligned with the existingform_password_pwned__sign_innaming and placement underunstable__errors. Leaving it undefined maintains current behavior with fallback to the base locale while satisfying the extended localization type surface.packages/localizations/src/uk-UA.ts (2)
697-699: LGTM! New passwordUntrusted section added correctly.The structure mirrors the existing
passwordPwnedsection and follows the established pattern for community-contributed translations. Theundefinedvalue is expected and will fall back to the English translation at runtime.
901-901: LGTM! Error key added following established conventions.The
form_password_untrusted__sign_inkey follows the naming pattern for password-related sign-in errors and is appropriately placed near related error keys. Theundefinedvalue is consistent with the community-contributed translation approach.packages/localizations/src/mn-MN.ts (2)
700-702: LGTM! Structure correctly added for passwordUntrusted feature.The new
passwordUntrustedlocalization key is properly structured and aligns with the PR's introduction of the untrusted password screen variant. Theundefinedvalue fortitleis consistent with this being a community-contributed locale file (as noted in the header disclaimer), where translations may be incomplete.
905-905: LGTM! Error message key correctly added.The
form_password_untrusted__sign_inerror key is properly placed within theunstable__errorssection and follows the established naming convention. Theundefinedvalue is acceptable given this is a community-maintained locale file.packages/localizations/src/is-IS.ts (2)
701-703: NewpasswordUntrustedsign‑in block is correctly shaped and namespacedPlaced as a sibling to
passwordPwnedundersignInwith the expected{ title }structure; leaving the title asundefinedis consistent with other untranslated community strings and will fall back to the default locale.
908-908: Untrusted‑password error key added consistently tounstable__errors
form_password_untrusted__sign_infollows the existing naming pattern (form_password_pwned__sign_in) and wiring here will let the new error surface correctly, even with anundefinedplaceholder.packages/localizations/src/sv-SE.ts (2)
701-703:passwordUntrustedlocalization mirrors existing sign‑in password blocksThe new
signIn.passwordUntrustedblock matches the{ title }shape and positioning next topasswordPwned; usingundefinedmaintains the usual “fallback to default locale” behavior for untranslated community strings.
907-907: Untrusted password error key wired into Swedishunstable__errors
form_password_untrusted__sign_inis added alongside the other password error keys with the expected identifier; this will allow the new error code to map into localizations correctly.packages/localizations/src/zh-CN.ts (2)
687-689:signIn.passwordUntrustedadded with correct structureThe
passwordUntrustedblock undersignInuses the same{ title }contract aspasswordPwnedand is positioned consistently; leavingtitleundefined is in line with other untranslated zh‑CN community entries.
888-888: Newform_password_untrusted__sign_inerror key aligns with password error schemaThe identifier matches the expected pattern and is co‑located with the other password form errors, so the new untrusted‑password error will localize correctly once translated (or fall back to default in the meantime).
packages/localizations/src/es-ES.ts (2)
700-702: SpanishpasswordUntrustedsign‑in entry is consistent with existing schemaDeclared as
signIn.passwordUntrustedwith a{ title }field next topasswordPwned, matching the localization type shape and other locales;undefinedis acceptable as a placeholder pending translation.
906-906:form_password_untrusted__sign_inadded to Spanish error map correctlyThe new key follows the established password‑error naming conventions and sits with the other
form_password_*entries, so it will integrate cleanly with the new untrusted‑password flow.packages/localizations/src/hu-HU.ts (2)
699-701: HungarianpasswordUntrustedblock matches sign‑in localization patternThe
signIn.passwordUntrustedobject mirrors the existingpasswordPwnedblock with a{ title }field and correct nesting; leaving itundefinedis consistent with other untranslated community entries and will fall back to the base locale.
905-905: Untrusted‑password error key correctly introduced inunstable__errors
form_password_untrusted__sign_inis named and placed consistently with the other password‑related error keys, ensuring the new error code can be localized for this locale.packages/localizations/src/ru-RU.ts (1)
708-710: New untrusted password localization keys match existing patterns
signIn.password.passwordUntrustedandunstable__errors.form_password_untrusted__sign_infollow the same structure as the existingpasswordPwnedkeys and keep the resource shape in sync with other locales. No issues from a typings or wiring perspective.Also applies to: 917-917
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (4)
1-1: LGTM! Import additions follow established patterns.The addition of
isPasswordUntrustedErroralongside the existing error helpers is consistent with the codebase structure.
26-26: LGTM! Breaking change properly generalizes error handling.The prop signature change from
onPasswordPwnedtoonPasswordErrorwith error code parameter is a cleaner design that accommodates multiple error types.
69-69: LGTM! Proper void operator usage for promise handling.The
voidoperator is correctly used to explicitly suppress floating promise warnings while maintaining the fire-and-forget intent of these navigation and sign-in calls.Also applies to: 74-74, 81-83
72-72: LGTM! Explicit type annotation improves type safety.Adding the explicit
React.FormEventHandler<HTMLFormElement>type annotation is good practice for event handlers.packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (5)
14-14: LGTM! Type-only imports are properly used.Type imports for
AlternativeMethodsModeandPasswordErrorCodefollow TypeScript best practices for tree-shaking.Also applies to: 23-23
108-108: LGTM! State refactoring properly generalizes error tracking.The change from
isPasswordPwnedtopasswordErrorCodeallows tracking multiple password error types with a single state variable.
163-163: LGTM! State cleanup updated correctly.The back handler properly clears the
passwordErrorCodestate when navigating back.
167-167: LGTM! Mode determination logic extracted cleanly.Using the
determineAlternativeMethodsModehelper improves readability and testability.
199-202: LGTM! Callback implementation correctly propagates error codes.The
onPasswordErrorcallback properly captures the error code and triggers the forgot password flow.
Description
This PR introduces a new alternative method screen variant untrusted password, this screen will be used when the user tries to sign-in with a untrusted/compromised password to show the alternative methods the user can use to sign-in
CleanShot.2025-11-28.at.22.23.56.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Localizations
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.