Keycloak integration: Part 5: Vue JS

Let’s assume we have a VueJS based frontend application. This frontend invokes REST endpoints which are exposed by other microservices at the backend.

keycloak client configuration

Few points to remember:

• Access type: public. By this, the connecting application (VueJS) need not have a client secret. This also means, Authorization is not supported for this client.
• Implicit Flow : disabled. Though it is possible to have implicit flow enabled, this is a security vulnerability. Since we use keycloak’s own javascript adaptor, it handles the keycloak server communication behind the screens.
• Direct Access Grants : disabled. This is

Vue frontend

Keep extending the token

There are times, when we would like to keep extending the token so that a user need not login again if logged in and using the application for longer duration. The above example tries to extend the token by calling keycloak.updateToken This assumes the token expiry time is too small and token refresh max time is meaningfully set based on our needs. If user keeps using even after the refresh max time, it will take the user to login page.

References

• Keycloak documentation on Javascript adapter