密码键
设置
WebAuthn / 密码键提供商尚处于实验阶段，目前不建议用于生产环境。
密码键提供商**需要数据库适配器**以及该数据库中的新表。有关相应的迁移详细信息，请参阅您适配器的文档页面。
密码键目前在以下适配器/框架包中受支持。
| 包 | 最低版本 | 链接 |
|---|---|---|
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/[email protected] @simplewebauthn/[email protected]仅当使用自定义登录页面时，才需要@simplewebauthn/browser 对等依赖项。如果您使用的是 Auth.js 默认页面，则可以跳过安装该对等依赖项。
数据库设置
密码键提供商需要一个名为Authenticator 的附加表。密码键现在在多个适配器中受支持，有关更详细的迁移步骤，请参阅它们各自的文档页面。在本例中，我们将使用 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 路由应包含一个“使用密码键登录”按钮。
自定义页面
如果您正在构建自定义登录页面，则可以使用next-auth/webauthnsignIn 函数来启动 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 参考中找到所有密码键提供商选项。