chore(clerk-js,ui): Make OAuthConsent component public

.changeset/fifty-grapes-ring.md

@@ -0,0 +1,12 @@
+---
+"@clerk/astro": minor
+"@clerk/clerk-js": minor
+"@clerk/nextjs": minor
+"@clerk/nuxt": minor
+"@clerk/react": minor
+"@clerk/shared": minor
+"@clerk/ui": minor
+"@clerk/vue": minor
+---
+
+Move OAuthConsent component to public export

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

@@ -28,5 +28,6 @@ export { default as OrganizationList } from './interactive/OrganizationList.astr
 export { default as CreateOrganization } from './interactive/CreateOrganization.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';
 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';

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

@@ -0,0 +1,11 @@
+---
+import type { OAuthConsentProps } from '@clerk/shared/types';
+type Props = OAuthConsentProps;
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
+---
+
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='oauth-consent'
+/>

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

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

packages/astro/src/react/uiComponents.tsx

@@ -1,5 +1,6 @@
 import type {
   GoogleOneTapProps,
+  OAuthConsentProps,
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationSwitcherProps,
@@ -196,3 +197,13 @@ export const PricingTable = withClerk(({ clerk, ...props }: WithClerkProp<Pricin
     />
   );
 }, 'PricingTable');
+
+export const OAuthConsent = withClerk(({ clerk, ...props }: WithClerkProp<OAuthConsentProps>) => {
+  return (
+    <Portal
+      mount={clerk?.mountOAuthConsent}
+      unmount={clerk?.unmountOAuthConsent}
+      props={props}
+    />
+  );
+}, 'OAuthConsent');

packages/astro/src/types.ts

@@ -119,4 +119,5 @@ export type InternalUIComponentId =
   | 'google-one-tap'
   | 'waitlist'
   | 'pricing-table'
-  | 'api-keys';
+  | 'api-keys'
+  | 'oauth-consent';

packages/clerk-js/sandbox/app.ts

@@ -475,7 +475,7 @@ void (async () => {
         description: scope === 'offline_access' ? null : `Grants access to your ${scope}`,
         requires_consent: true,
       }));
