fix: render custom oauth provider icon on login button and provider table - #6581
fix: render custom oauth provider icon on login button and provider table#6581feitianbubu wants to merge 1 commit into
Conversation
WalkthroughThe changes add case-insensitive icon lookup and use ChangesOAuth icon rendering
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@web/src/features/auth/components/oauth-providers.tsx`:
- Line 147: Update the icon assignment in the OAuth provider configuration to
wrap the getLobeIcon(provider.icon, 16) output in an element marked
aria-hidden="true", while preserving the undefined behavior when no icon is
configured and ensuring fallback text cannot affect the button’s accessible
name.
In `@web/src/lib/lobe-icon.tsx`:
- Around line 122-124: Guard the dynamic lookups in the icon resolution flow
around baseKey, CustomIcon, and BaseIcon so inherited properties such as
constructor, toString, and hasOwnProperty are rejected. Use
Object.prototype.hasOwnProperty.call or equivalent own-key validation for
CUSTOM_ICONS and LobeIcons before rendering, and make invalid keys fall back
through the existing fallback behavior.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d3c6cfc6-f0a3-471f-a9a1-a88d99c6d9d5
📒 Files selected for processing (3)
web/src/features/auth/components/oauth-providers.tsxweb/src/features/system-settings/auth/custom-oauth/components/provider-table.tsxweb/src/lib/lobe-icon.tsx
| key: `custom-${provider.slug}`, | ||
| label: t('Continue with {{name}}', { name: provider.name }), | ||
| onClick: () => handleCustomOAuthLogin(provider), | ||
| icon: provider.icon ? getLobeIcon(provider.icon, 16) : undefined, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Mark the configured icon as decorative.
The button already exposes the provider name through label. The new icon is decorative, but getLobeIcon is not marked with aria-hidden. Its fallback contains visible text, so an invalid icon can alter the accessible name.
Wrap the icon output in an aria-hidden="true" element, or add equivalent handling in getLobeIcon.
As per coding guidelines, decorative icons must use aria-hidden="true".
🤖 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 `@web/src/features/auth/components/oauth-providers.tsx` at line 147, Update the
icon assignment in the OAuth provider configuration to wrap the
getLobeIcon(provider.icon, 16) output in an element marked aria-hidden="true",
while preserving the undefined behavior when no icon is configured and ensuring
fallback text cannot affect the button’s accessible name.
Source: Coding guidelines
| const baseKey = | ||
| ICON_KEYS_BY_LOWERCASE[segments[0].toLowerCase()] ?? segments[0] | ||
| const CustomIcon = CUSTOM_ICONS[baseKey] |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
rg -n 'getLobeIcon|constructor|__proto__|hasOwnProperty' web/src --glob '*.{ts,tsx}'Repository: QuantumNous/new-api
Length of output: 4326
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '--- file outline ---\n'
ast-grep outline web/src/lib/lobe-icon.tsx || true
printf '\n--- relevant source ---\n'
sed -n '1,180p' web/src/lib/lobe-icon.tsx
printf '\n--- direct object lookup probe for key types ---\n'
node - <<'JS'
const CUSTOM_ICONS = {}
const LobeIcons = {}
for (const key of ['constructor', '__proto__', 'toString', 'valueOf', 'hasOwnProperty', 'OpenAI']) {
const base = key
console.log(`${key}: custom=${!!CUSTOM_ICONS[base]}, baseKeys=${!!LobeIcons[base]}`)
}
JSRepository: QuantumNous/new-api
Length of output: 248
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf -- '%s\n' '--- file outline ---'
ast-grep outline web/src/lib/lobe-icon.tsx || true
printf -- '%s\n' ''
printf -- '%s\n' '--- relevant source ---'
sed -n '1,180p' web/src/lib/lobe-icon.tsx
printf -- '%s\n' ''
printf -- '%s\n' '--- direct object lookup probe for key types ---'
node - <<'JS'
const CUSTOM_ICONS = {}
const LobeIcons = {}
for (const key of ['constructor', '__proto__', 'toString', 'valueOf', 'hasOwnProperty', 'OpenAI']) {
const base = key
console.log(`${key}: custom=${!!CUSTOM_ICONS[base]}, lobeIcons=${!!LobeIcons[base]}`)
}
JSRepository: QuantumNous/new-api
Length of output: 6189
Guard dynamic registry lookups before rendering.
ICON_KEYS_BY_LOWERCASE only blocks prototype keys before the fallback to segments[0]. CUSTOM_ICONS[baseKey] and LobeIcons[baseKey] still resolve inherited properties such as constructor, toString, and hasOwnProperty, so those keys can reach CustomIcon rendering or BaseIcon[segments[1]] evaluation. Use Object.prototype.hasOwnProperty.call or null-prototype registries before accepting a resolved icon; invalid icon keys should always fall back.
🤖 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 `@web/src/lib/lobe-icon.tsx` around lines 122 - 124, Guard the dynamic lookups
in the icon resolution flow around baseKey, CustomIcon, and BaseIcon so
inherited properties such as constructor, toString, and hasOwnProperty are
rejected. Use Object.prototype.hasOwnProperty.call or equivalent own-key
validation for CUSTOM_ICONS and LobeIcons before rendering, and make invalid
keys fall back through the existing fallback behavior.
2 participants
自定义 OAuth 提供商后台设置的icon 字段（预设模板也会自动填 github/gitlab 等），没有生效：登录页按钮不渲染图标，管理端列表只把它当纯文本显示。
改动：
getLobeIcon()渲染，和内置提供商按钮外观一致getLobeIcon增加大小写不敏感解析：配置里常存小写（如github），而 @lobehub/icons 导出是 PascalCase（Github）。映射只收组件导出（过滤toc、useFillId、*Mappings等非组件导出，避免坏配置字符串导致登录页渲染崩溃），用 null-prototype 字典防constructor这类原型键穿透。lobehub 没有的名字维持原有首字母占位兜底🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
✅ 提交前检查项 / Checklist
Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。📸 运行证明 / Proof of Work
修复前:
修复后:
