Auth.js(NextAuth.js)でブラウザに保存されているJWTを複合してみる(中身を見る)。

概要

Next.jsでログイン機能を作る時、一から自作する人は少ないでしょう。そして、よっぽどの自信がない限りセキュリティの観点でやめておいた方が良いです。
2024年10月時点ではAuth.js(NextAuth.js)というパッケージを使って実装することが多いです。

Auth.js | Authentication for the Web

Next.jsでは、セッション情報(ユーザー情報やAPIのアクセストークン)の保存の方法は２通り提供されています(下記リンク参照)。

Auth.js | Session Strategies

1つ目はJWTという形式でクッキーに保存する方法(クライアント側)、
2つ目は従来のデータベースに保存する方法(サーバー側)です。
「クッキー(JWT)にセッションを保存するべきか、否か」に関しては賛否ありますが(下記リンク参照)、今回はそこについては触れません。
(しかし、下記リンクの言う通り、どのようなリスクがあるかは理解しておくべきです。)

どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ？ - co3k.org

話を戻すと、Auth.jsはデータベースへ接続するアダプターを利用しない場合(=サーバー側での保存を選択しない)、自動的にセッションをJWTに保存するようになっています(以下のリンクを参照)。

Options | NextAuth.js

今回はこのJWTの中身を見る方法について解説したいと思います。

初期セットアップ

Next.js、Auth.jsの初期セットアップ手順に関しては、色々な方が記事を書いてます。私は下記の方の記事を今回参考しました。
NextjsのAppRouter形式、IDプロバイダーにGoogleを利用したパターンです。

【Next.js】App Router × NextAuth.jsでGoogleログイン機能を実装したい - Qiita

記載通りにセットアップをして、起動させ、http://localhost:3000にアクセスすると
以下の画面が表示されます。

ログイン前画面

「Googleでログイン」ボタンを押して、認証処理が完了すると、以下の画面が表示され、セッション期限、名前、Googleのプロフィール画像が表示されます。

ログイン後の画面

JWTの確認

この状態の時、クッキーにJWTが保存されています。まずクッキーを見てみます。クッキーの見方は開発者ツールを開いて(F12を押すか、ページのどこかを右クリックして「検証」を押す)、そうすると開発者用の画面が表示されます。

開発者ツールの表示

下記の赤矢印のApplicationボタンを押下すると、クッキーの確認画面を表示することができます。

Applicationタブを押下

下記のCookiesの「http://localhost:3000」を押すと「next-auth.session-token」という名前のクッキーのValueにJWTが入っています。

開発者ツールでJWTを確認

ここまで、当然のようにJWTという言葉を使ってきましたが、少し説明しておきたいと思います。JWTはJson Web Tokenの略で、ざっくり言うとJSONデータをWEBで取り扱うルールを規定したものです。
少しJWTについて知っている人であれば、「ヘッダーとペイロードと署名をBase64でエンコードしてピリオドで繋いだものでしょ？なんかJWT貼り付けたら中身見れるサイトあったよね？」くらいの認識があると思います。

JWT貼り付けたら中身見れるサイト

しかし、この認識でAuth.jsのJWTの中身を見ようとすると、うまくいきません(実際私がそうでした)。どううまくいかないのか、先ほど開発者ツールで確認したJWTをこのサイトに貼り付けてみましょう。

Auth.jsのJWTを確認

なんと、セッション情報(ユーザー情報やAPIへのアクセストークン)が入っているであろうペイロードが空っぽです。
Auth.js側で値を設定する処理を書かなければいけないのでしょうか？
いいえ、そうではありません。