Okta Vue Implicit Callback Issue

[ratul]

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.

[mraible]

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?

[ratul]

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

[mraible]

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