Support disabling Options API via Bundler Build Feature Flags

[nmarshall23]

Describe the feature request?

Okta-Vue plugin is dependant on a mixin. This means it's not compatible with the Vue Bundler Build Feature Flags, that disables the Vue Options API. Disabling the Options API results in a performance improvement.

Another concern is that the mixins' functions created, and beforeCreate are run by every component. This also means that handleAuthStateUpdate is being subscribed and unsubscribed by every component.

My suggestion is to move setup logic outside of the mixin. Add router to OktaVueOptions definition.

Example code for setup logic.

const authStateRef = shallowRef(oktaAuth.authStateManager.getAuthState())
// use shallowRef because we don't need to make authState deeply reactive. 
// we are only updating authStateRef via handleAuthStateUpdate so we have no need for deep reactivity.

oktaAuth.authStateManager.subscribe(handleAuthStateUpdate)

async function handleAuthStateUpdate(authState: AuthState) {
  authStateRef.value = authState
  triggerRef(authStateRef)
}

Make the mixin have minimal code like this:

if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
  app.mixin({
    computed: {
       $authState() { return authStateRef.value }
    }
})
}

Another option would be to add a flags to use the Mixin or Provide. The provide code would look like:

export const authStateKey = Symbol('OktaAuthState') as InjectionKey<AuthState>
if (useProvideApiFlag) {
  app.config.unwrapInjectedRef = true // see note
  app.provide(authStateKey, authStateRef)
{
if (useMixinApiFlag) {
 // .. mixin code from above.
}

Note, unwrapInjectedRef is a Temporary Config, that will be removed in vue 3.3. This note is only shown in the options api doc's.

New or Affected Resource(s)

/src/okta-vue.ts

Provide a documentation link

No response

Additional Information?

No response

[denysoblohin-okta]

Thanks for submitting this feature request with detailed description. Internal ref: OKTA-600247

[denysoblohin-okta]

Please upgrade to okta-vue 5.7.0