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

Co-authored-by: Alex Carpenter <alex.carpenter@clerk.dev>
Co-authored-by: Jacek Radko <jacek@clerk.dev>

Author: 3 people

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