feat(clerk-js): Introduce reset password after auth task #7268
Conversation
🦋 Changeset detectedLatest commit: 29759c4 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 new "reset-password" session task: UI component, context, guard HOC, routing key, types, localization, tests, and a changeset entry. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SessionTasks
participant Context as TaskResetPasswordContext
participant Guard as withTaskGuard
participant Component as TaskResetPassword
participant API as updatePassword API
User->>SessionTasks: open session tasks
SessionTasks->>Context: provide TaskResetPasswordContext
Context->>Guard: mount wrap
Guard->>Guard: check session task 'reset-password' exists?
alt task exists
Guard->>Component: render
User->>Component: enter & submit new password
Component->>API: update password (reverification)
API-->>Component: success / error
Component->>User: optional sign-out and redirect to redirectUrlComplete
else task missing
Guard->>User: redirect to sign-in or after-sign-in URL (warn)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25–30 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
…ext and update tests
…current password requirement and related fields
octoper
force-pushed
the
vaggelis/user-4002-implement-the-aio-components-new-flow-and-session-task
branch
from
1b51682 to
9ab72aa
Compare
…t for consistency
|
!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 |
Description
This PR introduces the new
reset-passwordsession taskChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.