oauth-button.md

基本信息

• 类型: React 组件
• 路径: ./src/components/auth/oauth-button.tsx

功能描述

OAuth 登录按钮组件，支持多种第三方认证提供方。每个提供方有对应的图标和本地化显示名称。

导出内容

• OAuthButton - 主组件函数

Props

属性	类型	说明
provider	string	OAuth 提供方标识（如 'github', 'google'）
providerName	string	显示名称（如 'GitHub', 'Google'）

支持的提供方

提供方	图标	说明
github	GitHub Logo SVG	GitHub 账号登录
google	Google Logo SVG（彩色）	Google 账号登录
azure	Azure Logo SVG	Microsoft 账号登录
apple	Apple Logo SVG	Apple ID 登录

功能流程

1. 点击按钮设置加载状态
2. 发送分析事件 analyticsAuth.oauthStart
3. 调用 signIn(provider) 启动 OAuth 流程
4. 出错时恢复按钮状态

依赖

• react - useState
• next-auth/react - signIn
• next-intl - useTranslations
• @/components/ui/button - Button
• lucide-react - Loader2
• @/lib/analytics - analyticsAuth