How can I send authenticated requests from React to a Laravel API using Sanctum?

This is a common issue when integrating Laravel Sanctum with a frontend like React and it's often caused by misalignment between cookie domain configuration, CORS settings, and how the Axios client handles credentials.

Correct way to do this:

In .env of Laravel backend:

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:5173
APP_URL=http://127.0.0.1:8000

In config/sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:5173')),

In config/cors.php

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:5173'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

*** supports_credentials: true is required for cookies to be accepted across domains.

In app/Http/Kernel.php, under api middleware group:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Make sure Axios is configured globally (or per-request) like this:

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:8000';

** localhost used consistently (no 127.0.0.1)

Login Request:

await axios.get('/sanctum/csrf-cookie');
await axios.post('/login', {
  email: '[email protected]',
  password: 'password',
});

*** You must call /sanctum/csrf-cookie first before logging in to set the XSRF token cookie.

The cookie should be sent automatically because:

• withCredentials: true
• CORS allows it
• Session is active

Follow these steps to authenticate requests from a React application to a Laravel API using Sanctum. This setup assumes you're running the Laravel backend like http://127.0.0.1:8000 and your React frontend on 127.0.0.1:5173 (Vite).

1. Laravel Sanctum Setup Install Sanctum

   composer require laravel/sanctum php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" php artisan migrate

Add middleware in app/Http/Kernel.php under api group:

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

2. ENV Configuration

SANCTUM_STATEFUL_DOMAINS=localhost:5173 SESSION_DOMAIN=localhost

3. CORS Configuration (config/cors.php)

Make Sure:

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'supports_credentials' => true,

4. React Frontend (Axios Setup)

   import axios from 'axios';

   axios.defaults.baseURL = 'http://127.0.0.1:8000'; axios.defaults.withCredentials = true;

   // Get CSRF cookie await axios.get('/sanctum/csrf-cookie');

   // Then login await axios.post('/login', { email: '[email protected]', password: 'yourpassword', });

Now you can hit protected routes:

const response = await axios.get('/api/user');
console.log(response.data);

• Laravel API Route

  Route::middleware('auth:sanctum')->get('/user', function (Request $request) { return $request->user(); });

Common Mistakes to Avoid

• Forgetting to call /sanctum/csrf-cookie before login

• Missing withCredentials: true in Axios

• Wrong SESSION_DOMAIN or SANCTUM_STATEFUL_DOMAINS

• Not allowing credentials in CORS config