Practice 5: Authorization with HTTP header

public/js/activity.js

@@ -8,7 +8,10 @@ const dicoverMercureHub = async () => fetch(window.location)
             .get('Link')
             .match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1];
 
-        return new URL(hubUrl);
+        return {
+            url: new URL(hubUrl),
+            token: response.headers.get('X-Mercure-JWT'),
+        }
     }
 )
 
@@ -24,12 +27,14 @@ const addLogItem = (message) => {
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
-    const hubUrl = await dicoverMercureHub();
+    const { url, token } = await dicoverMercureHub()
 
-    hubUrl.searchParams.append('topic', 'http://localhost/activity')
-    hubUrl.searchParams.append('topic', 'http://localhost/dinosaurs')
+    url.searchParams.append('topic', 'http://localhost/activity')
+    url.searchParams.append('topic', 'http://localhost/dinosaurs')
 
-    const es = new EventSource(hubUrl, { withCredentials: true });
+    const options = token ? { headers: { Authorization: `Bearer ${token}` }, withCredentials: true } : {}
+
+    const es = new EventSourcePolyfill(url, options)
 
     es.addEventListener('login', e => {
         const message = JSON.parse(e.data)

public/js/dinosaurs.js

@@ -9,7 +9,10 @@ const dicoverMercureHub = async () => fetch(window.location)
             .get('Link')
             .match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1];
 
-        return new URL(hubUrl);
+        return {
+            url: new URL(hubUrl),
+            token: response.headers.get('X-Mercure-JWT'),
+        }
     }
 )
 
@@ -57,11 +60,13 @@ const removeDinosaur = (id, message) => {
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
-    const hubUrl = await dicoverMercureHub();
+    const { url, token } = await dicoverMercureHub();
 
-    hubUrl.searchParams.append('topic', 'http://localhost/dinosaurs')
+    url.searchParams.append('topic', 'http://localhost/dinosaurs')
 
-    const es = new EventSource(hubUrl, { withCredentials: true });
+    const options = token ? { headers: { Authorization: `Bearer ${token}` }, withCredentials: true } : {}
+
+    const es = new EventSourcePolyfill(url, options);
 
     es.addEventListener('created', e => {
         const message = JSON.parse(e.data)

src/Listener/MercureAuthorizationListener.php

@@ -7,14 +7,14 @@
 use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\EventDispatcher\Attribute\AsEventListener;
 use Symfony\Component\HttpKernel\Event\ResponseEvent;
-use Symfony\Component\Mercure\Authorization;
+use Symfony\Component\Mercure\HubInterface;
 
 #[AsEventListener(event: ResponseEvent::class)]
 final readonly class MercureAuthorizationListener
 {
     public function __construct(
         private Security $security,
-        private Authorization $authorization
+        private HubInterface $hubInterface
     ) {
     }
 
@@ -34,8 +34,17 @@ public function onKernelResponse(ResponseEvent $event): void
             return;
         }
 
-        $request = $event->getRequest();
+        $response = $event->getResponse();
 
-        $this->authorization->setCookie($request, $topics);
+        // Generate the JWT token
+        $JWTfactory = $this->hubInterface->getFactory();
+
+        if (null === $JWTfactory) {
+            throw new \RuntimeException('The hub factory is not available.');
+        }
+
+        $token = $JWTfactory->create($topics);
+
+        $response->headers->set('X-Mercure-JWT', $token);
     }
 }

templates/activity.html.twig

@@ -3,6 +3,7 @@
 {% block title %}Activity panel{% endblock %}
 
 {% block javascripts %}
+  <script src="{{ asset('js/eventsource.min.js') }}" defer></script>
   <script src="{{ asset('js/bootstrap.min.js') }}"></script>
   <script src="{{ asset('js/activity.js') }}" defer></script>
 {% endblock %}

templates/dinosaurs-list.html.twig

@@ -8,6 +8,7 @@
 {% endblock %}
 
 {% block javascripts  %}
+  <script src="{{ asset('js/eventsource.min.js') }}" defer></script>
   <script src="{{ asset('js/bootstrap.min.js') }}"></script>
   <script src="{{ asset('js/dinosaurs.js') }}" defer></script>
 {% endblock %}