Hello everyone! I officially need your help. I've read a lot from this forum and watched a lot of tutorial videos on how to connect separate React/Vue SPA to Laravel API with Sanctum Auth but none of the solutions worked for me so I badly need your help for my school project.
So here's what I did so far.
I created 2 folders, one for api and one for frontend. I installed Laravel on the api folder and installed React app on the frontend folder. Both of these are Git initialized and have their own Github repositories. Also, both of them are deployed to Heroku.
On local, everything runs fine. I can set error messages to email and password fields on the front-end so that means I have received and sent the laravel_session and XSRF_TOKEN cookies. I have also displayed the authenticated user's information on a dummy dashboard so everything works fine on local.
On the internet, both my apps run but won't communicate with each other. Since they are both on same domain which is herokuapp.com, it should still work, right? In the official documentation, they must at least be on the same domain and in this case, they are subdomain of the same domain.
Here are my environment variables for each Heroku apps.
SANCTUM_STATEFUL_DOMAINS = jarcalculator.herokuapp.com
(I've tried adding "SESSION_DRIVER=cookie" and "SESSION_DOMAIN=.herokuapp.com" but still not working!)
REACT_APP_API_URL = jarcalc-api.herokuapp.com
I'm at my wit's end. I followed the documentation to the bone but still not working. Please enlighten me as to what went wrong. Please help me. :(