feat(clerk-js): Add OAuthConsent component

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

.changeset/six-crabs-carry.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce internal `<OAuthConsent />` component to be used internally in the machine auth OAuth flow in account portal.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "106KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "106.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "39.8KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationSwitcher',
  'waitlist',
  'pricingTable',
+ 'oauthConsent',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
  pricingTable: buildComponentControls('pricingTable'),
+ oauthConsent: buildComponentControls('oauthConsent'),
 };
 
 declare global {
@@ -310,6 +312,21 @@ void (async () => {
  '/pricing-table': () => {
  Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
  },
+ '/oauth-consent': () => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const scopes = (searchParams.get('scopes')?.split(',') ?? []).map(scope => ({
+ scope,
+ description: `Grants access to your ${scope}`,
+ }));
+ Clerk.__internal_mountOAuthConsent(
+ app,
+ componentControls.oauthConsent.getProps() ?? {
+ scopes,
+ oAuthApplicationName: searchParams.get('oauth-application-name'),
+ redirectUrl: searchParams.get('redirect_uri'),
+ },
+ );
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
  PricingTable
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/oauth-consent"
+ >
+ OAuthConsent
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -17,6 +17,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
  __internal_CheckoutProps,
  __internal_ComponentNavigationContext,
+ __internal_OAuthConsentProps,
  __internal_PlanDetailsProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
@@ -1037,6 +1038,23 @@ export class Clerk implements ClerkInterface {
  );
  };
 
+ public __internal_mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'OAuthConsent' }).then(controls =>
+ controls.mountComponent({
+ name: 'OAuthConsent',
+ appearanceKey: '__internal_oauthConsent',
+ node,
+ props,
+ }),
+ );
+ };
+
+ public __internal_unmountOAuthConsent = (node: HTMLDivElement) => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */