feat(clerk-js,react,nextjs): Export TaskResetPassword component and related functionality

Author: octoper

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

@@ -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.
    */

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;

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';

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

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

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,
@@ -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,
@@ -1218,6 +1219,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/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
      */

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 TaskChooseOrganization 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 TaskChooseOrganization component from.
+   */
+  unmountTaskResetPassword: (targetNode: HTMLDivElement) => void;
+
   /**
    * @internal
    * Loads Stripe libraries for commerce functionality