Next.jsとLaravelを使ったSanctum認証とSSRフェッチ時に必要な対応

はじめに

本記事では、Next.jsとLaravelを使用したアプリケーション開発中に遭遇する可能性のある認証関連の問題に焦点を当てています。具体的には、サーバーサイドレンダリング(SSR)時にLaravel Sanctumを用いた認証を行う際の一般的なエラーと、その解決策について解説します。

エラー

• エラー内容はSSR内にてサーバーサイドフェッチ時apiを実行すると401 Unauthenticatedが返ってきてしまうものです。

原因

この問題の主な原因は、SSR中にAPIリクエストを行う際、適切なRefererヘッダーやOriginヘッダーが設定されていないことにあります。Laravel Sanctumではこれらのヘッダーを利用してリクエストがアプリケーションのフロントエンドから送信されたものであることを検証するらしいです、、、。

解決策

1. APIリクエストのヘッダーにRefererとOriginを含める: Next.jsからのすべてのAPIリクエストに、正しいRefererヘッダーとOriginヘッダーを明示的に設定します。これにより、Laravelがリクエストの正当性を認識し、CSRFトークンエラーを回避できます。

   (SSR実行ファイル)

   fetch("https://yourdomain.com/api/endpoint", {
       method: "GET", // または POST, PUT など
       headers: {
           'Referer': 'https://yourdomain.com',
           'Origin': 'https://yourdomain.com'
       },
       credentials: 'include' // クッキーを送信するために必要
   });
   

2. セッションの設定を確認する: LaravelとNext.jsの間でセッションが正しく共有されているかを確認します。SANCTUM_STATEFUL_DOMAINS の設定を適切に行うことで、セッションの維持が可能です。

結果

上記の変更を加えた後、SSRでの認証プロセスが正常に機能し、CSRF token mismatchのような エラーが解消されました。

終わりに

この問題はNext.jsとLaravelのSanctumを組み合わせて使用する場合に必要な対応であり、適切なヘッダーの設定が必要です。
公式にはそこまでの情報は書いてないので、同じエラーが出た人の助けになれば幸いです！！

参考