Okta/okta-vue 4.0.0 login callback loop

Questions
1

Before I created a bug in GitHub I thought I would see if anyone has had any issues with the latest release of okta-vue. I’m building a web application at the company I work for in Vue v3. While this is my first Vue application integration with Okta Authentication, I have used it with Python before and I’m familiar with how it works in that environment. I am also able to get things working using the okta-vue samples that use Vue v2.
My issue is that when I follow the directions given on the okta/okta-vue GitHub page, my application successfully redirects to the Okta login page, but after I sign in I get stuck in this redirect loop that I believe is occurring as part of the LoginCallback function. What appears to be happening is that the token is never actually retrieved as part of the PKCE authentication flow, so it just keeps reloading the page with new state and code values in the URI.
I’m not sure if this is a bug or if the developers for this updated version of okta-vue that is supposed to work with Vue v3 expect me to implement this functionality. Any help would be greatly appreciated.

2

I’ve worked with Okta Vue 4.0 and haven’t had any issues. Did you make sure your Okta app is assigned to your user or the Everyone group?

You could also try using OktaDev Schematics to install it. I added support for Vue 3 last week.

It detects if you’re using Vue 2 or 3 and installs the appropriate Okta Vue SDK version.

3

I did make sure that my user is in the correct group and that the application has been assigned to that group. I did play around with some of the settings and saw that when I changed things I would see an error in the URI, but currently I don’t see any errors in the URI.

4

Currently I am just working in a test vue app, so I can post any code snippets that might be helpful for troubleshooting. Having worked with Okta in a Python web application before, I’m pretty confident that my Application settings inside of OktaDev are correct. Also, being fairly new to Vue (and Javascript isn’t really my primary programming languate) I’m pretty sure the issue is in my code.

// main.js
import { createApp } from 'vue'
import { OktaAuth } from "@okta/okta-auth-js";
import OktaVue from "@okta/okta-vue";
import router from "@/router";
import App from './App.vue'

const oktaAuth = new OktaAuth({
  issuer: 'https://{my_okta_domain}/oauth2/default',
  clientId: 'my_client_id',
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'profile', 'email']
});

const app = createApp(App);
app.use(OktaVue, { oktaAuth});
app.use(router);
app.mount('#app');
5 
// router.js
import { createRouter, createWebHashHistory } from "vue-router";
import { LoginCallback, navigationGuard } from "@okta/okta-vue";

const routes = [
  {
    path: '/',
    name: 'rootPath',
    component: () => import('./components/Dashboard'),
    meta: { requiresAuth: true }
  },
  {
    path: '/login/callback',
    component: LoginCallback,
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

router.beforeEach(navigationGuard);

export default router;
6 
// App.vue
<template>
  <div id="app">
    <router-link to="/" tag="button" id='home-button'> Home </router-link>
    <button v-if='authState.isAuthenticated' v-on:click='logout' id='logout-button'> Logout </button>
    <button v-else v-on:click='login' id='login-button'> Login </button>
    <router-view/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  methods: {
    async login () {
      await this.$auth.signInWithRedirect()
    },
    async logout () {
      await this.$auth.signOut()
    }
  }
})
</script>
7

I believe it’s the order that you’re using app.use(). Here’s what I’ve used:

const oktaAuth = new OktaAuth(config)

createApp(App)
  .use(router)
  .use(OktaVue, {oktaAuth})
  .mount('#app')

You’re using Okta before the router in your example.

const app = createApp(App);
app.use(OktaVue, { oktaAuth});
app.use(router);
app.mount('#app');
8

I found the issue! It wasn’t the order of app.use(), but it was something that I didn’t notice at first glance.

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

vs

const router = createRouter({
  history: createWebHistory(),
  routes
});

The first one was adding a hash (#) to the the path, and I think it was breaking the LoginCallback function.
http://localhost:8080/login/callback?code=code_here&state=state_code_here#/

Thanks for all your help. I’m glad to have this resolved.

9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.