Axios headers not set

[idc77]

Environment

---

• Operating System: Linux
• Node Version: v20.14.0
• Nuxt Version: -
• CLI Version: 3.12.0
• Nitro Version: -
• Package Manager: pnpm@9.4.0
• Builder: -
• User Config: -
• Runtime Modules: -

• Build Modules: -

  "@pinia-orm/axios": "^1.9.1",

Reproduction

idk how to create a "minimal" reproduction of this. Should I create a fresh repo?

Describe the bug

I'm using oidc-client-ts, with quasar. oidc-client-ts is async I tried import axios from "axios" but I have now created a boot file boot/axios.js

import { boot } from 'quasar/wrappers'
import axios from 'axios'

export const AxiosSymbol = Symbol('axios')
export const axiosInstance = axios.create()

export default boot(({ app }) => {
  app.provide(AxiosSymbol, axiosInstance)
})

boot/oidc.js

import {boot} from "quasar/wrappers";
import {UserManager} from "oidc-client-ts";
import VueOIDCClient from "src/plugins/VueOIDCClient.js";
import {axiosInstance} from "boot/axios.js";

const settings = {
  authority: process.env.OIDC_AUTHORITY,
  client_id: process.env.CLIENT_ID,
  redirect_uri: window.location.origin + '/oidc-callback',
  post_logout_redirect_uri: window.location.origin,
  response_type: 'code',
  scope: 'openid email profile roles',
  automaticSilentRenew: true,
}

export const manager = new UserManager(
  settings
)

export default boot(async ({ app }) => {
  async function tokenInterceptor () {
    axiosInstance.interceptors.request.use(config => {
      app.config.globalProperties.$manager.getUser().then(user => {
      // console.log('user:', user)
      // console.log('access_token:', user.access_token)
          config.headers.Authorization = `Bearer ${user?.access_token}`
      })
      return config
    }, error => {
      return Promise.reject(error)
    })
  }

  return new Promise(resolve => {
    app.use(VueOIDCClient, {
      debug: process.env.NODE_ENV !== 'production',
    })
    tokenInterceptor()
    resolve()
  })
})

plugins/vueoidcclient.js

import {VueOIDCClientSymbol} from "src/plugins/VueOIDCClientSymbol.js";
import * as Oidc from "oidc-client-ts";
import {manager} from "boot/oidc.js";

export default {
  install: (app, options) => {
    if (options.debug) {
      Oidc.Log.setLogger(console)
    }

    app.config.globalProperties.$manager = manager
    app.provide(VueOIDCClientSymbol, manager)
  }
}

At this point, tokenInterceptor does nothing.

I also have store/index.js

import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
import {createPiniaOrmAxios} from "@pinia-orm/axios";
import {manager} from "boot/oidc.js";
import {axiosInstance} from "boot/axios.js";

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

console.log("store")

export default store( (/* { ssrContext } */) => {
  console.log("instore")
  const pinia = createPinia()
  const piniaOrm = createORM()

  piniaOrm().use(createPiniaOrmAxios({
    axios: axiosInstance,
    function() {
      manager.getUser().then(user => {
        console.log('user', user)
        if (user) {
          return {
            headers: {
              Authorization: `Bearer ${user?.access_token}`,
            }
          }
        }
      })
    }
  }))
  pinia.use(piniaOrm)

  return pinia
})

user never gets logged.

With all this, the Authorization: Bearer <token> never gets sent. I have already tried async and await, same result.

I also have, in the SFC

const postRepo = useRepo(Post)
const commentRepo = useRepo(Comment)
const axiosPost = useAxiosRepo(Post)
const axiosComment = useAxiosRepo(Comment)
axiosPost.setAxios(axiosInstance)
axiosComment.setAxios(axiosInstance)

Nothing. No header gets sent.

Additional context

How do I debug this?

Logs

request

POST /api/v1/post/ HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-US,en;q=0.9,de-DE;q=0.8,de;q=0.7,hr-HR;q=0.6,hr;q=0.5,bs;q=0.4,sr;q=0.3
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 23
Content-Type: application/json
DNT: 1
Host: localhost:8080
Origin: http://localhost:9000
Pragma: no-cache
Referer: http://localhost:9000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"

[idc77]

I have also tried

import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
import {createPiniaOrmAxios} from "@pinia-orm/axios";
import {manager} from "boot/oidc.js";
import {axiosInstance} from "boot/axios.js";

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

console.log("store")

async function getAuthHeader() {
  const user = await manager.getUser()
  console.log('user', user)
  return {
    Authorization: `Bearer ${user?.access_token}`
  }
}

export default store( async(/* { ssrContext } */) => {
  console.log("instore")
  const pinia = createPinia()
  const piniaOrm = createORM()

  piniaOrm().use(createPiniaOrmAxios({
    axios: axiosInstance,
    headers: await getAuthHeader()
  }))
  pinia.use(piniaOrm)

  // You can add Pinia plugins here
  // pinia.use(SomePiniaPlugin)

  return pinia
})

I'm guessing it's not really a Pinia ORM Axios bug, but me not knowing how to solve this.

It only works on HMR, but not otherwise.