NextAuth.js v4 中的新更新：您需要了解的內容

2023/01/11

身份驗證是應用程序開發的關鍵組成部分。它有助於保護用戶數據並防止惡意活動。簡而言之，它決定了用戶身份的可信度，確保只有授權用戶才能訪問應用程序及其資源。

創建自定義身份驗證系統可能是一項耗時的任務，而這正是 NextAuth.js 派上用場的地方。它為使用 Next.js 框架構建的應用程序提供安全身份驗證支持。

什麼是 NextAuth.js？

NextAuth.js是一個開源輕量級庫，為 Next.js 應用程序提供身份驗證和授權支持。它使開發人員可以快速輕鬆地為其 Next.js 應用程序設置身份驗證和授權。它提供了多個提供者身份驗證、電子郵件和無密碼身份驗證等功能。

NextAuth.js 在身份驗證中是如何工作的？

NextAuth.js 的身份驗證解決方案提供了一個客戶端 API，您可以將其集成到 Next.js 應用程序中。您可以使用它通過不同的登錄提供程序對用戶進行身份驗證，這些登錄提供程序已創建帳戶。

在幕後，用戶被重定向到提供商的登錄頁面。身份驗證成功後，提供程序返回包含用戶有效負載的會話數據。然後，此有效負載可以授權訪問應用程序及其資源。

NextAuth.js (v4) 中的新功能更新

2022 年 12 月，NextAuth.js 發布了第四個版本。此版本已從其早期版本 v3 進行了改進，具有新的更新和修改。更改主要集中在改進庫在身份驗證過程中的使用。

1.更新useSession Hook

您可以使用 useSession 掛鉤來檢查用戶是否已登錄。在這個新版本中，useSession 掛鉤返回一個對象，由於添加了狀態選項，該對象提供了一種更直接的方式來測試狀態。請參閱下面的代碼：

import { useSession } from "next-auth/react"

export default function Component() { const { data: session, status } = useSession()


    if (status === "authenticated") { 
        return <p>Signed in as {session.user.email}</p> 
    }

return <p> Not signed in </p> }

2. SessionProvider 上下文變成強制的

新版本 4 強制使用 SessionProvider 上下文。這意味著您必須使用 useSession Provider 包裝您的應用程序。NextAuth.js 建議將您的應用包裝在_app.jsx文件中。

此外，clientMaxAge 方法已替換為 refetchInterval。這將使在後台定期獲取會話變得更加容易。

import { SessionProvider } from "next-auth/react"

export default function App({ Component, pageProps: { session,. ..pageProps }, }) { return ( <SessionProvider session={session} refetchInterval={5 * 60}> <Component {...pageProps} /> </SessionProvider> ) }

3.單獨導入供應商

NextAuth.js 提供了多種提供者服務，您可以使用這些服務來登錄用戶。他們包括：

使用內置的 OAuth 提供程序（例如 GitHub、Google）。
使用電子郵件提供商。

在這個新版本中，您需要單獨導入每個提供程序。

import GoogleProvider from "next-auth/providers/google" import Auth0Provider from "next-auth/providers/auth0";

4. 其他小改動

客戶端導入已從 next-auth/client 重命名為 next-auth/react。
更改回調方法的參數：signIn({ user, account, profile, email, credentials }) session({ session, token, user }) jwt({ token, user, account, profile, isNewUser })

身份驗證中的 NextAuth.js 入門

要將 NextAuth.js 集成到您的 Next.js 應用程序中，請按照以下步驟操作：

通過運行以下命令創建 Next.js 應用程序：npx create-next-app <app name>
在您的終端中運行npm install next-auth以在您的 Next.js 應用程序中安裝 NextAuth.js。
訪問NextAuth.js官方文檔並從支持的列表中選擇您喜歡的提供商。接下來，在您選擇的提供商的開發者控制台中創建一個帳戶並註冊您的 Next.js 應用程序。
在您選擇的提供商的開發者控制台中，指定主路由 URL和回調重定向 URL，保存更改並複制ClientID和Client Secret。
在您的 Next.js 應用程序根目錄中，創建一個。env 文件來保存Client ID和Client Secret。
最後，在 /pages/api 目錄中，創建一個名為auth的新文件夾。在 auth 文件夾中，創建一個新文件，並將其命名為 […nextauth].js。在創建的文件中，添加以下代碼。該代碼顯示了使用 Google Provider 的 NextAuth.js 客戶端 API：

import GoogleProvider from "next-auth/providers/google";

providers: [ GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }) ]

您現在可以繼續構建登錄身份驗證頁面。這是登錄組件的 DOM 渲染：

import React from 'react'; import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() { const { data: session } = useSession()


  if (session) {
    return (
      <>
        <p> Signed in as {session.user.email} </p>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }

return ( <> <p> Not signed in </p> <button onClick={() => signIn()}>Sign in</button> </> ) }

useSession Hook 訪問當前用戶會話對象。用戶登錄並通過 Google 身份驗證後，將返回一個包含用戶負載的會話對象。這允許 Next.js 在應用程序的客戶端呈現用戶詳細信息，在本例中為電子郵件。

自定義身份驗證系統與 NextAuth.js 等即用型解決方案

在構建自定義身份驗證系統和集成即用型身份驗證解決方案（例如 NextAuth.js）之間進行選擇時，重要的是要考慮每個解決方案的成本、複雜性和安全性。

如果您擁有開發自定義身份驗證系統的資源和專業知識，那麼這可能是最適合您的方法。但是，如果您正在尋找一種易於實施、安全且經濟高效的開箱即用解決方案，那麼 NextAuth.js 可能是一個值得考慮的不錯選擇。最終，選擇將取決於您的需求和偏好。