@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 生態系統提供具有原生開發人員體驗 (DX) 的 23k 星號函式庫的可靠性和便利性
• 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 以產生類型定義。
• 在 模組遊樂場目錄內使用 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 團隊的支持！