Nuxt Authentication API calls strategies

Question

I have some unfamiliar API calls in the current app I'm building. It needs a couple of parameters to setup the following api's. Currently based on subdomain in window it picks up the url parameter to create the first API call. After that I use Vuex store to store the relevant information for the organization data.

I'm currently trying to setup authorization and unfortunately due to it being inside nuxt.config.js I can't dynamically add data from the vuex store. Here is an example of the strategies I've set up. I'm currently using the local default strategies, but wan't to make the url requests dynamic:

nuxt.config.js

 /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  /*
   ** Axios configuration
   */
  axios: {
    baseURL: 'https://api.getconflux.com',
    headers: {
      common: {
        Accept: 'application/json, text/plain, */*'
      }
    }
  },
  /*
   ** Auth configuration
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: '/logout',
            method: 'post'
          },
          user: {
            url: '/supporters/me',
            headers: {
              'organization-id': getters.companyId,
              // Authorization Bearer needs to be automatically called from login
            },
            method: 'get',
            propertyName: 'voter'
          },
        }
      }
    },
    customStrategy: {
      user: '~/schemas/user'
    },
    redirect: {
      home: '/'
    }
  }

The current login I manually setup, with no url as I call that when my index page loads. This is the first api call to build out my state with the required data I need to call for my subsequent api calls after that.

For my auth api request to work, especially the fetchUser() call in the user strategy I need to get the companyId getter/state from my store. I have no idea how to do this here?

Does anyone have an idea of how I can best implement that?

Any help will be appreciated!

Thanks in advance!

Answer 1

You could disable the user endpoint in the nuxt.config.js file and then manually call the endpoint in Vuex to fetch the user details then pass it on to the setUser method of the auth NuxtJS module. So in your nuxt.config.js file, you should have this:

/*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  /*
   ** Axios configuration
   */
  axios: {
    baseURL: 'https://api.getconflux.com',
    headers: {
      common: {
        Accept: 'application/json, text/plain, */*'
      }
    }
  },
  /*
   ** Auth configuration
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: '/logout',
            method: 'post'
          },
          user: false
    },
    customStrategy: {
      user: '~/schemas/user'
    },
    redirect: {
      home: '/'
    }
  }

Then in your store, you have an action(or a mutation making the API request to get the user details). Then you call setUser as described here