Nuxt•8mo ago

Use external ApiS in Nuxt?

Not sure I'm 100% understanding how to handle external APIs in Nuxt. I need to store a secret key in the .env file and access it later, and make additional queries based on a search from the user. Currently I have a server/api/jobs.js file that holds the initial query, which works great for the initial render. But I'm trying to search for jobs at a different URL in the API call with a query param, set up as server/api/searchCityJobs.js right now. I was doing this in the component previously for testing purposes, but I obviously don't want to expose the private API key. Does anyone have any insight into this?

10 Replies

FoxForGate•8mo ago

From what I saw, the best way to do this would be to use nitroserver as a bridge between the frontend and this API.

MrBobDaisyOP•8mo ago

I'll have to take a look at that I'm a bit newer to external API integration in Nuxt.

FoxForGate•8mo ago

The problem is that it will be necessary to put the key in the request package, you can try to hide it but it wouldn't be 100% protected, I think using the backend as a bridge is the best way I personally trade the token openly, what guarantees the security of my system is the API itself, I think another way would be to create a key based on the time similar to Key authentication

MrBobDaisyOP•8mo ago

Forgot to ping this. I actually am using an proxy to send the request to the server, then submit the api request from the server.

FoxForGate•8mo ago

Did this solve your problem?

MrBobDaisyOP•8mo ago

Yes, I'll post a solution here to the question when I am back at my laptop

FoxForGate•8mo ago

I'm very grateful, if you need any more help I'm here

MrBobDaisyOP•8mo ago

@FoxForGate So this is my component's API call

const fetchJobs = async () => {

  if( searchedCity.value ) {
    const { data: city } = await $fetch('/api/jobs/search', {
      query: {
        city: searchedCity.value
      },
      onResponse({ response }) {
        jobsLoading.value = false
        jobData.value = response._data.data
      }
    })
  } else if( searchedTitle.value ) {
    const { data: city } = await $fetch('/api/jobs/search', {
      query: {
        title: searchedTitle.value
      },
      onResponse({ response }) {
        jobsLoading.value = false
        jobData.value = response._data.data
      }
    })
  } else {
    const { data } = await $fetch('/api/jobs', {

      onResponse({ response }) {
        jobsLoading.value = false
        jobData.value = response._data.data
      }
    })
  }
}

fetchJobs()

const fetchJobs = async () => {

  if( searchedCity.value ) {
    const { data: city } = await $fetch('/api/jobs/search', {
      query: {
        city: searchedCity.value
      },
      onResponse({ response }) {
        jobsLoading.value = false
        jobData.value = response._data.data
      }
    })
  } else if( searchedTitle.value ) {
    const { data: city } = await $fetch('/api/jobs/search', {
      query: {
        title: searchedTitle.value
      },
      onResponse({ response }) {
        jobsLoading.value = false
        jobData.value = response._data.data
      }
    })
  } else {
    const { data } = await $fetch('/api/jobs', {

      onResponse({ response }) {
        jobsLoading.value = false
        jobData.value = response._data.data
      }
    })
  }
}

fetchJobs()

And my server/api/jobs call to the API with the private Bearer token

export default defineEventHandler((event) => {
  const runtimeConfig = useRuntimeConfig()

  let url = `https://api.recruitcrm.io/v1/jobs`

  let jobData = null

 return $fetch(url, {
      method: "GET",
      headers: {
          'Authorization': `Bearer ${runtimeConfig.recruitToken}`,
      },
      onResponse({ response }) {
          jobData = response._data.data
          return jobData
      }
  })
})

export default defineEventHandler((event) => {
  const runtimeConfig = useRuntimeConfig()

  let url = `https://api.recruitcrm.io/v1/jobs`

  let jobData = null

 return $fetch(url, {
      method: "GET",
      headers: {
          'Authorization': `Bearer ${runtimeConfig.recruitToken}`,
      },
      onResponse({ response }) {
          jobData = response._data.data
          return jobData
      }
  })
})

I know a Malicious user might be able to send a request to the API using my server/api call but not concerned about it.

FoxForGate•8mo ago

I believe that this is really the correct way to do it, regarding protection you can still use some layers of security in the nuxt backend, the advantage is that your api itself will never be exposed

MrBobDaisyOP•8mo ago

Good to know that's the right way. I know the URL could also benefit from being in my .env file but the way this particular API works, they use the URL to update some stuff so I can't really store it in the .env . I guess technically I could store the "meat" of the URL in that file but that's not going to change much of anything. I think security wise it's probably fine. Since the URL/key isn't available client site, the likelihood of someone sending muddy data through is next to none.

Gaming

Programming

Use external ApiS in Nuxt?