@sidebase/nuxt-auth

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

快速开始

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 生态系统提供 23k 星级库的可靠性和便利性，并提供原生开发体验 (DX)
• local：适用于依赖外部后端进行凭据流身份验证的静态页面。Local Provider 自 v0.9.0 起也支持刷新令牌。在此阅读更多。

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

身份验证提供商

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

使用 useAuth 进行应用程序端会话管理

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

应用程序保护

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

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

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

服务器端工具

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

演示页面

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

开发

本项目使用 pnpm 进行开发。

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

模块游乐场

此模块也有自己的游乐场

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

> cd nuxt-auth

> cd playground-[PROVIDER]

> pnpm i

> pnpm dev:prepare

> pnpm dev

附加的游乐场命令

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

测试不同的提供商

我们每个提供商都有一个游乐场

• authjs
• local

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

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

1. playground-local/nuxt.config.ts：在 auth 配置中添加 baseURL: 'https://:3001'
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://:3001.
   # We use this purely for authentication
   

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

贡献

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

致谢

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