I’m attempting to set up Okta authentication in my Vue application and receiving an error upon app startup with the following stack trace:
vue.esm.js:3767 TypeError: Cannot read properties of undefined (reading 'getAuthState')
at Vue.data (okta-vue.ts:43:45)
at Vue.mergedInstanceDataFn (vue.esm.js:5252:29)
at getData (vue.esm.js:4417:21)
at initData (vue.esm.js:4381:42)
at initState (vue.esm.js:4322:9)
at Vue2._init (vue.esm.js:4711:9)
at new Vue (vue.esm.js:5772:10)
at new Store2 (vuex.esm.js:397:21)
at createDirectStore (direct-vuex.esm.js:4:22)
at index.ts:67:5
It appears oktaAuth.authStateManager is undefined. There are additional errors as well, occurring any time the code tries to access a property on authStateManager (such as when subscribing, e.g., oktaAuth.authStateManager.subscribe(…)).
I am using the following package versions:
"@okta/okta-vue": "3.1.0",
"@okta/okta-auth-js": "4.1.2",
"vue": "~2.7.14",
"vue-router": "^3.6.5",
Here is my code:
router index.ts:
const oktaAuth = new OktaAuth({
issuer: 'https://<my okta dev domain>.com/oauth2/default',
clientId: <my client id>,
redirectUri: window.location.origin + '/login/callback',
scopes: ['openid', 'profile', 'email']
})
Vue.use(VueRouter)
Vue.use(OktaVue, { oktaAuth })
I am not sure if this is relevant, but when OktaAuth is initialized, the OktaAuthNode constructor is called, which does not appear to call the AuthStateManager constructor. However, in the okta-auth-js code I can see that OktaAuthBrowser does call the AuthStateManager constructor. Is it possible the code is calling the incorrect constructor? If not, what else might the issue be?