TypeError 'set' on proxy: trap returned falsish for property 'authState'

[okta-mikeb]

Describe the bug

Seems to be related to issue #115.

Updated Okta + Vue project to utilize Vue.js 3 (Composition API) + Vite and I'm getting a TypeError.

Uncaught (in promise) TypeError: 'set' on proxy: trap returned falsish for property 'authState'
    at Object.set (localhost:4000/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=f3618f2c:4116:23)
    at Proxy.<anonymous> (localhost:4000/node_modules/.vite/deps/@okta_okta-vue.js?v=f3618f2c:334:28)
    at step (localhost:4000/node_modules/.vite/deps/@okta_okta-vue.js?v=f3618f2c:201:19)
    at Object.next (localhost:4000/node_modules/.vite/deps/@okta_okta-vue.js?v=f3618f2c:148:14)
    at localhost:4000/node_modules/.vite/deps/@okta_okta-vue.js?v=f3618f2c:134:67
    at new Promise (<anonymous>)
    at __awaiter (localhost:4000/node_modules/.vite/deps/@okta_okta-vue.js?v=f3618f2c:116:10)
    at Proxy.$_oktaVue_handleAuthStateUpdate (localhost:4000/node_modules/.vite/deps/@okta_okta-vue.js?v=f3618f2c:332:16)
    at E.emit (localhost:4000/node_modules/.vite/deps/chunk-O4BFPFN2.js?v=f3618f2c:37:24)
    at emitAuthStateChange (localhost:4000/node_modules/.vite/deps/chunk-O4BFPFN2.js?v=f3618f2c:6641:25)

Reproduction Steps?

Upgrade the Okta sample Vue application to utilize Vue.js 3 + Vite compiler.

The TypeError seems to occur for the following events:

• handling logout (via oktaAuth.signOut())
• token expiration (i.e., authState changes) - Opening the console and waiting for X minutes results in this error being logged

SDK Versions

Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.48) npmPackages: @okta/okta-auth-js: ^7.2.0 => 7.2.0 @okta/okta-vue: ^5.6.0 => 5.6.0 vue: ^3.2.47 => 3.2.47 vue-axios: ^3.5.2 => 3.5.2 vue-router: ^4.1.6 => 4.1.6 vuetify: ^3.1.14 => 3.1.15

Additional Information

As per previous issue (#115), rolling back to vue@3.2.44 does not fix the issue. The issue is still present with the older version.

[denysoblohin-okta]

Thanks for reporting this issue. Could you please give more information (sample code) about usage of @okta/okta-vue in your app? Here is a branch of sample app repo with Ve 3 and Vite (start with yarn dev): https://github.com/okta/samples-js-vue/tree/od-test-vite/okta-hosted-login Can't reproduce your issue by clicking "Logout"

[shuowu-okta]

@okta-mikeb https://github.com/okta/okta-vue/issues/115#issuecomment-1416802990 might be helpful.

[okta-mikeb]

@okta-mikeb #115 (comment) might be helpful.

Yes, as per the "Additional Information" section, I have tried downgrading different components without success.

[okta-mikeb]

Thanks for reporting this issue. Could you please give more information (sample code) about usage of @okta/okta-vue in your app? Here is a branch of sample app repo with Ve 3 and Vite (start with yarn dev): https://github.com/okta/samples-js-vue/tree/od-test-vite/okta-hosted-login Can't reproduce your issue by clicking "Logout"

I am looking at that sample which still uses the Options API, do you have a sample that uses both the Composition API + <script setup> succinct syntax? If not, I will either refactor the sample you provided and test or create a simple example.

[denysoblohin-okta]

I'm not expert in Vue 3, but tried to use Composition API in that sample app: https://github.com/okta/samples-js-vue/commit/5b59d39985e88b7ab01a33a0a231ddd13d8d5849

I can reproduce your issue now. Looks like it's a name conflict because of global app mixin which creates authState for every component: https://github.com/okta/okta-vue/blob/master/src/okta-vue.ts#L118

Simply renaming authState var can be a workaround.

This issue is related to https://github.com/okta/okta-vue/issues/128 Internal ref: OKTA-600247

[rs21brady]

I am hitting this same issue utilizing the Composition API and Vue3. None of the "downgrade dependency version" suggestions are working either. Any idea if we have an update to this in the works or if the authState variable can be renamed in a new version of okta-vue?

[denysoblohin-okta]

@rs21brady Do you create a variable named authState in your components like in the sample app?

const authState = oktaAuth.authStateManager.getAuthState();

[lukasvdelft]

I also encounter this, I use: const oktaAuth = getCurrentInstance()?.appContext.app.config.globalProperties.$auth as OktaAuth renaming the variable doesn't make a difference. I also tried provide/inject mechanism as in the sample app, same result. I have a vue 3 env and I use the line "authState && authState.isAuthenticated" also directly in the templates.

[rs21brady]

@denysoblohin-okta I do not. Coincidentally, I am not using the authState variable in my code at all -- neither in a JS/TS var declaration or in the template with authState && authState.isAuthenticated -- and I'm still getting the error:

It feels like a naming conflict with another package, but none of the suggested "downgrades" are fixing it.

With that being said, it doesn't seem to be "broken", but this error isn't something I want to have hanging around, obviously.

[vishuvt]

@okta-mikeb -Is this issue fixed now?

I am also facing this issue . using
"@okta/okta-auth-js": "7.2.0", "@okta/okta-vue": "5.5.0",
"vue": "^3.2.31",

@denysoblohin-okta -I am not using authState anywhere

[tariq86]

Any updates on this? I am also getting this error after upgrading to the latest version of @okta/okta-vue, and do not have any references to the variable authState anywhere in my code.

[htram-dev]

I am also encountering the same issue using the okta-vue package. Updates on this would be much appreciated!

[jaredperreault-okta]

I haven't had a chance to look into this deeper, but what build system(s) are you using @rs21brady @vishuvt @tariq86 @htram-dev?

[htram-dev]

I am using the following for tooling/env:

• Vue CLI
• Node (v16.20.1)
• Ubuntu 20.04

[vishuvt]

I am using

1. "@vue/compiler-sfc": "^3.1.5"
2. "@okta/okta-auth-js": "^7.3.0"
3. "@okta/okta-vue": "^5.5.0"
4. "vue": "^3.2.47"
5. "@vue/compiler-sfc": "^3.1.5",
6. Node 18.16

[jowens1]

Any word on work arounds/fixes for this issue?

[htram-dev]

Does anyone have an update on whether there is a workaround, or a target date for this issue to be addressed? Our Vue project is still encountering this issue while using the okta-vue package

[denysoblohin-okta]

Could you please provide a sample app to reproduce an issue? @htram-dev @jowens1 @vishuvt @tariq86 @rs21brady

[denysoblohin-okta]

Please upgrade to okta-vue 5.7.0