Аутентификация и XSRF-TOKEN в laravel и react?

Question

[regex29]

Здравствуйте! Пробую сделать аутентификация с помощью laravel, sanctum и react. Laravel находится по адресу agency.api, react по localhost:3000. Всё делаю по документации Sanctum.

app/Http/Kernel.php - раскомментировал

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

config/cors.php
'supports_credentials' => true,

resources/js/bootstrap.js
axios.defaults.withCredentials = true;

.env

SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=.agency.api

Потом делаю запрос

const http = axios.create({
          baseURL: 'http://agency.api/',
          withCredentials: true,
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
          },
        });
const csrf = await http.get('/sanctum/csrf-cookie')
console.log('csrf = ', csrf);

Как я понимаю на этом этапе должны установится куки "XSRF-TOKEN" и "laravel_session", но их нет.
1.Что я делаю не так? Почему они не устанавливаются?
2.Если куки установятся и потом залогинится, тогда такие маршруты будут доступны только залогиненным пользователям?

Route::group(['middleware' => 'auth:sanctum'], function () {
    Route::get('login/test', [LoginController::class, 'test']);
});

Ну и такой запрос выполняется с ошибкой

await http.get('/sanctum/csrf-cookie')
                .then((res) => {
                    console.log('csrf = ', res);
                    http.post('/api/login', {
                        email: '[e-mail]',
                        password: 'password',
                    });
                })
                .catch((er) => {
                    console.log(er)
                });

получаю это. 419 ошибка проверки CSRF как я понимаю

Comments

[Дмитрий]

Чего покажет?
php artisan route:list -v

[regex29]

Дмитрий,

А то что маршрут "sanctum/csrf-cookie" идёт как web, так и должно? или должно быть api?

[regex29]

Дмитрий, и вот ещё. На сколько я понимаю laravel отдаёт "XSRF-TOKEN" и "laravel_session".

а в следующем запросе в заголовках нет токена

или это не то?
Как я понимаю axios сам засовывает нужные заголовки как это и написано в документации sanctum, а sanctum устанавливает нужные куки но их нет

[Дмитрий]

regex29, у вас не отрабатывает EnsureFrontendRequestsAreStateful похоже

[regex29]

Дмитрий, проверил, отрабатывает. Пожалуйста, есть ещё предположения?

[Дмитрий]

regex29 ну покажите Kernel.php

[Дмитрий]

Как я понимаю axios сам засовывает нужные заголовки

Нужные это какие?

[regex29]

Дмитрий, Про заголовки тут написано. "X-XSRF-TOKEN" заголовок.

Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array<int, class-string|string>
     */
    protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \Illuminate\Http\Middleware\HandleCors::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array<string, array<int, class-string|string>>
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

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

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array<string, class-string|string>
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \App\Http\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];
}

[regex29]

Дмитрий, если просто в браузере перейти по agency.api/sanctum/csrf-cookie, то всё устанавливается, а если через react отправлять запрос, то нет

[Дмитрий]

regex29, а spa у вас по какому урлу весит?

[regex29]

Дмитрий, localhost:3000

[Дмитрий]

regex29, я пасс

Answer 1

[regex29]

Решил таким путём:

api домен - api.agency.test
spa домен - agency.test

Как бы в документации так и написано, что должен быть одинаковый домен верхнего уровня.

Answer 2

[Дмитрий Кузнецов]

Как я вас понимаю. Я то же долго мучался с этим, только вместо реакта использовал vue.

Может вам поможет мой вариант:
Я в hosts файл (C:\Windows\System32\drivers\etc) добавил:
127.0.0.1 stie.ru api.site.ru

Comments

[regex29]

я openserver использую, он там сам автоматически это прописывает

[Дмитрий Кузнецов]

regex29, я то же использую. но мне такое помогло)

[regex29]

Дмитрий Кузнецов, я проверил, там всё прописано, значит у меня что-то другое(