Published in


Secure a Svelte app & Golang service with Keycloak

In this post, we will learn about how to secure a Svelte fronted application & Golang service using Keycloak. If you are not familiar with the Keycloak basics, you can go through this post Essentials. Let’s get started.

Created a simple svelte frontend application. Which has a click button on the main page, on the click action it makes a request to the golang based count-service. As a response, it returns a count field with the value incremented (count++) based on the number of clicks.

Svelte application using the keycloak-js package for the integration with the Keycloak server. Svelte application is secured using the standard authentication flow. When a user tries to access the application page. It redirects to the Keycloak login page. Once the user enters his credentials. On successful login, Keycloak redirects back to the application based on the Redirect Uri configuration with access token generated.

The frontend application can use the access token (passed as authorization header) with every call made to the backend service API end-points. Count service verifies the token using the JWKS Certificate prefetched from the Keycloak server. If the access token is valid, it will return the count response. Let’s see this in action.

  • Keycloak 17
  • npm (7.24.0)
  • Go (1.16)
  • Svelte (3.44.0) generated via Vite(TS)
$ git clone
$ cd svelte-go-keycloak/
-> count-services (golang backend)
-> svelte-ff (frotend)


Start the Keycloak Server

Keycloak 17

Create a realm: keycloak-demo

NOTE: The “Frontend URL” is empty i.e will be the console URL.With the previous version, it used to be


Create a client with the name: svelte-app

svelte-app client

Create a user for testing the application under Users section.

Created a test user

We are done with the Keycloak client setup.


You can refer to the svelte-ff or create a new svelte application. I used Vite tool for generating the application.

Add the keycloak-js package

npm install keycloak-js --save

Import the Keycloak package into your component. You can create separate sub-component based on your preference. For simplicity I added in the main component App.svelte

Passing the Keycloak server URL, realm name & client created in the above section to instantiate the Keycloak instance. Keycloak.init() method triggers the login flow based on the onLoad preference. Here it will redirect to Keycloak login on loading this method.

Let’s run this application to see this in action.

npm run dev

Launch browser:

As the main component loaded, it will trigger the keycloak.init() Which redirects to the Keycloak login page for the client_id: svelte-app

Enter the user credentials. On successful login, redirects back to the application page.

If you are seeing this page. Great! we have made this svelte application secured with Keycloak.

You are seeing this Clicks button. Before hitting this button. Let’s understand the backend count service

Count-service is a simple count service that exposes an end-point

With every request, it returns a “count++” value.


  • Added Cors configuration (setting to allowed headers & allowed origins to wildcard only for dev purpose)
  • CountHandler (/Count)

Count Handler gets the request (/count) first it verifies the Authorization header has a valid token. If it is a valid token allow the response by incrementing the count variable. Otherwise returns 403 status.


Count service is using modules & to parse the token & verify the signature.

Thank you Daisuke Maki for his valuable suggestion & for creating this library. I highly appreciate the contribution made by all the contributors to this module

Any request to the count service will require a valid access token. You can add checks for claims in the token to ensure that your backend will only accept tokens sent by the svelte frontend only. I have skipped that part which means any token generated from the Keycloak service is valid for the count-service. But you can give it a try.

Task for you: Add logic to parsing the token claims and ensure count service only accept tokens sent by the svelte application (svelte-ff).

Svelte app requests to Count Service

On the button click event. Makes a GET request to count service with an Authorization header & passes the `keycloak.token` with every request.

Access token lifespan is default set to 5minutes in the Keycloak. To ensure passing down a valid token. Use the Keycloak.UpdateToken(minValidity) which will refresh the access token if it is expired before calling the count service API. Let’s test the clicks!!

Launch the Svelte application in the browser. Hit the Clicks!! button. You can see the response received from the count service.


Thank you for making it this far. We have secured a svelte frontend application that connects with a secured golang backend service using Keycloak. You can build more capabilities around the pattern shown in the post.

If you like this post, give it a Cheer!!!

Follow the Collection: Keycloak for learning more…

Happy Secure Coding ❤



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store