Nuxflare Auth 是一个现代、轻量级、自托管的身份验证服务器，旨在使向您的应用程序添加身份验证变得轻而易举。使用 Nuxt 3、Cloudflare Workers 和 OpenAuth.js 构建，它将您需要的所有内容捆绑在一处。

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

为什么选择 Nuxflare Auth？

使用 Nuxt，已经有了很好的身份验证模块，例如 nuxt-auth-utils 和 sidebase-auth。
那么，Nuxflare Auth 有何不同？

• 解耦身份验证： Nuxflare Auth 允许您与主应用程序分开部署身份验证服务器和身份验证 UI（使用 Nuxt UI 构建）。 这意味着您可以轻松地重用您的身份验证服务器来处理多个客户端应用程序（是否使用 Nuxt 构建）、外部 API、移动应用程序等。
• 鼓励 Monorepo 架构： 通过拆分 Nuxt 应用程序和身份验证模块，Nuxflare Auth 使捆绑包大小保持最小，非常适合部署到 Cloudflare Workers，它有严格的大小限制：免费计划 3 MB，免费计划 10 MB付费计划。

项目结构

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

部署 Nuxflare Auth

先决条件

• pnpm
• Cloudflare 帐户
• 来自 Google 和 GitHub 的 OAuth 凭证
• 用于发送电子邮件的重新发送 API 密钥

入门

1. 克隆存储库并安装依赖项：

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

1. 创建并配置 API 令牌：

a.使用此链接创建具有所需权限的 Cloudflare API 令牌。
b.设置 CLOUDFLARE_API_TOKEN 环境变量：

   git clone https://github.com/nuxflare/auth nuxflare-auth
   cd nuxflare-auth
   pnpm install

1. 配置你的秘密：

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. 在 sst.config.ts 中配置你的 fromEmail：

   # OAuth stuff
   pnpm sst secret set GoogleClientID your_client_id
   pnpm sst secret set GoogleClientSecret your_client_secret
   pnpm sst secret set GithubClientID your_client_id
   pnpm sst secret set GithubClientSecret your_client_secret

   # For emails
   pnpm sst secret set ResendApiKey your_resend_api_key

1. 开始本地开发：

   async run() {
     const fromEmail = "hi@nuxflare.com";
     // ...
   }

1. 部署到生产环境：

   pnpm dev

客户端应用程序示例

存储库包含一个简单的示例客户端应用程序，位于packages/example-client。

可组合项的 API 与 nuxt-auth-utils 非常相似：

   pnpm sst deploy --stage production

您应该将客户端指向已部署的身份验证实例的端点：

```打字稿 [packages/example-client/app/utils/auth.ts]
const client = createClient({
clientID: "nuxt",
发行者：“https://authdemo.nuxflare.com”，// });

export const useSession = () => {
  const sessionState = useSessionState();
  const accessToken = useAccessTokenCookie();
  const refreshToken = useRefreshTokenCookie();
  const clear = () => {
    sessionState.value = {};
    accessToken.value = null;
    refreshToken.value = null;
  };
  return {
    loggedIn: computed(() => !!sessionState.value.user),
    user: computed(() => sessionState.value.user || null),
    session: sessionState,
    clear,
  };
};

以上是Nuxflare Auth：使用 Nuxt、Cloudflare 和 OpenAuth.js 构建的轻量级自托管身份验证服务器的详细内容。更多信息请关注PHP中文网其他相关文章！