@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的非靜態應用程式，將 23k 星標函式庫的可靠性和便利性，透過原生開發人員體驗 (DX) 提供給 Nuxt 3 生態系統
• local：適用於依賴外部後端的靜態頁面，使用憑證流程進行身份驗證。本地供應商也支援自 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：將 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 團隊提供支援！