Secure Vue.js app with Keycloak

Abhishek koserwal
Keycloak
Published in
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

Vue App Sequence with Keycloak

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.

--

--

Keycloak
Keycloak

Published in Keycloak

Open Source Identity Solution for Applications, Services and APIs

Abhishek koserwal
Abhishek koserwal

Written by Abhishek koserwal

#redhatter #opensource #developer #kubernetes #keycloak #golang #openshift #quarkus #spring

Responses (6)