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.

Setup

• 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)

Keycloak

Start the Keycloak Server

Keycloak 17

http://127.0.0.1:8081

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

realm:svelte-app

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)

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.

Svelte

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.

http://127.0.0.1:3000

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

Count Service

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

http://127.0.0.1:8086/count

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

Config

• Application runs on host: port : 127.0.0.1:8086
• Jwks: JSON Web Key sets: https://datatracker.ietf.org/doc/html/rfc7517

Config

• 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.

CountHandler

Secure the count-service end-point with Keycloak

Count service is using modules github.com/lestrrat-go/jwx/jwk & github.com/lestrrat-go/jwx/jwt 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 github.com/lestrrat-go/jwx

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.

Conclusion

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 ❤