websanova / vue-auth

A simple light-weight authentication library for Vue.js
MIT License
2.36k stars 380 forks source link

Integrate vue-auth with Keycloak #678

Closed straurob closed 2 years ago

straurob commented 2 years ago

I have installed the keycloak-js adapter, so that I can use Keycloak for handling user authentication. The below example shows the basic (working) implementation. Core is the login() function which triggers redirection to the Keycloak server.

Now I'm wondering if it makes sense to integrate vue-auth with the Keycloak adapter, so that I can use the vue-auth methods, e.g. login(), logout(), etc.? If that's the case, how could I do that?

Or would I need to use the oauth2() method from vue-auth and handle the authentication there?

const keycloak = new Keycloak({
  url: process.env.AUTH_SERVER_URL,
  realm: process.env.AUTH_REALM,
  clientId: process.env.AUTH_CLIENT_ID,
});

const initOptions = {
  onLoad: 'login-required',
  pkceMethod: 'S256',
};

function login() {
  keycloak.init(initOptions).then((authenticated) => {
    if (!authenticated) {
      window.location.reload();
    }

    if (keycloak.token) {
      // store the token
    }
  }).catch(() => {
      // do something...
  });
}
websanova commented 2 years ago

This is a bit tricky because basically you would need to override all the vue-auth plugin core methods with ones that connect directly with keykloak (or firebase, or whatever).

I have thought about that before and I believe it was brought up in issues as well, but it would require a new set of drivers, for instance a set of "service" drivers where then there would be "firebase.x.x", "keykloak.x.x", "generic", etc. This would also mean that in the case of keybloack, firebase, etc, the http drivers are not necessary, so it's the router hooks and other utils that are still used.

It's doable, and I may get around to that at some point, but I'm currently already in a large update for my blog and plugin docs, so that's not gonna happen any time soon.

If you want to save some time from rolling your own you could just override the core methods with keycloak ones though, so for example with login:

https://github.com/websanova/vue-auth/blob/master/src/auth.js#L562

You would just need to parse that out into the keykloak way, mainly replacing the http driver code with keykloak stuff.