Cookie problem for Laravel Sanctum on local dev environment - php

I am working locally on a project where my Laravel backend is running by Laravel Valet on the url https://backend.app and my frontend is a Vue project running on http://localhost:8080.
When I do the call from my frontend to my backend to generate the CSRF token I get a 200 response but I get a warning next to the Set-Cookie header that says:
This Set-Cookie was blocked because it has the "SameSite=Lax"
attribute but came from a cross-site response which was not the
response to a top-level navigation.
I can imagine that it can't work when my backend runs on backend.app and my frontend runs on localhost. Any tips or ideas how to get this to work on my local environment?

Related

CSRF Token Mismatch with Laravel API using Digital Ocean Load Balancer with Sticky Session

I am working on a project in Laravel 8 which I am now testing the deployment on production servers. I have set up 2 Digital Ocean Droplets that are behind a load balancer with Sticky Sessions enabled. I am attempting to login via a SPA app with a separate Laravel API so the middleware is configured for the api routes to be stateful API and perform CSRF validation. This works perfectly fine when I just hit a single droplet and bypass the load balancer but as soon as the load balancer is in use, I always receive a 419 CSRF Token mismatch.
Everything I found on Google says that the session needs to be shared between servers, but I don't believe this is the case in this scenario. I have turned on sticky session with a cookie called DO-LB in the load balancer so all requests from the same session go to the same server, and I am tailing the Apache access log on both servers, and I can see all requests such as the get-csrf and the auth route (using Sanctum) both hit the same server so would I would still be getting a token mismatch.
I am also using the cookie session driver.
UPDATE
I've found something a little strange, if I point my DNS to a singled droplet I see the X-XSRF-TOKEN is sent as a request header, but if I change DNS to point to the load balancer then X-xSRF-TOKEN is not sent as a request header. I am using Axios to send the request but I can't see how a load balancer can affect Axios
UPDATE 2
It looks like when I run it locally XSRF-TOKEN is not an HttpOnly cookie but when running it on production the XSRF-TOKEN is flagged as HttpOnly which from what I've read means its inaccessible from Javascript hence why Axios isn't sending it. I seem to have confirmed this by doing Cookies.get("XSRF-TOKEN") and printing the result, locally it prints the token to the console, but in production its undefined.
UPDATE 3
I updated my Apache configuration to override the headers as a test to remove the HttpOnly flag which seems to have done the trick, and I can now see when I log in, Chrome sends an X-XSRF-TOKEN in the request even though I still get a CSRF Token Mismatch.
I've compared the string in the chrome cookie store with what is being sent in the X-XSRF-TOKEN and they both match so I don't understand why Laravel keeps returning me a mismatch and I am at a complete loss.
I think I've figured this out, if it can be migrated to server fault then please do but I thought as figured out it makes to say what it was instead of just deleting.
I was using cloudflare and made the error of using self signed certificate between DO droplet and cloudflare and gave this cert to the load balancer. Although no errors were thrown by DO, in the Apache log I noticed that although the web site load, when an API request was made I noticed the apache error log Server name not provided via TLS extension (using default/first virtual host). Not sure if this is the actual cause but made me think if the issue was caused by the self signed certificate.
I generated a new origin server from Cloudflare which means it has a trusted CA and then gave that to DO load balancer and the problem went away.

How can I run a React app using Largon development environment

I have a php based backend and a React based front end.
I am following this tutorial https://whilenext.com/javascript/handling-react-routes-with-apache-and-expressjs, but I cannot see the urls changing properly:
on every click on link to a different "page" in this SPA is set on the localhost domain: for instance: "localhost\login" but it should be "localhost\mysite\login".
Also, the http requests to the backend php code are not seem to be executed. The point where I got stuck is with runing the
"a2enmod rewrite" comand on the apache server- as in the tutorial. I can't seem to understand how Laragon controls everything.
Your explanation on how to proceed is most welcome!

How to access API route from laravel with token on a docker setup?

So, I've done exactly how laravel docs instructs to install on docker using sail, nice and easy. Everything works fine, database and all. My problem is that I've setup a simple api route that I want to acces using a token generated with sanctum. Everything works ok using postman, or even calling the api route from another instance of laravel in other container in docker using guzzle (http in laravel) but not with http://localhost with the local ip ..but when I'm trying to call the api route from the same laravel app is not working..even with the ip, it just hangs with loading.
Also I'm running docker with wsl2 on windows 10.
I guess it has something to do with a network setting from docker.. but I tried so many things and nothing worked.. plus I need to sail down and sail up every time cuz it gets stuck and is not working anymore.
This is how I call the route:
Http::withToken('token')->get('http://localhost/api/user');
Pls.. help!
Thank you :)

Laravel Passport Consuming own API with Axios 401 Unauthenticated

i can't seem to consume my own Laravel API with Axios, i have tried almost all solutions i came across
can someone please help me out,
i have properly:
Installed.
Registered passport service provider.
Migrated and generated passport keys.
Added HasApiTokens trait into my user model.
Added Passport::routes() into AuthServiceProvider.php.
Change my config\auth.php.
Added \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class into last place my web middleware group. as per the laravel documentation for consuming own api with javascript.
i have tested it with Axios inside vue components in a web browser normal web login. and through postman: api-login, using the returned token to make api call it works on my development machine. But on my production server(Shared Hosting) it keeps returning "Unauthorized" in web browser using web login and using Axios within vue component, and API call in postman returns "Unauthorized" too after login i get a token with i use in making the Postman call.
i checked the request headers are sent too:
x-csrf-token
x-xsrf-token
and also included in the cookie header
Please, ensure the following things as you are running laravel on shared hosting.
Check your root URL set properly with a public folder or You have moved the files of the public folder into the root.
Most importantly check you have .env file & all the files & folders have the proper permissions.
Also, check all the PHP modules (laravel requirements) that are loaded properly with the proper PHP version.
If above steps are correct, then the problem might be your shared server using fcgi rather than regular PHP module. Hence, HTTP_AUTHORIZATION failing there. You can add following codes into the .htaccess file RewriteEngine On RewriteCond %{HTTP:Authorization} ^(.+)$ RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] that should do HTTP_AUTHORIZATION & solve the problem.
I hope these fix your problem.

php $_SESSION on server undefined on local angular application

I am working on a project which require sessions. I have my PHP files on a server and I am coding the front end in Angular, locally at the moment.
I am creating a $_SESSION in my php file for when a user logs in. Creating the post request on my local angular project, any $_SESSION property is returned as empty (e.g. $_SESSION['key'] is empty). However, it works fine when testing on Postman, and also works fine when I compile my angular app and put it on the server... So it works on Postman, and on the angular app on the server, but not the angular app locally (with the exact same code).
I have added CORS to my PHP files, and can use many other post/get requests locally, just not the session.
Is there any particular reason this doesn't work, or a way to get it working locally? As I don't want to compile and upload the project every time to test it out.
Any other information needed, please let me know.
Thank you in advance.

Categories