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.