Next.js 14 Route Handlers 内の Cookie の扱いについて
解決したいこと
Route Handlers内からバックエンドのAPIにfetch()でリクエストを飛ばし,JWT認証を行った上レスポンスのSet-cookieヘッダにトークンを載せて返してもらっています
このfetch()にてトークンを取得しこれをCookieに保存してクライアントコンポーネント側に返しています
この時,Route Handlers内からバックエンドのAPIに飛ばしたリクエストに対するレスポンスのヘッダにはSet-cookie
にaccess_token=eyJh*****
と値がセットされているのは確認できるのですが,これを真下の行で cookies().get("access_token")?.value;
で取得しようとすると[{ name: 'access_token', value: '' }]
となってしまい,値が取得できません
自分の認識では,Set-Cookie
にaccess_token=eyJh****
と書いてあるのを確認したらこれをCookieに保存してくれるものだと思っていたのですが,これはRoute Handlers内では別の話なのでしょうか?
また,解決策としてconst token = apiResponse.headers.get("set-cookie").split(";")[0].split("=")[1];
といったようにfetch()のレスポンスから直にSet-Cookie
フィールドを取り出してcookies().set("access_token", token)
した NextResponse を返すというのはおかしい(セキュリティ上の問題あり)ですか?
バックエンドのAPIはHono,フロントエンドはNext.jsで作成しています
該当するソースコード
クライアントコンポーネントからRoute Handlersへのリクエスト (一部抜粋)
const response = await fetch("/api/auth/login", {
method: "POST",
headers: apiConfig.headers,
body: JSON.stringify(payload),
credentials: "include",
});
if (!response.ok) {
throw new Error('Internal server error', response.status);
}
const responseData = await response.json();
await login();
router.push("/");
Route Handlers からバックエンド API へのリクエスト
const apiResponse = await fetch(apiConfig.baseURL + "/auth/login", {
method: "POST",
headers: {
...apiConfig.headers
},
body: JSON.stringify(payload),
credentials: "include",
});
// 正しくSet-Cookieフィールドにトークンがセットされている
console.log(apiResponse.headers.get("set-cookie"));
if (!apiResponse.ok) {
throw new Error('Internal server error', apiResponse.status);
}
const responseData = await apiResponse.json();
// APIからのレスポンスからトークンを取り出したい
// 動く
const token = apiResponse.headers.get("set-cookie").split(";")[0].split("=")[1];
// undefined
const token = cookies().get("access_token")?.value;
cookies().set("access_token", token, {
httpOnly: true,
// secure: true,
sameSite: 'lax',
path: '/',
});
console.log(cookies().getAll());
const response = NextResponse.json({ url: "/" }, { status: 200 });
return response;
Next.js(React)初心者で色々誤解がありおかしなことを書いているかもしれませんが,おてやわらかによろしくお願いします