パスキー

設定

⚠️

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/browser@9.0.1 @simplewebauthn/server@9.0.3

pnpm add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

yarn add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

bun add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

@simplewebauthn/browser ピア依存関係は、カスタムサインインページでのみ必要です。Auth.jsのデフォルトページを使用する場合は、このピア依存関係のインストールをスキップできます。

データベースの設定

パスキープロバイダーには、Authenticatorという追加のテーブルが必要です。パスキーは複数のアダプターでサポートされるようになりました。より詳細な移行手順については、それぞれのドキュメントページを参照してください。ここではPrismaを例として使用しますが、下に生のSQL移行も含まれています。

Prismaスキーマ

SQL移行

Edgeとの互換性

Next.jsとミドルウェアでnext-authを使用している場合、選択したデータベースクライアントが「Edge互換」であることを確認する必要があります。Edge互換ではない古いバージョンのPrismaや他のアダプターを使用している場合は、調整が必要です。詳細は、Edge互換性ガイドをご覧ください。PrismaアダプターのドキュメントにもPrismaに関する情報があります。

Auth.js設定の更新

Passkeyプロバイダーを構成に追加し、互換性のあるデータベースアダプターを使用していることを確認してください。実験的なWebAuthn機能を明示的に有効にする必要もあります。

./auth.ts

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/webauthnのsignIn関数を使用して、WebAuthn登録と認証の両方を開始できます。WebAuthnのsignIn関数を使用する場合は、@simplewebauth/browserピア依存関係もインストールする必要があります。

app/login/page.tsx

"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リファレンスにあります。

Passage Patreon