EventSource on Chrome does not send cookies

  cookies, eventsource, mercure, php, symfony

I have been following This documentation page, I wanted to learn to use Mercure in Symfony and everything went fine until I reached the "Authorization" part.

I have a Mercure hub running with the following command

bin/mercure.exe –jwt-algorithm=’HS256′ –jwt-key=’konshensx’ –addr=’localhost:3000′ –allow-anonymous –cors-allowed-origins=’https://localhost:8000′

I have an endpoint to send test updates. I setted the third parameter to true so the updates will be only sent to the clients that send a JWT with the same topic in its payload

public function updateTest(PublisherInterface $publisher) {
        $update = new Update(
            json_encode(['status' => 'something random']),
            true, // This thing make this update private

        // The Publisher service is an invokable object

        return $this->json(["testData" => "Monke"]);

This is the code I am using to serve a template with the correct JWT to be able to see the updates and send it through a cookie as the doc does

public function front(Request $request) {
        $hubUrl = $this->getParameter('mercure.default_hub');
        $this->addLink($request, new Link('mercure', $hubUrl));

        $token = (new Builder())
            // set other appropriate JWT claims, such as an expiration date
            ->withClaim('mercure', ['subscribe' => ["test"]]) // can also be a URI template, or *
            ->getToken(new Sha256(), new Key($this->getParameter('mercure_secret_key'))); // don't forget to set this parameter! Test value: !ChangeMe!

        $cookie = Cookie::create('mercureAuthorization')

        $response = $this->render('conversation/index.html.twig');

        return $response;

I have this little code in my template to get the default mercure hub link

        fetch('{{path('')}}').then(response => {
            const hubUrl = response.headers.get('Link').match(/<([^>]+)>;s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1];
            // URL is a built-in JavaScript class to manipulate URLs
            const url = new URL(hubUrl);
            url.searchParams.append('topic', 'test');
            const eventSource = new EventSource(url, {
                withCredentials: true
            eventSource.onmessage = event => {

And this is the endpoint the template asks for the mercure hub link

    public function discover(PublisherInterface $publisher, Request $request) {
        // This parameter is automatically created by the MercureBundle
        $hubUrl = $this->getParameter('mercure.default_hub');
        // $hubUrl = str_replace("localhost", "", $hubUrl);

        // Link: <http://localhost:3000/.well-known/mercure>; rel="mercure"
        $this->addLink($request, new Link('mercure', $hubUrl));

        return $this->json(["testData" => "Monke"]);

This whole thing works just fine in Firefox and Edge, I havent tested other browsers yet because the thing here is that Chrome does not work, it does not send any cookie when the EventSource is triggered even though I have withCredentials=true, actually, no cookie seems to be stored at all! enter image description here

This is the Network tab in Chrome dev tools of the EventSource
enter image description here

I would like to let it working in Chrome too but idk what should I do.

I change every url in my project to be the same domain name "localhost" so I read "Cookies set in one domain will not be sent to a different domain. Try accessing both sites via either localhost or" in another question but it is not working yet

Source: Symfony Questions