How/Where does nuxtjs set the authorization header

Question

I inherited a web project from another developer who's left the company. It is built with nuxtjs and laravel, neither of which I am strong with.

In the web project, after a user goes to a login screen, types in email and password, and presses save, I can see in my developer tools that the nuxtjs framework sends a {email: "user@email.com", password: "password"} to the laravel api at https://example.project.com/api/login. The laravel api then returns a 200 response with this payload { data: { message: "Login successful.", token: "50|Fs88RPU7HON1LnBskm35O9txG0OnXDiG3x4XWILJ" }}. Everything is great so far!

Immediately after the 200 response above, NuxtJS sends another request to https://example.project.com/api/auth/user in an attempt to get information about this user. Nginx gives a 401 response. My first suspicion for why this happens is because NuxtJS sent an Authorization: Bearer undefined as shown in this screenshot of my browser dev tools

I've seen other situations with Authorization: Bearer [object object].

I want to know how does NuxtJS decide what value to provide to the Authorization http header? This is my current nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Blah',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/api/login',
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/login'},
          user: { url: '/api/auth/user'}
        },
      }
    },
    localStorage: true
  },
  proxy: {
    '/api': {
      target: 'https://example.project.com/',
      pathRewrite: { '^/api': '' },
    },
  },


  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'https://example.project.com/',
    credentials: true,
    headers : {
      common: {
        'Accept' : 'application/json'
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

And also, this is the line of code in pages/login.vue that starts the login process:

await this.$auth.loginWith('local', { data: {email:"user@email.com",password:"password"} });

Answer 1

Simply add Authorization header as default header right after authorization request. Assuming that server sends access token in response the code might look like this:

const response = await this.$auth.loginWith('local', { 
  data: {
    email: "user@email.com",
    password:"password"
  } 
})
const { token } = response;
axios.defaults.headers.common = { Authorization: `Bearer ${token}` };

Answer 2

change your strategy as below to set property name of the token being returned in response.

strategies: {
  local: {
    token: {
      property: 'token'
    },
    endpoints: {
      login: { url: '/api/login'},
      user: { url: '/api/auth/user'}
    },
  }
},

It will include the authorization header in all your requests using $axios.

also you might need to set propery of the user which you are returning from backend also.

Answer 3

This is done by a library in the background. @nuxtjs/auth or @nuxtjs/auth-next will set the token depending on your config in nuxt.config.ts.

You can find the token in the local storage in auth._token.<strategy>. To use a Bearer token in the subsequent userinfo request you might need to set:

nuxt.config.ts

auth: {
  strategies: {
    local: {
      token: {
        type: 'Bearer',
      }
    }
  }