vue-authenticate "Error: Auth popup window closed" - authentication

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