Zenn
🔑

【パスキー認証】Better Auth

2025/02/09に公開
React
auth
認証
Passkey (パスキー)
Better Auth
tech

Better Authでパスキー認証

Better Authを使用しパスキー認証を簡単に実装できたので共有します。

Better Auth
https://www.better-auth.com/
https://www.better-auth.com/docs/plugins/passkey

パスキー
https://passkeys.dev/docs/intro/what-are-passkeys/

👇 本記事のソースコードはこちら。私はNext.jsとSupabaseで実装しました。
（本当に適当に書いています。人にお見せできる状態ではありません。）
https://github.com/R1013-T/learn-better-auth

1. プロジェクトのセットアップ

パスキー部分以外のセットアップについては公式ドキュメントを参考にしてください。
https://www.better-auth.com/docs/installation

2. プラグインを追加する

以下は、Better Auth の設定ファイル auth.tsにパスキー認証プラグインを追加する例です。

auth.ts
import { betterAuth } from 'better-auth'
import { Pool } from 'pg'
+import { passkey } from "better-auth/plugins/passkey"

export const auth = betterAuth({
  database: new Pool({
    connectionString: process.env.DATABASE_URL,
  }),
  emailAndPassword: {
    enabled: true,
  },
+ plugins: [
+   passkey()
+ ],
})

また、クライアント側の設定ファイルauth-client.tsには、以下のようにパスキー認証クライアントプラグインを追加します。

auth-client.ts
import { createAuthClient } from "better-auth/client"
+import { passkeyClient } from "better-auth/client/plugins"
 
export const authClient =  createAuthClient({
+  plugins: [ 
+    passkeyClient() 
+  ] 
})

3. パスキーの登録/サインイン用 関数の追加

ユーザーがパスキーを登録したり、パスキー認証でサインインできるよう、以下の関数を実装します。（ボタンのonClickイベントなどで呼び出してください。）

// パスキーを登録
await authClient.passkey.addPasskey();

// パスキーでサインイン
await authClient.signIn.passkey();

4. 実際にパスキーでログインしてみる

  1. パスキー以外の方法でログインする[1]
  2. パスキーを登録する
  3. ログアウトする
  4. パスキーでサインインする🎉

まとめ

Bette Authを使用することにより、簡単にパスキー認証を実装することができました。

感想

公開鍵暗号方式により、秘密鍵がデバイス内に安全に保存され、デバイス認証によってログインが実現されるパスキーは、リモート攻撃やフィッシング攻撃に対して強い点が魅力的で良いですね！ログイン体験がシンプルな点も好きです。
私はパスキーを実装する際はユーザー登録もパスキーで完結させたいので一から実装しようと思いました。個人的には今後のログイン手段はパスキーとOAuthのみで良いと感じました。

脚注

  1. 2025/2/9時点では、Better Authにおけるパスキー機能は、ユーザーが既にログイン済みの状態でパスキーを追加する設計になっています。なので、初回のユーザー登録には、メール認証やOAuth認証などの従来の認証方式を利用する必要があります。
    パスキーだけでユーザー登録を実現したい場合は、独自の実装が求められます。 ↩︎

Discussion