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 團隊 的支援！