giagara's avatar

React JS + Laravel Sanctum: 401 unauthorized error

Hi everybody, I've already searched on this forum and on the internet a solution to my problem but I can't face why this is happening.

I need to use Laravel as API and a separate react application as frontend.

If i set up bearer token, and pass to Laravel in header everything is working, but i want to use cookie session.

Domains are: frontend.appname.local and development.appname.local

LARAVEL: .env:

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=.appname.local
SANCTUM_STATEFUL_DOMAINS=development.appname.local

cors.php:

'supports_credentials' => true,

Kernel.php:

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

React:

axiosClient.defaults.withCredentials = true;

axiosClient.get(constants.CSRF_URL).then((csrf_response) => {
      axiosClient
        .post("/login", {
          email,
          password,
        })
        .then((response) => {}
    )
})

where CSRF_URL = http://development.appname.local/sanctum/csrf-token

The login is ok, the cookie seems to be set in my browser (I can see it in the Application tab).

The error occurs when i try to perform another post request, and i get 401 unauthorized. The cookie seems to be sent in this new post request:

Cookie: XSRF-TOKEN=eyJpdiI6IkJR............

Am i missing something?

Thanks!

0 likes
5 replies
drehimself's avatar

Have you taken a look at the official Next.js frontend for Laravel Breeze/Sanctum? https://github.com/laravel/breeze-next

If you can get that running with a Breeze backend, it might help you debug your current problems with your React app.

What you've described seems correct, the cookies seem to be getting set/sent correctly since you're not getting a 419 - CSRF error.

Also maybe try running both apps on a localhost domain instead of your custom domains. Whenever I work with Sanctum/Breeze I usually have the frontend running on localhost:3000, and the Laravel app running on localhost:8000 using php artisan serve.

jovs's avatar

@drehimself do you know the issue with this? I'm using the getServerSideProps to get the user per page access and some data as well.


{
"accept": "application/json",
"referer": "http:///localhost:3000",
"cookie": "XSRF-TOKEN=eyJpdiI6ImRnZEJUTVllN0NRdUZ2K2xtYy9Pcmc9PSIsInZhbHVlIjoicUg2YlZGazdQbFQ4eFEyYkFnd0oyZG1nUGFNREs5MVVwWmJUVWY0emhjVWFiREUzTjA5YTVCelhtUmFlNXdFYlliMkhHaWR4UEpkTmRXOWdCQm5lNllSTktjTy9ITWVhYTV6ZG4vSG94dXp6RjNndGlVR201QS9lbmRKV05EUm8iLCJtYWMiOiI2ODZmYzc1NzJiYmE4ZTg4NjZjZDc2MDRlN2FiNDg2YjEwZjRhMWU1OWRjNGNhN2JmZmZlNmFjMjg3ZjY4MTg5IiwidGFnIjoiIn0%3D; laravel_session=eyJpdiI6ImV2K0tvVlNiSjJrSTBjaWZHTGQxQWc9PSIsInZhbHVlIjoiODl5T2h3QTVTM09sWWFZWmhLeDlvUWdEb0FhUjZPQzNZNG1zTXZBc1FScjNMRDR6N0ZFdVkrMkJjQ1RKQ3A2ZzBtYVZJTUhPVlFRM2g1TUdDK2tLUXBzdUx6NFVtTk16VGw1UHZRWkVYL2piNEN4TXFmeDZuZG9EdndmcS9uN1IiLCJtYWMiOiI2MTI3ZGNlZWQ4ZjdkZjY4MzljOTg2ZDI3OWYzNjdjYjc4OTEyNTZlOGEwOGNiY2MzZGY4NGU4N2YxMzY3YmNmIiwidGFnIjoiIn0%3D; BWJacPyke7fY2tLOIL82KGvGj18i2dgq9X9PSlFo=eyJpdiI6IkNZWlpGNDltbFgwdzlES3UvbU5KVGc9PSIsInZhbHVlIjoiNHRnOS9iWVd6dE9HKzhqcXZ3R2w4SExrSEh2NmlJTUpnNnJZemg4R09oaTZjNWwySkhsakdDa0ZCYk5zVHZUa0xVeFo3NlVLT3NlbGVZV0xTSEY0K2lVZlhsWmlrVDNjaVhMQzk2Z0tFZGYvZkgvd1A2dm5wQm8zWUlMYnhLVUdZR00yMFlBaGkySURQd3RnV3lmdStEeHk4STl6RUNHMlZJYzArWHFIa3ZsNEYyRVNxd01zUVJ4cTBKYVVXOE1KeFh0U2xnT3ZIN2JlM1hZT2N0WXlhYkpzbGJON2hsbWR2VHloeFRrZjdTa0JObWVHMDFyQldEcjU1UkdXS2NOY2ZCVkdvTXdiREE5MmdRdXNjSVdjdmFsTTRhNXlTZjdmdHpWZDg1RUdIdU9hdDViOTdDU1ZodDNramREcUk2czRocnExRmhUQzZtRHNzRmF6VmhYR2xNTnA1VU91NVoyUHJJenhwREJzT2FoWGlSWitMTFZYUzA1dHBtZjRaUHVxeEhySFFteFdpb2c4WFl6Q2Y4RTlmMWpLZHM2WGpCMU9MRDFWR1JidzY5N28rdlNEYks4M2NWWTBvODB6Q3R6RWkrSFcvVjJWTWJkZUI5dUhEY0ptekE9PSIsIm1hYyI6ImQ3OTYxNzIwNTRjNTVkZGMwZWNiMzczNTUwMWU5YTIyYWJiM2IwYmY4Yzg0Yjk3MGYxYjBkYmJmMmRlMjQ4NGQiLCJ0YWciOiIifQ%3D%3D",
"user-agent": "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)",
"accept-encoding": "gzip,deflate",
"connection": "close",
"host": "localhost:8000"
}
jovs's avatar

this one returns 401 Unauthenticated error right after a successful login.

2 likes
giagara's avatar

@jovs can you share the session configuration? Like

SESSION_DRIVER=cookie
SESSION_SECURE_COOKIE=false
SESSION_LIFETIME=120
SESSION_DOMAIN=.domain.com
SANCTUM_STATEFUL_DOMAINS=*.domain.com

Please or to participate in this conversation.