Update Keycloak SPA example as the current one wasn't working

quarkusio · Jan 20, 2025 · 13e25cc · 13e25cc
1 parent e19bb32
commit 13e25cc
Showing 1 changed file with 23 additions and 8 deletions.
diff --git a/docs/src/main/asciidoc/security-oidc-bearer-token-authentication.adoc b/docs/src/main/asciidoc/security-oidc-bearer-token-authentication.adoc
@@ -411,14 +411,21 @@ For example, if you work with Keycloak, you can use `keycloak.js` to authenticat
 <head>
     <title>keycloak-spa</title>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="http://localhost:8180/js/keycloak.js"></script>
-    <script>
-        var keycloak = new Keycloak();
-        keycloak.init({onLoad: 'login-required'}).success(function () {
+    <script type="module">
+        import Keycloak from "https://cdn.jsdelivr.net/npm/[email protected]/lib/keycloak.js";
+
+        const keycloak = new Keycloak({
+            url: 'http://localhost:8180',
+            realm: 'quarkus',
+            clientId: 'quarkus-app'
+        });
+
+        await keycloak.init({onLoad: 'login-required'}).then(function () {
             console.log('User is now authenticated.');
-        }).error(function () {
-            window.location.reload();
+        }).catch(function () {
+            console.log('User is NOT authenticated.');
         });
+
         function makeAjaxRequest() {
             axios.get("/api/hello", {
                 headers: {
@@ -436,15 +443,23 @@ For example, if you work with Keycloak, you can use `keycloak.js` to authenticat
                     window.location.reload();
                 });
             });
-    }
+        }
+
+        let button = document.getElementById('ajax-request');
+        button.addEventListener('click', makeAjaxRequest);
     </script>
 </head>
 <body>
-    <button onclick="makeAjaxRequest()">Request</button>
+    <button id="ajax-request">Request</button>
 </body>
 </html>
 ----
 
+[NOTE]
+====
+To make this SPA Keycloak example authenticated you need to disable `Client authentication` and set `Web origins` to `http://localhost:8080`. By setting `Web origins` you allow Keycloak CORS policy to comunicate with your Quarkus app. For more detail about these setting see link:https://www.keycloak.org/documentation[Keycloak documentation].
+====
+
 === Cross-origin resource sharing
 
 If you plan to use your OIDC `service` application from a single-page application running on a different domain, you must configure cross-origin resource sharing (CORS).