Okta Vue Implicit Callback Issue

Hi Team,

I have been facing a implicit callback issue in my vue js application.
The below call is failing.
https://<>/implicit/callback?code=UVgwlY1pEIH-7cX4Y2&state=ueTbbN2qxpJGwDtCy2IWrNVSW4xUR4OoQHvT209quCYEw8tDgbrdeZ7iBRWt.

I guess it is not able to handle the callback. I have configured the applications correctly.
The weird thing is its works on my locally hosted application but doesn’t work in server hosted application.
Stuck in this issue for long time.

You need to configure your server hosted application to route all requests to index.html, even errors. Are you deploying to particular cloud provider or using a particular web server?

Thanks for the reply mraible.

Its hosted in nginx web server instance inside a vpn. Can you please elaborate on the routes part on your suggestion.

currently routes/index.js looks like this:

import Auth from ‘@okta/okta-vue’
import oktaConfig from ‘@/config’

Vue.use(VueRouter)
Vue.use(Auth, oktaConfig.oidc)

const routes = [{
path: ‘/login’,
name: ‘Login’,
component: LoginComponent
},
{
path: ‘/implicit/callback’,
component: Auth.handleCallback()
},
{
path: ‘/’,
name: ‘componentname’,
component: () => import(’…/views/ComponentName.vue’),
meta: {
requiresAuth: true
}
}
]

const onAuthRequired = async (from, to, next) => {
if (from.matched.some(record => record.meta.requiresAuth) && !(await Vue.prototype.$auth.isAuthenticated())) {

// Navigate to custom login page
next({
  path: '/login'
})

} else {
next()
}
}
router.beforeEach(onAuthRequired)
export default router

The application uses custom-okta login page.

Thanks in advance

It has nothing to do with your app itself. It has to do with the webserver it’s hosted on. For example, if you’re using Nginx, you have to make it SPA-aware with settings like the following:

server {
    listen      80;
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

If you’re on Netlify, you have to add a _redirects file to your app.

I show how to configure Netlify in a screencast I did on Angular deployment. https://www.youtube.com/watch?v=Hx9SbQ1ANLk&t=1921s

1 Like