-      Clerk.__internal_mountOAuthConsent(
+      Clerk.mountOAuthConsent(
         app,
         componentControls.oauthConsent.getProps() ?? {
           scopes,

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

@@ -51,7 +51,7 @@ import type {
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
-  __internal_OAuthConsentProps,
+  OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
@@ -1335,7 +1335,7 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
-  public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+  public mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => {
     if (noUserExists(this)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderOAuthConsentComponentWhenUserDoesNotExist, {
@@ -1359,7 +1359,7 @@ export class Clerk implements ClerkInterface {
       );
   };
 
-  public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+  public unmountOAuthConsent = (node: HTMLDivElement) => {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 

packages/nextjs/src/client-boundary/hooks.ts

@@ -4,6 +4,7 @@ export {
   useAuth,
   useClerk,
   useEmailLink,
+  useOAuthConsent,
   useOrganization,
   useOrganizationList,
   useOrganizationCreationDefaults,

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

@@ -15,6 +15,8 @@ export {
   APIKeys,
   CreateOrganization,
   GoogleOneTap,
+  HandleSSOCallback,
+  OAuthConsent,
   OrganizationList,
   OrganizationSwitcher,
   PricingTable,
@@ -28,11 +30,8 @@ export {
   UserAvatar,
   UserButton,
   Waitlist,
-  HandleSSOCallback,
 } from '@clerk/react';
 
-export { OAuthConsent } from '@clerk/react/internal';
-
 // The assignment of UserProfile with BaseUserProfile props is used
 // to support the CustomPage functionality (eg UserProfile.Page)
 // Also the `typeof BaseUserProfile` is used to resolve the following error:

packages/nextjs/src/index.ts

@@ -25,6 +25,7 @@ export {
   APIKeys,
   CreateOrganization,
   GoogleOneTap,
+  OAuthConsent,
   OrganizationList,
   OrganizationProfile,
   OrganizationSwitcher,
@@ -52,6 +53,7 @@ export {
   useAuth,
   useClerk,
   useEmailLink,
+  useOAuthConsent,
   useOrganization,
   useOrganizationCreationDefaults,
   useOrganizationList,

packages/nextjs/src/internal.ts

@@ -2,6 +2,19 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
 export { MultisessionAppSupport } from './client-boundary/controlComponents';
-export { OAuthConsent } from './client-boundary/uiComponents';
-export { useOAuthConsent } from '@clerk/shared/react';
+
+/**
+ * @deprecated Import `OAuthConsent` from `@clerk/nextjs` instead.
+ */
+const OAuthConsent = OAuthConsentOriginal;
+export { OAuthConsent };
+
+/**
+ * @deprecated Import `useOAuthConsent` from `@clerk/nextjs` instead.
+ */
+const useOAuthConsent = useOAuthConsentOriginal;
+export { useOAuthConsent };

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

@@ -5,6 +5,7 @@ export {
   UserButton,
   OrganizationSwitcher,
   GoogleOneTap,
+  OAuthConsent,
   Waitlist,
   // Control components
   ClerkLoaded,

packages/react-router/src/internal.ts

@@ -1 +1,13 @@
-export { useOAuthConsent, OAuthConsent } from '@clerk/react/internal';
+import { OAuthConsent as OAuthConsentOriginal, useOAuthConsent as useOAuthConsentOriginal } from '@clerk/react';
+
+/**
+ * @deprecated Import `OAuthConsent` from `@clerk/react-router` instead.
+ */
+const OAuthConsent = OAuthConsentOriginal;
+export { OAuthConsent };
+
+/**
+ * @deprecated Import `useOAuthConsent` from `@clerk/react-router` instead.
+ */
+const useOAuthConsent = useOAuthConsentOriginal;
+export { useOAuthConsent };

packages/react/src/components/index.ts

@@ -2,6 +2,7 @@ export {
   APIKeys,
   CreateOrganization,
   GoogleOneTap,
+  OAuthConsent,
   OrganizationList,
   OrganizationProfile,
   OrganizationSwitcher,

packages/react/src/components/uiComponents.tsx

@@ -1,5 +1,5 @@
 import type {
-  __internal_OAuthConsentProps,
+  OAuthConsentProps,
   APIKeysProps,
   CreateOrganizationProps,
   GoogleOneTapProps,
@@ -645,7 +645,7 @@ export const APIKeys = withClerk(
 );
 
 export const OAuthConsent = withClerk(
-  ({ clerk, component, fallback, ...props }: WithClerkProp<__internal_OAuthConsentProps & FallbackProp>) => {
+  ({ clerk, component, fallback, ...props }: WithClerkProp<OAuthConsentProps & FallbackProp>) => {
     const mountingStatus = useWaitForComponentMount(component);
     const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded;
 
@@ -659,8 +659,8 @@ export const OAuthConsent = withClerk(
         {clerk.loaded && (
           <ClerkHostRenderer
             component={component}
-            mount={clerk.__internal_mountOAuthConsent}
-            unmount={clerk.__internal_unmountOAuthConsent}
+            mount={clerk.mountOAuthConsent}
+            unmount={clerk.unmountOAuthConsent}
             updateProps={(clerk as any).__internal_updateProps}
             props={props}
             rootProps={rendererRootProps}

packages/react/src/hooks/index.ts

@@ -11,6 +11,7 @@ export {
   useSession,
   useReverification,
   useAPIKeys,
+  useOAuthConsent,
   __experimental_useCheckout,
   __experimental_CheckoutProvider,
   __experimental_usePaymentElement,

packages/react/src/internal.ts

@@ -1,14 +1,27 @@
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
 import type { InternalClerkScriptProps } from '@clerk/shared/types';
 import type { Ui } from '@clerk/ui/internal';
 import type React from 'react';
 
+import { OAuthConsent as OAuthConsentOriginal } from './components/uiComponents';
 import { ClerkProvider } from './contexts/ClerkProvider';
 import type { ClerkProviderProps } from './types';
 
 export { setErrorThrowerOptions } from './errors/errorThrower';
 export { MultisessionAppSupport } from './components/controlComponents';
-export { useOAuthConsent } from '@clerk/shared/react';
-export { OAuthConsent } from './components/uiComponents';
+
+/**
+ * @deprecated Import `useOAuthConsent` from `@clerk/react` instead.
+ */
+const useOAuthConsent = useOAuthConsentOriginal;
+export { useOAuthConsent };
+
+/**
+ * @deprecated Import `OAuthConsent` from `@clerk/react` instead.
+ */
+const OAuthConsent = OAuthConsentOriginal;
+export { OAuthConsent };
+
 export { useRoutingProps } from './hooks/useRoutingProps';
 export { useDerivedAuth } from './hooks/useAuth';
 export { IS_REACT_SHARED_VARIANT_COMPATIBLE } from './utils/versionCheck';

packages/react/src/isomorphicClerk.ts

@@ -6,7 +6,7 @@ import type {
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
-  __internal_OAuthConsentProps,
+  OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
@@ -158,7 +158,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 premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
+  private premountOAuthConsentNodes = new Map<HTMLDivElement, OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
   private premountTaskResetPasswordNodes = new Map<HTMLDivElement, TaskResetPasswordProps | undefined>();
   private premountTaskSetupMFANodes = new Map<HTMLDivElement, TaskSetupMFAProps | undefined>();
@@ -747,7 +747,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     });
 
     this.premountOAuthConsentNodes.forEach((props, node) => {
-      clerkjs.__internal_mountOAuthConsent(node, props);
+      clerkjs.mountOAuthConsent(node, props);
     });
 
     this.premountTaskChooseOrganizationNodes.forEach((props, node) => {
@@ -1282,17 +1282,17 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+  mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__internal_mountOAuthConsent(node, props);
+      this.clerkjs.mountOAuthConsent(node, props);
     } else {
       this.premountOAuthConsentNodes.set(node, props);
     }
   };
 
-  __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+  unmountOAuthConsent = (node: HTMLDivElement) => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__internal_unmountOAuthConsent(node);
+      this.clerkjs.unmountOAuthConsent(node);
     } else {
       this.premountOAuthConsentNodes.delete(node);
     }

packages/shared/src/types/clerk.ts

@@ -667,14 +667,14 @@ export interface Clerk {
    * @param targetNode - Target node to mount the OAuth consent component.
    * @param oauthConsentProps - OAuth consent configuration parameters.
    */
-  __internal_mountOAuthConsent: (targetNode: HTMLDivElement, oauthConsentProps?: __internal_OAuthConsentProps) => void;
+  mountOAuthConsent: (targetNode: HTMLDivElement, oauthConsentProps?: OAuthConsentProps) => void;
 
   /**
    * Unmounts a OAuth consent component from the target element.
    *
    * @param targetNode - Target node to unmount the OAuth consent component from.
    */
-  __internal_unmountOAuthConsent: (targetNode: HTMLDivElement) => void;
+  unmountOAuthConsent: (targetNode: HTMLDivElement) => void;
 
   /**
    * Mounts a TaskChooseOrganization component at the target element.
@@ -2265,7 +2265,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
   };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
   /**
    * Customize the appearance of the component.
    */

packages/tanstack-react-start/src/internal.ts

@@ -1 +1,13 @@
-export { useOAuthConsent, OAuthConsent } from '@clerk/react/internal';
+import { OAuthConsent as OAuthConsentOriginal, useOAuthConsent as useOAuthConsentOriginal } from '@clerk/react';
+
+/**
+ * @deprecated Import `OAuthConsent` from `@clerk/tanstack-react-start` instead.
+ */
+const OAuthConsent = OAuthConsentOriginal;
+export { OAuthConsent };
+
+/**
+ * @deprecated Import `useOAuthConsent` from `@clerk/tanstack-react-start` instead.
+ */
+const useOAuthConsent = useOAuthConsentOriginal;
+export { useOAuthConsent };

packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx

@@ -208,9 +208,9 @@ describe('OAuthConsent', () => {
       f.withUser({ email_addresses: ['jane@example.com'] });
     });
 
-    // Simulate the accounts portal path: `clerk.__internal_mountOAuthConsent` is
+    // Simulate the accounts portal path: `clerk.mountOAuthConsent` is
     // called with the legacy `oAuth*` (capital-A) prop shape from
-    // `__internal_OAuthConsentProps`. The `ComponentContextProvider` translates
+    // `OAuthConsentProps`. The `ComponentContextProvider` translates
     // these to the lowercase `oauth*` shape that the component reads from context
     // (see the `case 'OAuthConsent':` block in ClerkUIComponentsContext.tsx).
     // This test verifies the translation end-to-end: if it were broken, the

packages/ui/src/contexts/ClerkUIComponentsContext.tsx

@@ -1,5 +1,5 @@
 import type {
-  __internal_OAuthConsentProps,
+  OAuthConsentProps,
   APIKeysProps,
   PricingTableProps,
   TaskChooseOrganizationProps,
@@ -119,7 +119,7 @@ export function ComponentContextProvider({
       // the lowercase `oauth*` context shape the component reads.
       // The public `<OAuthConsent />` wrapper also forwards `oauthClientId`
       // and `scope` through the same path.
-      const p = props as __internal_OAuthConsentProps;
+      const p = props as OAuthConsentProps;
       return (
         <OAuthConsentContext.Provider
           value={{