NextAuth.jsとAuth0を使って認証をパッと作る

Last updated at 2022-12-22Posted at 2022-12-17

今回のアプリでは、まだパッと作るところまでしかできてません。
動くところまでは作りましたが、細かい設定できていない気がするのと、iOSやAndroidアプリをフロントエンドにしてGraphQLサーバーだけ使いたい場合どうなるなど気になる項目が残っていたりします。

NextAuth.jsについて

NextAuth.jsはNext.jsに認証機能を簡単に加えることができるライブラリです。
今回、PivotalTrackerのクローンを作ったので、認証が必要なページが殆どで、SPAにしてクライアントサイドだけで認証しても良かったです。

ただ、クライアントだけで認証するとどうしても画面を描画してから認証処理が走り、結果を処理してリダイレクトするなど、コードが複雑になるし、体験も良くない。
できればレンダリング時には認証しているかどうか知っている状態を作りたい。

NextAuth.jsはそこを解決できそうなのと、導入も軽そうだったので今回はじめて採用しました。

Auth0はアプリケーションに簡単に組み込める認証基盤を提供してくれるサービスです。
認証周りを自分で書くのは、セキュリティと時間的コストを理由にほとんどやらないです。

Auth0はよく使っているサービスでも利用実績があったり、安心して使える基盤だと思います。

Auth0とFirebase Authで迷ったのですが、NextAuth.jsとの相性でAuth0に決めました。（Firebase Authを使う場合NextAuthにProviderがないので自分で連携する必要がある）

使い方は探せばいくらでもありそうなのでここでは取り扱いません。
ソースコードは公開しているので、そちらをご参照いただければ！

明日はChakraUIとRHFとzodについて書きます。