📘

Hono + React SPAでつくるパスキーの登録と認証

2024/03/02に公開

やったこと

  • パスキー何も知らないところから、とりあえず登録と認証を動かすところまで
  • 設定は色々と適切なのかはわかりません。今後勉強します。

環境

  • せっかくなら、使ったことないフレームワークで、ということで、Honoを選択
    • hono使いやすい
  • ベースはこのコード

https://zenn.dev/yusukebe/articles/06d9cc1714bfb7

実装と動作

実装

コードはこちら
https://github.com/dl10yr/hono-react-spa-passkey

サーバーサイドはライブラリ使ってる
https://simplewebauthn.dev/docs/packages/server

クライアントもあったけど、まぁ使うほどではないかと思ったら結構ハマった...
https://simplewebauthn.dev/docs/packages/browser

動作

パスキー登録

パスキー認証

感想

  • パスキー周りの設定のパラメータが多くて複雑。意味を理解していかないと。。
  • ArrayBufferとかBase64Urlとかの取り回しに時間を取られた。
    • これも勉強し直さなければ。。。

References

https://simplewebauthn.dev/

https://zenn.dev/kg0r0/articles/129ae1819296dd

https://github.com/kg0r0/simplewebauthn-example/tree/passkeys

https://nnsnodnb.hatenablog.jp/entry/try-passkeys-on-python-and-ios

Discussion