Callback URL loop after login (Boot, Vue, Okta)

[Ross]

After logging in to my SPA, the browser is caught in a loop calling the /implicit/callback URL.

• Vue is running locally on http://localhost:8080
• My redirect URL is set to the same in both my Vue Auth config as well as on my SPA dashboard.
• In my Vue router config, I have the following:
  path: ‘/implicit/callback’,
  component: Auth.handleCallback()
• Here are my app settings
  Login redirect URIs: http://localhost:8080/implicit/callback
  Logout redirect URIs:
  Login initiated by: App Only
  Initiate login URI: http://localhost:8080/login

Here is auth config in Vue:
Vue.use(Auth, {
issuer: ‘https://dev-218542.okta.com/oauth2/default’,
clientId: ‘0oaaw0ym1gV6XGPLT4x6’,
redirectUri: ‘http://localhost:8080/implicit/callback’,
scopes: [‘openid’, ‘profile’, ‘email’],
pkce: true
})

I’ve followed the Okta Vue quickstart, along with the tutorial here: developer dot okta dot com/blog/2018/11/20/build-crud-spring-and-vue

Thanks!

[mraible]

Can you please post all the code in your router file?

[Ross]

Sure. I have also reviewed your tutorial, but I’m not using TS here. Thanks!

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Auth from '@okta/okta-vue'

Vue.use(Auth, {
  issuer: 'https://dev-*******.okta.com/oauth2/default',
  clientId: '*********',
  redirectUri: 'http://localhost:8080/implicit/callback',
  scopes: ['openid', 'profile', 'email'],
  pkce: true
})

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {  
      requiresAuth: true  
    }
  },
  {
    path: '/clients',
    name: 'Clients',
    component: () => import(/* webpackChunkName: "clients" */ '../views/Clients.vue'),
    meta: {  
      requiresAuth: true  
    }
  },
  {
    path: '/implicit/callback',
    component: Auth.handleCallback()
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach(Vue.prototype.$auth.authRedirectGuard());

export default router

[mraible]

Which tutorial are you using? This one uses JavaScript, not TypeScript:

Build a Simple CRUD App with Spring Boot and Vue.js

[Ross]

Yes that is the one, was just saying a also consulted https://developer.okta.com/blog/2018/12/03/bootiful-spring-boot-java-vue-typescript which seems similar in terms of auth server config.

[mraible]

I believe this is because you have requiresAuth: true for your / route. I’d suggest looking at the Vue SDK docs to see how to redirect to another URL (/ is the default). I haven’t done this personally. If you can’t figure it out, please enter an issue in the GitHub project.