Nuxflare Auth：使用 Nuxt、Cloudflare 和 OpenAuth.js 构建的轻量级自托管身份验证服务器

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

努克斯耀斑 / 授权

使用 Cloudflare、Nuxt 和 OpenAuth.js 构建的现代、轻量级、自托管身份验证服务器。

Nuxflare 授权

使用 Cloudflare、Nuxt 和 OpenAuth.js 构建的现代、轻量级、自托管身份验证服务器。

这是什么？

Nuxflare Auth 让您可以轻松地向应用程序添加身份验证。这是一个捆绑了您需要的一切的单一存储库：

• 使用 Nuxt 3 和 @nuxt/ui 构建的流畅的身份验证 UI
• 在 Cloudflare Workers 上运行的后端身份验证魔法
• 一个随时可用的示例，以便您可以了解它们如何组合在一起

特点

• ？完整的身份验证 UI 包括：
  • 基于代码的登录
  • 基于密码的登录
  • 忘记密码流程
  • 用户注册
• ？使用 GitHub 和 Google 进行 OAuth2 身份验证（轻松添加更多提供商）
• ✉️ 使用重新发送（或使用任何其他提供商）的电子邮件
• ⚡ 快如闪电，由 Cloudflare 的边缘网络提供支持

项目布局

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

先决条件

开始之前，您需要：

• pnpm
• Cloudflare 帐户
• 来自 Google 的 OAuth 凭据...

在 GitHub 上查看

为什么选择 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中文网其他相关文章！