Auth.js v5に入門した感想

ロン（エンジニア）

2024.10.18

IT技術

Next.js

はじめに

初めまして。今年4月に新卒で入社いたしました櫻田と申します。
今回はAuth.jsを用いて実際にモダンな認証機能を実装したのでその感想をまとめたいと思います。

そもそもAuth.jsとは

公式サイト : https://authjs.dev/getting-started
複雑なWebアプリケーションの認証機能を簡単に実装するためのオープンソースライブラリです。
主な特徴は以下の2つです。

特徴1: ランタイムに依存しない！

Auth.js　(旧NextAuth.js)　v5ベータパッケージをリリースし、最新バージョンのNext.jsとより簡単に統合できるようになっただけでなく、ランタイムに依存しない形に移行しており他のフレームワークでもサポートされています。

とにかく柔軟性に富んでいて、フレームワークに関してはNext.jsだけでなくsveltekitやExpress.js、他のNode.jsベースのフレームワークでも利用可能であり、MongoDB/PostgreSQL/MySQL/SQLite/Redisなどのデータベースと統合することもできます。

特徴2:セキュリティを非常に重視した設計！

①署名付きのサーバー専用クッキーを使用したセッション管理
クッキーがクライアント側からアクセスできないため、クロスサイトスクリプティング（XSS）攻撃から保護されます。また、セッション管理には署名付きクッキーとしてクライアントに送信されるJSON Web Token（JWT）が使用されます。②クロスサイトリクエストフォージェリ(CSRF)保護
ユーザーの意図とは無関係に不正なリクエストを送信させるCSRF攻撃に対する保護機能が組み込まれており、ユーザーセッションごとにランダムなトークンが生成され、クライアントからサーバーにリクエストを送る際にこのトークンが含まれることで偽造リクエストを防ぎます。

③パスワードレス認証をサポートしている
パスワードを入力する代わりに、メールリンクやワンタイムパスコード（OTP）などの一時的な認証手段を使用してログインするパスワードレス認証をAuth.jsはサポートしています。データベースにパスワードを保存する必要がなくなり漏洩のリスクを防ぎます。

今回実装したもの

コード: Github

技術スタック

Next.js(14.2.6) / Typescript / MongoDB / Prisma / Auth.js(v5) / TailwindCSS

できること

メールアドレス / パスワード / 確認用パスワードを入力してアカウント登録
登録時に入力したメールアドレス / パスワードでのログイン
Googleアカウントを用いたログイン
ログインに成功するとDashBoardページにアクセスできる
ログアウトができる

実装してみた感想

なんといってもドキュメントが非常に充実していました！
環境構築からOAuthを用いた認証、セッション管理やPrisma / MongoDBを用いた際のSchema定義の説明なども全てコード付きでわかりやすかったです。
以前までは複雑な認証ロジックを自作していたもののセキュリティ面が十分ではありませんでしたが、Auth.jsを導入することで簡単にセキュアな認証機能を実装できました。

今回実装した認証方法はOAuth( Google )とメールアドレスとパスワードを使ったCredetial認証の2つですが、ハッシュしたパスワードとはいえデータベースに保存してしまうためリスクを避けるためにCredetial認証ではなくマジックリンクアプローチ(ログイン時にパスワードを入力する代わりにメールアドレスに送信されたリンクをクリックして認証を行う方法)やSMS認証を使った実装もいつかしてみたいと思いました。

引用
https://authjs.dev/
https://www.youtube.com/watch?v=soprdrmpO3M
https://www.youtube.com/watch?v=2xexm8VXwj8