feat(clerk-js): Introduce reset password session task #7268
Conversation
🦋 Changeset detectedLatest commit: f871d5a 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 a "reset-password" session task: new task key, UI component and context, updated task guard and routing, types and localization entries across locales, backend experimental endpoint and test utilities, Playwright helpers and integration tests, plus related fixture and config updates. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User / Browser
participant UI as Frontend UI (SessionTasks)
participant Router as Router
participant SessionSvc as Session Manager
participant API as Backend API
User->>UI: Sign in (credentials)
UI->>API: Authenticate (may include 2FA)
API->>SessionSvc: Create session with currentTask.key='reset-password'
SessionSvc->>Router: Route to task endpoint
Router->>UI: Render TaskResetPassword component (TaskResetPasswordContext)
User->>UI: Fill newPassword / confirmPassword (+ sign-out flag)
UI->>API: updatePassword (newPassword, signOutOfOtherSessions)
API-->>API: Update password, optionally revoke other sessions
API->>SessionSvc: Mark task completed / clear currentTask
SessionSvc->>Router: Redirect to redirectUrlComplete
Router->>User: Navigate to destination
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
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)
🧰 Additional context used📓 Path-based instructions (11)packages/clerk-js/src/ui/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
Files:
**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{js,jsx,ts,tsx,json,md,yml,yaml}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
packages/**/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
packages/**/src/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.ts?(x)📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{md,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{jsx,tsx}📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
Files:
🧬 Code graph analysis (1)packages/clerk-js/src/ui/components/SessionTasks/index.tsx (3)
⏰ 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). (32)
🔇 Additional comments (3)
Comment |
|
!snapshot |
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact |
octoper
force-pushed
the
vaggelis/user-4002-implement-the-aio-components-new-flow-and-session-task
branch
from
1b51682 to
9ab72aa
Compare
|
!snapshot |
| subtitle: 'Enter the password associated with your account', | ||
| title: 'Enter your password', | ||
| }, | ||
| passwordPwned: { |
There was a problem hiding this comment.
Comment for the reviewers: I will generate the localizations before merging the PR
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/withTaskGuard.ts (1)
1-26: withTaskGuard implementation matches existing session task guard semanticsThe guard correctly:
- Checks for absence of
clerk.session?.currentTaskand redirects either tobuildSignInUrl()(no session) orctx.redirectUrlComplete ?? clerk.buildAfterSignInUrl().- Reuses
withRedirectand warningcannotRenderComponentWhenTaskDoesNotExist.- Preserves component displayName, consistent with the TaskChooseOrganization guard.
One thing to double‑check: ensure
TaskResetPasswordPropshas been added toAvailableComponentProps, otherwisewithTaskGuard(TaskResetPassword)will fail theP extends AvailableComponentPropsconstraint.If more task-specific guards are added in the future, consider extracting a shared helper that takes the task context hook as a parameter to avoid near-identical HOCs.
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
128-128: Consider using configured password settings for minLength.The
minLength={6}is hardcoded, butpasswordSettingsis available from the environment context. While the validatePassword flag on the field already uses password settings for validation, aligning the HTML5 minLength attribute with the configured minimum would provide more consistent user feedback.Consider using:
<Form.PasswordInput {...passwordField.props} isRequired - minLength={6} + minLength={passwordSettings.min_length} />
📜 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 (16)
.changeset/loose-brooms-occur.md(1 hunks)packages/clerk-js/src/core/sessionTasks.ts(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/index.tsx(2 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/__tests__/TaskResetPassword.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/withTaskGuard.ts(1 hunks)packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx(3 hunks)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts(2 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/clerk-js/src/ui/types.ts(3 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/shared/src/types/appearance.ts(1 hunks)packages/shared/src/types/clerk.ts(2 hunks)packages/shared/src/types/localization.ts(2 hunks)packages/shared/src/types/session.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (8)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/__tests__/TaskResetPassword.test.tsx (2)
packages/clerk-js/src/test/create-fixtures.tsx (1)
bindCreateFixtures(28-35)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
TaskResetPassword(186-188)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (3)
packages/clerk-js/src/core/sessionTasks.ts (1)
INTERNAL_SESSION_TASK_ROUTE_BY_KEY(9-12)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
TaskResetPasswordContext(31-31)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
TaskResetPassword(186-188)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (5)
packages/clerk-js/src/ui/elements/contexts/index.tsx (2)
useCardState(42-70)withCardStateProvider(72-81)packages/clerk-js/src/ui/utils/passwordUtils.ts (1)
createPasswordError(33-74)packages/clerk-js/src/ui/hooks/usePassword.ts (1)
useConfirmPassword(77-110)packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/withTaskGuard.ts (1)
withTaskGuard(8-26)
packages/shared/src/types/clerk.ts (1)
packages/shared/src/types/appearance.ts (1)
TaskResetPasswordTheme(1044-1044)
packages/clerk-js/src/ui/types.ts (1)
packages/shared/src/types/clerk.ts (1)
TaskResetPasswordProps(2222-2228)
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
packages/clerk-js/src/ui/types.ts (1)
TaskResetPasswordCtx(155-157)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/withTaskGuard.ts (4)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/withTaskGuard.ts (1)
withTaskGuard(8-26)packages/clerk-js/src/ui/types.ts (1)
AvailableComponentProps(46-63)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
useTaskResetPasswordContext(33-41)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx (2)
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
TaskResetPasswordContext(31-31)packages/shared/src/types/clerk.ts (1)
TaskResetPasswordProps(2222-2228)
🔇 Additional comments (16)
packages/shared/src/types/appearance.ts (1)
1044-1044: TaskResetPasswordTheme alias is consistent with existing theme typesThe new
TaskResetPasswordThemealias mirrors the pattern used for other component themes and keeps the public API consistent. No issues from a typing or compatibility perspective..changeset/loose-brooms-occur.md (1)
1-7: Changeset scope and bump levels look appropriateThe changeset correctly scopes the
reset-passwordsession task work to@clerk/clerk-js,@clerk/shared, and@clerk/localizationswithminorbumps, matching the feature-level change.packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
83-105: FlowMetadata extended correctly for new task flowsAdding
'taskChooseOrganization'and'taskResetPassword'toFlowMetadata.flowaligns with the new session task routes and existing usages like<Flow.Root flow='taskChooseOrganization'>. The union remains coherent and backward compatible.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx (1)
11-11: Import path adjustment aligns with new task-local guard structureSwitching
withTaskGuardto a sibling import ('./withTaskGuard') matches the new pattern where each session task owns its own guard implementation. The wrapping at the export site remains unchanged and correct.packages/shared/src/types/clerk.ts (1)
2222-2228: LGTM! TaskResetPasswordProps follows established patterns.The type definition correctly mirrors the structure of
TaskChooseOrganizationProps, with appropriate fields for navigation and theming. The JSDoc comment clearly documents the purpose of theredirectUrlCompletefield.packages/clerk-js/src/core/sessionTasks.ts (1)
9-12: LGTM! Route mapping correctly added.The new
'reset-password'entry follows the existing pattern and integrates properly with theSessionTask['key']type union. This will enable proper URL building viagetTaskEndpointandbuildTaskUrlfunctions.packages/clerk-js/src/ui/components/SessionTasks/index.tsx (1)
65-71: LGTM! Route and context setup correctly implemented.The new reset-password route follows the established pattern from the choose-organization task. The context provider properly passes
componentNameandredirectUrlCompleteto the TaskResetPassword component.packages/clerk-js/src/ui/types.ts (1)
155-157: LGTM! Context type properly defined.The
TaskResetPasswordCtxtype correctly extendsTaskResetPasswordPropsand adds the requiredcomponentNameliteral, following the established pattern for component contexts.packages/localizations/src/en-US.ts (1)
866-872: LGTM! Localization strings properly structured.The
taskResetPasswordlocalization keys follow the same pattern astaskChooseOrganization, providing clear user-facing strings for the title and sign-out action. The{{identifier}}placeholder correctly enables dynamic user information display.packages/shared/src/types/localization.ts (1)
1290-1296: LGTM! Localization types correctly defined.The
taskResetPasswordtype definition properly mirrors the structure inen-US.ts, with correctly typedLocalizationValuefields. TheactionTextfield appropriately usesLocalizationValue<'identifier'>to enable type-safe interpolation of the user identifier.packages/shared/src/types/session.ts (2)
338-338: LGTM! SessionTask key union properly extended.The
keyfield now correctly includes both'choose-organization'and'reset-password', enabling type-safe handling of the new task type throughout the session management system.
38-40: Nice documentation improvement.The JSDoc
@default trueannotation clarifies the default behavior oftreatPendingAsSignedOut, improving the developer experience.packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx (1)
130-137: LGTM! Context provider case correctly implemented.The
TaskResetPasswordcase follows the established pattern, properly typing the props and providing the context value with the correctcomponentNameliteral. The implementation is consistent with theTaskChooseOrganizationcase.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/__tests__/TaskResetPassword.test.tsx (1)
1-103: LGTM! Comprehensive test coverage.The test suite provides excellent coverage of the TaskResetPassword component, including:
- Guard behavior (rendering only when task exists)
- Multi-task ordering
- User identifier display (both email and username)
- Sign-out interaction flow
The tests are well-structured, use appropriate testing utilities, and have clear assertions.
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
3-3: LGTM! Consistent context implementation.The new TaskResetPassword context and hook follow the established pattern used by TaskChooseOrganization. The implementation is consistent with the codebase conventions and includes proper error messaging.
Also applies to: 31-41
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
186-188: LGTM! Proper HOC composition.The component export correctly composes three higher-order components:
withCoreSessionSwitchGuardfor session-level guardswithTaskGuardfor task existence validationwithCardStateProviderfor form state managementThe order and composition are appropriate for this session task component.
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.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: 1
🧹 Nitpick comments (2)
packages/localizations/src/en-US.ts (1)
863-869: Confirm copy consistency with existing reset-password flowsThe new
taskResetPasswordstrings look fine and match the type, but the title here ('Reset password') differs fromsignIn.resetPassword.title('Set new password'). If these flows are meant to feel like the same step, consider reusing or aligning the wording for consistency; otherwise, leaving them distinct is also reasonable.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
74-90: Use card state’s async helpers to manage loading and double-submits
resetPasswordruns the async reverification/password update without going throughcard.runAsyncor updating card loading state, so the UI can’t reflect an in-flight submission and users may trigger multiple requests by clicking rapidly.It would be more consistent with other flows to wrap the operation with the card state helper and/or disable the submit button while a request is in progress, e.g. by using
card.runAsyncand addingcard.isLoadinginto theForm.SubmitButton’s disabled condition.Also applies to: 107-113, 147-151
📜 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 (3)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx(1 hunks)packages/localizations/src/en-US.ts(1 hunks)packages/shared/src/types/localization.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (5)
packages/clerk-js/src/ui/elements/contexts/index.tsx (2)
useCardState(42-70)withCardStateProvider(72-81)packages/clerk-js/src/ui/utils/passwordUtils.ts (1)
createPasswordError(33-74)packages/clerk-js/src/ui/hooks/usePassword.ts (1)
useConfirmPassword(77-110)packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/withTaskGuard.ts (1)
withTaskGuard(8-26)
⏰ 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)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (2)
packages/shared/src/types/localization.ts (1)
1287-1293: taskResetPassword localization shape is consistent and correctly typedThe new
taskResetPasswordblock (title +signOut.actionLink/actionText<'identifier'>) aligns with how it’s used in the UI and with the en-US resource; the interpolation parameter choice looks correct.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
92-177: Overall TaskResetPassword wiring, localization, and sign-out behavior look solidThe component correctly derives the identifier for display, uses the new
taskResetPassword.*localization keys, integrates reverification-based password updates, and handles multi-session sign-out viauseMultipleSessions+ sign-out context in a way that matches existing patterns.
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx
Show resolved
Hide resolved
|
Let's also add some integration tests for the main flow + unit tests for the task component itself |
octoper
force-pushed
the
vaggelis/user-4002-implement-the-aio-components-new-flow-and-session-task
branch
from
29759c4 to
3a52a51
Compare
…ct token is emitted on updates
octoper
force-pushed
the
vaggelis/user-4002-implement-the-aio-components-new-flow-and-session-task
branch
from
b4c10ab to
f4d8faa
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (5)
packages/shared/src/types/appearance.ts (1)
1045-1047: Add matchingtaskResetPasswordproperty toAppearanceYou’ve introduced
TaskResetPasswordTheme = Theme, butAppearance<T>still doesn’t expose ataskResetPassword?: T;slot alongsidetaskChooseOrganization?: T;, so consumers can’t scope appearance overrides specifically to<TaskResetPassword />./** * Theme overrides that only apply to the `<TaskChooseOrganization />` component */ taskChooseOrganization?: T; + /** + * Theme overrides that only apply to the `<TaskResetPassword />` component + */ + taskResetPassword?: T; /** * Theme overrides that only apply to the `<EnableOrganizations/>` component */ enableOrganizations?: T;packages/localizations/src/pt-PT.ts (1)
862-869: Placeholder values follow established pattern for this community file.This concern was already raised in a previous review. The
undefinedvalues are consistent with how this community-contributed file handles untranslated strings (many other keys liketaskChooseOrganizationare alsoundefined). The localization system should fall back to en-US defaults.packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (3)
63-75: Submit gating still allows empty-password submissions
canSubmitis tied only toisPasswordMatch, which is typicallytruewhen both password fields are still empty. That enables the submit button before the user types anything, relying solely on backend validation.Tighten
canSubmitso it also requires non‑empty values (e.g. checkpasswordField.valueandconfirmField.value, or use the appropriate “has value + valid” signal fromuseFormControl), and keep it in sync withuseConfirmPasswordbehavior.Also applies to: 160-165
43-49: PasswordminLengthshould match environment password policyThe password input still hardcodes
minLength={6}, even thoughpasswordSettingsis available fromuseEnvironment. This can diverge from the configured password policy and cause confusing UX when the backend requires a longer password.Consider wiring the HTML constraint to the configured minimum, with a safe fallback, e.g.:
<Form.ControlRow elementId={passwordField.id}> <Form.PasswordInput {...passwordField.props} isRequired minLength={passwordSettings.min_length ?? 6} /> </Form.ControlRow>Also applies to: 138-144
106-107: Hidden identifier should reuse the computedidentifierfor consistencyThe visible identifier (line 106) uses
clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username, while the hidden input for password managers (line 135) repeats that logic inline. This can drift if one side changes and is harder to keep in sync.Reuse the
identifiervariable for the hidden field to guarantee they always match:const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username; // ... <input readOnly data-testid='hidden-identifier' id='identifier-field' name='identifier' value={identifier || ''} />Also applies to: 128-137
🧹 Nitpick comments (9)
packages/localizations/src/ar-SA.ts (1)
13-13: Consider migrating from deprecated@clerk/typesalias.The import uses
@clerk/types, but coding guidelines recommend importing from@clerk/shared/typesinstead. This is a pre-existing pattern across the localization files and could be addressed in a dedicated refactoring effort.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/pt-BR.ts (1)
876-883: Consider using "Redefinir" instead of "Resetar" for consistency.The rest of the file consistently uses "Redefinir" for password reset operations (lines 676, 681, 721, 724). Using "Resetar" here creates terminology inconsistency in the user interface.
Apply this diff for consistency:
taskResetPassword: { - formButtonPrimary: 'Resetar Senha', + formButtonPrimary: 'Redefinir Senha', signOut: { actionLink: 'Sair', actionText: 'Conectado como {{identifier}}', }, - title: 'Resetar senha', + title: 'Redefinir senha', },packages/localizations/src/es-MX.ts (1)
872-879: Structure follows the established pattern correctly.The
taskResetPasswordblock is properly structured and consistent with other task blocks in this file (e.g.,taskChooseOrganization). Usingundefinedvalues is the standard approach for missing translations in community-contributed locales, which will cause the UI to fall back to the default locale.Optionally, consider adding Spanish (Mexico) translations for better UX:
taskResetPassword: { - formButtonPrimary: undefined, + formButtonPrimary: 'Restablecer contraseña', signOut: { - actionLink: undefined, - actionText: undefined, + actionLink: 'Cerrar sesión', + actionText: '¿No eres tú?', }, - title: undefined, + title: 'Restablecer contraseña', },packages/localizations/src/hi-IN.ts (1)
869-876: Consider adding translations for the new taskResetPassword block.All values in the
taskResetPasswordblock are currentlyundefined. While this is acceptable for a community-contributed localization file (as noted in the disclaimer), the reset-password task flow will display untranslated keys to Hindi-speaking users until these are populated.If this locale is actively used, consider adding translations or flagging this for follow-up localization work.
integration/testUtils/usersService.ts (1)
79-79: Consider returning the updatedUserfrompasswordUntrustedin the test serviceThe helper currently hides the
Userreturned byclerkClient.users.__experimental_passwordUntrusted, which is fine for today but makes it harder to assert on the updated user state later. If you expect tests to need that data, you can expose it now to avoid a future breaking change in this utility.export type UserService = { @@ - passwordUntrusted: (userId: string) => Promise<void>; + passwordUntrusted: (userId: string) => Promise<User>; @@ - passwordUntrusted: async (userId: string) => { - await clerkClient.users.__experimental_passwordUntrusted(userId); - }, + passwordUntrusted: async (userId: string) => { + return clerkClient.users.__experimental_passwordUntrusted(userId); + },Also applies to: 214-216
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
1-43: Encapsulating task navigation inuseSessionTasksContextis clean; consider normalizing path assemblyThe new
navigateOnSetActivehelper correctly branches onsession.currentTaskand usesgetTaskEndpointplus router state, while keeping the raw context small. The only subtle point is"./" + basePath + startPath + taskEndpointstring math: if any of these segments already include or omit leading slashes inconsistently, you can end up with double slashes or unexpected nesting. If you start seeing routing edge cases, it may be worth centralizing this path-building in a small utility that normalizes segments before concatenation; otherwise the approach here looks good.integration/tests/session-tasks-sign-in-reset-password.test.ts (1)
31-32: Consider using consistent OTP input approach across tests.Test 1 uses
keyboard.typewith delay while Test 2 usesfill()for entering the 2FA code. For consistency and maintainability, consider standardizing on one approach.- await u.page.getByRole('textbox', { name: 'code' }).click(); - await u.page.keyboard.type('424242', { delay: 100 }); + await u.page.getByRole('textbox', { name: 'code' }).fill('424242');Also applies to: 76-76
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
19-34: Optional: Add a guard/comment forclerk.isLoadedThe component assumes
clerk.userandclerk.sessionare available, which is true under the current mounting strategy, but not obvious from this file alone.Consider either:
- Asserting
if (!clerk.isLoaded) { return null; }early, or- Adding a brief comment noting that
TaskResetPasswordonly renders after Clerk is loaded (via its HOCs),so future refactors don’t accidentally use this component in an unloaded state.
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (1)
86-107: Optional:currentTaskContainerref and minHeight logic appear unused
currentTaskContaineris created but not attached to any JSX element in this file, socurrentTaskContainer.current?.offsetHeightwill always beundefined, making theminHeightcalculation effectively a no-op.If there’s no external wiring that assigns this ref, consider either:
- Removing the ref and
minHeightbranch, or- Attaching the ref to the actual task container so the loading state can preserve height as intended.
📜 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 (79)
.changeset/loose-brooms-occur.md(1 hunks).changeset/thick-dancers-battle.md(1 hunks)integration/presets/envs.ts(2 hunks)integration/presets/longRunningApps.ts(3 hunks)integration/testUtils/organizationsService.ts(2 hunks)integration/testUtils/usersService.ts(2 hunks)integration/tests/session-tasks-sign-in-reset-password.test.ts(1 hunks)packages/backend/src/api/endpoints/UserApi.ts(1 hunks)packages/clerk-js/bundlewatch.config.json(1 hunks)packages/clerk-js/src/core/sessionTasks.ts(1 hunks)packages/clerk-js/src/test/fixture-helpers.ts(2 hunks)packages/clerk-js/src/ui/components/SessionTasks/index.tsx(4 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx(3 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx(3 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx(2 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/__tests__/TaskResetPassword.test.tsx(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/index.ts(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.ts(1 hunks)packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx(3 hunks)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts(2 hunks)packages/clerk-js/src/ui/contexts/components/SignIn.ts(2 hunks)packages/clerk-js/src/ui/contexts/components/SignUp.ts(3 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/clerk-js/src/ui/types.ts(3 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/en-US.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/types/appearance.ts(1 hunks)packages/shared/src/types/clerk.ts(2 hunks)packages/shared/src/types/localization.ts(1 hunks)packages/shared/src/types/session.ts(2 hunks)packages/testing/src/playwright/unstable/page-objects/sessionTask.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (48)
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
- packages/localizations/src/mn-MN.ts
- packages/localizations/src/zh-TW.ts
- packages/localizations/src/th-TH.ts
- packages/localizations/src/ko-KR.ts
- packages/localizations/src/bn-IN.ts
- packages/localizations/src/cs-CZ.ts
- packages/localizations/src/ms-MY.ts
- packages/shared/src/types/clerk.ts
- packages/localizations/src/vi-VN.ts
- packages/localizations/src/sk-SK.ts
- .changeset/thick-dancers-battle.md
- packages/localizations/src/es-ES.ts
- packages/localizations/src/tr-TR.ts
- packages/clerk-js/src/test/fixture-helpers.ts
- packages/clerk-js/src/ui/types.ts
- packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/index.ts
- packages/localizations/src/kk-KZ.ts
- packages/clerk-js/src/core/sessionTasks.ts
- packages/localizations/src/hr-HR.ts
- packages/localizations/src/fi-FI.ts
- packages/localizations/src/id-ID.ts
- packages/localizations/src/fr-FR.ts
- packages/localizations/src/es-UY.ts
- packages/localizations/src/sv-SE.ts
- packages/localizations/src/de-DE.ts
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/tests/TaskResetPassword.test.tsx
- packages/localizations/src/nb-NO.ts
- packages/localizations/src/ca-ES.ts
- packages/clerk-js/src/ui/contexts/components/SignIn.ts
- packages/localizations/src/te-IN.ts
- packages/localizations/src/hu-HU.ts
- packages/localizations/src/ta-IN.ts
- packages/localizations/src/is-IS.ts
- packages/localizations/src/be-BY.ts
- packages/localizations/src/en-GB.ts
- integration/presets/envs.ts
- packages/shared/src/types/localization.ts
- packages/localizations/src/es-CR.ts
- packages/localizations/src/bg-BG.ts
- packages/localizations/src/zh-CN.ts
- packages/clerk-js/bundlewatch.config.json
- packages/localizations/src/it-IT.ts
- packages/localizations/src/nl-NL.ts
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
- packages/localizations/src/ro-RO.ts
- packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
- integration/testUtils/organizationsService.ts
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{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/da-DK.tsintegration/testUtils/usersService.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxintegration/presets/longRunningApps.tspackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxintegration/tests/session-tasks-sign-in-reset-password.test.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.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/da-DK.tsintegration/testUtils/usersService.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxintegration/presets/longRunningApps.tspackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxintegration/tests/session-tasks-sign-in-reset-password.test.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.ts
packages/**/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/da-DK.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxpackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.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/da-DK.tsintegration/testUtils/usersService.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxintegration/presets/longRunningApps.tspackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxintegration/tests/session-tasks-sign-in-reset-password.test.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.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/da-DK.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxpackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.ts
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
packages/localizations/src/da-DK.tsintegration/testUtils/usersService.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxintegration/presets/longRunningApps.tspackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxintegration/tests/session-tasks-sign-in-reset-password.test.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.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/da-DK.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/localizations/src/ja-JP.tspackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/localizations/src/he-IL.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sr-RS.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/da-DK.tsintegration/testUtils/usersService.tspackages/clerk-js/src/ui/contexts/components/SessionTasks.tspackages/shared/src/types/appearance.tspackages/localizations/src/es-MX.tspackages/localizations/src/uk-UA.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/localizations/src/ja-JP.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxintegration/presets/longRunningApps.tspackages/localizations/src/el-GR.tspackages/localizations/src/ar-SA.tspackages/localizations/src/pl-PL.tspackages/localizations/src/nl-BE.tspackages/backend/src/api/endpoints/UserApi.tspackages/localizations/src/he-IL.tspackages/shared/src/types/session.tspackages/localizations/src/en-US.tspackages/localizations/src/fa-IR.tspackages/localizations/src/hi-IN.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/testing/src/playwright/unstable/page-objects/sessionTask.tspackages/localizations/src/ru-RU.tspackages/clerk-js/src/ui/elements/contexts/index.tsxintegration/tests/session-tasks-sign-in-reset-password.test.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsxpackages/localizations/src/sr-RS.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/contexts/components/SessionTasks.tspackages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxpackages/clerk-js/src/ui/contexts/components/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.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/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
packages/clerk-js/src/ui/components/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.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/SessionTasks/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.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:
integration/tests/session-tasks-sign-in-reset-password.test.ts
**/*.{test,spec,e2e}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use real Clerk instances for integration tests
Files:
integration/tests/session-tasks-sign-in-reset-password.test.ts
🧬 Code graph analysis (9)
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (3)
packages/clerk-js/src/ui/types.ts (2)
SessionTasksCtx(144-146)TaskResetPasswordCtx(152-154)packages/clerk-js/src/core/resources/Session.ts (1)
currentTask(423-426)packages/clerk-js/src/core/sessionTasks.ts (1)
getTaskEndpoint(17-17)
packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.ts (4)
packages/clerk-js/src/ui/types.ts (1)
AvailableComponentProps(45-62)packages/shared/src/types/session.ts (1)
SessionTask(334-339)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
useSessionTasksContext(15-43)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (3)
packages/clerk-js/src/core/sessionTasks.ts (1)
INTERNAL_SESSION_TASK_ROUTE_BY_KEY(9-12)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (2)
TaskResetPasswordContext(59-59)SessionTasksContext(9-9)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
TaskResetPassword(201-203)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (10)
packages/clerk-js/src/ui/elements/contexts/index.tsx (2)
useCardState(42-70)withCardStateProvider(72-81)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (2)
useTaskResetPasswordContext(61-69)useSessionTasksContext(15-43)packages/clerk-js/src/ui/hooks/useMultipleSessions.ts (1)
useMultipleSessions(18-18)packages/clerk-js/src/ui/utils/passwordUtils.ts (1)
createPasswordError(33-74)packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)packages/clerk-js/src/core/resources/SignIn.ts (1)
identifier(644-646)packages/clerk-js/src/ui/customizables/Flow.tsx (1)
Flow(41-44)packages/clerk-js/src/ui/elements/Header.tsx (1)
Header(103-108)packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.ts (1)
withTaskGuard(17-38)packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/index.ts (1)
withTaskGuard(1-1)
integration/presets/longRunningApps.ts (3)
integration/presets/next.ts (1)
next(48-54)integration/presets/envs.ts (1)
envs(192-220)integration/presets/tanstack.ts (1)
tanstack(15-17)
packages/backend/src/api/endpoints/UserApi.ts (1)
packages/backend/src/api/resources/User.ts (1)
User(11-221)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (3)
packages/clerk-js/src/ui/router/RouteContext.tsx (1)
useRouter(33-39)packages/clerk-js/src/core/sessionTasks.ts (1)
getTaskEndpoint(17-17)packages/clerk-js/src/core/resources/Session.ts (1)
currentTask(423-426)
integration/tests/session-tasks-sign-in-reset-password.test.ts (2)
integration/testUtils/index.ts (2)
testAgainstRunningApps(88-88)createTestUtils(24-86)integration/presets/index.ts (1)
appConfigs(15-32)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (1)
packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (1)
useSessionTasksContext(15-43)
⏰ 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
| taskResetPassword: { | ||
| formButtonPrimary: undefined, | ||
| signOut: { | ||
| actionLink: undefined, | ||
| actionText: undefined, | ||
| }, | ||
| title: undefined, | ||
| }, |
There was a problem hiding this comment.
Add Hebrew translations before feature release.
The taskResetPassword block structure is correct, but all translation strings are undefined. While this is acceptable for initial scaffolding and consistent with other undefined entries in this community-contributed locale file, proper Hebrew translations should be provided before the reset-password task feature is fully released to users.
Consider populating these fields with appropriate Hebrew translations:
formButtonPrimary: Button text for the primary action (e.g., "Reset Password")signOut.actionLink: Link text for signing outsignOut.actionText: Descriptive text for the sign-out actiontitle: Title for the reset password task screen
Since Hebrew is an RTL language, ensure translations are culturally appropriate and properly formatted for right-to-left display.
🤖 Prompt for AI Agents
In packages/localizations/src/he-IL.ts around lines 855 to 862, the
taskResetPassword block contains undefined values for formButtonPrimary,
signOut.actionLink, signOut.actionText, and title; replace each undefined with
appropriate Hebrew translations (e.g., formButtonPrimary: "אפס סיסמה" or
similar, signOut.actionLink: "התנתק", signOut.actionText: a short descriptive
phrase like "חזור למסך הכניסה" or equivalent, and title: a succinct screen title
such as "איפוס סיסמא"), ensuring the translations are concise, culturally
appropriate for Hebrew and suitable for RTL rendering, and follow the same
string formatting and escaping conventions used elsewhere in the file.
|
!snapshot |
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (1)
96-104: Avoid shippingconsole.login the redirect effect and double-check__internal_setActiveInProgressbehavior.This effect now redirects when there is no task, when the session is active, or when
clerk.__internal_setActiveInProgressis true, and logs every time it does so. Theconsole.logwill surface in consuming apps in production; it should be removed or gated behind an internal/dev-only logger. Also, please confirm that forcing anavigate(redirectUrlComplete)whilesetActiveis in progress cannot conflict with any redirect performed bysetActiveitself (e.g., causing redundant navigations), and that this is the intended place to handle that transition.
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (1)
90-115:currentTaskContainerref is never attached, sominHeightis effectively a no-op.
currentTaskContaineris created withuseRefand only read in the fallback<Card.Root>sxprop, but it's not passed as arefto any element in this component. That meanscurrentTaskContainer.currentremainsnullandoffsetHeightis alwaysundefined, so theminHeightlogic does nothing. If the goal is to preserve the previous task card height while showing the loading state, consider attaching this ref to the element that wraps the task content; otherwise, you can safely drop the ref andminHeightcomputation.packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.ts (1)
24-33: Clarify guard behavior for mismatched task keys during__internal_setActiveInProgress.The predicate redirects when there is no current task, or when the task key mismatches and
!clerk.__internal_setActiveInProgress. This means that whilesetActiveis in progress, a mismatchedtaskKeywill not cause a redirect, relying instead on outer logic (e.g.,SessionTasks) to handle navigation. Since the JSDoc says “Triggers a redirect if current task is not the given task key,” consider either:
- updating the JSDoc to mention this exception, or
- moving the
__internal_setActiveInProgresscheck outside the mismatch clause if you really want to redirect on any mismatch regardless of activation state.Behavior is likely fine as-is, but making this explicit would avoid confusion for future readers.
📜 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 (2)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx(5 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.tsx
**/*.ts?(x)
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/tasks/shared/withTaskGuard.tspackages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/index.tsx
**/*.{md,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Update documentation for API changes
Files:
packages/clerk-js/src/ui/components/SessionTasks/index.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/SessionTasks/index.tsx
🧬 Code graph analysis (1)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (3)
packages/clerk-js/src/core/sessionTasks.ts (1)
INTERNAL_SESSION_TASK_ROUTE_BY_KEY(9-12)packages/clerk-js/src/ui/contexts/components/SessionTasks.ts (2)
TaskResetPasswordContext(59-59)SessionTasksContext(9-9)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/index.tsx (1)
TaskResetPassword(201-203)
⏰ 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)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx (2)
14-19: Reset-password task routing/context wiring matches existing pattern.The added
TaskResetPasswordContextimport,TaskResetPasswordcomponent import, and the new<Route>block mirror the existingchoose-organizationwiring and correctly useINTERNAL_SESSION_TASK_ROUTE_BY_KEY['reset-password']plus{ componentName, redirectUrlComplete }. This is consistent with the newTaskResetPasswordHOC setup.Also applies to: 64-70
124-127: SessionTasksContext value narrowed toredirectUrlCompletealigns with new guard usage.Providing only
{ redirectUrlComplete }here matches the updatedwithTaskGuardimplementation that readsctx.redirectUrlCompletefor its redirect target. AssumingSessionTasksCtxwas updated accordingly, this simplification looks correct and keeps the context surface minimal.packages/clerk-js/src/ui/components/SessionTasks/tasks/shared/withTaskGuard.ts (1)
1-8: withTaskGuard typing, imports, and JSDoc look solid.Using
SessionTask['key']from@clerk/shared/types, pullingredirectUrlCompleteviauseSessionTasksContext, and annotating the HOC with an explicit(props: P) => null | JSX.Elementreturn type all align with the guidelines for shared types and explicit public API typing. The added JSDoc clarifies behavior and marks the utility as@internal, which is appropriate here.Also applies to: 9-20
octoper
deleted the
vaggelis/user-4002-implement-the-aio-components-new-flow-and-session-task
branch
Description
This PR introduces the new
reset-passwordsession task.This PR does not yet exports the
<TaskResetPassword/>from any of the React related packages@clerk/clerk-react,@clerk/nextjsetc, this will be included in a followup PRN+1 tasks
CleanShot.2025-11-26.at.13.18.39.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Localization
Tests
✏️ Tip: You can customize this high-level summary in your review settings.