✨

📚 用語まとめメモ（React × Laravel Sanctum 認証編）

に公開
Laravel
PHP
React
tech

🔐 Sanctum

Laravelの「セッションベース認証」仕組み

クッキーを使ってログイン状態を保持する（SPA向け）

トークンじゃなくて「セッションID」で管理するタイプ

🍪 CSRF Cookie（クロスサイトリクエストフォージェリ対策）

Laravel Sanctum でログインするには 事前にこのクッキーを取得する必要がある

エンドポイント：/sanctum/csrf-cookie

取得後に XSRF-TOKEN がブラウザにセットされる

📦 axios

HTTPリクエストを送るためのライブラリ（ReactでAPI呼び出しに使う）

axios.get() や axios.post() でAPIにアクセスできる

withCredentials: true を使うと、Cookieが送信されるようになる

📌 withCredentials: true

axiosの設定

これを使わないと Reactから送るリクエストに Cookie がつかない

Sanctum認証には必須

🌐 CORS（Cross-Origin Resource Sharing）

フロント（localhost:5173）とバックエンド（localhost:8000）が別ドメイン扱いになるときに、明示的に許可が必要

Laravel側の config/cors.php や .env で設定する

🌍 SESSION_DOMAIN

.env に書く設定（例：SESSION_DOMAIN=localhost）

Cookieの作用ドメインをLaravelに伝える設定

📌 SANCTUM_STATEFUL_DOMAINS

Laravel側で「このドメインから来たリクエストには、セッションを認識するよ」と伝える設定

SANCTUM_STATEFUL_DOMAINS=localhost:5173

🧪 401 Unauthorized

「ログインしていないよ！」というエラー

Cookieがついていない、またはセッションが無効

🧪 422 Unprocessable Entity

「リクエスト内容がバリデーションに失敗したよ！」というエラー

例えば：

email が空

password が足りない

Laravelが想定してないキーで送られている　など

🔄 meエンドポイント

GET /api/v1/me

ログイン済みのユーザーの情報（名前・メールなど）を取得するためのAPI

Sanctumで守られているため、未ログインだと 401 を返す

🔄 invalidateQueries / useQuery

React Query（TanStack）の用語

useQuery：データ取得用のフック（例：useMe()）

invalidateQueries：キャッシュされたデータを強制更新（ログイン後に使う）

🧭 navigate('/xxx')

React Routerでページ遷移する関数

ログイン後に navigate('/tickets') などで画面遷移するのに使う

🧱 Route / BrowserRouter / Routes

React Routerのルーティング構成

<BrowserRouter>：ルーティング全体を包む

<Routes>：ルートの切り替えを管理するコンポーネント

<Route path="/login" element={<Login />} /> などでページを定義

📁 baseURL

axiosの設定

例：baseURL: 'http://localhost:8000/api/v1' で /me → http://localhost:8000/api/v1/me

🧾 .env

各種設定ファイル

.env（Laravel側）：DBやセッション、URLの設定

.env（Vite側）：React用の環境変数（VITE_API_BASE_URL など）

🧠 全体の流れをざっくり図にすると：

React Login Form
↓
GET /sanctum/csrf-cookie ← Cookie取得
↓
POST /api/v1/auth/login ← ログイン実行
↓
Cookieでセッション保持（laravel_session）
↓
GET /api/v1/me ← ユーザー情報取得
↓
Header等にユーザー表示

Discussion