feat(ui): Remove <ConfigureSSO /> from experimental

.changeset/busy-sloths-joke.md

@@ -0,0 +1,14 @@
+---
+'@clerk/tanstack-react-start': minor
+'@clerk/react-router': minor
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/shared': minor
+'@clerk/astro': minor
+'@clerk/react': minor
+'@clerk/nuxt': minor
+'@clerk/vue': minor
+'@clerk/ui': minor
+---
+
+Remove `<ConfigureSSO />` from experimental path

packages/astro/src/astro-components/index.ts

@@ -31,4 +31,4 @@ export { default as Waitlist } from './interactive/Waitlist.astro';
 export { default as OAuthConsent } from './interactive/OAuthConsent.astro';
 export { default as PricingTable } from './interactive/PricingTable.astro';
 export { default as APIKeys } from './interactive/APIKeys.astro';
-export { default as __experimental_ConfigureSSO } from './interactive/ConfigureSSO.astro';
+export { default as ConfigureSSO } from './interactive/ConfigureSSO.astro';

packages/astro/src/astro-components/interactive/ConfigureSSO.astro

@@ -1,6 +1,6 @@
 ---
-import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
-type Props = __experimental_ConfigureSSOProps;
+import type { ConfigureSSOProps } from '@clerk/shared/types';
+type Props = ConfigureSSOProps;
 
 import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---

packages/astro/src/internal/mount-clerk-astro-js-components.ts

