@sidebase/nuxt-auth

为 Nuxt 3 构建的身份验证！轻松通过 OAuth 提供商、凭据或电子邮件魔法 URL 添加身份验证！

快速开始

npx nuxi@latest module add sidebase-auth

npm i -D @sidebase/nuxt-auth

pnpm i -D @sidebase/nuxt-auth

yarn add --dev @sidebase/nuxt-auth

export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth']
})

然后访问快速入门文档以继续配置您的应用程序！

功能

@sidebase/nuxt-auth 是一个库，旨在支持任何通用 Nuxt 3 应用程序的身份验证。目前支持三个提供商

• authjs：适用于希望使用 Auth.js / NextAuth.js 的非静态应用程序，为 Nuxt 3 生态系统提供具有原生开发者体验 (DX) 的 23k 星标库的可靠性和便利性
• local：适用于依赖具有凭据流进行身份验证的外部后端的静态页面。自 v0.9.0 起，本地提供商还支持刷新令牌。在此处阅读更多信息 here。

您可以在我们的文档中找到我们功能的完整列表，以及每个提供商支持的功能。

身份验证提供商

• OAuth（例如，Github、Google、Twitter、Azure 等）
• 自定义 OAuth（自己编写）
• 凭据（密码 + 用户名）
• 电子邮件魔法 URL

应用程序端会话管理，使用 useAuth

• 使用 status、data 和 lastRefreshedAt 获取会话
• 用于 getSession、getCsrfToken、getProviders、signIn 和 signOut 的方法
• 所有方法和属性的完整 TypeScript 支持

应用程序保护

• 用于整个应用程序或特定页面的应用程序端中间件保护
• 服务端中间件和端点保护

会话生命周期管理的高级功能

• 预构建和可自定义的刷新行为
  • 定期刷新会话
  • 在选项卡重新聚焦时刷新会话
  • 在页面加载时进行一次会话获取，然后在特定操作（例如，在导航时）进行会话获取
• 使用 RefreshHandler 完全配置应用程序的刷新行为

服务器端实用程序

• 使用 getServerSession 访问会话
• 使用 getToken 访问 JWT 令牌
• 服务端中间件和端点保护

演示页面

想预览一下 @sidebase/nuxt-auth 有什么功能吗？访问nuxt-auth 演示页面。查看演示源代码。

开发

此项目使用 pnpm 进行开发。

• 运行 pnpm dev:prepare 生成类型存根。
• 在 模块 playground 目录中运行 pnpm dev 以在开发模式下启动 playground。
• 运行 pnpm lint 运行 eslint
• 运行 pnpm typecheck 通过 tsc 运行类型检查
• 运行 pnpm publish --access public 进行发布
• 运行 pnpm publish --access public --tag next 发布预发布版本

模块 Playground

此模块也有自己的 playground

> git clone https://github.com/sidebase/nuxt-auth

> cd nuxt-auth

> cd playground-[PROVIDER]

> pnpm i

> pnpm dev:prepare

> pnpm dev

其他 playground 命令

• 运行 pnpm dev:prepare 生成类型存根。
• 运行 pnpm dev 启动 playground。
• 运行 pnpm test:e2e 运行端到端测试。
• 运行 pnpm lint 运行 eslint
• 运行 pnpm typecheck 通过 tsc 运行类型检查

测试不同的提供商

我们每个提供商都有一个 playground

• authjs
• local

如何测试静态 Nuxt 3 应用程序？

要测试静态 Nuxt 3 应用程序，我们希望运行一个静态前端和一个单独的后端来接管身份验证

1. playground-local/nuxt.config.ts：将 baseURL: 'https://127.0.0.1:3001' 添加到 auth 配置
2. 启动静态前端

   cd playground-local
   
   pnpm generate
   
   pnpm start
   

3. 启动身份验证后端（我们使用同一个 nuxt3 应用程序的第二个实例）

   cd playground-local
   
   pnpm dev
   
   # A second Nuxt app should now be running on https://127.0.0.1:3001.
   # We use this purely for authentication
   

4. 访问 https://127.0.0.1:3000 -> 这应该打开静态应用程序。执行任何与身份验证相关的操作，应用程序应向在端口 3001 上运行的后端发送请求

贡献

感谢每一位通过编写问题或打开拉取请求为该项目做出贡献的人。您的努力帮助我们改进和成长。如果您有兴趣做出贡献，请花一点时间查看我们的贡献指南。我们感谢您的支持，并期待您的贡献！

鸣谢

@sidebase/nuxt-auth 由我们所有出色的贡献者和 Nuxt 3 团队支持！