Passkey
設定
WebAuthn / Passkeys 供應商為實驗性功能，目前不建議用於生產環境。
Passkeys 供應商需要資料庫配接器以及該資料庫中的新表格。請參閱您配接器的文件頁面，以取得各自的遷移詳細資訊。
目前下列配接器/框架套件支援 Passkeys。
| 套件 | 最低版本 | 連結 |
|---|---|---|
next-auth | 5.0.0-beta.17 | |
@auth/sveltekit | 1.0.2 | |
@auth/prisma-adapter | 1.3.3 | 文件 |
@auth/unstorage-adapter | 2.1.0 | 文件 |
@auth/drizzle-adapter | 1.1.1 | 文件 |
安裝對等相依性
npm install @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3只有在自訂登入頁面時才需要 @simplewebauthn/browser 對等相依性。如果您使用的是 Auth.js 預設頁面，則可以跳過安裝該對等相依性。
資料庫設定
Passkeys 供應商需要一個名為 Authenticator 的額外表格。現在多個配接器都支援 Passkeys，請參閱其各自的文件頁面，以取得更詳細的遷移步驟。我們將在此處使用 Prisma 作為範例，但下面也包含原始 SQL 遷移。
Edge 相容性
如果您將 next-auth 與 Next.js 和中介軟體一起使用，則應確保您選擇的資料庫用戶端「與 Edge 相容」。如果您使用的是舊版的 Prisma 或另一個不與 Edge 相容的配接器，則需要進行一些調整。請查看我們的 Edge 相容性指南以取得更多詳細資訊。此外，在 Prisma 配接器文件中也有針對 Prisma 的特定資訊。
更新 Auth.js 設定
將 Passkey 供應商新增至您的設定，並確保您使用的是相容的資料庫配接器。您還需要明確啟用實驗性的 WebAuthn 功能。
import Passkey from "next-auth/providers/passkey"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
const prisma = new PrismaClient()
export default {
adapter: PrismaAdapter(prisma),
providers: [Passkey],
experimental: { enableWebAuthn: true },
}如果您使用的是內建的 Auth.js 頁面，那麼您現在可以開始使用了！導覽至您的 /signin 路由現在應該包含「使用 Passkeys 登入」按鈕。
自訂頁面
如果您正在建置自訂登入頁面，則可以利用 next-auth/webauthn signIn 函式來啟動 WebAuthn 註冊和身份驗證。請記住，當使用 WebAuthn signIn 函式時，您還需要安裝 @simplewebauth/browser 對等相依性。
"use client"
import { useSession } from "next-auth/react"
import { signIn } from "next-auth/webauthn"
export default function Login() {
const { data: session, update, status } = useSession()
return (
<div>
{status === "authenticated" ? (
<button onClick={() => signIn("passkey", { action: "register" })}>
Register new Passkey
</button>
) : status === "unauthenticated" ? (
<button onClick={() => signIn("passkey")}>Sign in with Passkey</button>
) : null}
</div>
)
}選項
您可以在API 參考中找到所有 Passkeys 供應商選項。