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

.changeset/nice-seas-vue-nuxt-oauth-consent.md

@@ -0,0 +1,18 @@
+---
+"@clerk/nuxt": minor
+"@clerk/vue": minor
+---
+
+Expose `OAuthConsent` as a public component export for Vue and Nuxt.
+
+Example:
+
+```vue
+<script setup lang="ts">
+import { OAuthConsent } from '@clerk/vue';
+</script>
+
+<template>
+  <OAuthConsent />
+</template>
+```

.changeset/small-planets-astro-oauth-consent.md

@@ -0,0 +1,15 @@
+---
+"@clerk/astro": minor
+---
+
+Expose `OAuthConsent` as a public component export for Astro.
+
+Example:
+
+```astro
+---
+import { OAuthConsent } from '@clerk/astro/components';
+---
+
+<OAuthConsent />
+```

.changeset/three-rabbits-react-oauth-consent.md

@@ -0,0 +1,13 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/nextjs": minor
+"@clerk/react": minor
+"@clerk/react-router": minor
+"@clerk/shared": minor
+"@clerk/tanstack-react-start": minor
+"@clerk/ui": minor
+---
+
+Expose `OAuthConsent` as a public component export across React-based SDKs.
+
+Also expose `useOAuthConsent()` as a public hook where supported.

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

@@ -1,4 +1,4 @@
 import { inBrowser as inClientSide, isValidBrowserOnline } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import {
   ClerkOfflineError,
@@ -58,6 +58,7 @@
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
+  OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
@@ -1348,7 +1349,7 @@
     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, {
@@ -1372,10 +1373,24 @@
       );
   };
 
-  public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+  public unmountOAuthConsent = (node: HTMLDivElement) => {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
+  /**
+   * @deprecated Use mountOAuthConsent instead.
+   */
+  public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+    return this.mountOAuthConsent(node, props);
+  };
+
+  /**
+   * @deprecated Use unmountOAuthConsent instead.
+   */
+  public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+    return this.unmountOAuthConsent(node);
+  };
+
   /**
    * Mount an API keys component at the target element.
    * @param targetNode Target to mount the APIKeys component.

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/__tests__/__snapshots__/exports.test.ts.snap

@@ -26,6 +26,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "CreateOrganization",
   "GoogleOneTap",
   "HandleSSOCallback",
+  "OAuthConsent",
   "OrganizationList",
   "OrganizationProfile",
   "OrganizationSwitcher",
@@ -61,6 +62,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "useAuth",
   "useClerk",
   "useEmailLink",
+  "useOAuthConsent",
   "useOrganization",
   "useOrganizationCreationDefaults",
   "useOrganizationList",

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/hooks/index.ts

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

packages/react/src/internal.ts

@@ -1,15 +1,28 @@
+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 { publishableKeyFromHost } from '@clerk/shared/keys';
 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

@@ -7,6 +7,7 @@ import type {
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
+  OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
@@ -1298,6 +1299,14 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => {
+    this.__internal_mountOAuthConsent(node, props);
+  };
+
+  unmountOAuthConsent = (node: HTMLDivElement) => {
+    this.__internal_unmountOAuthConsent(node);
+  };
+
   mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps): void => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.mountTaskChooseOrganization(node, props);

packages/shared/src/types/clerk.ts

@@ -676,6 +676,21 @@ export interface Clerk {
    */
   __internal_unmountOAuthConsent: (targetNode: HTMLDivElement) => void;
 
+  /**
+   * Mounts a OAuth consent component at the target element.
+   *
+   * @param targetNode - Target node to mount the OAuth consent component.
+   * @param oauthConsentProps - OAuth consent configuration parameters.
+   */
+  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.
+   */
+  unmountOAuthConsent: (targetNode: HTMLDivElement) => void;
+
   /**
    * Mounts a TaskChooseOrganization component at the target element.
    *
@@ -2265,7 +2280,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
   };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
   /**
    * Customize the appearance of the component.
    */
@@ -2328,6 +2343,9 @@ export type __internal_OAuthConsentProps = {
   onDeny?: () => void;
 };
 
+/** @deprecated Use OAuthConsentProps instead. */
+export type __internal_OAuthConsentProps = OAuthConsentProps;
+
 export interface HandleEmailLinkVerificationParams {
   /**
    * Full URL or path to navigate to after successful magic link verification

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

@@ -32,6 +32,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "CreateOrganization",
   "GoogleOneTap",
   "HandleSSOCallback",
+  "OAuthConsent",
   "OrganizationList",
   "OrganizationProfile",
   "OrganizationSwitcher",
@@ -67,6 +68,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "useAuth",
   "useClerk",
   "useEmailLink",
+  "useOAuthConsent",
   "useOrganization",
   "useOrganizationCreationDefaults",
   "useOrganizationList",