维护模式

自2024年2月7日起，此仓库不再由Supabase团队维护。目前，团队没有能力为这个仓库提供预期的关注度。我们可能在未来重新审视Auth UI，但遗憾的是，现在必须暂时搁置它，因为我们需要集中精力于其他优先事项，如改进Auth Helpers和高级Auth原语。

仓库本身将继续存在，我们会在接下来的几周内将大部分Auth UI移至Supabase-Community。Next.js生态系统中的一些组件，如忘记密码页面，将会继续迭代。我们将继续在@supabase/auth-ui-svelte保持各框架的最新包。

我们要感谢每一位为仓库做出贡献的人。如果您有任何问题或疑虑，请随时提出issue。

谢谢。

Supabase Auth UI

Supabase Auth UI 是一系列预构建的UI组件集合，可与@supabase/auth-helpers无缝配合。

这些组件的主要目的是让开发者能够快速开始他们的应用开发，同时也能使用自己的样式/CSS。

Auth UI 被刻意与@supabase/auth-helpers分开，以便开发者随着其UI系统的自然成熟而逐步脱离预构建的UI组件。

支持的框架

• React.js [文档]
• Solid.js
• Svelte

示例和包

• 示例
  • @example/react: 一个React.js应用
  • @example/solid: 一个Solid.js应用
  • @example/svelte: 一个Svelte应用
• 包
  • @supabase/auth-ui-react: 由react应用使用的supabase auth ui reactjs库
  • @supabase/auth-ui-solid: 由solid.js应用使用的supabase auth ui solid.js库
  • @supabase/auth-ui-svelte: 由svelte应用使用的supabase auth ui svelte库
  • shared: 由@supabase/auth-ui-[framework]库使用的共享TypeScript类型
  • tsconfig: 整个monorepo中使用的tsconfig.json

每个包/应用都是100% TypeScript。

本地化

为了保持包的大小较小，本地化文件不再与包一起分发。您现在可以通过从此仓库复制文件并将其导入到您的项目中，然后将其传递给Auth组件的localization.variables参数来导入所需的本地化。

import { Auth } from '@supabase/auth-ui-react'
import * as ja from './path-to-localization-file.json'
...
<Auth
  supabaseClient={supabase}
  localization={{
    variables: ja
  }}
/>
...

开发

阅读development.md以获取更多信息。

包使用@supabase/auth-ui-[框架名称]的命名约定