@@ -21,7 +21,7 @@ const mountAllClerkAstroJSComponents = () => {
     waitlist: 'mountWaitlist',
     'pricing-table': 'mountPricingTable',
     'api-keys': 'mountAPIKeys',
-    'configure-sso': '__experimental_mountConfigureSSO',
+    'configure-sso': 'mountConfigureSSO',
   } as const satisfies Record<InternalUIComponentId, keyof Clerk>;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {

packages/clerk-js/sandbox/app.ts

@@ -471,7 +471,7 @@ void (async () => {
       Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {});
     },
     '/configure-sso': () => {
-      Clerk.__experimental_mountConfigureSSO(app, componentControls.configureSSO.getProps() ?? {});
+      Clerk.mountConfigureSSO(app, componentControls.configureSSO.getProps() ?? {});
     },
     '/oauth-consent': () => {
       const searchParams = new URLSearchParams(window.location.search);

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

@@ -55,7 +55,6 @@ import {
 } from '@clerk/shared/telemetry';
 import type {
   __experimental_CheckoutOptions,
-  __experimental_ConfigureSSOProps,
   __internal_AttemptToEnableEnvironmentSettingParams,
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
@@ -80,6 +79,7 @@ import type {
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
+  ConfigureSSOProps,
   CreateOrganizationParams,
   CreateOrganizationProps,
   CredentialReturn,
@@ -1458,11 +1458,10 @@ export class Clerk implements ClerkInterface {
   /**
    * Mount a configure SSO component at the target element.
    *
-   * @experimental
    * @param targetNode Target to mount the ConfigureSSO component.
    * @param props Configuration parameters.
    */
-  public __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: __experimental_ConfigureSSOProps) => {
+  public mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps) => {
     if (disabledSelfServeSSOFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenDisabled, {
@@ -1497,7 +1496,7 @@ export class Clerk implements ClerkInterface {
       .then(controls =>
         controls.mountComponent({
           name: component,
-          appearanceKey: '__experimental_configureSSO',
+          appearanceKey: 'configureSSO',
           node,
           props,
         }),
@@ -1510,13 +1509,26 @@ export class Clerk implements ClerkInterface {
    * Unmount a configure SSO component from the target element.
    * If there is no component mounted at the target node, results in a noop.
    *
-   * @experimental
    * @param targetNode Target node to unmount the ConfigureSSO component from.
    */
-  public __experimental_unmountConfigureSSO = (node: HTMLDivElement) => {
+  public unmountConfigureSSO = (node: HTMLDivElement) => {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
+  /**
+   * @deprecated Use `mountConfigureSSO` instead.
+   */
+  public __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps) => {
+    return this.mountConfigureSSO(node, props);
+  };
+
+  /**
+   * @deprecated Use `unmountConfigureSSO` instead.
+   */
+  public __experimental_unmountConfigureSSO = (node: HTMLDivElement) => {
+    return this.unmountConfigureSSO(node);
+  };
+
   public mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps) => {
     const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',

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

@@ -13,6 +13,7 @@ import { useEnforceCorrectRoutingProps } from './hooks/useEnforceRoutingProps';
 
 export {
   APIKeys,
+  ConfigureSSO,
   CreateOrganization,
   GoogleOneTap,
   HandleSSOCallback,

packages/nextjs/src/index.ts

@@ -23,6 +23,7 @@ export {
  */
 export {
   APIKeys,
+  ConfigureSSO,
   CreateOrganization,
   GoogleOneTap,
   OAuthConsent,

packages/nuxt/src/module.ts

@@ -190,29 +190,14 @@ export default defineNuxtModule<ModuleOptions>({
       'Waitlist',
       // API Keys
       'APIKeys',
-    ];
-    otherComponents.forEach(component => {
-      void addComponent({
-        name: component,
-        export: component,
-        filePath: '@clerk/vue',
-      });
-    });
-
-    /**
-     * Experimental components from `@clerk/vue/experimental`.
-     * @experimental These components and their prop types are unstable and may change in future releases.
-     */
-    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-    const experimentalComponents: Array<keyof typeof import('@clerk/vue/experimental')> = [
       // SSO
       'ConfigureSSO',
     ];
-    experimentalComponents.forEach(component => {
+    otherComponents.forEach(component => {
       void addComponent({
         name: component,
         export: component,
-        filePath: '@clerk/vue/experimental',
+        filePath: '@clerk/vue',
       });
     });
   },

packages/nuxt/src/runtime/components/index.ts

@@ -4,6 +4,7 @@ export {
   UserAvatar,
   UserButton,
   OrganizationSwitcher,
+  ConfigureSSO,
   GoogleOneTap,
   OAuthConsent,
   Waitlist,

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

@@ -23,6 +23,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "ClerkLoaded",
   "ClerkLoading",
   "ClerkProvider",
+  "ConfigureSSO",
   "CreateOrganization",
   "GoogleOneTap",
   "HandleSSOCallback",

packages/react/src/components/index.ts

@@ -1,5 +1,6 @@
 export {
   APIKeys,
+  ConfigureSSO,
   CreateOrganization,
   GoogleOneTap,
   OAuthConsent,

packages/react/src/components/uiComponents.tsx

@@ -1,7 +1,7 @@
 import type {
-  __experimental_ConfigureSSOProps,
   __internal_OAuthConsentProps,
   APIKeysProps,
+  ConfigureSSOProps,
   CreateOrganizationProps,
   GoogleOneTapProps,
   OrganizationListProps,
@@ -645,11 +645,8 @@ export const APIKeys = withClerk(
   { component: 'ApiKeys', renderWhileLoading: true },
 );
 
-/**
- * @experimental This component is in early access and may change in future releases.
- */
 export const ConfigureSSO = withClerk(
-  ({ clerk, component, fallback, ...props }: WithClerkProp<__experimental_ConfigureSSOProps & FallbackProp>) => {
+  ({ clerk, component, fallback, ...props }: WithClerkProp<ConfigureSSOProps & FallbackProp>) => {
     const mountingStatus = useWaitForComponentMount(component);
     const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded;
 
@@ -663,8 +660,8 @@ export const ConfigureSSO = withClerk(
         {clerk.loaded && (
           <ClerkHostRenderer
             component={component}
-            mount={clerk.__experimental_mountConfigureSSO}
-            unmount={clerk.__experimental_unmountConfigureSSO}
+            mount={clerk.mountConfigureSSO}
+            unmount={clerk.unmountConfigureSSO}
             updateProps={(clerk as any).__internal_updateProps}
             props={props}
             rootProps={rendererRootProps}

packages/react/src/experimental.ts

@@ -2,21 +2,10 @@ export { CheckoutButton } from './components/CheckoutButton';
 export { PlanDetailsButton } from './components/PlanDetailsButton';
 export { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';
 
-/**
- * @experimental
- * This component and its prop types are unstable and may change in future releases.
- */
-export { ConfigureSSO } from './components/uiComponents';
-
 export type {
   __experimental_CheckoutButtonProps as CheckoutButtonProps,
   __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps,
   __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps,
-  /**
-   * @experimental
-   * This type is unstable and may change in future releases.
-   */
-  __experimental_ConfigureSSOProps as ConfigureSSOProps,
 } from '@clerk/shared/types';
 
 export {

packages/react/src/isomorphicClerk.ts

@@ -2,7 +2,6 @@ import { inBrowser } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJSScript, loadClerkUIScript } from '@clerk/shared/loadClerkJsScript';
 import type {
-  __experimental_ConfigureSSOProps,
   __internal_AttemptToEnableEnvironmentSettingParams,
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
@@ -26,6 +25,7 @@ import type {
   ClerkOptions,
   ClerkStatus,
   ClientResource,
+  ConfigureSSOProps,
   CreateOrganizationParams,
   CreateOrganizationProps,
   DomainOrProxyUrl,
@@ -160,7 +160,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountWaitlistNodes = new Map<HTMLDivElement, WaitlistProps | undefined>();
   private premountPricingTableNodes = new Map<HTMLDivElement, PricingTableProps | undefined>();
   private premountAPIKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();
-  private premountConfigureSSONodes = new Map<HTMLDivElement, __experimental_ConfigureSSOProps | undefined>();
+  private premountConfigureSSONodes = new Map<HTMLDivElement, ConfigureSSOProps | undefined>();
   private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
   private premountTaskResetPasswordNodes = new Map<HTMLDivElement, TaskResetPasswordProps | undefined>();
@@ -738,7 +738,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     });
 
     this.premountConfigureSSONodes.forEach((props, node) => {
-      clerkjs.__experimental_mountConfigureSSO(node, props);
+      clerkjs.mountConfigureSSO(node, props);
     });
 
     this.premountOAuthConsentNodes.forEach((props, node) => {
@@ -1277,22 +1277,36 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: __experimental_ConfigureSSOProps): void => {
+  mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__experimental_mountConfigureSSO(node, props);
+      this.clerkjs.mountConfigureSSO(node, props);
     } else {
       this.premountConfigureSSONodes.set(node, props);
     }
   };
 
-  __experimental_unmountConfigureSSO = (node: HTMLDivElement): void => {
+  unmountConfigureSSO = (node: HTMLDivElement): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__experimental_unmountConfigureSSO(node);
+      this.clerkjs.unmountConfigureSSO(node);
     } else {
       this.premountConfigureSSONodes.delete(node);
     }
   };
 
+  /**
+   * @deprecated Use `mountConfigureSSO` instead.
+   */
+  __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps): void => {
+    this.mountConfigureSSO(node, props);
+  };
+
+  /**
+   * @deprecated Use `unmountConfigureSSO` instead.
+   */
+  __experimental_unmountConfigureSSO = (node: HTMLDivElement): void => {
+    this.unmountConfigureSSO(node);
+  };
+
   __internal_mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.__internal_mountOAuthConsent(node, props);

packages/shared/src/types/clerk.ts

@@ -664,21 +664,27 @@ export interface Clerk {
   /**
    * Mount a configure SSO component at the target element.
    *
-   * @experimental This method is in early access and may change in future releases.
-   *
    * @param targetNode - Target to mount the ConfigureSSO component.
    * @param props - Configuration parameters.
    */
-  __experimental_mountConfigureSSO: (targetNode: HTMLDivElement, props?: __experimental_ConfigureSSOProps) => void;
+  mountConfigureSSO: (targetNode: HTMLDivElement, props?: ConfigureSSOProps) => void;
 
   /**
    * Unmount a configure SSO component from the target element.
    * If there is no component mounted at the target node, results in a noop.
    *
-   * @experimental This method is in early access and may change in future releases.
-   *
    * @param targetNode - Target node to unmount the ConfigureSSO component from.
    */
+  unmountConfigureSSO: (targetNode: HTMLDivElement) => void;
+
+  /**
+   * @deprecated Use `mountConfigureSSO` instead.
+   */
+  __experimental_mountConfigureSSO: (targetNode: HTMLDivElement, props?: ConfigureSSOProps) => void;
+
+  /**
+   * @deprecated Use `unmountConfigureSSO` instead.
+   */
   __experimental_unmountConfigureSSO: (targetNode: HTMLDivElement) => void;
 
   /**
@@ -2173,10 +2179,7 @@ export type APIKeysProps = {
   showDescription?: boolean;
 };
 
-/**
- * @experimental This type is in early access and may change in future releases.
- */
-export type __experimental_ConfigureSSOProps = {
+export type ConfigureSSOProps = {
   /**
    * Customisation options to fully match the Clerk components to your own brand.
    * These options serve as overrides and will be merged with the global `appearance`
@@ -2185,6 +2188,9 @@ export type __experimental_ConfigureSSOProps = {
   appearance?: ClerkAppearanceTheme;
 };
 
+/** @deprecated Use `ConfigureSSOProps` instead. */
+export type __experimental_ConfigureSSOProps = ConfigureSSOProps;
+
 export type GetAPIKeysParams = ClerkPaginationParams<{
   subject?: string;
   query?: string;

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

@@ -29,6 +29,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "ClerkLoaded",
   "ClerkLoading",
   "ClerkProvider",
+  "ConfigureSSO",
   "CreateOrganization",
   "GoogleOneTap",
   "HandleSSOCallback",

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -3,7 +3,7 @@ import {
   __internal_useUserEnterpriseConnections,
   useSession,
 } from '@clerk/shared/react';
-import type { __experimental_ConfigureSSOProps, EnterpriseConnectionResource } from '@clerk/shared/types';
+import type { ConfigureSSOProps, EnterpriseConnectionResource } from '@clerk/shared/types';
 import React from 'react';
 
 import { useProtect } from '@/common';
@@ -240,5 +240,4 @@ const useHasSuccessfulTestRun = (
   };
 };
 
-export const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =
-  withCardStateProvider(ConfigureSSOInternal);
+export const ConfigureSSO: React.ComponentType<ConfigureSSOProps> = withCardStateProvider(ConfigureSSOInternal);