chore(js,ui,shared): Correctly display OAuth consent redirect root domains

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });

.changeset/quiet-terms-drum.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Correctly display OAuth consent redirect domains for known multi-label public suffixes.

packages/clerk-js/src/core/modules/oauthApplication/index.ts

@@ -10,12 +10,16 @@ import { BaseResource } from '../../resources/internal';
 
 export class OAuthApplication implements OAuthApplicationNamespace {
  async getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo> {
- const { oauthClientId, scope } = params;
+ const { oauthClientId, scope, redirectUri } = params;
+ const search = {
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirect_uri: redirectUri }),
+ };
  const json = await BaseResource._fetch<OAuthConsentInfoJSON>(
  {
  method: 'GET',
  path: `/me/oauth/consent/${encodeURIComponent(oauthClientId)}`,
- search: scope !== undefined ? { scope } : undefined,
+ search: Object.keys(search).length > 0 ? search : undefined,
  },
  { skipUpdateClient: true },
  );
@@ -31,6 +35,7 @@ export class OAuthApplication implements OAuthApplicationNamespace {
  oauthApplicationUrl: data.oauth_application_url,
  clientId: data.client_id,
  state: data.state,
+ redirectDomain: data.redirect_domain,
  scopes:
  data.scopes?.map(s => ({
  scope: s.scope,

packages/shared/src/react/hooks/useOAuthConsent.shared.ts

@@ -1,16 +1,21 @@
 import { useMemo } from 'react';
 
-import type { GetOAuthConsentInfoParams } from '../../types';
 import { STABLE_KEYS } from '../stable-keys';
 import { createCacheKeys } from './createCacheKeys';
 
-export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthClientId: string; scope?: string }) {
- const { userId, oauthClientId, scope } = params;
+export function useOAuthConsentCacheKeys(params: {
+ userId: string | null;
+ oauthClientId: string;
+ scope?: string;
+ redirectUri?: string;
+}) {
+ const { userId, oauthClientId, scope, redirectUri } = params;
  return useMemo(() => {
- const args: Pick<GetOAuthConsentInfoParams, 'oauthClientId'> & { scope?: string } = { oauthClientId };
- if (scope !== undefined) {
- args.scope = scope;
- }
+ const args = {
+ oauthClientId,
+ ...(scope !== undefined && { scope }),
+ ...(redirectUri !== undefined && { redirectUri }),
+ };
  return createCacheKeys({
  stablePrefix: STABLE_KEYS.OAUTH_CONSENT_INFO_KEY,
  authenticated: true,
@@ -21,5 +26,5 @@ export function useOAuthConsentCacheKeys(params: { userId: string | null; oauthC
  args,
  },
  });
- }, [userId, oauthClientId, scope]);
+ }, [userId, oauthClientId, scope, redirectUri]);
 }

packages/shared/src/react/hooks/useOAuthConsent.tsx

@@ -27,7 +27,7 @@ const HOOK_NAME = 'useOAuthConsent';
 export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentReturn {
  useAssertWrappedByClerkProvider(HOOK_NAME);
 
- const { oauthClientId: oauthClientIdParam, scope, keepPreviousData = true, enabled = true } = params;
+ const { oauthClientId: oauthClientIdParam, scope, redirectUri, keepPreviousData = true, enabled = true } = params;
  const clerk = useClerkInstanceContext();
  const user = useUserBase();
 
@@ -39,14 +39,15 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  userId: user?.id ?? null,
  oauthClientId,
  scope,
+ redirectUri,
  });
 
  const hasClientId = oauthClientId.length > 0;
  const queryEnabled = Boolean(user) && hasClientId && enabled && clerk.loaded;
 
  const query = useClerkQuery({
  queryKey,
- queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope }),
+ queryFn: () => fetchConsentInfo(clerk, { oauthClientId, scope, redirectUri }),
  enabled: queryEnabled,
  placeholderData: defineKeepPreviousDataFn(keepPreviousData && queryEnabled),
  });
@@ -59,7 +60,6 @@ export function useOAuthConsent(params: UseOAuthConsentParams): UseOAuthConsentR
  };
 }
 
