feat(ui): Brand known OAuth clients on the consent screen#9158
feat(ui): Brand known OAuth clients on the consent screen#9158alexcarpenter wants to merge 2 commits into
Conversation
When an OAuth app has no uploaded logo, the consent screen now renders a recognizable brand mark for known clients (Claude, ChatGPT). Matching is keyed on the trusted, backend-resolved redirect domain, not the app-owner-set name, so a look-alike name cannot borrow the branding.
🦋 Changeset detectedLatest commit: a3c090a The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughOAuth consent now recognizes Claude and ChatGPT from registrable redirect domains and displays their brand icons when no application logo is provided. Logo fallback icons accept configurable components and styling, with tests, bundle-size configuration, and a patch changeset added. ChangesOAuth consent branding
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant OAuthConsent
participant getKnownOAuthClient
participant LogoGroupIcon
OAuthConsent->>getKnownOAuthClient: Resolve redirect domain without an uploaded logo
getKnownOAuthClient-->>OAuthConsent: Return recognized client icon and styling
OAuthConsent->>LogoGroupIcon: Render the fallback brand icon
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx`:
- Around line 546-565: The OAuthConsent branded-logo test is not verifying
client recognition because it asserts only the generic .cl-logoGroupIcon and
uses the branded application name. Update the test around createFixtures and
mockOAuthApplication to use a non-brand application name while retaining
Claude’s recognized domain, then assert Claude’s distinctive rendered icon. Add
a separate unknown-domain case that verifies the lock icon fallback.
- Line 551: Remove the as any cast from the setProps call in the OAuthConsent
test and pass a value typed as OAuthConsentProps. Reuse the component name
already supplied by bindCreateFixtures('OAuthConsent') rather than duplicating
or bypassing the fixture context typing.
In `@packages/ui/src/components/OAuthConsent/LogoGroup.tsx`:
- Around line 38-48: Add an explicit JSX return type to the exported
LogoGroupIcon function while preserving its existing props, defaults, and
rendering behavior. Use the project’s established React component return-type
convention.
- Around line 41-42: Update the default iconSx in LogoGroupIcon so the
$primary500 color fallback is applied only when icon === LockDottedCircle; leave
iconSx undefined for custom icons, preserving their native styling unless
callers explicitly provide styling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: ff882885-aa09-4710-84d2-82573abc5d84
⛔ Files ignored due to path filters (2)
packages/ui/src/icons/claude.svgis excluded by!**/*.svgpackages/ui/src/icons/openai.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
.changeset/oauth-consent-known-clients.mdpackages/ui/src/components/OAuthConsent/LogoGroup.tsxpackages/ui/src/components/OAuthConsent/OAuthConsent.tsxpackages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsxpackages/ui/src/components/OAuthConsent/__tests__/knownClients.test.tspackages/ui/src/components/OAuthConsent/knownClients.tspackages/ui/src/icons/index.ts
| it('renders the branded logo badge for a recognized client with no uploaded logo', async () => { | ||
| const { wrapper, fixtures, props } = await createFixtures(f => { | ||
| f.withUser({ email_addresses: ['jane@example.com'] }); | ||
| }); | ||
|
|
||
| props.setProps({ componentName: 'OAuthConsent' } as any); | ||
| mockOAuthApplication(fixtures.clerk, { | ||
| getConsentInfo: vi.fn().mockResolvedValue({ | ||
| ...fakeConsentInfo, | ||
| oauthApplicationName: 'Claude', | ||
| oauthApplicationLogoUrl: '', | ||
| redirectDomain: 'claude.ai', | ||
| }), | ||
| }); | ||
|
|
||
| const { getByText, baseElement } = render(<OAuthConsent />, { wrapper }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(getByText('Claude')).toBeVisible(); | ||
| expect(baseElement.querySelector('.cl-logoGroupIcon')).not.toBeNull(); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Assert the branded icon, not only the generic badge.
This test can pass when getKnownOAuthClient returns undefined: every no-logo application still renders .cl-logoGroupIcon, and the “Claude” title comes directly from oauthApplicationName. Use a non-brand application name and assert Claude’s distinctive rendered icon; also add an unknown-domain case to verify the lock fallback.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx`
around lines 546 - 565, The OAuthConsent branded-logo test is not verifying
client recognition because it asserts only the generic .cl-logoGroupIcon and
uses the branded application name. Update the test around createFixtures and
mockOAuthApplication to use a non-brand application name while retaining
Claude’s recognized domain, then assert Claude’s distinctive rendered icon. Add
a separate unknown-domain case that verifies the lock icon fallback.
| f.withUser({ email_addresses: ['jane@example.com'] }); | ||
| }); | ||
|
|
||
| props.setProps({ componentName: 'OAuthConsent' } as any); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
sed -n '500,580p' packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsxRepository: clerk/javascript
Length of output: 2681
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '500,580p' packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsxRepository: clerk/javascript
Length of output: 2681
🏁 Script executed:
rg -n "createFixtures|setProps\\(|componentName" packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx packages/ui/src -g '*.{ts,tsx}'Repository: clerk/javascript
Length of output: 50373
🏁 Script executed:
sed -n '1,220p' packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
printf '\n---\n'
rg -n "function createFixtures|const createFixtures|type .*props|setProps" packages/ui/src/components/OAuthConsent/__tests__ -g '*.{ts,tsx}'
printf '\n---\n'
rg -n "componentName" packages/ui/src/components/OAuthConsent packages/ui/src -g '*.{ts,tsx}'Repository: clerk/javascript
Length of output: 33642
🏁 Script executed:
rg -n "createFixtures|setProps|componentName" packages/ui/src -g '*.{ts,tsx}'Repository: clerk/javascript
Length of output: 50373
🏁 Script executed:
git ls-files 'packages/ui/src/**/*test*' 'packages/ui/src/**/__tests__/*' | sed -n '1,200p'Repository: clerk/javascript
Length of output: 14571
🏁 Script executed:
sed -n '1,220p' packages/ui/src/test/create-fixtures.tsx
printf '\n---\n'
sed -n '1,260p' packages/ui/src/types.tsRepository: clerk/javascript
Length of output: 12052
🏁 Script executed:
sed -n '1,220p' packages/ui/src/test/create-fixtures.tsx
printf '\n---\n'
sed -n '150,220p' packages/ui/src/types.tsRepository: clerk/javascript
Length of output: 7486
🏁 Script executed:
cat -n packages/ui/src/test/create-fixtures.tsx | sed -n '1,220p'Repository: clerk/javascript
Length of output: 6436
🏁 Script executed:
sed -n '1,260p' packages/ui/src/contexts/ClerkUIComponentsContext.tsx
printf '\n---\n'
rg -n "type AvailableComponentProps|interface AvailableComponentProps|ComponentContextProvider" packages/ui/src -g '*.{ts,tsx}'Repository: clerk/javascript
Length of output: 7493
🏁 Script executed:
rg -n "export (const|function) ComponentContextProvider|type ComponentContextProvider|interface ComponentContextProvider" packages/ui/src/contexts/ClerkUIComponentsContext.tsx packages/ui/src/contexts -g '*.{ts,tsx}'
printf '\n---\n'
sed -n '1,220p' packages/ui/src/contexts/ClerkUIComponentsContext.tsxRepository: clerk/javascript
Length of output: 6629
🏁 Script executed:
rg -n "type OAuthConsentProps|interface OAuthConsentProps" . -g '*.{ts,tsx,d.ts}'Repository: clerk/javascript
Length of output: 230
🏁 Script executed:
rg -n "OAuthConsentProps" packages node_modules -g '*.{ts,tsx,d.ts}' --max-count 20Repository: clerk/javascript
Length of output: 2583
🏁 Script executed:
rg -n "OAuthConsentProps" packages -g '*.{ts,tsx,d.ts}' --max-count 50Repository: clerk/javascript
Length of output: 2530
Drop the as any cast here. bindCreateFixtures('OAuthConsent') already supplies the component name; pass a typed OAuthConsentProps value for the fixture context instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx` at
line 551, Remove the as any cast from the setProps call in the OAuthConsent test
and pass a value typed as OAuthConsentProps. Reuse the component name already
supplied by bindCreateFixtures('OAuthConsent') rather than duplicating or
bypassing the fixture context typing.
Source: Coding guidelines
| export function LogoGroupIcon({ | ||
| size = 'md', | ||
| sx, | ||
| icon = LockDottedCircle, | ||
| iconSx = t => ({ color: t.colors.$primary500 }), | ||
| }: { | ||
| size?: 'sm' | 'md'; | ||
| sx?: ThemableCssProp; | ||
| icon?: React.ComponentType; | ||
| iconSx?: ThemableCssProp; | ||
| }) { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
set -euo pipefail
git ls-files 'packages/ui/src/components/OAuthConsent/LogoGroup.tsx' && \
ast-grep outline packages/ui/src/components/OAuthConsent/LogoGroup.tsx --view expanded && \
cat -n packages/ui/src/components/OAuthConsent/LogoGroup.tsx | sed -n '1,220p'Repository: clerk/javascript
Length of output: 3691
Add an explicit return type to LogoGroupIcon. It’s an exported TypeScript component, so annotating the return type keeps the API contract explicit.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/OAuthConsent/LogoGroup.tsx` around lines 38 - 48,
Add an explicit JSX return type to the exported LogoGroupIcon function while
preserving its existing props, defaults, and rendering behavior. Use the
project’s established React component return-type convention.
Sources: Coding guidelines, Learnings
| icon = LockDottedCircle, | ||
| iconSx = t => ({ color: t.colors.$primary500 }), |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
git ls-files 'packages/ui/src/components/OAuthConsent/LogoGroup.tsx' 'packages/ui/src/**/knownClients.ts' 'packages/ui/src/**/knownClients.*' 'packages/ui/src/**/LogoGroup.tsx' && \
printf '\n--- LogoGroup.tsx ---\n' && cat -n packages/ui/src/components/OAuthConsent/LogoGroup.tsx && \
printf '\n--- knownClients search ---\n' && rg -n "iconSx|LogoGroup" packages/ui/src -g '!**/node_modules/**'Repository: clerk/javascript
Length of output: 9087
🏁 Script executed:
git ls-files 'packages/ui/src/components/OAuthConsent/LogoGroup.tsx' 'packages/ui/src/**/knownClients.ts' 'packages/ui/src/**/knownClients.*' 'packages/ui/src/**/LogoGroup.tsx' && printf '\n--- LogoGroup.tsx ---\n' && cat -n packages/ui/src/components/OAuthConsent/LogoGroup.tsx && printf '\n--- knownClients search ---\n' && rg -n "iconSx|LogoGroup" packages/ui/src -g '!**/node_modules/**'Repository: clerk/javascript
Length of output: 9087
🏁 Script executed:
sed -n '1,120p' packages/ui/src/components/OAuthConsent/knownClients.ts && printf '\n--- OAuthConsent.tsx excerpt ---\n' && sed -n '150,240p' packages/ui/src/components/OAuthConsent/OAuthConsent.tsx && printf '\n--- knownClients test excerpt ---\n' && sed -n '1,220p' packages/ui/src/components/OAuthConsent/__tests__/knownClients.test.tsRepository: clerk/javascript
Length of output: 6619
Don’t tint custom icons by default.
LogoGroupIcon always falls back to $primary500 when iconSx is omitted, so known-client icons like Claude inherit the lock tint unless they override it explicitly. Gate the default on icon === LockDottedCircle so only the built-in icon gets the fallback color.
Proposed fix
- iconSx = t => ({ color: t.colors.$primary500 }),
+ iconSx = icon === LockDottedCircle ? t => ({ color: t.colors.$primary500 }) : undefined,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| icon = LockDottedCircle, | |
| iconSx = t => ({ color: t.colors.$primary500 }), | |
| icon = LockDottedCircle, | |
| iconSx = icon === LockDottedCircle ? t => ({ color: t.colors.$primary500 }) : undefined, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/OAuthConsent/LogoGroup.tsx` around lines 41 - 42,
Update the default iconSx in LogoGroupIcon so the $primary500 color fallback is
applied only when icon === LockDottedCircle; leave iconSx undefined for custom
icons, preserving their native styling unless callers explicitly provide
styling.
The Claude/ChatGPT brand SVGs lived in src/icons, which the ui-common rspack cacheGroup captures, pushing the shared chunk over its bundlewatch budget. Move them into the OAuthConsent component directory so they bundle into the lazy oauthConsent chunk instead, and bump that chunk's budget to account for the marks.
1 participant
Description
When an OAuth application has not uploaded its own logo, the consent screen now renders a recognizable brand mark for known clients (Claude, ChatGPT) in place of the default lock icon. Recognition is keyed on the request's trusted, backend-resolved registrable redirect domain (
claude.ai,chatgpt.com, etc.), never the app-owner-set name or homepage, so a look-alike application name cannot borrow the branding. A newknownClientsregistry maps domains to brand icons andLogoGroupIconwas extended to accept an optional icon/tint (defaulting to the existing lock); an app's own uploaded logo always takes precedence.Previews:
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Bug Fixes