Issue with vue3 to add okata

Bugs
#1

I am getting this error when i try to use okta on my vue 3. is this related to Vue 3?

I started to add the okta code but the basic redirect doesn’t work

Full error
okta-vue.esm.js?7b13:197 Uncaught TypeError: Cannot set property ‘$auth’ of undefined
at Object.install (okta-vue.esm.js?7b13:197)
at Object.use (runtime-core.esm-bundler.js?5c40:2911)
at eval (main.js?56d7:32)
at Module…/src/main.js (app.js:2085)
at webpack_require (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:2530)
at webpack_require (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925
install @ okta-vue.esm.js?7b13:197
use @ runtime-core.esm-bundler.js?5c40:2911
eval @ main.js?56d7:32
./src/main.js @ app.js:2085
webpack_require @ app.js:849
fn @ app.js:151
1 @ app.js:2530
webpack_require @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928

#2

I tried another toturial based on okta :https://developer.okta.com/code/vue/okta_vue_sign-in_widget/

Also does seem to work.

Uncaught (in promise) TypeError: Cannot read property ‘isAuthenticated’ of undefined
at _callee$ (App.vue?3dfd:37)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:293)
at Generator.eval [as next] (runtime.js?96cf:118)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise ()
at eval (asyncToGenerator.js?1da1:21)
at Proxy.isAuthenticated (App.vue?3dfd:37)

#3

@c_glubovitch Can you please try the example on your local machine and see if this works?

#4

Hi Lijia,

I am getting this error

DEPRECATION: This method has been deprecated, please use signInWithCredentials() instead.
C @ okta-sign-in.entry.js?4d6a:88
value @ okta-sign-in.entry.js?4d6a:88
doPrimaryAuth @ okta-sign-in.entry.js?4d6a:74
eval @ okta-sign-in.entry.js?4d6a:74
startTransaction @ okta-sign-in.entry.js?4d6a:47
save @ okta-sign-in.entry.js?4d6a:74
o @ okta-sign-in.entry.js?4d6a:47
eval @ okta-sign-in.entry.js?4d6a:47
r.promiseDispatch @ okta-sign-in.entry.js?4d6a:47
eval @ okta-sign-in.entry.js?4d6a:47
t @ okta-sign-in.entry.js?4d6a:47
e @ okta-sign-in.entry.js?4d6a:47
authorize:42 error.errorCode: invalid_request, error.description: The ‘redirect_uri’ parameter must be a Login redirect URI in the client app settings: https://dev-3124860-admin.okta.com/admin/app/oidc_client/instance/0oa22kl60R9sG218K5d6#tab-general
onWindowLoadHandler @ authorize:42

#5

@c_glubovitch Did you configure the redirect URI in your org application? Also, did you add it to trusted origin?

#6

Hi,

I didnt see any info about trust origin -> https://share.getcloudapp.com/JruqOgjJ

Do i need to add anything to my Dev App ?

#7

Hi @Lijia

I’m having issues integrating Okta with Vue v3
It seems like all the Okta’s Vue examples (including the one you mentioned in the comment) are yor Vue v2, not v3.
Checking the package.json of the custom-login folder it refers to "vue": "^2.6.12" and "vue-router": "^3.4.3"
If you create a project following the instructions for Vue.js v3 (https://v3.vuejs.org/guide/installation.html) you’ll see there are some differences from the examples in the Okta’s site. Also the newest versions of the Vue packages are "vue": "^3.0.5" and "vue-router": "^4.0.2"

Does Okta support Vue.js v3?

#8

@c_glubovitch Yes, you need to add the redirect URI to your trusted origin.

#9

I got that solved and I managed to get the example app working, it is not working on my app and i suspect the reason is vue-router 3.

  1. can I initialize Vue directly?
  2. I get this error which I think related to the version issue

npm WARN @okta/okta-vue@3.0.0 requires a peer of vue-router@>=3.0.1 but none is installed. You must install peer dependencies yourself.

import { createRouter, createWebHistory } from ‘vue-router’;

import Vue from ‘vue’

import DBManagments from ‘./pages/managedb/ManageDBs.vue’
import AccountList from ‘./pages/account/AccountList.vue’
import NotFound from ‘./pages/NotFound.vue’
import UserAuth from ‘./pages/auth/UserAuth.vue’
//importing store to access store vars
//import store from ‘./store/index.js’

import { OktaAuth } from ‘@okta/okta-auth-js’
import OktaVue, { LoginCallback } from ‘@okta/okta-vue’

import sampleConfig from ‘@/config’
console.log('test ’ + sampleConfig)
const oktaAuth = new OktaAuth(sampleConfig.oidc)

console.log('Okta auth ’ + oktaAuth)

Vue.use(OktaVue, { oktaAuth })

const router = createRouter({
history: createWebHistory(),
routes: [
{
path: ‘/login/callback’,
component: LoginCallback
},
{ path: ‘/managedbs’, component: DBManagments , meta: { requireAuth: true } },
{ path: ‘/accounts’, component: AccountList , meta: { requireAuth: true } },
{ path: ‘/auth’, component: UserAuth , meta: { requireUnAuth: true } },
{ path: ‘/’, component: UserAuth , meta: { requireUnAuth: true } },
{ path: ‘/:notFound(.*)’, component: NotFound }
]
});

export default router;

#10

@mgagna
@c_glubovitch
The dependency in the Okta latest package is Vue 2.x. Probably Vue 3.x will have problems…
“@okta/okta-auth-js”: “^4.3.0”,
“@okta/okta-signin-widget”: “^5.1.0”,
“@okta/okta-vue”: “^3.0.0”,
“axios”: “^0.20.0”,
“core-js”: “^3.6.5”,
“semantic-ui-css”: “^2.4.1”,
“text-encoding”: “^0.7.0”,
“vue”: “^2.6.12”,
“vue-router”: “^3.4.3”

#11

That is the title of my question, is there ETA or a workaround to help me get this to work ?

Guy

#12

@c_glubovitch Our ENG does not have a ETA for now but definitely will have an improvement in the future.

#13

OK,

Just to confirm you do not support Vue 3?

Guy

#14

That is correct. You can follow this issue for updates. https://github.com/okta/okta-vue/issues/38