Laravel 11 + React + Sanctum SPA認証メモ

.env

SESSION_DOMAIN=.localhost # 重要 ドットを含める。デプロイ時には変更すること
SANCTUM_STATEFUL_DOMAINS=localhost:3000 # 重要 APIを叩くフロントエンドのドメイン。デプロイ時には変更すること
SESSION_SECURE_COOKIE=false # 重要 デプロイ時には必ずtrueにし、httpsにすること

ログインのエンドポイントでやる処理。sessionを生成しなければならない。

        $request->validate([
            'email' => ['required', 'email', 'exists:users,email'],
            'password' => ['required'],
        ]);

        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate(); // ここが超重要。これを書くことでDBにセッションがちゃんと初期化される(user_idがセットされる)
            return response()->json(Auth::user(), 200);
        }

        return response()->json(['error' => 'Unauthorized'], 401);

クライアントのaxios設定。withXSRFTokenを必ず書かなければならない(CSRF Token Mismatchになる) ChatGPTが嘘つきやがったせいでかなり無駄な時間を消費した。

export const apiClient = axios.create({
  baseURL: "http://localhost:8080", // ここにベースURLを指定 TODO: 環境変数から取得する
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true, // クッキーや認証情報を含める
  withXSRFToken: true, // これも書かないとダメ。XSRFトークンを含める
});