Vue router middleware does not allow popup authentication.

[aido179]

Hi, thanks for your work on this project. Super useful.

Problem

When following the example implementation, a popup window is used for login. This works fine for the first sign-in, but when the user is logged out, or auth expires, the vue-router middleware redirects them to a login page served by the authentication authority in the same window as the application.

This would be fine if we weren't already using the popup, but it's not consistent. As far as I can tell, there is currently no way of changing this.

Suggested Solution

If using a popup, change the middleware to redirect the user to some custom page, and check access using the popup.
In the middleware, the oidcCheckAccess action is dispatched:

vuex-oidc/src/router/create-router-middleware.js

Line 3 in ff9baf9

store.dispatch((vuexNamespace ? vuexNamespace + '/' : '') + 'oidcCheckAccess', to)

This action calls the authenticateOidc action:

vuex-oidc/src/store/create-store-module.js

Line 142 in ff9baf9

context.dispatch('authenticateOidc', {

A small change to instead call 'authenticateOidcPopup' should allow popup authentication.

In summary: There should be some way for the developer to use authenticateOidcPopup rather than authenticateOidc when using the vue-router middleware.

Note:

I have written my own custom middleware while investigating this problem, and I also discovered that when using the popup window to login in this way, you must specify:
userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })

in the oidcSettings, otherwise the session is lost and the user is not authenticated. Maybe the vuex-oidc helpers cover this, but just for anybody else trying to handle this use-case, that might save you some head scratching.

Maybe a vuex-oidc specific setting like {usePopup: true} would allow consistent behaviour throughout?

[perarnborg]

I can see your point. I will have to think a bit about this one. Perhaps it would be nice to be able to open the authentication in a popup in the route guards as well.

One option you might have now is to add an event listener to accessTokenExpired that opens the popup. Have not tried this myself yet.

But perhaps a usePopup setting could be a nice idea!

[luisfrocha]

I just tried this today, and though it opens the popup, I can't get the user info correctly in the callback page/route. Not sure why. I will continue investigating. The below code is in my store file for oidc. I'm using Nuxt, by the way.

    accessTokenExpired: () => {
      console.log( 'Access token did expire' );
      window.$nuxt.$store.dispatch( 'oidc/authenticateOidcPopup' );
    },