推荐：Supabase Auth UI - 快速构建身份验证界面的利器！

推荐：Supabase Auth UI - 快速构建身份验证界面的利器！

auth-uiPre-built Auth UI for React项目地址:https://gitcode.com/gh_mirrors/au/auth-ui

Supabase Auth UI 是一个精心设计的组件库，它与 @supabase/auth-helpers 集成得无懈可击，为开发者提供即插即用的身份验证用户体验。这个项目的首要目标是帮助开发者迅速搭建应用，同时也允许自定义样式以适应不同的设计系统。由于其独立性，随着你的UI系统逐渐成熟，你可以轻松地从预建组件过渡到自己的定制解决方案。

技术框架支持

Supabase Auth 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 库
  • @supabase/auth-ui-solid：用于 Solid.js 应用的库
  • @supabase/auth-ui-svelte：用于 Svelte 应用的库
  • shared：各框架库共享的 TypeScript 类型
  • tsconfig：整个 mono-repo 使用的 tsconfig.json

所有代码均采用 TypeScript 编写，确保类型安全。

本地化支持

为了保持包的轻量级，本地化文件不再内置。你可以从仓库中复制所需的本地化文件并引入到项目中，通过 localization.variables 参数传递给 Auth 组件。

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-[framework-name] 的模式，便于识别和管理。

项目特点

1. 兼容性强：覆盖了React.js、Solid.js 和 Svelte 三大主流框架，满足各种开发需求。
2. 易用性高：预建的UI组件可以快速集成，减少从零开始创建身份验证界面的工作量。
3. 高度可定制：尽管提供了现成的组件，但开发者仍然可以自定义CSS，打造符合自己品牌的设计。
4. 灵活性强：随心所欲地在预建组件和自定义组件之间切换，无需担心迁移问题。
5. 类型安全：全 TypeScript 实现，为开发者提供强大的类型检查和更好的编码体验。

总的来说，Supabase Auth UI 是一个强大的工具，无论你是初创项目还是大型企业，都能轻松实现用户身份验证功能，并且在保障效率的同时不失个性。不妨现在就试试看，让 Supabase Auth UI 成为你下一个项目的理想伙伴吧！

auth-uiPre-built Auth UI for React项目地址:https://gitcode.com/gh_mirrors/au/auth-ui