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

Author: octoper

.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

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() ?? {});
     },

packages/clerk-js/src/core/clerk.ts

@@ -108,6 +108,7 @@ import type {
   SignUpRedirectOptions,
   SignUpResource,
   TaskChooseOrganizationProps,
+  TaskResetPasswordProps,
   TasksRedirectOptions,
   UnsubscribeCallback,
   UserAvatarProps,
@@ -1391,6 +1392,26 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUi?.then(ui => ui.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.
    */

packages/nextjs/src/client-boundary/uiComponents.tsx

@@ -23,6 +23,7 @@ export {
   SignOutButton,
   SignUpButton,
   TaskChooseOrganization,
+  TaskResetPassword,
   UserAvatar,
   UserButton,
   Waitlist,

packages/nextjs/src/index.ts

@@ -35,6 +35,7 @@ export {
   SignUp,
   SignUpButton,
   TaskChooseOrganization,
+  TaskResetPassword,
   UserAvatar,
   UserButton,
   UserProfile,

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -45,6 +45,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "SignedIn",
   "SignedOut",
   "TaskChooseOrganization",
+  "TaskResetPassword",
   "UserAvatar",
   "UserButton",
   "UserProfile",

packages/react/src/components/index.ts

@@ -9,6 +9,7 @@ export {
   SignIn,
   SignUp,
   TaskChooseOrganization,
+  TaskResetPassword,
   UserAvatar,
   UserButton,
   UserProfile,

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 },
+);

packages/react/src/isomorphicClerk.ts

@@ -48,6 +48,7 @@ import type {
   SignUpResource,
   State,
   TaskChooseOrganizationProps,
+  TaskResetPasswordProps,
   TasksRedirectOptions,
   UnsubscribeCallback,
   UserAvatarProps,
@@ -152,7 +153,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,
@@ -689,6 +690,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.
      */
@@ -1233,6 +1238,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);

packages/shared/src/types/clerk.ts

@@ -656,6 +656,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