-function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string }) {
- const { oauthClientId, scope } = params;
- return clerk.oauthApplication.getConsentInfo(scope !== undefined ? { oauthClientId, scope } : { oauthClientId });
+function fetchConsentInfo(clerk: LoadedClerk, params: { oauthClientId: string; scope?: string; redirectUri?: string }) {
+ return clerk.oauthApplication.getConsentInfo(params);
 }

packages/shared/src/react/hooks/useOAuthConsent.types.ts

@@ -4,7 +4,7 @@ import type { GetOAuthConsentInfoParams, OAuthConsentInfo } from '../../types';
 /**
  * @interface
  */
-export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope'> & {
+export type UseOAuthConsentParams = Pick<GetOAuthConsentInfoParams, 'oauthClientId' | 'scope' | 'redirectUri'> & {
  /**
  * If `true`, the previous data will be kept in the cache until new data is fetched.
  *

packages/shared/src/types/oauthApplication.ts

@@ -19,6 +19,7 @@ export interface OAuthConsentInfoJSON extends ClerkResourceJSON {
  oauth_application_url: string;
  client_id: string;
  state: string;
+ redirect_domain: string | null;
  scopes: OAuthConsentScopeJSON[];
 }
 
@@ -68,6 +69,12 @@ export type OAuthConsentInfo = {
  * The `state` parameter from the original authorize request.
  */
  state: string;
+ /**
+ * The PSL-resolved registrable domain of the redirect URI for display on the consent screen.
+ * Null when no redirect URI was provided, when it is not registered for the application,
+ * or when it points to an IP address or localhost.
+ */
+ redirectDomain: string | null;
  /**
  * A list of scopes the application is requesting, with descriptions and consent requirements.
  */
@@ -79,6 +86,8 @@ export type GetOAuthConsentInfoParams = {
  oauthClientId: string;
  /** A space-delimited scope string from the authorize request. */
  scope?: string;
+ /** The redirect URI from the authorize request. When provided, the backend returns a PSL-resolved `redirectDomain`. */
+ redirectUri?: string;
 };
 
 /**

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

@@ -50,9 +50,11 @@ function _OAuthConsent() {
 
  // Public path: fetch via hook. Disabled on the accounts portal path
  // (which already has all data via context) to avoid a wasted FAPI request.
+ const redirectUri = ctx.redirectUrl ?? getRedirectUriFromSearch();
  const { data, isLoading, error } = useOAuthConsent({
  oauthClientId,
  scope,
+ redirectUri: redirectUri || undefined,
  // TODO: Remove this once account portal is refactored to use this component
  enabled: !hasContextCallbacks,
  });
@@ -69,7 +71,7 @@ function _OAuthConsent() {
  const oauthApplicationName = ctx.oauthApplicationName ?? data?.oauthApplicationName ?? '';
  const oauthApplicationLogoUrl = ctx.oauthApplicationLogoUrl ?? data?.oauthApplicationLogoUrl;
  const oauthApplicationUrl = ctx.oauthApplicationUrl ?? data?.oauthApplicationUrl;
- const redirectUrl = ctx.redirectUrl ?? getRedirectUriFromSearch();
+ const redirectUrl = ctx.redirectUrl ?? redirectUri;
 
  const hasOrgReadScope = scopes.some(s => s.scope === USER_ORG_READ_SCOPE);
  const orgSelectionEnabled = !!(hasOrgReadScope && organizationSettings.enabled);
@@ -85,7 +87,7 @@ function _OAuthConsent() {
  const effectiveOrg = selectedOrg ?? defaultOrg;
 
  const { t } = useLocalizations();
- const domainAction = getRedirectDisplay(redirectUrl);
+ const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
  // Error states only apply to the public flow.

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

@@ -13,6 +13,7 @@ const fakeConsentInfo = {
  oauthApplicationUrl: 'https://example.com',
  clientId: 'client_test',
  state: 'abc',
+ redirectDomain: 'example.com',
  scopes: [
  { scope: 'openid', description: 'View your identity', requiresConsent: true },
  { scope: 'email', description: 'Access your email address', requiresConsent: true },
@@ -94,6 +95,7 @@ describe('OAuthConsent', () => {
 
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'client_test',
+ redirectUri: 'https://app.example/callback',
  });
  });
 
@@ -204,6 +206,7 @@ describe('OAuthConsent', () => {
  expect(getConsentInfo).toHaveBeenCalledWith({
  oauthClientId: 'override_id',
  scope: 'openid email',
+ redirectUri: 'https://app.example/callback',
  });
  });
  });