@agiens/auth-ui (英语)
为 BOS 表面反射 Auth 屏幕 . BosAuthWidget 使使用的八屏流相同
bos.pro:登录,注册,忘密码,重置密码,验证电子邮件,认证验证,邀请
接受和配置完成.
安装
npm install @agiens/auth-ui @agiens/auth-core @base-ui/react react react-dom
包裹自相收敛. 它不需要 BOS 源导入, BOS 托管的标志路径, a 特定的路由器,或BOS应用程序 CSS.
使用精确的 BOS 外观
版本 0.1.3 包括捆绑中的 BOS 品牌标记 以及当前 bos.pro 光/暗的船
调色板作为其默认符号。 为了明确视觉合同,通过导出默认值为
以下所示, 且不取而代之 :
import {
BosAuthWidget,
createBrowserNavAdapter,
defaultLogoUrl,
defaultLogoUrlDark,
defaultTokens,
} from '@agiens/auth-ui'
const config = {
ops, // createAuthOps({ client: bosAuth.client, ... })
session, // getCurrentUser + signOut wrappers for the same client
nav: createBrowserNavAdapter(),
providers: ['password', 'google', 'github', 'magic-link'],
emailVerification: 'branded-edge-fn',
onSuccessRedirect: '/',
theme: {
tokens: defaultTokens,
logoUrl: defaultLogoUrl,
logoUrlDark: defaultLogoUrlDark,
},
}
export function AuthRoute() {
return <BosAuthWidget config={config} />
}
选择 theme 也是等同的: 部件应用这些相同的嵌入式标志并倒置
自动标记。 这两个标志值是数据 URL,所以外部应用程序不需要复制
/logo/icon-dark.png,添加公共资产,或依赖bos.pro进行图像请求。 部件
选择暗地表面的光-ink标记和浅地表面的暗地标记.
为了保持对等,不要推翻 theme.tokens, (中文(简体) ), logoUrl,或 logoUrlDark。主机 CSS 变量
作为 --accent 可以故意定制外观;那是品牌分叉,而不是bos.pro
默认.
认证核心线程
创建一个 BOS 认证客户端并将其客户端交给 createAuthOps; UI 工具箱从未创建秒
Supabase客户端 :
import { createAuthOps, createBosAuth } from '@agiens/auth-core'
const bosAuth = createBosAuth({
supabase: {
url: import.meta.env.VITE_SUPABASE_URL,
publishableKey: import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY,
},
})
const ops = createAuthOps({
client: bosAuth.client,
getOrigin: () => window.location.origin,
emailVerification: 'branded-edge-fn',
})
主机提供小型的应用程序专用适配器( S)session, (中文(简体) ), nav,邀请接受
可选的注册钩). 行为保留在共享部件中; 差异属于配置 .
已发布表面
@agiens/auth-ui 出口 BosAuthWidget,所有8个屏幕,浏览器/hash/映射导航
适配器 提供者按钮, defaultTokens, (中文(简体) ), defaultLogoUrl, (中文(简体) ), defaultLogoUrlDark,则
BosAuthUiConfig 类型。 与匹配对等 @agiens/auth-core 释放.