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

Co-authored-by: Jacob Foshee <jacobf@gmail.com>
Co-authored-by: Jacek Radko <jacek@clerk.dev>

Author: 3 people

.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',
       });
     });
   });