Here are my software versions:
- Sanctum Version: ^2.14.1
- Laravel Version: 9.0
- PHP Version: ^8.0.2
- Database Driver & Version: Heroku pgql version 14.4
Description
I have two folders:
backend for laravel-breeze https://laravel.com/docs/9.x/starter-kits#laravel-breeze
frontend for next.js application.
I follow all the instruction given through breeze-next and my development seems perfectly fine.
I also successfully deployed my laravel-api with the helps of this articles. And configured necessary database to established a connection https://dev.to/moose_said/deploy-laravel-projects-with-database-for-free-5778

I separately deployed my frontend next.js in to Vercel and configured the NEXT_PUBLIC_BACKEND_URL into my deployed laravel-api in Heroku:

First Problem that I solved
I managed to fix the Cross-Origin Resource Sharing (CORS) in my backend with this implementation in Laravel

and also add the FRONTEND_URL in Heroku production and it works

Second Problem
CSRF token mismatch
This is the error also that I somehow fixed but I'm not sure this is the good idea

I also changed the session driver into cookie

PROBLEM
So, now I can register but cannot generate the cookies for my headers like X-XSRF-TOKEN. I also tried to login but cannot regenerate the cookies need to authenticate the user. There is no problem in my development only in my production system:

It says that:
this attempt to set cookie via a set-cookie header was blocked because it had "samesite=lux" but came from a cross site response which was not a response to a top level navigation
What can I try next?
This the actual repository: https://github.com/acatzk/sph-els-joshua

