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.
About the Application
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.
Integration with Keycloak
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 https://github.com/akoserwal/keycloak-integrations
$ cd svelte-go-keycloak/-> count-services (golang backend)
-> svelte-ff (frotend)
Start the Keycloak Server
Create a realm: keycloak-demo
NOTE: The “Frontend URL” is empty i.e http://127.0.0.1:8081 will be the console URL.With the previous version, it used to be http://127.0.0.1:8081/auth
Create a client with the name: svelte-app
- Access Type: public
- Root Url: http://127.0.0.1.3000/*
- Valid Redirect Uris: http://127.0.0.1.3000/*
- Web Origin: * (Only for a development environment)
Create a user for testing the application under Users section.
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.
Start the application
npm run dev
Launch browser: http://127.0.0.1:3000
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.
- Application runs on host: port : 127.0.0.1:8086
- Jwks: JSON Web Key sets: https://datatracker.ietf.org/doc/html/rfc7517
- 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.
Secure the count-service end-point with Keycloak
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).
Start the count service
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 ❤