Secure Vue.js app with Keycloak

Published in

Keycloak

4 min readMay 14, 2019

In this post, we will see how to integrate Vue.js with Keycloak. Step by step guide to configure realm, client and create a simple application with Vue Cli and integrate it with Keycloak. If you want to understand keycloak key-concepts please check out Keycloak Essentials before going ahead.

Sequence: Vue App with Keycloak

Delegation of Authentication/Authorization i.e core principle behind OpenID-Connect

Behind the scene, the client is sending a post request to the Keycloak REST endpoint with credentials. Once keycloak completes the verification. Sends a JWT token in response. The client can use that token to access the secured resource.

Keycloak Setup & Client Configuration:

1. Creating a realm:

let’s say “keycloak-demo”. Avoid using master realm. You don’t have to create the realm every time. It’s a one time process.

2. Clients:

Clients tab allows you to manage your allow application clients

3. Adding a Client:

It is simple to add a client, the same process works for any type of application.

Client ID: You can give any suitable name for your application
Protocol: ‘OpenID-Connect/SAML’
Root Url: Application Hostname

or you can use the import option for my client: vue-test-app

4. Client Config

Configure these two fields are important

Valid Redirect Url: After Authentication where should keycloak redirect? (dependent upon Web Origin config, otherwise you will see an error: Invalid request URI)
Web Origin: * or + ( * for wildcard redirection and + for domain-specific(validate all sub-domains): eg: *.redhat.com)

5. User:

Either you can enable User Registration or Add a user directly which can be used for testing

Export of the realm: keycloak-demo and client export: vue-test-app

Create a Vue App

Let’s create a simple Vue application using Vue-CLI

vue create vue-keycloak

Adding official keycloak js adapter

npm i keycloak-js --save

InitOptions: You can use a JSON file or an object with properties

Keycloak host URL
Realm Name
Client ID

Using the Keycloak Javascript adapterinit method call which will return a promise object. With the successful authentication, we can render the Vue application within that success method to prevent exposing any Vue resource before authentication is completed. Setting the token/refresh token in local storage is optional, You can set the token as a prop that can be passed to the sub components. Which can be used with any CRUD request as a Bearer token.