chore(nextjs,clerk-react,clerk-js): Drop the mounted variant of UserVerification (#4266)

Author: panteliselef

.changeset/breezy-crabs-crash.md

@@ -0,0 +1,13 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/nextjs": minor
+"@clerk/clerk-react": minor
+"@clerk/types": minor
+---
+
+Drop the experimental mounted variant of `UserVerification`.
+
+Removes:
+- `<__experimental_UserVerification/>`
+- `__experimental_mountUserVerification()`
+- `__experimental_unmountUserVerification()`

packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -27,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
   "SignedOut",
   "UserButton",
   "UserProfile",
-  "__experimental_UserVerification",
   "useAuth",
   "useClerk",
   "useEmailLink",

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

@@ -18,7 +18,6 @@ import { logger } from '@clerk/shared/logger';
 import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
 import type {
   __experimental_UserVerificationModalProps,
-  __experimental_UserVerificationProps,
   ActiveSessionResource,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
@@ -517,38 +516,6 @@ export class Clerk implements ClerkInterface {
     );
   };
 
-  public __experimental_mountUserVerification = (
-    node: HTMLDivElement,
-    props?: __experimental_UserVerificationProps,
-  ): void => {
-    this.assertComponentsReady(this.#componentControls);
-    if (noUserExists(this)) {
-      if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotOpenUserProfile, {
-          code: 'cannot_render_user_missing',
-        });
-      }
-      return;
-    }
-    void this.#componentControls.ensureMounted({ preloadHint: 'UserVerification' }).then(controls =>
-      controls.mountComponent({
-        name: 'UserVerification',
-        appearanceKey: 'userVerification',
-        node,
-        props,
-      }),
-    );
-  };
-
-  public __experimental_unmountUserVerification = (node: HTMLDivElement): void => {
-    this.assertComponentsReady(this.#componentControls);
-    void this.#componentControls.ensureMounted().then(controls =>
-      controls.unmountComponent({
-        node,
-      }),
-    );
-  };
-
   public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted({ preloadHint: 'SignUp' }).then(controls =>

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

@@ -26,7 +26,6 @@ export {
   SignOutButton,
   SignUpButton,
   UserButton,
-  __experimental_UserVerification,
   GoogleOneTap,
 } from '@clerk/clerk-react';
 

packages/nextjs/src/index.ts

@@ -30,7 +30,6 @@ export {
   SignUpButton,
   UserButton,
   UserProfile,
-  __experimental_UserVerification,
   GoogleOneTap,
 } from './client-boundary/uiComponents';
 

packages/react/src/components/index.ts

@@ -3,7 +3,6 @@ export {
   SignIn,
   UserProfile,
   UserButton,
-  __experimental_UserVerification,
   OrganizationSwitcher,
   OrganizationProfile,
   CreateOrganization,

packages/react/src/components/uiComponents.tsx

@@ -1,7 +1,6 @@
 import { logErrorInDevMode, without } from '@clerk/shared';
 import { isDeeplyEqual } from '@clerk/shared/react';
 import type {
-  __experimental_UserVerificationProps,
   CreateOrganizationProps,
   GoogleOneTapProps,
   OrganizationListProps,
@@ -260,20 +259,6 @@ export const UserButton: UserButtonExportType = Object.assign(_UserButton, {
   Link: MenuLink,
 });
 
-export const __experimental_UserVerification = withClerk(
-  ({ clerk, ...props }: WithClerkProp<PropsWithChildren<__experimental_UserVerificationProps>>) => {
-    return (
-      <Portal
-        mount={clerk.__experimental_mountUserVerification}
-        unmount={clerk.__experimental_unmountUserVerification}
-        updateProps={(clerk as any).__unstable__updateProps}
-        props={props}
-      />
-    );
-  },
-  '__experimental_UserVerification',
-);
-
 export function OrganizationProfilePage({ children }: PropsWithChildren<OrganizationProfilePageProps>) {
   logErrorInDevMode(organizationProfilePageRenderedError);
   return <>{children}</>;

packages/react/src/isomorphicClerk.ts

@@ -108,7 +108,6 @@ type IsomorphicLoadedClerk = Without<
   | 'mountSignUp'
   | 'mountSignIn'
   | 'mountUserProfile'
-  | '__experimental_mountUserVerification'
   | 'client'
 > & {
   // TODO: Align return type and parms
@@ -154,7 +153,6 @@ type IsomorphicLoadedClerk = Without<
   mountSignUp: (node: HTMLDivElement, props: SignUpProps) => void;
   mountSignIn: (node: HTMLDivElement, props: SignInProps) => void;
   mountUserProfile: (node: HTMLDivElement, props: UserProfileProps) => void;
-  __experimental_mountUserVerification: (node: HTMLDivElement, props: __experimental_UserVerificationProps) => void;
   client: ClientResource | undefined;
 };
 
@@ -178,7 +176,6 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountCreateOrganizationNodes = new Map<HTMLDivElement, CreateOrganizationProps>();
   private premountOrganizationSwitcherNodes = new Map<HTMLDivElement, OrganizationSwitcherProps>();
   private premountOrganizationListNodes = new Map<HTMLDivElement, OrganizationListProps>();
-  private premountUserVerificationNodes = new Map<HTMLDivElement, __experimental_UserVerificationProps>();
   private premountMethodCalls = new Map<MethodName<BrowserClerk>, MethodCallback>();
   // A separate Map of `addListener` method calls to handle multiple listeners.
   private premountAddListenerCalls = new Map<
@@ -541,10 +538,6 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.mountUserProfile(node, props);
     });
 
-    this.premountUserVerificationNodes.forEach((props: __experimental_UserVerificationProps, node: HTMLDivElement) => {
-      clerkjs.__experimental_mountUserVerification(node, props);
-    });
-
     this.premountUserButtonNodes.forEach((props: UserButtonProps, node: HTMLDivElement) => {
       clerkjs.mountUserButton(node, props);
     });
@@ -768,22 +761,6 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __experimental_mountUserVerification = (node: HTMLDivElement, props: __experimental_UserVerificationProps): void => {
-    if (this.clerkjs && this.#loaded) {
-      this.clerkjs.__experimental_mountUserVerification(node, props);
-    } else {
-      this.premountUserVerificationNodes.set(node, props);
-    }
-  };
-
-  __experimental_unmountUserVerification = (node: HTMLDivElement): void => {
-    if (this.clerkjs && this.#loaded) {
-      this.clerkjs.__experimental_unmountUserVerification(node);
-    } else {
-      this.premountUserVerificationNodes.delete(node);
-    }
-  };
-
   mountSignUp = (node: HTMLDivElement, props: SignUpProps): void => {
     if (this.clerkjs && this.#loaded) {
       this.clerkjs.mountSignUp(node, props);

packages/types/src/clerk.ts

@@ -242,27 +242,6 @@ export interface Clerk {
    */
   unmountSignIn: (targetNode: HTMLDivElement) => void;
 
-  /**
-   * Mounts a user reverification flow component at the target element.
-   *
-   * @experimantal This API is still under active development and may change at any moment.
-   * @param targetNode Target node to mount the UserVerification component from.
-   * @param props user verification configuration parameters.
-   */
-  __experimental_mountUserVerification: (
-    targetNode: HTMLDivElement,
-    props?: __experimental_UserVerificationProps,
-  ) => void;
-
-  /**
-   * Unmount a user reverification flow component from the target element.
-   * If there is no component mounted at the target node, results in a noop.
-   *
-   * @experimantal This API is still under active development and may change at any moment.
-   * @param targetNode Target node to unmount the UserVerification component from.
-   */
-  __experimental_unmountUserVerification: (targetNode: HTMLDivElement) => void;
-
   /**
    * Mounts a sign up flow component at the target element.
    *