@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 生态系统提供 23k 星库的可靠性和便利性，并提供原生开发体验 (DX)
• local：对于依赖于具有身份验证凭据流的外部后端的静态页面。自 v0.9.0 版本起，本地提供商还支持刷新令牌。阅读更多内容 此处。

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

身份验证提供商

• 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 生成类型存根。
• 在 模块游乐场目录 中使用 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：将 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 团队 的支持！