Authenticate with ID Token on Nuxt.js

on-page-load.js

// Here after the $auth is properly initialized, we add the idToken as part of the Authorization
// header sent to our API, as it is authenticatable by using the IDToken (JWT), not the AuthToken.
$axios.interceptors.request.use((config) => {
  config.headers['Authorization'] = `Bearer ${$auth.strategy.idToken.get()}`
  return config
})

// By default, axios request interceptors are executed in the order they are added in the
// interceptors stack. At this point on runtime, Nuxt Auth has already injected an interceptor
// that adds an Authorization token to the requests, so we are unable to override it unless we
// move our interceptor declared above in the front of $auth's one.
// Here's a quick way of simply taking that value we just added and moving it to the array start.
const moveFromLastToFirst = (a) => a.splice(0, 0, a.at(-1)) && a.pop()
moveFromLastToFirst($axios.interceptors.request.handlers)