sidebase-auth
@sidebase/nuxt-auth

无需样板代码即可为 Nuxt 提供身份验证，支持多种策略（oauth、凭据等）和提供商（Google、Azure 等）。此外还支持会话操作、客户端和服务器端保护等功能。
12.52 万次下载1.5 千颗星v1.1.0
sidebasesidebase

@sidebase/nuxt-auth banner

@sidebase/nuxt-auth

Version Downloads Downloads License Docs Follow us on X Join our Discord

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

快速开始

npx nuxi@latest module add sidebase-auth
或手动安装

1. 将软件包安装为开发依赖项

npm i -D @sidebase/nuxt-auth

pnpm i -D @sidebase/nuxt-auth

yarn add --dev @sidebase/nuxt-auth

2. 将模块添加到您的 nuxt.config.ts

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

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

功能

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

  • authjs: 适用于非静态应用程序，希望使用 Auth.js / NextAuth.js 为 Nuxt 3 生态系统提供 2.3 万星库的可靠性和便利性，并提供原生开发体验 (DX)
  • local: 适用于依赖外部后端进行凭据流身份验证的静态页面。Local Provider 自 v0.9.0 起也支持刷新令牌。在此处阅读更多 这里。

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

身份验证提供商

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

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

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

应用程序保护

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

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

服务器端实用工具

演示页面

想预览 @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

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

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

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

pnpm generate

pnpm start
  3. 启动身份验证后端（我们使用相同的 Nuxt 3 应用程序的第二个实例）
    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 团队 的支持！