在 Next.js App Router 中使用 Auth.js 進行使用者驗證

目錄

初始設定

• 安裝
• 配置
  • NextAuthConfig 設定
  • 路由處理程序設定
  • 中介軟體
  • 在伺服器端元件中取得會話
  • 在客戶端元件中取得會話
• 資料夾結構

實施身份驗證：憑證和 Google OAuth

• 設定 prisma
• 憑證
• 新增 Google OAuth 提供者
  • 設定 Google OAuth 應用程式
  • 設定重定向 URI
  • 設定環境變數
  • 設定提供者
• 建立登入和註冊頁面
• 資料夾結構

初始設定

安裝

配置

NextAuthConfig 設定

它應該放在src資料夾內

Providers 在 Auth.js 中表示是可用於登入使用者的服務。用戶可以透過四種方式登入。

• 使用內建的 OAuth 提供者（例如 Github、Google 等...）
• 使用自訂 OAuth 提供者
• 使用電子郵件
• 使用憑證

https://authjs.dev/reference/nextjs#providers

路由處理程序設定

此檔案用於使用 Next.js App Router 設定路由處理程序。

中介軟體

在src資料夾內寫入。
如果寫在 src 資料夾之外，中間件將無法運作。

中間件是一個允許您在請求完成之前運行程式碼的函數。它對於保護路由和處理整個應用程式的身份驗證特別有用。

Matcher 是 一個設定選項，用於指定哪些路由中間件應應用於。它有助於僅在必要的路由上運行中間件來優化效能。
範例匹配器： ['/dashboard/:path*'] 僅將中間件套用至儀表板路由。

https://authjs.dev/getting-started/session-management/protecting?framework=express#nextjs-middleware

在伺服器端元件中取得會話

在客戶端元件中獲取會話

資料夾結構

實施身份驗證：憑證和 Google OAuth

設定棱鏡

證書

憑證，在身分驗證上下文中，指的是使用使用者提供的資訊驗證使用者身分的方法，通常是使用者名稱（或電子郵件）和密碼。

我們可以在 src/auth.ts 中新增憑證。

適配器：

• 將身份驗證系統連接到資料庫或資料儲存解決方案的模組。

秘密：

• 這是一個隨機字串，用於雜湊令牌、簽章/加密 cookie 以及產生加密金鑰。
• 這對安全至關重要，應該保密。
• 在本例中，它是使用環境變數 AUTH_SECRET 設定的。

頁：

• 此物件允許您自訂身份驗證頁面的 URL。
• 在您的範例中，signIn: '/login' 表示登入頁面將位於 '/login' 路由，而不是預設的 '/api/auth/signin'。

會話：

• 這配置了會話的處理方式。
• 策略：「jwt」表示 JSON Web Token 將用於會話管理而不是資料庫會話。

回調：

• 這些是在身份驗證流程中的各個點調用的函數，允許您自訂流程。

jwt 回呼：

• 它在建立或更新 JWT 時運行。
• 在您的程式碼中，它將使用者資訊（ID、電子郵件、姓名）新增至令牌中。

會話回呼：

• 每當檢查會話時都會執行。
• 您的程式碼正在將使用者資訊從令牌新增到會話物件。

新增 Google OAuth 提供者

設定 Google OAuth 應用程式

從 GCP Console 建立新的 OAuth 用戶端 ID > API 與服務 >憑證

建立後，儲存您的客戶端 ID 和客戶端金鑰以供日後使用。

設定重定向 URI

當我們在本地工作時，設定http://localhost:3000/api/auth/callback/google

生產環境中，只需將 http://localhost:3000 替換為 https://-----即可。

設定環境變數

設定提供者

https://authjs.dev/getting-started/authentication/oauth

建立登入和註冊頁面

資料夾結構

以上是在 Next.js App Router 中使用 Auth.js 進行使用者驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！