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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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

.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,21 @@
+---
+"@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.
+
+Example:
+
+```tsx
+import { OAuthConsent } from '@clerk/react';
+
+export default function Page() {
+ return <OAuthConsent />;
+}
+```

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

@@ -95,6 +95,7 @@ import type {
  LoadedClerk,
  NavigateOptions,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -1348,7 +1349,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, {
@@ -1372,10 +1373,24 @@ 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 }));
  };
 
+ /**
+ * @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,20 @@
  * These need to be explicitly listed. Do not use an * here.
  * If you do, app router will break.
  */
+import { useOAuthConsent as useOAuthConsentOriginal } from '@clerk/shared/react';
+
+import { OAuthConsent as OAuthConsentOriginal } from './client-boundary/uiComponents';
+
 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/package.json

@@ -42,10 +42,6 @@
  "types": "./dist/api/index.d.ts",
  "default": "./dist/api/index.js"
  },
- "./internal": {
- "types": "./dist/internal.d.ts",
- "default": "./dist/internal.js"
- },
  "./errors": {
  "types": "./dist/errors.d.ts",
  "default": "./dist/errors.js"
@@ -77,9 +73,6 @@
  "api.server": [
  "dist/api/index.d.ts"
  ],
- "internal": [
- "dist/internal.d.ts"
- ],
  "webhooks": [
  "dist/webhooks.d.ts"
  ],

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/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

@@ -36,6 +36,7 @@ import type {
  ListenerOptions,
  LoadedClerk,
  OAuthApplicationNamespace,
+ OAuthConsentProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationResource,
@@ -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.
  *
@@ -2275,7 +2290,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
  };
 };
 
-export type __internal_OAuthConsentProps = {
+export type OAuthConsentProps = {
  /**
  * Customize the appearance of the component.
  */
@@ -2338,6 +2353,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