feat(clerk-js): Untrusted password screen for sign-in #7331
Conversation
🦋 Changeset detectedLatest commit: 72079b9 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 handling for an "untrusted" password sign-in error: new AlternativeMethods mode, propagation of a PasswordErrorCode from the password card through SignInFactorOne, a new isPasswordUntrustedError helper/export, localization keys for the new error across locales, 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)
Comment |
octoper
force-pushed
the
vaggelis/user-4007-dont-allow-untrusted-passwords-to-be-able-to-sign-in
branch
from
2566609 to
d16cae5
Compare
octoper
changed the title
![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: |
…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
a09bc8a to
72079b9
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (5)
packages/localizations/src/el-GR.ts (2)
700-702: Missing Greek translation for untrusted password title.The
passwordUntrusted.titleis set toundefined, so Greek locale users will not see a localized title when encountering this screen. For reference, the adjacentpasswordPwnedentry (lines 697-699) demonstrates the expected pattern with a proper Greek translation.
907-907: Missing Greek error message for untrusted password sign-in.The
form_password_untrusted__sign_inkey is set toundefined, so Greek users will see a fallback or non-localized message when this error is triggered. The error message should explain that sign-in with this password is blocked and suggest alternative methods.packages/localizations/src/en-GB.ts (2)
700-702: Fill inpasswordUntrusted.titleinstead of leaving it undefined.This title is currently
undefinedwhilepasswordPwned.titleis populated, so the new untrusted-password screen may show a blank or fallback heading. For consistency with en-US and adjacent copy, consider:- passwordUntrusted: { - title: undefined, - }, + passwordUntrusted: { + title: 'Password compromised', + },
908-908: Provide British English text forform_password_untrusted__sign_in.This security‑sensitive error is
undefinedhere but has a full sentence in en-US; en-GB should also have explicit copy rather than relying on fallback. For example:- form_password_untrusted__sign_in: undefined, + form_password_untrusted__sign_in: + 'Your password appears to have been compromised or is no longer trusted and cannot be used. Please use an alternative method to continue.',packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (1)
46-63: DocumentdetermineAlternativeMethodsModehelper with JSDocThis helper encodes the mapping from forgot-password state and
PasswordErrorCodetoAlternativeMethodsMode, which is core to the new flow. Adding a short JSDoc block describing the parameters and the possible return modes would make the behavior clearer and aligns with the requirement to document helper functions.
🧹 Nitpick comments (2)
packages/localizations/src/he-IL.ts (1)
894-894: Consider adding a Hebrew translation for consistency.The structure and placement are correct. However, the similar error key
form_password_pwned__sign_in(lines 890-891) includes a Hebrew translation. For consistency and better user experience, consider providing a translation for this new untrusted password error as well.packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx (1)
356-432: Good coverage for untrusted-password sign-in pathBoth new tests correctly simulate a
form_password_untrustedAPI error, assert the untrusted/password-compromised screen, and verify the “Email code” alternative method flow, which aligns with the newpasswordUntrustedmode wiring. If you touch this area again, you could extract the sharederrJSONinto a small helper to avoid duplication, but it’s not required for this PR.
📜 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 (58)
.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(6 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/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/error.ts(1 hunks)packages/shared/src/errors/helpers.ts(1 hunks)packages/shared/src/types/localization.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (41)
- packages/localizations/src/sr-RS.ts
- packages/shared/src/errors/helpers.ts
- packages/localizations/src/en-US.ts
- packages/localizations/src/cs-CZ.ts
- packages/localizations/src/nl-NL.ts
- packages/localizations/src/ar-SA.ts
- packages/localizations/src/hi-IN.ts
- packages/localizations/src/ru-RU.ts
- packages/shared/src/types/localization.ts
- packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
- packages/localizations/src/de-DE.ts
- packages/localizations/src/pl-PL.ts
- packages/localizations/src/ja-JP.ts
- packages/localizations/src/mn-MN.ts
- packages/localizations/src/hu-HU.ts
- packages/localizations/src/tr-TR.ts
- packages/localizations/src/bn-IN.ts
- packages/localizations/src/es-MX.ts
- packages/localizations/src/pt-PT.ts
- packages/localizations/src/fi-FI.ts
- packages/localizations/src/ko-KR.ts
- packages/localizations/src/uk-UA.ts
- packages/localizations/src/hr-HR.ts
- packages/localizations/src/sv-SE.ts
- packages/localizations/src/es-CR.ts
- packages/localizations/src/th-TH.ts
- packages/localizations/src/ca-ES.ts
- packages/localizations/src/ms-MY.ts
- packages/localizations/src/sk-SK.ts
- packages/localizations/src/nl-BE.ts
- packages/localizations/src/vi-VN.ts
- packages/localizations/src/be-BY.ts
- packages/localizations/src/ta-IN.ts
- packages/localizations/src/kk-KZ.ts
- packages/localizations/src/bg-BG.ts
- packages/shared/src/error.ts
- .changeset/sweet-poets-sell.md
- packages/localizations/src/it-IT.ts
- packages/localizations/src/id-ID.ts
- packages/localizations/src/zh-CN.ts
- packages/localizations/src/fr-FR.ts
🧰 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/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.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/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.ts
**/*.{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/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.ts
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.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/clerk-js/src/ui/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.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/clerk-js/src/ui/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.ts
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
packages/clerk-js/src/ui/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.ts
**/*.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/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/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/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/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/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.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/elements/contexts/index.tsxpackages/localizations/src/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsxpackages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsxpackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.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/ro-RO.tspackages/localizations/src/es-UY.tspackages/localizations/src/da-DK.tspackages/localizations/src/zh-TW.tspackages/localizations/src/te-IN.tspackages/localizations/src/nb-NO.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/el-GR.tspackages/localizations/src/is-IS.tspackages/localizations/src/es-ES.tspackages/localizations/src/fa-IR.tspackages/localizations/src/he-IL.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 (3)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
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/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/__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(286-288)
⏰ 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). (4)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (13)
packages/localizations/src/he-IL.ts (1)
691-693: LGTM! Structure and placement are correct.The new
passwordUntrustedobject follows the established pattern and is correctly placed alongside the similarpasswordPwnedsection. Theundefinedvalue is consistent with many other keys in this community-maintained localization file.packages/localizations/src/te-IN.ts (1)
703-705: Untrusted-password keys are wired correctly; just confirm desired fallback/copyThe new
signIn.passwordUntrusted.titleandunstable__errors.form_password_untrusted__sign_inentries follow the existing naming and nesting patterns for password errors, and leaving themundefinedmatches how other untranslated TE-IN strings are handled. Please just confirm that:
- TE-IN is expected to fall back to the default (e.g. en-US) text for these keys for now, and
- The final English copy for these keys is stable, since it will surface here via fallback until this locale is translated.
Also applies to: 913-913
packages/localizations/src/ro-RO.ts (1)
710-712: RO untrusted-password entries match the shared error surface
signIn.passwordUntrustedandunstable__errors.form_password_untrusted__sign_inare correctly added under the expected namespaces and follow the same pattern as the existingpasswordPwnedkeys. Leaving themundefinedis consistent with other still-untranslated RO strings; just confirm you’re happy to rely on fallback text until RO translations are provided.Also applies to: 917-917
packages/localizations/src/es-ES.ts (1)
700-702: ES untrusted-password keys are correctly added; consider filling translations when readyThe new
signIn.passwordUntrustedentry andunstable__errors.form_password_untrusted__sign_inerror key are correctly named and placed alongside the existingpasswordPwnedstrings. Since much ofes-ESis already localized, leaving these asundefinedwill likely fall back to English for this specific scenario; that’s fine short term, but you may want to queue proper ES copy to avoid a mixed-language error state.Also applies to: 906-906
packages/localizations/src/nb-NO.ts (1)
698-700: NB-NO untrusted-password keys follow the existing pattern
passwordUntrustedundersignInandform_password_untrusted__sign_inunderunstable__errorsare correctly wired and consistent with the existingpasswordPwnedsurface in this locale. Given both areundefined, NB-NO users will see the fallback locale text for now; please confirm that’s the intended interim behaviour.Also applies to: 904-904
packages/localizations/src/da-DK.ts (1)
698-700: DA untrusted-password additions are correct; watch for temporary mixed-language UXThe new
signIn.passwordUntrustedtitle andunstable__errors.form_password_untrusted__sign_inkey are added in the right places and match the shared naming scheme. Since the pwned-password texts are already translated but these new untrusted ones areundefined, DA users may briefly see English copy only for this specific path until it’s localized. That’s acceptable technically, but worth tracking for a later translation pass.Also applies to: 902-902
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
123-123: FlowMetadata updated correctly forpasswordUntrustedMethodsAdding
'passwordUntrustedMethods'toFlowMetadata['part']cleanly opens up the new flow segment without affecting existing callers. Type shape and naming are consistent with the other*Methodsentries, so this should integrate smoothly with the new Alternative Methods mode.packages/localizations/src/fa-IR.ts (1)
708-710: Untrusted-password localization surface added correctlyThe new
signIn.passwordUntrustedandform_password_untrusted__sign_inkeys follow the existing pattern of adding structural placeholders asundefineduntil translations are provided, so this looks consistent and safe.Also applies to: 915-915
packages/localizations/src/is-IS.ts (1)
701-703: Consistent addition of untrusted-password keysThe Icelandic locale now exposes
passwordUntrustedandform_password_untrusted__sign_inas placeholders, matching the pattern used elsewhere for incomplete community translations while keeping the localization surface in sync with the types and UI.Also applies to: 908-908
packages/localizations/src/es-UY.ts (1)
703-705: Localization surface for untrusted password aligned with other localesAdding
passwordUntrustedundersignInandform_password_untrusted__sign_inunderunstable__errorskeeps the es-UY locale compatible with the new error flow; usingundefinedas a placeholder is consistent with the rest of this community file.Also applies to: 913-913
packages/localizations/src/zh-TW.ts (1)
687-689: zh-TW localization keys for untrusted password are wired correctlyThe additions for
signIn.passwordUntrustedandform_password_untrusted__sign_inmirror the existing pwned-password entries and maintain the expected localization structure; leaving them asundefinedplaceholders is consistent with this community file.Also applies to: 889-889
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx (1)
72-108: Untrusted/pwned password errors are handled and surfaced cleanlyTyping
handlePasswordSubmitas aReact.FormEventHandler<HTMLFormElement>, usingvoidwhen calling async functions, and routingisPasswordPwnedError/isPasswordUntrustedErrorthroughonPasswordErrorwith sign-in–specific error codes (form_password_pwned__sign_in,form_password_untrusted__sign_in) makes the flow explicit and keeps generic error handling (handleError) as a fallback. This aligns well with the new AlternativeMethods modes.packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (1)
108-109: Password error state integration with AlternativeMethods looks correctStoring the
PasswordErrorCodein local state, clearing it (along withcard.setError) in the back handler, computingmodeviadetermineAlternativeMethodsMode, and wiringonPasswordErrorfromSignInFactorOnePasswordCardensures that pwned/untrusted password errors consistently drive the correct AlternativeMethods mode (pwned,passwordUntrusted, orforgot). The type-only imports forAlternativeMethodsModeandPasswordErrorCodeare also in line with the tree-shaking and typing guidelines.Also applies to: 163-168, 195-203
packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
Show resolved
Hide resolved
octoper
deleted the
vaggelis/user-4007-dont-allow-untrusted-passwords-to-be-able-to-sign-in
branch
Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
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.