SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场auth-components

auth-components

前端与建站

查看项目

更新于 10-16 06:05

技能介绍

用途

auth-components 是一个围绕 Clerk 认证组件构建的技能，用于在项目中实现和定制认证界面。它提供模板、脚本与示例，帮助开发者快速搭建登录、注册、用户资料等页面，并对组件外观进行主题化定制。

主要能力

该技能覆盖 Clerk 的两种认证 UI 实现方式：

  • 预构建组件：可直接使用的 <SignIn />、<SignUp />、<UserButton />，配置量小。
  • Clerk Elements：用于高级用例的自定义组件，提供更细粒度控制。

技能包含以下脚本：

  1. 生成认证 UI 页面 脚本：scripts/generate-auth-ui.sh <output-dir> <component-type> 组件类型：signin（登录页含路由）、signup（注册页含路由）、both（登录与注册页）、profile（用户资料页）、all（完整认证 UI 集合）。 生成文件包括：app/sign-in/[[...sign-in]]/page.tsx、app/sign-up/[[...sign-up]]/page.tsx、app/profile/[[...profile]]/page.tsx、components/auth/protected-wrapper.tsx。

  2. 定制外观与主题 脚本：scripts/customize-appearance.sh <config-file> <theme-preset> 主题预设：default、dark、neobrutalist、shadesOfPurple、custom。 环境变量：BRAND_COLOR（主品牌色，十六进制）、BACKGROUND（背景色，十六进制）、TEXT_COLOR（文字色，十六进制）。

  3. 校验组件实现 脚本：scripts/validate-components.sh <project-dir> 检查项：是否安装 Clerk 依赖（@clerk/nextjs）、环境变量是否配置、layout 中是否设置 ClerkProvider、认证页面是否存在、中间件是否配置、是否存在硬编码密钥。 退出码：0 表示校验通过，1 表示校验失败（需修复问题）。

模板

  • 登录页模板 templates/sign-in-page.tsx：Next.js App Router 集成、catch-all 路由 [[...sign-in]]、登录后重定向配置、居中响应式布局。
  • 注册页模板 templates/sign-up-page.tsx：Next.js App Router 集成、catch-all 路由 [[...sign-up]]、注册后重定向配置、自定义外观配置。
  • 自定义用户按钮模板 templates/user-button-custom.tsx：自定义菜单项、外观定制、头像尺寸控制、下拉操作。
  • 受保护路由包装器 templates/protected-wrapper.tsx：路由认证守卫、加载状态、重定向配置、可复用 HOC 模式。

示例

  • 使用 Clerk Elements 的自定义登录：examples/custom-sign-in-guide.md（代码 examples/custom-sign-in.tsx），演示基于步骤的认证、策略选择（密码、OAuth）、表单校验、错误处理与自定义样式。
  • 社交认证按钮：examples/social-authentication-guide.md（代码 examples/social-buttons.tsx），演示 OAuth 提供商按钮、自定义样式、加载状态、错误处理，支持 Google、GitHub、Discord、Microsoft、Facebook、Apple。
  • 完整主题配置：examples/theming-guide.md（代码 examples/theme-config.tsx），演示完整外观配置、CSS 变量定制、布局配置、元素级样式、暗色模式与响应式设计。

使用方式

外观定制通过 appearance 属性完成，支持 baseTheme、layout、variables、elements 等配置。主题可在全局（ClerkProvider）或组件级设置。对 Tailwind CSS v4，可通过 cssLayerName: 'clerk' 确保 Tailwind 工具类覆盖。常见元素选择器包括 rootBox、card、headerTitle、formButtonPrimary、formFieldInput、footerActionLink、userButtonAvatarBox、userButtonPopoverCard。

适用场景

适用于在 Next.js App Router 项目中搭建认证界面、统一品牌主题、实现自定义登录流程、添加社交登录、保护路由等场景。

限制与要求

需要 Clerk 账户及 API 密钥、Next.js 13+（App Router，用于示例）、React 18+。环境变量包括 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 与 CLERK_SECRET_KEY。可选依赖：@clerk/themes（预构建主题）、Tailwind CSS（样式示例）。该技能遵循安全规则：代码示例仅使用占位值，不含真实 API 密钥、密码或密钥，所有代码通过环境变量引用，并记录 .gitignore 保护。