はじめに

初めまして。今年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:セキュリティを非常に重視した設計！

今回実装したもの

コード: 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