Pinia store seems to be loading out of order

[mgrubb]

My SPA application is using a Pinia store to keep some API results.
I've moved the API related code into another file relative to the store '../api/api'
This api module imports a composable in order to get the API access keys.
However, whenever I call the composable it is throwing an error that it hasn't been initialized yet.
Looking in dev tools, if I set a breakpoint even before the store gets created, I'm still getting the thrown exception from the composable. It seems that this composable is being called even before main.js is run, which doesn't make any sense to me.

Here are some snippets and directory structure to illustrate my problem:
./src
| api/api.ts
| stores/group.ts
| views/MyView.vue
| App.vue
| main.ts

In main.ts I have:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import OktaVue from '@okta/okta-vue'
import { OktaAuth } from '@okta/okta-auth-js'
import App from './App.vue'
import router from './router'
import oktaConfig from './okta.config'
const oktaAuth = new OktaAuth(oktaConfig.oidc)
const app = createApp(App)
app.use(OktaVue, { oktaAuth })
app.use(router)
app.use(createPinia())
app.mount('#app')

Here, app.use(OktaVue....) initializes the authentication state and enables use of import { useAuth } from '@okta/okta-vue' composable to get access to the authentication state. If useAuth() is called before the plugin installation (i.e. app.use(OktaVue...) then it throws and exception saying the the module hasn't been initialized.

In stores/group.ts I have:

import { defineStore } from 'pinia'
import { getGroups } from '../api/api'

export const useGroupStore = defineStore('group', () => {

....
  const groups = ref({})
  async function fetchGroups(force: boolean = false) {
    ....
    const response = await getGroups()
   groups.value = response
    .....
  }

In api/api.ts I have:

import { mande, defaults } from 'mande'
import { useAuth } from '@okta/okta-vue'
....
const groups = mande(`${api_base}/groups`)
const auth = useAuth()
async function getGroups(groupID?: string) {
  return await groups.get(groupID)
}
....

In components/MyView.vue:

....
<script setup lang="ts">
  import { useGroupStore } from '../stores/group'
  import { onMounted } from 'vue'
  const store = useGroupStore()

  onMounted(() => {
    store.fetchGroups()
  })
</script>

This component is bound the /groups route.

At this point I get an exception thrown from the line const auth = useAuth()

I would expect that none of the stores code would be run until main.ts completes and mounts the vue app.
This happens even at the root of the application.
Am I doing something wrong, have I run into a bug?

Not sure where to go from here, any advice is appreciated.

Thanks.

[posva]

The error comes from https://github.com/okta/okta-vue#readme: you seem to be using the composable useAuth() outside of a setup which isn't supported