Prevent nuxt auth to send authorization header to external url

Question

I want to send a POST request to an external API with axios in a nuxt projekt where I use the nuxt auth module.

When a user is authenticated axios seems to automatically add an authorization header (which is fine and often required for calls to my backend API). However, when doing calls to an external API the header might not be accepted and cause the call to fail.

Is there any way to specify for which URLs the auth header should be added or excluded?

Here are the configurations of the auth and axios module in my nuxt.config

  // Axios module configuration
  axios: {
    baseURL: '//localhost:5000',
  },

  // Auth module configuration
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'delete' },
          user: { url: '/auth/user', method: 'get', propertyName: 'user' },
        },
      },
    },
  }

Some more background: In my particular usecase I want to upload a file to an Amazon S3 bucket, so I create a presigned upload request and then want to upload the file directly into the bucket. This works perfectly fine as long as the user is not authenticated.

const { data } = await this.$axios.get('/store/upload-request', {
  params: { type: imageFile.type },
})
const { url, fields } = data
const formData = new FormData()
for (const [field, value] of Object.entries(fields)) {
  formData.append(field, value)
}
formData.append('file', imageFile)
await this.$axios.post(url, formData)

I tried to unset the Auth header via the request config:

const config = {
  transformRequest: (data, headers) => {
     delete headers.common.Authorization
  }
}
await this.$axios.post(url, formData, config)

This seems to prevent all formData related headers to be added. Also setting any header in the config via the headers property or in the transformRequest function does not work, which again causes the call to the external API to fail obviously (The request will be sent without any of these specific headers).

As I'm working with the nuxt axios module I'm not sure how to add an interceptor to the axios instance as described here or here.

Any help or hints on where to find help is very much appreciated :)

J.dev · Answer 1 · 2023-05-24T15:16:00.250

2

Try the following

Create a new axios instance in your plugins folder:

export default function ({ $axios }, inject) {
    // Create a custom axios instance
    const api = $axios.create({
        headers: {
            // headers you need
        }
    })
    // Inject to context as $api
    inject('api', api)
}

Declare this plugin in nuxt.config.js, then you can send your request :

this.$api.$put(...)

edited May 24 '23 at 15:16

answered Aug 11 '21 at 08:57

J.dev

844
3
12
22

Thanks for solutions. 1 worked like a charm but 2 couldn't make it work at all – DohaHelmy May 24 '23 at 08:05

kissu · Answer 2 · 2021-05-09T14:49:51.653

You can pass the below configuration to nuxt-auth. Beware, those plugins are not related to the root configuration, but related to the nuxt-auth package.

nuxt.config.js

auth: {
  redirect: {
    login: '/login',
    home: '/',
    logout: '/login',
    callback: false,
  },
  strategies: {
    ...
  },
  plugins: ['~/plugins/config-file-for-nuxt-auth.js'],
},

Then, create a plugin file that will serve as configuration for @nuxt/auth (you need to have @nuxt/axios installed of course. PS: in this file, exampleBaseUrlForAxios is used as an example to set the variable for the axios calls while using @nuxt/auth.

config-file-for-nuxt-auth.js

export default ({ $axios, $config: { exampleBaseUrlForAxios } }) => {
  $axios.defaults.baseURL = exampleBaseUrlForAxios
  // I guess that any usual axios configuration can be done here
}

This is the recommended way of doing things as explained in this article. Basically, you can pass runtime variables to your project when you're using this. Hence, here we are passing a EXAMPLE_BASE_URL_FOR_AXIOS variable (located in .env) and renaming it to a name that we wish to use in our project.

nuxt.config.js

export default {
  publicRuntimeConfig: {
    exampleBaseUrlForAxios: process.env.EXAMPLE_BASE_URL_FOR_AXIOS,
  }
}

Thank you for answering. Unfortunately I don't understand, why you are using the nuxt-axios plugin and what it does - the `baseUrlIam` is `undefined` here for me. But that might have to do with your `nuxt-auth.js` - I do not use a custom nuxt-auth plugin. What exactly does this do? What are the reasons for using this and how does this affect my auth config in the `nuxt.config.js`? — samuelstelzer, May 08 '21 at 12:41

Prevent nuxt auth to send authorization header to external url

2 Answers2