feat(clerk-js,clerk-react,nextjs): Export TaskResetPassword component (#7314)

octoper · web-flow · commit 818c25a9eec2 · 2025-12-05T11:19:03.000Z
diff --git a/.changeset/modern-coins-camp.md b/.changeset/modern-coins-camp.md
@@ -0,0 +1,8 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/nextjs": minor
+"@clerk/clerk-react": minor
+"@clerk/shared": minor
+---
+
+Introduce new `<TaskResetPassword/>` session task component
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
@@ -37,6 +37,7 @@ const AVAILABLE_COMPONENTS = [
   'apiKeys',
   'oauthConsent',
   'taskChooseOrganization',
+  'taskResetPassword',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -99,6 +100,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
   apiKeys: buildComponentControls('apiKeys'),
   oauthConsent: buildComponentControls('oauthConsent'),
   taskChooseOrganization: buildComponentControls('taskChooseOrganization'),
+  taskResetPassword: buildComponentControls('taskResetPassword'),
 };
 
 declare global {
@@ -352,6 +354,14 @@ void (async () => {
         },
       );
     },
+    '/task-reset-password': () => {
+      Clerk.mountTaskResetPassword(
+        app,
+        componentControls.taskResetPassword.getProps() ?? {
+          redirectUrlComplete: '/user-profile',
+        },
+      );
+    },
     '/open-sign-in': () => {
       mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
     },
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -85,6 +85,7 @@ import type {
   SignUpRedirectOptions,
   SignUpResource,
   TaskChooseOrganizationProps,
+  TaskResetPasswordProps,
   TasksRedirectOptions,
   UnsubscribeCallback,
   UserAvatarProps,
@@ -1424,6 +1425,26 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
   };
 
+  public mountTaskResetPassword = (node: HTMLDivElement, props?: TaskResetPasswordProps) => {
+    this.assertComponentsReady(this.#componentControls);
+
+    void this.#componentControls.ensureMounted({ preloadHint: 'TaskResetPassword' }).then(controls =>
+      controls.mountComponent({
+        name: 'TaskResetPassword',
+        appearanceKey: 'taskResetPassword',
+        node,
+        props,
+      }),
+    );
+
+    this.telemetry?.record(eventPrebuiltComponentMounted('TaskResetPassword', props));
+  };
+
+  public unmountTaskResetPassword = (node: HTMLDivElement) => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+  };
+
   /**
    * `setActive` can be used to set the active session and/or organization.
    */
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -23,6 +23,8 @@ const componentImportPaths = {
   SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
   TaskChooseOrganization: () =>
     import(/* webpackChunkName: "taskChooseOrganization" */ '../components/SessionTasks/tasks/TaskChooseOrganization'),
+  TaskResetPassword: () =>
+    import(/* webpackChunkName: "taskResetPassword" */ '../components/SessionTasks/tasks/TaskResetPassword'),
   PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans/PlanDetails'),
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
@@ -123,6 +125,10 @@ export const TaskChooseOrganization = lazy(() =>
   componentImportPaths.TaskChooseOrganization().then(module => ({ default: module.TaskChooseOrganization })),
 );
 
+export const TaskResetPassword = lazy(() =>
+  componentImportPaths.TaskResetPassword().then(module => ({ default: module.TaskResetPassword })),
+);
+
 export const PlanDetails = lazy(() =>
   componentImportPaths.PlanDetails().then(module => ({ default: module.PlanDetails })),
 );
@@ -172,6 +178,7 @@ export const ClerkComponents = {
   OAuthConsent,
   SubscriptionDetails,
   TaskChooseOrganization,
+  TaskResetPassword,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;
diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts
@@ -59,7 +59,8 @@ export type AvailableComponentProps =
   | __internal_SubscriptionDetailsProps
   | __internal_PlanDetailsProps
   | APIKeysProps
-  | TaskChooseOrganizationProps;
+  | TaskChooseOrganizationProps
+  | TaskResetPasswordProps;
 
 type ComponentMode = 'modal' | 'mounted';
 type SignInMode = 'modal' | 'redirect';
diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -23,6 +23,7 @@ export {
   SignOutButton,
   SignUpButton,
   TaskChooseOrganization,
+  TaskResetPassword,
   UserAvatar,
   UserButton,
   Waitlist,
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
@@ -35,6 +35,7 @@ export {
   SignUp,
   SignUpButton,
   TaskChooseOrganization,
+  TaskResetPassword,
   UserAvatar,
   UserButton,
   UserProfile,
diff --git a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -38,6 +38,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "SignedIn",
   "SignedOut",
   "TaskChooseOrganization",
+  "TaskResetPassword",
   "UserAvatar",
   "UserButton",
   "UserProfile",
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
@@ -9,6 +9,7 @@ export {
   SignIn,
   SignUp,
   TaskChooseOrganization,
+  TaskResetPassword,
   UserAvatar,
   UserButton,
   UserProfile,
diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx
@@ -9,6 +9,7 @@ import type {
   SignInProps,
   SignUpProps,
   TaskChooseOrganizationProps,
+  TaskResetPasswordProps,
   UserAvatarProps,
   UserButtonProps,
   UserProfileProps,
@@ -696,3 +697,31 @@ export const TaskChooseOrganization = withClerk(
   },
   { component: 'TaskChooseOrganization', renderWhileLoading: true },
 );
+
+export const TaskResetPassword = withClerk(
+  ({ clerk, component, fallback, ...props }: WithClerkProp<TaskResetPasswordProps & FallbackProp>) => {
+    const mountingStatus = useWaitForComponentMount(component);
+    const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded;
+
+    const rendererRootProps = {
+      ...(shouldShowFallback && fallback && { style: { display: 'none' } }),
+    };
+
+    return (
+      <>
+        {shouldShowFallback && fallback}
+        {clerk.loaded && (
+          <ClerkHostRenderer
+            component={component}
+            mount={clerk.mountTaskResetPassword}
+            unmount={clerk.unmountTaskResetPassword}
+            updateProps={(clerk as any).__unstable__updateProps}
+            props={props}
+            rootProps={rendererRootProps}
+          />
+        )}
+      </>
+    );
+  },
+  { component: 'TaskResetPassword', renderWhileLoading: true },
+);
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
@@ -48,6 +48,7 @@ import type {
   SignUpResource,
   State,
   TaskChooseOrganizationProps,
+  TaskResetPasswordProps,
   TasksRedirectOptions,
   UnsubscribeCallback,
   UserAvatarProps,
@@ -150,7 +151,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountAPIKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();
   private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
-
+  private premountTaskResetPasswordNodes = new Map<HTMLDivElement, TaskResetPasswordProps | undefined>();
   // A separate Map of `addListener` method calls to handle multiple listeners.
   private premountAddListenerCalls = new Map<
     ListenerCallback,
@@ -676,6 +677,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.mountTaskChooseOrganization(node, props);
     });
 
+    this.premountTaskResetPasswordNodes.forEach((props, node) => {
+      clerkjs.mountTaskResetPassword(node, props);
+    });
+
     /**
      * Only update status in case `clerk.status` is missing. In any other case, `clerk-js` should be the orchestrator.
      */
@@ -1218,6 +1223,22 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  mountTaskResetPassword = (node: HTMLDivElement, props?: TaskResetPasswordProps): void => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.mountTaskResetPassword(node, props);
+    } else {
+      this.premountTaskResetPasswordNodes.set(node, props);
+    }
+  };
+
+  unmountTaskResetPassword = (node: HTMLDivElement): void => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.unmountTaskResetPassword(node);
+    } else {
+      this.premountTaskResetPasswordNodes.delete(node);
+    }
+  };
+
   addListener = (listener: ListenerCallback): UnsubscribeCallback => {
     if (this.clerkjs) {
       return this.clerkjs.addListener(listener);
diff --git a/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -32,6 +32,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "SignedIn",
   "SignedOut",
   "TaskChooseOrganization",
+  "TaskResetPassword",
   "UserAvatar",
   "UserButton",
   "UserProfile",
diff --git a/packages/remix/src/__tests__/exports.test.ts b/packages/remix/src/__tests__/exports.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import * as publicExports from '../index';
 import * as ssrExports from '../ssr/index';
 
diff --git a/packages/shared/src/types/appearance.ts b/packages/shared/src/types/appearance.ts
@@ -1125,6 +1125,10 @@ export type Appearance<T = Theme> = T &
      * 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
      */
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
@@ -646,6 +646,22 @@ export interface Clerk {
    */
   unmountTaskChooseOrganization: (targetNode: HTMLDivElement) => void;
 
+  /**
+   * Mounts a TaskResetPassword component at the target element.
+   *
+   * @param targetNode - Target node to mount the TaskResetPassword component.
+   * @param props - configuration parameters.
+   */
+  mountTaskResetPassword: (targetNode: HTMLDivElement, props?: TaskResetPasswordProps) => void;
+
+  /**
+   * Unmount a TaskResetPassword component from the target element.
+   * If there is no component mounted at the target node, results in a noop.
+   *
+   * @param targetNode - Target node to unmount the TaskResetPassword component from.
+   */
+  unmountTaskResetPassword: (targetNode: HTMLDivElement) => void;
+
   /**
    * @internal
    * Loads Stripe libraries for commerce functionality
diff --git a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -43,6 +43,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "SignedIn",
   "SignedOut",
   "TaskChooseOrganization",
+  "TaskResetPassword",
   "UserAvatar",
   "UserButton",
   "UserProfile",
