@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 star 库的可靠性和便利性，并具有原生的开发者体验 (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 以生成类型存根。
• 在模块 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-config
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 上运行的后端

贡献

感谢每一位通过提交 issue 或开启 pull request 为本项目做出贡献的人。你们的努力帮助我们改进和成长。如果您有兴趣贡献，请花一点时间查看我们的贡献指南。我们感谢您的支持，并期待您的贡献！

致谢

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