authenticated user not detected on non-API routes in Laravel and Vue SPA

Passport Version 11.08

Laravel Version 10

PHP Version 8.1.4

Database Driver & Version mysql 8

I'm working on a Laravel and Vue.js project. The frontend is a single-page application (SPA) accessible through panel.foo.com, while the login route is api.foo.com/login and belongs to the api middleware group. A token is received and stored in the SPA when a user successfully logs in. On the main page with the URL foo.com, which is a non-SPA just blade in the web middleware group, the login user is not detected and no laravel_token cookie is created.

I added the CreateFreshApiToken::class middleware to the web middleware group, but it did not solve the problem. In the controller of the main page, I have used

dd(auth()->check(),auth('api')->check())

and both return false.

I have checked the middleware group, and CreateFreshApiToken::class exists in the web middleware group. However, when using the panel APIs, which belong to the api middleware group, the CreateFreshApiToken::class is not executed to create the laravel_token cookie. On the main page, when CreateFreshApiToken::class is executed, $request->user($this->guard) is null. Therefore, the laravel_token cookie is not created.

Here are my auth configuration settings:

session_domain set to .foo.com

'defaults' => [
'guard' => 'web',
'passwords' => 'users',
],

'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'passport',
'provider' => 'users',
],
],

And here is my kernel.php file:

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,
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

'api' => [
    \Illuminate\Routing\Middleware\ThrottleRequests::class . ':api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],
];

What could be the issue here?