Postmanにおけるnext-authのログイン認証エラーの解決 #React

はじめに

next-auth(credentials)とpostmanを使用し、apiの確認を行った時にsession TokenがCSRFのエラーが原因で取得できなかったので、その解決までの記録を記載しています。

エラー内容

サーバー側のエラーログを以下に示します。

[auth][error] MissingCSRF: CSRF token was missing during an action callback.

環境

next: 14.1.0,
next-auth: 5.0.0-beta.8
postman

ディレクトリ構成

app
└── api
    └── auth
         └── [...nextauth]
                └── route.ts

[...nextauth].tsにするとpostmanからリクエストした時に機能しませんでした。(原因解明中)

postmanの設定

環境変数

環境変数に以下の設定を行います。csrfTokenのinitial valueは空にして、baseUrlは環境に応じて変更してください。

bodyの設定

workspaceに移動し以下の設定を行います。
リクエストの送信先は {{baseUrl}}/api/auth/callback/credentials と設定し、Bodyの種類はx-www-form-urlencodedを選択しました。
リクエストには6つのBodyパラメータが含めました。

redirect: false
email: test@gmail.com(テスト用のメールアドレス)
password: 1234567(テスト用のパスワード)
callbackUrl: {{baseUrl}}
csrfToken: {{csrfToken}}
json: true

Pre-request Scriptの設置

都度発行されるcsrfTokenを取得するためのscriptの設定を行いました。以下に設定した画像とコードの説明を行います。

const baseUrl = pm.collectionVariables.get("baseUrl");
pm.sendRequest(`${baseUrl}/api/auth/csrf`, function (err, response) {
    var jsonData = response.json();
    pm.collectionVariables.set("csrfToken", jsonData.csrfToken);
});

baseUrl変数を設定しており、これはPostmanのコレクション変数から取得しています。
pm.sendRequest関数を使用して、CSRFトークンを取得するためのリクエストを${baseUrl}/api/auth/csrfに送信しています。ここで、テンプレートリテラルを使用しbaseUrl変数をURLに組み込んでいます。
リクエストのレスポンスからJSONデータを取得してjsonData変数に格納します。
jsonDataオブジェクトからcsrfTokenプロパティを取得し、Postmanのコレクション変数にセットし完了

結果

上記の手順を踏むことで以下の画像のようにcookiesにauthjs.session-tokenが保存されます。

Postmanにおけるnext-authのログイン認証エラーの解決