vue-authenticate "Error: Auth popup window closed"

Question

I'm trying to authenticate using oauth2 provider of vue-authenticate with custom axios response interceptor as follow:

  bindRequestInterceptor() {
    this.$http.interceptors.request.use((config) => {
      console.log('Axios intercetping request')
      console.log(`Before checking Token : ${this.getToken()}`)
      if (this.isAuthenticated()) {
        console.log('Authenticated')
        config.headers.Authorization = [
          this.options.tokenType, this.getToken(),
        ].join(' ')
      } else {
        console.log('Not authenticated')
        delete config.headers.Authorization
        let this_ = this;
        this.authenticate('oauth2').then(function(authResponse){
          console.log(authResponse)
          this_.isAuthenticated = this_.$auth.isAuthenticated();

        })//This fires an oauth popup window
      }
      console.log(`After checking Token : ${this.getToken()}`)
      return config
    })
  },

When running an ajax call: - I get redirected to my authorize url (/oauth/authorize) in new window - After approving, I get successfully redirected to my custom redirect_uri with authorization code.

My problem is that, why am I not able to be authenticated after this flow. In fact, if I re-call an ajax via axios, it reloop me from the authorization flow (approval window, etc)

Is anyone here familiar with this tools, and how to solve this issue ?

Note: when close the approval window, I get this error in the page which called the ajax

Possible Unhandled Promise Rejection: Error: Auth popup window closed

Note2: The console log according to above code

Axios intercetping request
app.js?id=01021d92b5ff42f0b696:30471 Before checking Token : null
app.js?id=01021d92b5ff42f0b696:30479 Not authenticated
app.js?id=01021d92b5ff42f0b696:30487 After checking Token : null