# @agiens/auth-ui 中文文档

规范地址：https://npmcn.com/package/%40agiens/auth-ui/

版本：0\.1\.3
npm 元数据更新时间：2026-08-24T17:08:31.820Z
中文译文更新时间：2026-11-05T22:29:21.758Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40agiens/auth-ui
原文对照：https://npmcn.com/package/%40agiens/auth-ui/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：452 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18，react-dom \>=18，@base-ui/react \>=1\.5
- 首次发布：2026-07-09T16:11:23.732Z
- 最新版本发布：2026-08-14T16:07:20.783Z
- 近 30 天下载量：11986（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

BOS auth的回放屏幕+,基于@agiens/auth-core. 自成一体(无英雄/路由依赖).

## 安装

```sh
npm install @agiens/auth-ui
```

也可以使用：`pnpm add @agiens/auth-ui`、`yarn add @agiens/auth-ui`、`bun add @agiens/auth-ui`

## README

# @agiens/auth-ui (英语)

为 BOS 表面反射 Auth 屏幕 . `BosAuthWidget` 使使用的八屏流相同 bos.pro:登录,注册,忘密码,重置密码,验证电子邮件,认证验证,邀请 接受和配置完成.

## 安装

```bash
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 光/暗的船 调色板作为其默认符号。 为了明确视觉合同,通过导出默认值为 以下所示, 且不取而代之 :

```tsx
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客户端 :

```ts
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` 释放.

## 常见问题

### @agiens/auth-ui 是什么？

BOS auth的回放屏幕\+,基于@agiens/auth-core\. 自成一体\(无英雄/路由依赖\)\.

### 如何安装 @agiens/auth-ui？

在项目目录运行 npm install @agiens/auth-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）、@base-ui/react（\>=1\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @agiens/auth-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @agiens/auth-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @agiens/auth-ui 可以商用吗？

@agiens/auth-ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @agiens/auth-ui 的下载量有多少？

根据 npm 官方下载统计，@agiens/auth-ui 在 2026/10/05 – 2026/11/03 这 30 天内被下载 11,986 次，日均约 400 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @agiens/auth-ui 还在维护吗？

最新版本 0\.1\.3 发布于 2026/08/15（2 个月前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/07/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。