Vue callback integration

[Guilherme]

Hello, I’ve followed the okta spring integration and was able to use okta properly. But following the vue guide: https://developer.okta.com/quickstart-fragments/vue/default-example/#prerequisites I couldn’t. The callback on Vue doesn’t work.

I imported vue sdk and configured on Vue.use(Auth, {config}), also added a path route that matches the redirect_uri and pointed to OktaVuePlugin.handleCallback(). When I try to access a secure page the application correctly redirects to okta login, but on login submit the browser is redirected to /host/mycallbackurl#code… and then a blank page is returned.

TLDR; The callback of vue is not working even setting:
redirect_uri: window.location.origin + ‘/implicit/callback’
{path: ‘/implicit/callback’,
component: OktaVuePlugin.handleCallback()}

Would appreciate any help

[dragos]

Hi @Guilherme

When you are redirected to the blank page, do you have any errors registered in the browser console?

[Guilherme]

Hi @dragos, no errors. Downloading and running the sample vue okta from the official site I was able to spot the difference but not what is cautising it.

On vue sample that is what happens:
https://{myOkta}/oauth2/v1/authorize/redirect?okta_key=X…w 302
http://localhost:8080/implicit/callback 304
http://localhost:8080/app.js 200

But on mine:
https://{myOkta}/oauth2/v1/authorize/redirect?okta_key=X…w 302
http://localhost:8080/implicit/callback 304
http://localhost:8080/implicit/app.js 200

Seems like just the last redirect is wrong but trying to access again the secure page, I get the redirect to login page again, the callback didn’t work as well.

[Guilherme]

Sorry, found the browser error. For some reason I’m getting the javascript message on app.js file after the callback:

We’re sorry but “other-app” doesn’t work properly without JavaScript enabled. Please enable it to continue.

[Guilherme]

And fixed, trying on a 3rd application it worked, after further investigation found some vue configuration pointing the wrong direction to publicPath:

module.exports = {
publicPath: ‘./’,
}

Removing that everything works like a charm.

[denisgmarques]

OMG, I wasted a lot of time trying to solve this issue and finally I found your answer!!!

I removed publicPath from my quasar.conf.js file and Voilà

Tks.