luchmewep
3 days ago

Laravel 7 Sanctum: Same domain (*.herokuapp.com) but SPA gets CSRF Token Mismatch

Posted 3 days ago by luchmewep

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.

API

Repository: https://github.com/luchmewep/jarcalc_api

Website: https://jarcalc-api.herokuapp.com

Front-end

Repository: https://github.com/luchmewep/jarcalc_front

Website: https://jarcalculator.herokuapp.com

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.

API

SANCTUM_STATEFUL_DOMAINS = jarcalculator.herokuapp.com

(I've tried adding "SESSION_DRIVER=cookie" and "SESSION_DOMAIN=.herokuapp.com" but still not working!)

Front-end

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. :(

Please sign in or create an account to participate in this conversation.